From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/id/_redirects.txt | 26 + files/id/_wikihistory.json | 2171 +++ files/id/archive/add-ons/index.html | 11 + .../b2g_os/developing_firefox_os/index.html | 51 + .../developing_firefox_os/porting/index.html | 123 + files/id/archive/b2g_os/firefox_os_apps/index.html | 85 + .../b2g_os/firefox_os_apps/pelokalan/index.html | 92 + files/id/archive/b2g_os/index.html | 79 + .../installing_on_a_mobile_device/index.html | 100 + files/id/archive/b2g_os/introduction/index.html | 88 + .../id/archive/b2g_os/phone_guide/flame/index.html | 73 + .../flame/updating_your_flame/index.html | 411 + files/id/archive/b2g_os/phone_guide/index.html | 85 + files/id/archive/b2g_os/platform/index.html | 82 + .../quickstart/aplikasi_pertama_kamu/index.html | 210 + files/id/archive/b2g_os/quickstart/index.html | 49 + files/id/archive/b2g_os/simulator/index.html | 120 + .../b2g_os/using_the_app_manager/index.html | 233 + files/id/archive/css3/index.html | 972 + files/id/archive/index.html | 18 + files/id/archive/meta_docs/index.html | 11 + files/id/archive/mozilla/index.html | 8 + files/id/archive/mozilla/xul/index.html | 84 + .../index.html | 23 + .../archive/mozilla/xul/school_tutorial/index.html | 59 + .../xul/school_tutorial/perkenalan/index.html | 32 + .../the_essentials_of_an_extension/index.html | 344 + files/id/archive/mozilla/xulrunner/index.html | 84 + files/id/archive/web/index.html | 15 + .../standards-compliant_authoring_tools/index.html | 25 + files/id/developer_guide/index.html | 145 + .../virtual_arm_di_lingkungan_linux/index.html | 77 + files/id/games/index.html | 95 + .../publishing_games/game_promotion/index.html | 86 + files/id/games/publishing_games/index.html | 28 + files/id/games/techniques/index.html | 32 + files/id/glossary/404/index.html | 17 + files/id/glossary/ajax/index.html | 22 + files/id/glossary/algoritma/index.html | 8 + files/id/glossary/api/index.html | 24 + files/id/glossary/asynchronous/index.html | 14 + files/id/glossary/css/index.html | 48 + files/id/glossary/html/index.html | 44 + files/id/glossary/http/index.html | 22 + files/id/glossary/identifier/index.html | 16 + files/id/glossary/index.html | 27 + files/id/glossary/javascript/index.html | 45 + files/id/glossary/json/index.html | 24 + files/id/glossary/method/index.html | 29 + files/id/glossary/null/index.html | 27 + files/id/glossary/primitive/index.html | 32 + files/id/glossary/property/index.html | 11 + files/id/glossary/python/index.html | 19 + files/id/glossary/seo/index.html | 42 + files/id/glossary/statement/index.html | 21 + files/id/glossary/svg/index.html | 37 + files/id/glossary/url/index.html | 27 + files/id/glossary/variable/index.html | 21 + files/id/glossary/xml/index.html | 11 + files/id/learn/accessibility/index.html | 63 + .../bagaimana_cara_kerja_internet/index.html | 98 + .../berfikir_sebelum_membuat_kode/index.html | 180 + files/id/learn/common_questions/index.html | 135 + .../index.html | 118 + .../set_up_a_local_testing_server/index.html | 108 + files/id/learn/css/index.html | 67 + .../index.html | 117 + .../css_basics/index.html | 291 + .../how_the_web_works/index.html | 96 + .../html_basics/index.html | 233 + .../learn/getting_started_with_the_web/index.html | 76 + .../installing_basic_software/index.html | 76 + .../javascript_basics/index.html | 398 + .../mengelola_file/index.html | 123 + .../publishing_your_website/index.html | 111 + files/id/learn/how_to_contribute/index.html | 108 + files/id/learn/html/howto/index.html | 142 + files/id/learn/html/index.html | 58 + .../adding_vector_graphics_to_the_web/index.html | 362 + .../learn/html/multimedia_dan_embedding/index.html | 73 + .../responsive_images/index.html | 251 + .../document_and_website_structure/index.html | 293 + .../html_text_fundamentals/index.html | 1047 ++ files/id/learn/html/pengenalan_html/index.html | 64 + .../structuring_a_page_of_content/index.html | 116 + files/id/learn/html/tabel/index.html | 36 + files/id/learn/index.html | 97 + .../id/learn/javascript/building_blocks/index.html | 42 + .../javascript/client-side_web_apis/index.html | 50 + .../client-side_web_apis/introduction/index.html | 278 + files/id/learn/javascript/first_steps/index.html | 63 + .../first_steps/what_is_javascript/index.html | 433 + files/id/learn/javascript/index.html | 57 + .../javascript/objects/dasar-dasar/index.html | 261 + files/id/learn/javascript/objects/index.html | 54 + .../django/development_environment/index.html | 423 + files/id/learn/server-side/django/index.html | 67 + .../tutorial_local_library_website/index.html | 90 + files/id/learn/server-side/first_steps/index.html | 39 + files/id/learn/server-side/index.html | 59 + files/id/learn/web_mechanics/index.html | 29 + files/id/mdn/about/index.html | 135 + files/id/mdn/contribute/feedback/index.html | 56 + files/id/mdn/contribute/getting_started/index.html | 126 + .../howto/create_an_mdn_account/index.html | 44 + .../howto/do_a_technical_review/index.html | 49 + .../howto/do_an_editorial_review/index.html | 52 + files/id/mdn/contribute/howto/index.html | 16 + .../howto/set_the_summary_for_a_page/index.html | 46 + files/id/mdn/contribute/howto/tag/index.html | 373 + files/id/mdn/contribute/index.html | 23 + files/id/mdn/contribute/processes/index.html | 23 + files/id/mdn/contribute/tugas/index.html | 25 + files/id/mdn/guidelines/index.html | 16 + files/id/mdn/guidelines/layout/index.html | 7 + .../mdn/guidelines/writing_style_guide/index.html | 802 + files/id/mdn/index.html | 46 + files/id/mdn/komunitas/conversations/index.html | 56 + files/id/mdn/komunitas/index.html | 75 + files/id/mdn/user_guide/index.html | 13 + .../id/mdn/user_guide/menghapus_halaman/index.html | 17 + files/id/mozilla/add-ons/index.html | 16 + .../index.html | 167 + .../webextensions/apa_itu_webextensions/index.html | 34 + .../webextensions/api/browsersettings/index.html | 63 + .../mozilla/add-ons/webextensions/api/index.html | 50 + .../webextensions/api/notifikasi/index.html | 62 + .../api/windows/createtype/index.html | 65 + .../add-ons/webextensions/api/windows/index.html | 127 + .../browser_support_for_javascript_apis/index.html | 21 + .../webextensions/content_scripts/index.html | 554 + files/id/mozilla/add-ons/webextensions/index.html | 91 + .../your_first_webextension/index.html | 153 + files/id/mozilla/connect/index.html | 95 + .../id/mozilla/firefox/edisi_pengembang/index.html | 57 + files/id/mozilla/firefox/index.html | 75 + files/id/mozilla/firefox/privacy/index.html | 22 + .../errors/cookieblockedtracker/index.html | 33 + .../storage_access_policy/errors/index.html | 24 + .../privacy/storage_access_policy/index.html | 261 + files/id/mozilla/firefox/releases/index.html | 12 + files/id/mozilla/gecko/index.html | 69 + files/id/mozilla/index.html | 13 + files/id/mozilla/localization/index.html | 30 + .../localizing_with_verbatim/index.html | 158 + .../localization/quick_start_guide/index.html | 50 + .../quick_start_guide/qa_phase/index.html | 197 + .../localization/web_localizability/index.html | 33 + files/id/mozilla/mercurial/basics/index.html | 60 + files/id/mozilla/mercurial/index.html | 45 + files/id/mozilla/persona/index.html | 126 + files/id/mozilla/projects/index.html | 14 + files/id/mozilla/projects/nss/index.html | 180 + files/id/mozilla/projects/rhino/index.html | 25 + files/id/pengembangan_web/index.html | 78 + files/id/sandbox/index.html | 201 + files/id/tools/accessibility_inspector/index.html | 196 + files/id/tools/debugger/index.html | 49 + files/id/tools/index.html | 189 + files/id/tools/page_inspector/how_to/index.html | 13 + files/id/tools/page_inspector/index.html | 53 + files/id/tools/remote_debugging/index.html | 34 + files/id/tools/webide/index.html | 458 + files/id/tools/webide/troubleshooting/index.html | 117 + files/id/web/api/abstractworker/index.html | 125 + files/id/web/api/api_push/index.html | 165 + files/id/web/api/cachestorage/index.html | 198 + files/id/web/api/canvas_api/index.html | 172 + files/id/web/api/console/index.html | 278 + files/id/web/api/document/createelement/index.html | 225 + files/id/web/api/document/index.html | 576 + files/id/web/api/document/links/index.html | 101 + files/id/web/api/document/write/index.html | 77 + files/id/web/api/event/currenttarget/index.html | 127 + files/id/web/api/event/index.html | 149 + files/id/web/api/event/target/index.html | 90 + files/id/web/api/fetch_api/index.html | 88 + files/id/web/api/index.html | 12 + files/id/web/api/mobile_connection_api/index.html | 149 + files/id/web/api/navigator/index.html | 149 + files/id/web/api/navigator/mediadevices/index.html | 47 + .../id/web/api/navigator/serviceworker/index.html | 101 + files/id/web/api/service_worker_api/index.html | 283 + .../using_service_workers/index.html | 539 + files/id/web/api/serviceworker/index.html | 157 + files/id/web/api/serviceworkercontainer/index.html | 132 + .../web/api/serviceworkerregistration/index.html | 245 + .../pushmanager/index.html | 130 + files/id/web/api/speechsynthesis/index.html | 151 + .../api/speechsynthesis/onvoiceschanged/index.html | 74 + files/id/web/api/storage/index.html | 100 + files/id/web/api/webgl_api/index.html | 235 + files/id/web/api/webrtc_api/index.html | 185 + files/id/web/api/window/getselection/index.html | 100 + files/id/web/api/window/index.html | 479 + files/id/web/api/window/window/index.html | 63 + files/id/web/api/xmlhttprequest/index.html | 200 + .../xmlhttprequest/using_xmlhttprequest/index.html | 793 + .../id/web/css/@font-face/font-display/index.html | 101 + files/id/web/css/@font-face/index.html | 199 + files/id/web/css/_colon_active/index.html | 143 + files/id/web/css/background-color/index.html | 149 + files/id/web/css/css_box_model/index.html | 115 + .../introduction_to_the_css_box_model/index.html | 73 + files/id/web/css/css_selectors/index.html | 154 + .../index.html | 64 + files/id/web/css/flex-direction/index.html | 155 + files/id/web/css/index.html | 64 + files/id/web/css/mask-border-width/index.html | 104 + files/id/web/css/referensi/index.html | 185 + files/id/web/css/text-transform/index.html | 307 + files/id/web/css/type_selectors/index.html | 121 + files/id/web/events/cached/index.html | 74 + files/id/web/events/error/index.html | 71 + files/id/web/events/index.html | 2310 +++ files/id/web/guide/api/index.html | 26 + files/id/web/guide/api/webrtc/index.html | 34 + files/id/web/guide/css/getting_started/index.html | 32 + files/id/web/guide/css/media_queries/index.html | 630 + files/id/web/guide/grafis/index.html | 48 + files/id/web/guide/html/forms/index.html | 340 + files/id/web/guide/html/html5/index.html | 179 + files/id/web/guide/index.html | 55 + files/id/web/html/element/base/index.html | 154 + files/id/web/html/element/dialog/index.html | 165 + files/id/web/html/element/image/index.html | 16 + files/id/web/html/element/index.html | 106 + files/id/web/html/index.html | 97 + files/id/web/http/basics_of_http/index.html | 51 + files/id/web/http/gambaran/index.html | 173 + files/id/web/http/index.html | 81 + files/id/web/http/methods/get/index.html | 73 + files/id/web/http/methods/index.html | 76 + .../http/proxy_servers_and_tunneling/index.html | 100 + .../proxy_auto-configuration_(pac)_file/index.html | 727 + files/id/web/http/status/100/index.html | 46 + files/id/web/http/status/200/index.html | 50 + files/id/web/http/status/400/index.html | 39 + files/id/web/http/status/403/index.html | 56 + files/id/web/http/status/404/index.html | 63 + files/id/web/http/status/405/index.html | 44 + files/id/web/http/status/410/index.html | 54 + files/id/web/http/status/500/index.html | 38 + files/id/web/http/status/index.html | 141 + files/id/web/index.html | 153 + .../a_re-introduction_to_javascript/index.html | 862 + files/id/web/javascript/data_structures/index.html | 267 + files/id/web/javascript/index.html | 116 + .../inheritance_dan_prototype_chain/index.html | 304 + .../web/javascript/language_resources/index.html | 136 + .../id/web/javascript/memory_management/index.html | 187 + .../id/web/javascript/new_in_javascript/index.html | 74 + .../id/web/javascript/panduan/closures/index.html | 345 + files/id/web/javascript/panduan/index.html | 119 + .../panduan/loops_and_iteration/index.html | 330 + .../panduan/numbers_and_dates/index.html | 376 + .../web/javascript/panduan/pengenalan/index.html | 156 + files/id/web/javascript/panduan/tentang/index.html | 144 + .../values,_variables,_and_literals/index.html | 648 + .../panduan/working_with_objects/index.html | 492 + files/id/web/javascript/reference/about/index.html | 86 + .../reference/classes/constructor/index.html | 162 + .../reference/classes/extends/index.html | 112 + .../id/web/javascript/reference/classes/index.html | 383 + .../errors/called_on_incompatible_type/index.html | 69 + .../id/web/javascript/reference/errors/index.html | 12 + .../errors/invalid_array_length/index.html | 78 + .../missing_semicolon_before_statement/index.html | 78 + .../errors/negative_repetition_count/index.html | 45 + .../reference/errors/not_a_codepoint/index.html | 56 + .../reference/errors/not_defined/index.html | 66 + .../errors/property_access_denied/index.html | 47 + .../reference/errors/too_much_recursion/index.html | 70 + .../web/javascript/reference/functions/index.html | 596 + .../global_objects/array/concat/index.html | 169 + .../global_objects/array/filter/index.html | 244 + .../reference/global_objects/array/from/index.html | 248 + .../reference/global_objects/array/index.html | 484 + .../global_objects/array/isarray/index.html | 144 + .../reference/global_objects/array/join/index.html | 132 + .../global_objects/array/length/index.html | 145 + .../reference/global_objects/array/of/index.html | 129 + .../reference/global_objects/array/pop/index.html | 134 + .../global_objects/array/reverse/index.html | 127 + .../global_objects/array/shift/index.html | 129 + .../global_objects/array/slice/index.html | 152 + .../global_objects/array/splice/index.html | 146 + .../global_objects/array/unshift/index.html | 135 + .../global_objects/array/values/index.html | 120 + .../global_objects/date/getfullyear/index.html | 88 + .../reference/global_objects/date/index.html | 261 + .../reference/global_objects/date/now/index.html | 124 + .../global_objects/date/tojson/index.html | 119 + .../global_objects/date/totimestring/index.html | 125 + .../reference/global_objects/error/index.html | 231 + .../reference/global_objects/error/name/index.html | 119 + .../global_objects/function/displayname/index.html | 123 + .../reference/global_objects/function/index.html | 241 + .../global_objects/function/length/index.html | 148 + .../global_objects/function/name/index.html | 191 + .../global_objects/function/prototype/index.html | 143 + .../javascript/reference/global_objects/index.html | 189 + .../reference/global_objects/isnan/index.html | 186 + .../reference/global_objects/json/index.html | 243 + .../reference/global_objects/json/parse/index.html | 171 + .../reference/global_objects/map/clear/index.html | 109 + .../reference/global_objects/map/delete/index.html | 114 + .../reference/global_objects/map/index.html | 443 + .../reference/global_objects/math/abs/index.html | 145 + .../reference/global_objects/math/ceil/index.html | 174 + .../reference/global_objects/math/e/index.html | 81 + .../reference/global_objects/math/floor/index.html | 210 + .../reference/global_objects/math/index.html | 213 + .../reference/global_objects/math/ln10/index.html | 81 + .../reference/global_objects/math/max/index.html | 144 + .../reference/global_objects/math/min/index.html | 150 + .../reference/global_objects/math/pow/index.html | 53 + .../object/getprototypeof/index.html | 133 + .../reference/global_objects/object/index.html | 221 + .../global_objects/object/keys/index.html | 197 + .../object/preventextensions/index.html | 185 + .../global_objects/promise/catch/index.html | 127 + .../reference/global_objects/promise/index.html | 317 + .../global_objects/promise/reject/index.html | 81 + .../global_objects/promise/resolve/index.html | 140 + .../global_objects/promise/then/index.html | 132 + .../reference/global_objects/regexp/index.html | 231 + .../global_objects/string/concat/index.html | 134 + .../global_objects/string/fromcharcode/index.html | 143 + .../global_objects/string/fromcodepoint/index.html | 149 + .../reference/global_objects/string/index.html | 371 + .../global_objects/string/indexof/index.html | 190 + .../global_objects/string/length/index.html | 126 + .../global_objects/string/link/index.html | 130 + .../global_objects/string/purwarupa/index.html | 221 + .../global_objects/string/split/index.html | 241 + .../global_objects/string/tolowercase/index.html | 121 + .../global_objects/string/tostring/index.html | 118 + .../global_objects/string/touppercase/index.html | 115 + .../reference/global_objects/typedarray/index.html | 344 + .../global_objects/typedarray/join/index.html | 114 + files/id/web/javascript/reference/index.html | 48 + .../reference/lexical_grammar/index.html | 670 + .../operators/conditional_operator/index.html | 167 + .../reference/operators/fungsi/index.html | 153 + .../web/javascript/reference/operators/index.html | 269 + .../reference/operators/yield/index.html | 109 + .../reference/statements/class/index.html | 171 + .../reference/statements/do...while/index.html | 101 + .../reference/statements/empty/index.html | 147 + .../reference/statements/export/index.html | 171 + .../reference/statements/for...in/index.html | 201 + .../reference/statements/fungsi/index.html | 232 + .../web/javascript/reference/statements/index.html | 139 + .../sekilas_teknologi_javascript/index.html | 87 + files/id/web/mathml/element/index.html | 234 + files/id/web/mathml/index.html | 76 + files/id/web/reference/api/index.html | 65 + files/id/web/reference/index.html | 49 + files/id/web/security/index.html | 12 + files/id/web/web_components/index.html | 230 + files/id/zones/index.html | 70 + files/it/_redirects.txt | 457 + files/it/_wikihistory.json | 6026 ++++++ .../index.html | 34 + .../index.html | 42 + files/it/api_sociale/index.html | 63 + files/it/archive/add-ons/index.html | 8 + .../index.html | 52 + .../add-ons/sviluppare_un_estensione/index.html | 242 + files/it/archive/b2g_os/apps/index.html | 48 + .../writing_a_web_app_for_firefox_os/index.html | 34 + .../it/archive/b2g_os/automated_testing/index.html | 93 + files/it/archive/b2g_os/building/index.html | 241 + .../compatible_devices/index.html | 227 + .../building_and_installing_firefox_os/index.html | 120 + .../index.html | 195 + files/it/archive/b2g_os/debugging/index.html | 84 + .../b2g_os/debugging/installazione_adb/index.html | 63 + .../filing_bugs_against_firefox_os/index.html | 197 + .../b2g_os/developing_firefox_os/index.html | 45 + .../localizing_firefox_os/index.html | 188 + .../firefox_os_apps/building_blocks/index.html | 195 + files/it/archive/b2g_os/firefox_os_apps/index.html | 85 + .../b2g_os/firefox_os_usage_tips/index.html | 27 + .../build_system_primer/index.html | 127 + .../customizing_build-time_apps/index.html | 86 + .../diversi_modi_per_eseguire_gaia/index.html | 120 + .../gaia_tools_reference/index.html | 128 + .../guida_rapida_allo_sviluppo_di_gaia/index.html | 52 + .../make_options_reference/index.html | 347 + .../making_gaia_code_changes/index.html | 73 + .../running_the_gaia_codebase/index.html | 68 + .../submitting_a_gaia_patch/index.html | 117 + .../testing_gaia_code_changes/index.html | 119 + .../understanding_the_gaia_codebase/index.html | 153 + files/it/archive/b2g_os/index.html | 136 + .../installare_su_un_dispositivo_mobile/index.html | 136 + files/it/archive/b2g_os/introduction/index.html | 67 + .../b2g_os/phone_guide/fairphone/index.html | 184 + .../it/archive/b2g_os/phone_guide/flame/index.html | 323 + .../b2g_os/phone_guide/geeksphone/index.html | 156 + files/it/archive/b2g_os/phone_guide/index.html | 24 + .../specifiche_telefoni_dispositivi/index.html | 470 + .../archive/b2g_os/phone_guide/zte_open/index.html | 179 + .../b2g_os/phone_guide/zte_open_c/index.html | 263 + .../b2g_os/platform/apps_architecture/index.html | 38 + .../b2g_os/platform/architecture/index.html | 761 + .../platform/feature_support_chart/index.html | 158 + .../b2g_os/platform/gaia/gaia_apps/index.html | 90 + .../b2g_os/platform/gaia/hacking/index.html | 132 + files/it/archive/b2g_os/platform/gaia/index.html | 62 + files/it/archive/b2g_os/platform/gonk/index.html | 109 + files/it/archive/b2g_os/platform/index.html | 82 + .../b2g_os/platform/settings_list/index.html | 719 + .../index.html | 132 + .../prerequisiti_firefox_os_build/index.html | 455 + .../archive/b2g_os/quickstart/app_tools/index.html | 16 + files/it/archive/b2g_os/quickstart/index.html | 48 + .../quickstart/intro_app_web_aperte/index.html | 53 + .../quickstart/intro_to_firefox_os/index.html | 16 + .../b2g_os/quickstart/la_tua_prima_app/index.html | 262 + .../quickstart/per_sviluppatori_web/index.html | 52 + files/it/archive/b2g_os/security/index.html | 63 + .../b2g_os/security/security_model/index.html | 386 + files/it/archive/b2g_os/simulator/index.html | 244 + .../b2g_os/sviluppo_applicazioni/index.html | 14 + .../b2g_os/tvs_connected_devices/index.html | 175 + .../archive/b2g_os/usare_l_app_manager/index.html | 247 + .../ux/building_blocks/action_menu/index.html | 46 + .../b2g_os/ux/building_blocks/bottoni/index.html | 231 + .../b2g_os/ux/building_blocks/conferme/index.html | 87 + .../archive/b2g_os/ux/building_blocks/index.html | 528 + .../b2g_os/ux/design_asset_library/index.html | 31 + .../it/archive/b2g_os/web_applications/index.html | 61 + files/it/archive/index.html | 21 + files/it/archive/mdn/index.html | 20 + files/it/archive/mozilla/index.html | 10 + .../persona/.well-known-browserid/index.html | 44 + .../compatibilit\303\240_con_i_browser/index.html" | 86 + files/it/archive/mozilla/persona/index.html | 175 + .../persona/internationalization/index.html | 49 + .../persona/libraries_and_plugins/index.html | 195 + .../it/archive/mozilla/persona/marchio/index.html | 13 + .../archive/mozilla/persona/quick_setup/index.html | 273 + .../persona/remote_verification_api/index.html | 171 + .../persona/security_considerations/index.html | 55 + .../persona/the_implementor_s_guide/index.html | 57 + .../the_implementor_s_guide/testing/index.html | 8 + .../persona/the_navigator.id_api/index.html | 148 + .../archive/mozilla/persona/why_persona/index.html | 59 + files/it/archive/mozilla/xbl/index.html | 27 + files/it/archive/mozilla/xul/index.html | 63 + files/it/archive/mozilla/xul/tutorial/index.html | 170 + .../xulrunner/a_cosa_serve_xulrunner/index.html | 63 + .../applicazioni_basate_su_xulrunner/index.html | 45 + .../getting_started_with_xulrunner/index.html | 271 + files/it/archive/mozilla/xulrunner/index.html | 11 + .../index.html | 82 + .../mozilla/xulrunner/xulrunner_faq/index.html | 24 + files/it/archive/rss/index.html | 35 + files/it/archive/rss/iniziare/index.html | 6 + files/it/archive/standard_web/index.html | 75 + .../index.html | 104 + .../rdf_in_fifty_words_or_less/index.html | 76 + files/it/archive/web/index.html | 12 + .../archive/web/server-side_javascript/index.html | 14 + .../index.html | 17 + files/it/circa_il_document_object_model/index.html | 17 + .../cascata_ed_ereditariet\303\240/index.html" | 86 + .../conoscere_i_css/che_cosa_sono_i_css/index.html | 113 + .../come_funzionano_i_css/index.html | 117 + files/it/conoscere_i_css/css_leggibili/index.html | 156 + files/it/conoscere_i_css/i_selettori/index.html | 150 + files/it/conoscere_i_css/index.html | 42 + .../perch\303\251_usare_i_css/index.html" | 106 + .../index.html | 1193 ++ .../index.html | 588 + files/it/creare_patch/index.html | 37 + files/it/creare_plugin_mozsearch/index.html | 190 + .../index.html | 171 + files/it/creare_un_microsommario/index.html | 209 + files/it/dare_una_mano_al_puntatore/index.html | 40 + files/it/dhtml/index.html | 56 + files/it/dom/index.html | 83 + files/it/dom_inspector/index.html | 24 + .../domande_frequenti_sulle_estensioni/index.html | 67 + files/it/e4x/index.html | 24 + "files/it/estensioni/comunit\303\240/index.html" | 22 + files/it/estensioni/index.html | 67 + 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/games/index.html | 93 + files/it/games/publishing_games/index.html | 27 + files/it/gecko/index.html | 71 + files/it/gli_user_agent_di_gecko/index.html | 40 + files/it/glossary/ajax/index.html | 29 + files/it/glossary/array/index.html | 28 + files/it/glossary/block/css/index.html | 16 + files/it/glossary/block/index.html | 13 + files/it/glossary/control_flow/index.html | 50 + files/it/glossary/css/index.html | 49 + files/it/glossary/doctype/index.html | 24 + files/it/glossary/first-class_function/index.html | 20 + files/it/glossary/head/index.html | 20 + files/it/glossary/header_di_risposta/index.html | 38 + files/it/glossary/hoisting/index.html | 74 + files/it/glossary/html/index.html | 50 + files/it/glossary/html5/index.html | 18 + files/it/glossary/http/index.html | 26 + files/it/glossary/index.html | 45 + files/it/glossary/javascript/index.html | 41 + files/it/glossary/node/dom/index.html | 14 + files/it/glossary/node/index.html | 15 + files/it/glossary/nullish/index.html | 6 + files/it/glossary/primitive/index.html | 32 + files/it/glossary/protocollo/index.html | 27 + files/it/glossary/reflow/index.html | 12 + files/it/glossary/rest/index.html | 33 + files/it/glossary/serialization/index.html | 22 + files/it/glossary/undefined/index.html | 12 + files/it/glossary/world_wide_web/index.html | 42 + files/it/il_modulo_xml_extras/index.html | 116 + files/it/impacchettare_l'estensione/index.html | 29 + files/it/incorporare_mozilla/index.html | 7 + .../indentazione_corretta_delle_liste/index.html | 106 + .../index.html | 33 + .../it/introduzione_a_svg_dentro_xhtml/index.html | 50 + files/it/le_colonne_nei_css3/index.html | 67 + files/it/le_preferenze_utente_e_xforms/index.html | 26 + .../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 + files/it/learn/common_questions/index.html | 139 + .../thinking_before_coding/index.html | 180 + files/it/learn/css/building_blocks/index.html | 89 + .../learn/css/building_blocks/selettori/index.html | 231 + .../css/building_blocks/styling_tables/index.html | 294 + files/it/learn/css/css_layout/flexbox/index.html | 344 + files/it/learn/css/css_layout/index.html | 78 + .../learn/css/css_layout/introduction/index.html | 711 + .../it/learn/css/css_layout/normal_flow/index.html | 108 + files/it/learn/css/index.html | 65 + .../styling_text/definire_stili_link/index.html | 438 + files/it/learn/css/styling_text/index.html | 57 + .../index.html" | 117 + .../come_funziona_il_web/index.html | 99 + .../css_basics/index.html | 267 + .../gestire_i_file/index.html | 95 + .../html_basics/index.html | 217 + .../learn/getting_started_with_the_web/index.html | 59 + .../installing_basic_software/index.html | 54 + .../javascript_basics/index.html | 402 + .../pubbicare_sito/index.html | 128 + .../index.html | 825 + .../it/learn/html/forms/form_validation/index.html | 846 + files/it/learn/html/forms/index.html | 85 + .../author_fast-loading_html_pages/index.html | 185 + files/it/learn/html/howto/index.html | 155 + .../learn/html/howto/uso_attributi_data/index.html | 82 + files/it/learn/html/index.html | 47 + .../fondamenti_di_testo_html/index.html | 953 + .../getting_started/index.html | 649 + .../i_metadata_nella_head_in_html/index.html | 265 + .../it/learn/html/introduction_to_html/index.html | 67 + .../contenuti_video_e_audio/index.html | 270 + .../images_in_html/index.html | 352 + .../immagini_reattive/index.html | 241 + .../learn/html/multimedia_and_embedding/index.html | 71 + .../scrivi_una_semplice_pagina_in_html/index.html | 276 + files/it/learn/html/tables/index.html | 45 + files/it/learn/index.html | 83 + .../it/learn/javascript/building_blocks/index.html | 59 + files/it/learn/javascript/comefare/index.html | 291 + .../cosa_\303\250_andato_storto/index.html" | 253 + files/it/learn/javascript/first_steps/index.html | 68 + .../javascript/first_steps/variabili/index.html | 337 + files/it/learn/javascript/index.html | 63 + .../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 + .../index.html" | 69 + .../learn/server-side/django/admin_site/index.html | 361 + .../server-side/django/authentication/index.html | 700 + .../django/development_environment/index.html | 415 + files/it/learn/server-side/django/forms/index.html | 678 + .../server-side/django/generic_views/index.html | 626 + .../learn/server-side/django/home_page/index.html | 419 + files/it/learn/server-side/django/index.html | 70 + .../server-side/django/introduzione/index.html | 281 + .../it/learn/server-side/django/models/index.html | 466 + .../learn/server-side/django/sessions/index.html | 195 + .../server-side/django/skeleton_website/index.html | 406 + .../tutorial_local_library_website/index.html | 79 + .../it/learn/server-side/express_nodejs/index.html | 75 + files/it/learn/server-side/index.html | 52 + files/it/link_prefetching_faq/index.html | 126 + files/it/localization/index.html | 10 + files/it/mdn/about/index.html | 116 + files/it/mdn/community/index.html | 49 + .../creating_and_editing_pages/index.html | 110 + files/it/mdn/contribute/feedback/index.html | 49 + files/it/mdn/contribute/getting_started/index.html | 95 + .../convert_code_samples_to_be_live/index.html | 33 + .../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 + .../index.html | 57 + files/it/mdn/contribute/howto/index.html | 16 + files/it/mdn/contribute/howto/tag/index.html | 380 + files/it/mdn/contribute/index.html | 71 + .../contribute/localize/guidaitaliano/index.html | 82 + files/it/mdn/contribute/localize/index.html | 28 + .../localize/progetti_localizzazione/index.html | 283 + .../localize/translating_pages/index.html | 55 + files/it/mdn/contribute/persona_sign-in/index.html | 26 + files/it/mdn/editor/index.html | 9 + files/it/mdn/guidelines/index.html | 13 + files/it/mdn/guidelines/macros/index.html | 42 + .../it/mdn/guidelines/migliore_pratica/index.html | 34 + files/it/mdn/index.html | 29 + files/it/mdn/structures/index.html | 16 + .../tabelle_compatibilit\303\240/index.html" | 496 + files/it/mdn_at_ten/index.html | 41 + files/it/midas/index.html | 330 + files/it/midas/security_preferences/index.html | 73 + .../index.html | 1268 ++ files/it/mozilla/add-ons/index.html | 93 + files/it/mozilla/add-ons/kaspersky/index.html | 82 + .../firefox_addons_developer_guide/index.html | 29 + .../mozilla/add-ons/overlay_extensions/index.html | 71 + .../index.html | 71 + .../overlay_extensions/xul_school/index.html | 71 + .../index.html | 104 + files/it/mozilla/add-ons/sdk/builder/index.html | 13 + files/it/mozilla/add-ons/sdk/guide/index.html | 114 + files/it/mozilla/add-ons/sdk/index.html | 84 + files/it/mozilla/add-ons/sdk/tutorials/index.html | 145 + .../add-ons/sdk/tutorials/installazione/index.html | 75 + .../anatomy_of_a_webextension/index.html | 146 + .../mozilla/add-ons/webextensions/api/index.html | 53 + .../api/runtime/connectnative/index.html | 122 + .../add-ons/webextensions/api/runtime/index.html | 168 + .../add-ons/webextensions/api/search/index.html | 10 + .../cosa_sono_le_webextensions/index.html | 59 + files/it/mozilla/add-ons/webextensions/index.html | 88 + .../la_tua_prima_webextension/index.html | 153 + .../webextensions/script_contenuto/index.html | 494 + .../webextensions/user_interface/index.html | 89 + files/it/mozilla/bugzilla/index.html | 58 + files/it/mozilla/bugzilla/testopia/index.html | 165 + files/it/mozilla/connettere/index.html | 98 + files/it/mozilla/developer_guide/index.html | 145 + .../mozilla/firefox/developer_edition/index.html | 60 + .../developer_edition/ripristinare/index.html | 27 + .../funzionalit\303\240_sperimentali/index.html" | 1506 ++ files/it/mozilla/firefox/index.html | 52 + .../firefox/multiprocess_firefox/index.html | 73 + files/it/mozilla/firefox/releases/40/index.html | 117 + files/it/mozilla/firefox/releases/42/index.html | 189 + files/it/mozilla/firefox/releases/59/index.html | 203 + files/it/mozilla/firefox/releases/64/index.html | 184 + files/it/mozilla/firefox/releases/66/index.html | 156 + files/it/mozilla/firefox/releases/index.html | 10 + files/it/mozilla/firefox_for_android/index.html | 66 + files/it/mozilla/index.html | 13 + files/it/mozilla/localizzazione/index.html | 23 + .../criteri_revisione_marketplace/index.html | 79 + files/it/mozilla/marketplace/index.html | 129 + .../introduction_monetization/index.html | 31 + .../profiting_from_your_app/index.html | 53 + files/it/mozilla/marketplace/options/index.html | 21 + .../marketplace/options/packaged_apps/index.html | 55 + .../choosing_your_business_model/index.html | 121 + .../marketplace/prepare/introduction/index.html | 35 + files/it/mozilla/marketplace/publishing/index.html | 9 + .../opzioni_pubblicazione_app/index.html | 152 + .../marketplace/publishing/submit/index.html | 10 + files/it/mozilla/mobile/index.html | 28 + .../it/mozilla/mobile/viewport_meta_tag/index.html | 94 + .../performance/about_colon_memory/index.html | 188 + files/it/mozilla/performance/index.html | 143 + files/it/mozilla/preferences/index.html | 48 + .../index.html | 110 + files/it/mozilla/projects/index.html | 14 + .../projects/nss/esempi_codice_nss/index.html | 28 + files/it/mozilla/projects/nss/index.html | 198 + .../mozilla/qa/bug_writing_lineeguida/index.html | 253 + files/it/mozilla/qa/index.html | 251 + files/it/mozilla/tech/index.html | 14 + files/it/nspr/index.html | 16 + .../index.html | 26 + files/it/plug-in/index.html | 63 + files/it/python/index.html | 105 + files/it/rdf/index.html | 53 + files/it/rhino/index.html | 17 + files/it/rhino/scarica_rhino/index.html | 108 + files/it/spidermonkey/index.html | 50 + files/it/stringhe_user_agent_di_gecko/index.html | 52 + .../index.html | 37 + files/it/svg/index.html | 102 + files/it/sviluppare_mozilla/index.html | 75 + files/it/sviluppo_web/index.html | 51 + files/it/temi/background/index.html | 100 + files/it/temi/index.html | 8 + files/it/toolkit_api/index.html | 32 + files/it/tools/add-ons/index.html | 17 + .../debugger/how_to/disable_breakpoints/index.html | 20 + files/it/tools/debugger/how_to/index.html | 11 + .../debugger/how_to/open_the_debugger/index.html | 28 + .../debugger/how_to/set_a_breakpoint/index.html | 31 + .../how_to/set_a_conditional_breakpoint/index.html | 22 + .../debugger/how_to/step_through_code/index.html | 31 + files/it/tools/debugger/index.html | 69 + files/it/tools/index.html | 214 + files/it/tools/page_inspector/index.html | 48 + files/it/tools/prestazioni/index.html | 91 + files/it/tools/remote_debugging/index.html | 47 + .../it/tools/visualizzazione_flessibile/index.html | 79 + files/it/tools/web_console/helpers/index.html | 79 + files/it/tools/web_console/index.html | 37 + files/it/tools/webide/index.html | 333 + files/it/tools/webide/monitor/index.html | 160 + files/it/tools/webide/troubleshooting/index.html | 106 + files/it/tutorial_sulle_canvas/index.html | 55 + files/it/venkman/index.html | 42 + .../index.html | 32 + files/it/web/accessibility/index.html | 56 + files/it/web/accessibility/sviluppo_web/index.html | 66 + .../api/canvasrenderingcontext2d/canvas/index.html | 101 + .../canvasrenderingcontext2d/fillstyle/index.html | 209 + .../it/web/api/canvasrenderingcontext2d/index.html | 448 + .../ispointinpath/index.html | 208 + files/it/web/api/closeevent/index.html | 197 + files/it/web/api/console/index.html | 294 + files/it/web/api/console/log/index.html | 88 + files/it/web/api/console/table/index.html | 143 + files/it/web/api/crypto/index.html | 68 + files/it/web/api/crypto/subtle/index.html | 52 + files/it/web/api/datatransfer/getdata/index.html | 161 + files/it/web/api/datatransfer/index.html | 183 + files/it/web/api/document/anchors/index.html | 31 + files/it/web/api/document/applets/index.html | 25 + files/it/web/api/document/body/index.html | 88 + files/it/web/api/document/characterset/index.html | 32 + files/it/web/api/document/close/index.html | 27 + files/it/web/api/document/createelement/index.html | 139 + files/it/web/api/document/createrange/index.html | 30 + files/it/web/api/document/defaultview/index.html | 27 + files/it/web/api/document/doctype/index.html | 27 + .../it/web/api/document/documentelement/index.html | 68 + files/it/web/api/document/firstchild/index.html | 40 + files/it/web/api/document/forms/index.html | 128 + .../it/web/api/document/getelementbyid/index.html | 149 + .../api/document/getelementsbyclassname/index.html | 82 + .../web/api/document/getelementsbyname/index.html | 97 + .../api/document/getelementsbytagname/index.html | 116 + files/it/web/api/document/head/index.html | 84 + files/it/web/api/document/height/index.html | 35 + files/it/web/api/document/images/index.html | 52 + files/it/web/api/document/importnode/index.html | 45 + files/it/web/api/document/index.html | 308 + files/it/web/api/document/lastmodified/index.html | 31 + files/it/web/api/document/links/index.html | 100 + files/it/web/api/document/namespaceuri/index.html | 29 + files/it/web/api/document/open/index.html | 46 + files/it/web/api/document/queryselector/index.html | 121 + .../web/api/document/queryselectorall/index.html | 180 + files/it/web/api/document/referrer/index.html | 23 + files/it/web/api/document/stylesheets/index.html | 43 + files/it/web/api/document/title/index.html | 32 + files/it/web/api/document/url/index.html | 29 + files/it/web/api/document/width/index.html | 32 + files/it/web/api/document/write/index.html | 74 + files/it/web/api/document/writeln/index.html | 34 + files/it/web/api/document_object_model/index.html | 435 + .../document_object_model/introduzione/index.html | 257 + .../index.html | 46 + .../getinstalled/index.html | 49 + .../it/web/api/domapplicationsregistry/index.html | 89 + files/it/web/api/domstring/index.html | 56 + files/it/web/api/domtokenlist/index.html | 115 + files/it/web/api/domtokenlist/item/index.html | 67 + .../it/web/api/element/addeventlistener/index.html | 694 + files/it/web/api/element/attributes/index.html | 120 + files/it/web/api/element/childnodes/index.html | 99 + files/it/web/api/element/classlist/index.html | 288 + files/it/web/api/element/classname/index.html | 84 + files/it/web/api/element/clientheight/index.html | 36 + files/it/web/api/element/closest/index.html | 147 + files/it/web/api/element/firstchild/index.html | 90 + files/it/web/api/element/getattribute/index.html | 48 + .../api/element/getelementsbytagname/index.html | 80 + files/it/web/api/element/hasattribute/index.html | 75 + files/it/web/api/element/hasattributes/index.html | 28 + files/it/web/api/element/index.html | 475 + files/it/web/api/element/innerhtml/index.html | 213 + .../web/api/element/insertadjacenthtml/index.html | 102 + 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/queryselector/index.html | 131 + .../it/web/api/element/queryselectorall/index.html | 182 + .../it/web/api/element/removeattribute/index.html | 57 + .../web/api/element/requestfullscreen/index.html | 110 + files/it/web/api/element/scrollheight/index.html | 170 + files/it/web/api/element/scrolltop/index.html | 83 + files/it/web/api/element/setattribute/index.html | 83 + files/it/web/api/element/tagname/index.html | 72 + files/it/web/api/element/textcontent/index.html | 138 + .../it/web/api/element/toggleattribute/index.html | 104 + files/it/web/api/event/altkey/index.html | 46 + files/it/web/api/event/bubbles/index.html | 31 + files/it/web/api/event/button/index.html | 57 + files/it/web/api/event/cancelable/index.html | 23 + files/it/web/api/event/charcode/index.html | 49 + files/it/web/api/event/ctrlkey/index.html | 44 + files/it/web/api/event/currenttarget/index.html | 99 + files/it/web/api/event/eventphase/index.html | 19 + files/it/web/api/event/index.html | 240 + files/it/web/api/event/ischar/index.html | 30 + files/it/web/api/event/keycode/index.html | 48 + 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 | 30 + files/it/web/api/event/pagex/index.html | 98 + files/it/web/api/event/pagey/index.html | 98 + files/it/web/api/event/preventdefault/index.html | 176 + files/it/web/api/event/shiftkey/index.html | 45 + files/it/web/api/event/stoppropagation/index.html | 60 + files/it/web/api/event/timestamp/index.html | 45 + files/it/web/api/event/type/index.html | 50 + files/it/web/api/event/view/index.html | 22 + files/it/web/api/event/which/index.html | 60 + files/it/web/api/fetch_api/index.html | 170 + files/it/web/api/file/index.html | 101 + .../using_files_from_web_applications/index.html | 506 + files/it/web/api/geolocation/index.html | 133 + .../api/geolocation/using_geolocation/index.html | 321 + .../web/api/geolocation/watchposition/index.html | 166 + files/it/web/api/geolocationposition/index.html | 126 + files/it/web/api/globaleventhandlers/index.html | 714 + .../api/globaleventhandlers/onresize/index.html | 77 + files/it/web/api/htmlcanvaselement/index.html | 245 + .../it/web/api/htmlcanvaselement/toblob/index.html | 262 + files/it/web/api/htmlcollection/index.html | 101 + files/it/web/api/htmlcollection/item/index.html | 50 + files/it/web/api/htmlelement/index.html | 481 + .../it/web/api/htmlelement/offsetheight/index.html | 123 + .../api/htmlformelement/acceptcharset/index.html | 22 + files/it/web/api/htmlformelement/action/index.html | 30 + .../it/web/api/htmlformelement/elements/index.html | 34 + .../it/web/api/htmlformelement/enctype/index.html | 28 + files/it/web/api/htmlformelement/index.html | 125 + files/it/web/api/htmlformelement/length/index.html | 26 + files/it/web/api/htmlformelement/method/index.html | 28 + files/it/web/api/htmlformelement/name/index.html | 35 + files/it/web/api/htmlformelement/reset/index.html | 28 + files/it/web/api/htmlformelement/submit/index.html | 30 + files/it/web/api/htmlformelement/target/index.html | 24 + files/it/web/api/htmliframeelement/index.html | 455 + files/it/web/api/htmliframeelement/mute/index.html | 93 + files/it/web/api/htmlunknownelement/index.html | 58 + files/it/web/api/index.html | 17 + files/it/web/api/indexeddb_api/index.html | 243 + files/it/web/api/mutationobserver/index.html | 102 + .../it/web/api/navigator/cookieenabled/index.html | 83 + files/it/web/api/navigator/credentials/index.html | 57 + files/it/web/api/navigator/index.html | 119 + .../web/api/navigatorconcurrenthardware/index.html | 56 + files/it/web/api/node/appendchild/index.html | 99 + files/it/web/api/node/index.html | 368 + files/it/web/api/node/lastchild/index.html | 59 + files/it/web/api/node/nextsibling/index.html | 101 + files/it/web/api/node/previoussibling/index.html | 81 + files/it/web/api/nodelist/foreach/index.html | 125 + files/it/web/api/nodelist/index.html | 124 + files/it/web/api/notifiche/dir/index.html | 72 + files/it/web/api/notifiche/index.html | 495 + files/it/web/api/parentnode/children/index.html | 95 + .../api/parentnode/firstelementchild/index.html | 99 + files/it/web/api/parentnode/index.html | 90 + .../web/api/parentnode/lastelementchild/index.html | 98 + files/it/web/api/performance/index.html | 135 + files/it/web/api/performance/now/index.html | 104 + files/it/web/api/range/clonecontents/index.html | 27 + files/it/web/api/range/clonerange/index.html | 28 + files/it/web/api/range/collapse/index.html | 36 + files/it/web/api/range/collapsed/index.html | 33 + .../api/range/commonancestorcontainer/index.html | 31 + .../web/api/range/compareboundarypoints/index.html | 54 + files/it/web/api/range/comparepoint/index.html | 37 + .../api/range/createcontextualfragment/index.html | 37 + files/it/web/api/range/deletecontents/index.html | 25 + files/it/web/api/range/detach/index.html | 28 + files/it/web/api/range/endcontainer/index.html | 29 + files/it/web/api/range/endoffset/index.html | 29 + files/it/web/api/range/extractcontents/index.html | 27 + files/it/web/api/range/index.html | 150 + files/it/web/api/range/insertnode/index.html | 38 + files/it/web/api/range/ispointinrange/index.html | 31 + files/it/web/api/range/selectnode/index.html | 35 + .../it/web/api/range/selectnodecontents/index.html | 37 + files/it/web/api/range/setend/index.html | 38 + files/it/web/api/range/setendafter/index.html | 35 + files/it/web/api/range/setendbefore/index.html | 35 + files/it/web/api/range/setstart/index.html | 38 + files/it/web/api/range/setstartafter/index.html | 35 + files/it/web/api/range/setstartbefore/index.html | 35 + files/it/web/api/range/startcontainer/index.html | 29 + files/it/web/api/range/startoffset/index.html | 29 + files/it/web/api/range/surroundcontents/index.html | 36 + files/it/web/api/range/tostring/index.html | 28 + files/it/web/api/selection/addrange/index.html | 39 + files/it/web/api/selection/anchornode/index.html | 21 + files/it/web/api/selection/anchoroffset/index.html | 21 + files/it/web/api/selection/collapse/index.html | 44 + .../it/web/api/selection/collapsetoend/index.html | 19 + .../web/api/selection/collapsetostart/index.html | 14 + files/it/web/api/selection/containsnode/index.html | 47 + .../api/selection/deletefromdocument/index.html | 28 + files/it/web/api/selection/extend/index.html | 39 + files/it/web/api/selection/focusnode/index.html | 21 + files/it/web/api/selection/focusoffset/index.html | 21 + files/it/web/api/selection/getrangeat/index.html | 37 + files/it/web/api/selection/index.html | 102 + files/it/web/api/selection/iscollapsed/index.html | 24 + files/it/web/api/selection/rangecount/index.html | 19 + .../web/api/selection/removeallranges/index.html | 19 + files/it/web/api/selection/removerange/index.html | 38 + .../web/api/selection/selectallchildren/index.html | 39 + files/it/web/api/selection/tostring/index.html | 27 + files/it/web/api/storage/clear/index.html | 126 + files/it/web/api/storage/getitem/index.html | 144 + files/it/web/api/storage/index.html | 161 + files/it/web/api/storage/setitem/index.html | 133 + files/it/web/api/urlutils/index.html | 205 + files/it/web/api/webgl_api/index.html | 254 + files/it/web/api/websocket/index.html | 148 + files/it/web/api/websocket/websocket/index.html | 48 + files/it/web/api/window/alert/index.html | 36 + files/it/web/api/window/back/index.html | 27 + files/it/web/api/window/blur/index.html | 26 + files/it/web/api/window/close/index.html | 72 + files/it/web/api/window/closed/index.html | 66 + files/it/web/api/window/confirm/index.html | 47 + files/it/web/api/window/crypto/index.html | 90 + files/it/web/api/window/defaultstatus/index.html | 38 + .../web/api/window/devicemotion_event/index.html | 97 + files/it/web/api/window/document/index.html | 39 + files/it/web/api/window/focus/index.html | 26 + files/it/web/api/window/forward/index.html | 22 + files/it/web/api/window/getselection/index.html | 46 + files/it/web/api/window/history/index.html | 37 + files/it/web/api/window/home/index.html | 24 + files/it/web/api/window/index.html | 686 + files/it/web/api/window/localstorage/index.html | 138 + files/it/web/api/window/locationbar/index.html | 43 + files/it/web/api/window/matchmedia/index.html | 91 + files/it/web/api/window/moveby/index.html | 36 + files/it/web/api/window/moveto/index.html | 37 + files/it/web/api/window/name/index.html | 23 + files/it/web/api/window/onuserproximity/index.html | 45 + files/it/web/api/window/opener/index.html | 24 + .../api/window/orientationchange_event/index.html | 66 + files/it/web/api/window/print/index.html | 17 + files/it/web/api/window/prompt/index.html | 51 + .../api/window/requestanimationframe/index.html | 115 + files/it/web/api/window/resizeby/index.html | 35 + files/it/web/api/window/resizeto/index.html | 39 + files/it/web/api/window/sessionstorage/index.html | 138 + files/it/web/api/window/sidebar/index.html | 56 + files/it/web/api/window/sizetocontent/index.html | 15 + files/it/web/api/window/status/index.html | 26 + files/it/web/api/window/statusbar/index.html | 32 + files/it/web/api/window/stop/index.html | 17 + files/it/web/api/window/top/index.html | 87 + .../api/windoworworkerglobalscope/fetch/index.html | 167 + .../web/api/windoworworkerglobalscope/index.html | 115 + .../web/api/windowtimers/clearinterval/index.html | 48 + files/it/web/api/windowtimers/index.html | 124 + files/it/web/api/worker/index.html | 107 + files/it/web/api/xmlhttprequest/index.html | 173 + .../xmlhttprequest/onreadystatechange/index.html | 119 + files/it/web/api/xmlhttprequest/open/index.html | 115 + .../web/api/xmlhttprequest/readystate/index.html | 152 + .../xmlhttprequest/usare_xmlhttprequest/index.html | 741 + .../api/xmlhttprequest/xmlhttprequest/index.html | 50 + .../web/css/-moz-border-bottom-colors/index.html | 89 + .../web/css/-moz-font-language-override/index.html | 6 + .../web/css/-webkit-overflow-scrolling/index.html | 52 + files/it/web/css/@document/index.html | 47 + files/it/web/css/_colon_-moz-first-node/index.html | 46 + files/it/web/css/_colon_-moz-last-node/index.html | 46 + .../it/web/css/_colon_-moz-list-bullet/index.html | 42 + files/it/web/css/_colon_active/index.html | 128 + files/it/web/css/_colon_focus/index.html | 117 + files/it/web/css/_colon_hover/index.html | 99 + files/it/web/css/_doublecolon_selection/index.html | 134 + files/it/web/css/attribute_selectors/index.html | 239 + files/it/web/css/background-attachment/index.html | 135 + files/it/web/css/background-color/index.html | 86 + files/it/web/css/background-image/index.html | 126 + files/it/web/css/background-position/index.html | 158 + files/it/web/css/background-repeat/index.html | 165 + files/it/web/css/background/index.html | 116 + files/it/web/css/border-bottom/index.html | 99 + files/it/web/css/border-style/index.html | 229 + files/it/web/css/border/index.html | 109 + files/it/web/css/cascade/index.html | 149 + files/it/web/css/color/index.html | 81 + files/it/web/css/css_box_model/index.html | 165 + .../introduction_to_the_css_box_model/index.html | 68 + .../it/web/css/css_flexible_box_layout/index.html | 118 + .../using_css_flexible_boxes/index.html | 394 + files/it/web/css/css_positioning/index.html | 63 + .../understanding_z_index/index.html | 51 + files/it/web/css/cursor/index.html | 388 + .../index.html" | 40 + files/it/web/css/flex-shrink/index.html | 120 + files/it/web/css/flex/index.html | 200 + files/it/web/css/font-size-adjust/index.html | 114 + .../web/css/guida_di_riferimento_ai_css/index.html | 96 + files/it/web/css/index.html | 107 + files/it/web/css/media_queries/index.html | 136 + files/it/web/css/min-width/index.html | 258 + files/it/web/css/mozilla_extensions/index.html | 336 + files/it/web/css/object-fit/index.html | 161 + files/it/web/css/pseudo-classes/index.html | 167 + files/it/web/css/ricette_layout/index.html | 60 + .../it/web/css/selettore_figli_diretti/index.html | 121 + files/it/web/css/text-align/index.html | 108 + files/it/web/css/text-shadow/index.html | 122 + .../web/css/transition-timing-function/index.html | 634 + files/it/web/css/type_selectors/index.html | 78 + files/it/web/css/universal_selectors/index.html | 105 + files/it/web/css/word-break/index.html | 131 + files/it/web/css/z-index/index.html | 192 + .../web/esempi_di_tecnologie_web_open/index.html | 136 + files/it/web/events/domcontentloaded/index.html | 75 + files/it/web/events/index.html | 2310 +++ files/it/web/events/load/index.html | 123 + files/it/web/guide/ajax/index.html | 57 + files/it/web/guide/ajax/iniziare/index.html | 252 + files/it/web/guide/api/index.html | 26 + files/it/web/guide/css/index.html | 23 + files/it/web/guide/graphics/index.html | 58 + .../guide/html/categorie_di_contenuto/index.html | 141 + .../it/web/guide/html/editable_content/index.html | 216 + .../rich-text_editing_in_mozilla/index.html | 420 + files/it/web/guide/index.html | 39 + files/it/web/guide/woff/index.html | 99 + files/it/web/html/attributi/index.html | 590 + .../canvas/drawing_graphics_with_canvas/index.html | 161 + files/it/web/html/canvas/index.html | 73 + files/it/web/html/element/a/index.html | 457 + files/it/web/html/element/abbr/index.html | 142 + files/it/web/html/element/acronym/index.html | 118 + files/it/web/html/element/address/index.html | 120 + files/it/web/html/element/applet/index.html | 120 + files/it/web/html/element/area/index.html | 191 + files/it/web/html/element/article/index.html | 119 + files/it/web/html/element/aside/index.html | 134 + files/it/web/html/element/audio/index.html | 341 + files/it/web/html/element/b/index.html | 134 + files/it/web/html/element/base/index.html | 137 + files/it/web/html/element/basefont/index.html | 103 + files/it/web/html/element/bdi/index.html | 116 + files/it/web/html/element/bdo/index.html | 128 + files/it/web/html/element/bgsound/index.html | 101 + files/it/web/html/element/big/index.html | 99 + files/it/web/html/element/blink/index.html | 112 + files/it/web/html/element/blockquote/index.html | 130 + files/it/web/html/element/body/index.html | 211 + files/it/web/html/element/br/index.html | 135 + files/it/web/html/element/canvas/index.html | 178 + files/it/web/html/element/caption/index.html | 134 + files/it/web/html/element/center/index.html | 51 + files/it/web/html/element/div/index.html | 137 + files/it/web/html/element/figura/index.html | 170 + files/it/web/html/element/footer/index.html | 119 + files/it/web/html/element/head/index.html | 85 + files/it/web/html/element/header/index.html | 120 + files/it/web/html/element/hgroup/index.html | 99 + files/it/web/html/element/html/index.html | 87 + files/it/web/html/element/i/index.html | 115 + files/it/web/html/element/iframe/index.html | 471 + files/it/web/html/element/img/index.html | 422 + files/it/web/html/element/index.html | 235 + files/it/web/html/element/input/file/index.html | 520 + files/it/web/html/element/input/index.html | 576 + files/it/web/html/element/kbd/index.html | 153 + files/it/web/html/element/main/index.html | 154 + files/it/web/html/element/nav/index.html | 124 + files/it/web/html/element/output/index.html | 122 + files/it/web/html/element/p/index.html | 109 + files/it/web/html/element/section/index.html | 150 + files/it/web/html/element/span/index.html | 110 + files/it/web/html/element/strike/index.html | 51 + files/it/web/html/element/table/index.html | 437 + files/it/web/html/element/time/index.html | 118 + files/it/web/html/element/title/index.html | 56 + files/it/web/html/forms_in_html/index.html | 83 + files/it/web/html/global_attributes/id/index.html | 109 + files/it/web/html/global_attributes/index.html | 444 + files/it/web/html/html5/index.html | 167 + .../html/html5/introduction_to_html5/index.html | 22 + files/it/web/html/index.html | 75 + files/it/web/html/riferimento/index.html | 46 + .../index.html | 320 + .../html/utilizzare_application_cache/index.html | 383 + files/it/web/http/authentication/index.html | 134 + files/it/web/http/basi_http/index.html | 48 + files/it/web/http/caching/index.html | 187 + files/it/web/http/compressione/index.html | 67 + files/it/web/http/conditional_requests/index.html | 144 + files/it/web/http/cookies/index.html | 193 + .../http/cors/errors/corsdidnotsucceed/index.html | 36 + .../cors/errors/corsmissingalloworigin/index.html | 46 + files/it/web/http/cors/errors/index.html | 76 + files/it/web/http/cors/index.html | 565 + files/it/web/http/feature_policy/index.html | 161 + files/it/web/http/headers/age/index.html | 69 + files/it/web/http/headers/authorization/index.html | 88 + files/it/web/http/headers/cookie/index.html | 74 + files/it/web/http/headers/host/index.html | 77 + files/it/web/http/headers/index.html | 368 + files/it/web/http/headers/server/index.html | 70 + .../headers/strict-transport-security/index.html | 118 + .../http/headers/x-content-type-options/index.html | 90 + .../web/http/headers/x-xss-protection/index.html | 90 + files/it/web/http/index.html | 231 + .../web/http/negoziazione-del-contenuto/index.html | 143 + files/it/web/http/panoramica/index.html | 176 + .../web/http/protocol_upgrade_mechanism/index.html | 148 + files/it/web/http/redirections/index.html | 318 + .../http/resources_and_specifications/index.html | 267 + files/it/web/http/richieste_range/index.html | 115 + files/it/web/http/sessione/index.html | 171 + files/it/web/http/status/100/index.html | 42 + files/it/web/http/status/101/index.html | 51 + files/it/web/http/status/200/index.html | 55 + files/it/web/http/status/302/index.html | 50 + files/it/web/http/status/404/index.html | 62 + files/it/web/http/status/500/index.html | 43 + files/it/web/http/status/index.html | 171 + files/it/web/index.html | 125 + files/it/web/javascript/chiusure/index.html | 345 + .../javascript/cos\303\250_javascript/index.html" | 57 + files/it/web/javascript/data_structures/index.html | 444 + .../ecmascript_6_support_in_mozilla/index.html | 153 + files/it/web/javascript/eventloop/index.html | 106 + .../javascript/gestione_della_memoria/index.html | 197 + files/it/web/javascript/getting_started/index.html | 330 + .../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 + .../web/javascript/il_dom_e_javascript/index.html | 81 + files/it/web/javascript/index.html | 116 + .../inheritance_and_the_prototype_chain/index.html | 556 + .../index.html | 390 + .../javascript/new_in_javascript/1.8.5/index.html | 123 + .../it/web/javascript/new_in_javascript/index.html | 80 + .../novit\303\240_in_javascript_1.6/index.html" | 81 + .../novit\303\240_in_javascript_1.7/index.html" | 79 + .../reference/classes/costruttore/index.html | 161 + .../reference/classes/extends/index.html | 175 + .../it/web/javascript/reference/classes/index.html | 270 + .../javascript/reference/classes/static/index.html | 70 + .../it/web/javascript/reference/errors/index.html | 31 + .../errors/invalid_array_length/index.html | 77 + .../invalid_assignment_left-hand_side/index.html | 54 + .../missing_semicolon_before_statement/index.html | 78 + .../reference/errors/too_much_recursion/index.html | 72 + .../reference/errors/unexpected_token/index.html | 50 + .../reference/errors/unexpected_type/index.html | 67 + .../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/concat/index.html | 188 + .../global_objects/array/copywithin/index.html | 180 + .../global_objects/array/entries/index.html | 77 + .../global_objects/array/every/index.html | 184 + .../reference/global_objects/array/fill/index.html | 155 + .../global_objects/array/filter/index.html | 245 + .../reference/global_objects/array/find/index.html | 216 + .../global_objects/array/findindex/index.html | 182 + .../reference/global_objects/array/flat/index.html | 159 + .../global_objects/array/flatmap/index.html | 142 + .../global_objects/array/foreach/index.html | 331 + .../reference/global_objects/array/from/index.html | 242 + .../global_objects/array/includes/index.html | 162 + .../reference/global_objects/array/index.html | 480 + .../global_objects/array/indexof/index.html | 226 + .../global_objects/array/isarray/index.html | 133 + .../reference/global_objects/array/join/index.html | 112 + .../reference/global_objects/array/keys/index.html | 74 + .../global_objects/array/lastindexof/index.html | 169 + .../global_objects/array/length/index.html | 129 + .../reference/global_objects/array/map/index.html | 323 + .../reference/global_objects/array/of/index.html | 92 + .../reference/global_objects/array/pop/index.html | 117 + .../global_objects/array/prototype/index.html | 203 + .../reference/global_objects/array/push/index.html | 142 + .../global_objects/array/reduce/index.html | 576 + .../global_objects/array/reverse/index.html | 133 + .../global_objects/array/slice/index.html | 241 + .../reference/global_objects/array/some/index.html | 202 + .../reference/global_objects/array/sort/index.html | 267 + .../global_objects/array/splice/index.html | 163 + .../global_objects/array/tostring/index.html | 80 + .../global_objects/array/unshift/index.html | 98 + .../global_objects/array/values/index.html | 87 + .../global_objects/arraybuffer/index.html | 147 + .../reference/global_objects/atomics/index.html | 166 + .../global_objects/atomics/store/index.html | 91 + .../global_objects/date/getdate/index.html | 78 + .../global_objects/date/getday/index.html | 89 + .../global_objects/date/getfullyear/index.html | 84 + .../global_objects/date/gethours/index.html | 79 + .../global_objects/date/getmilliseconds/index.html | 77 + .../global_objects/date/getminutes/index.html | 77 + .../global_objects/date/getmonth/index.html | 90 + .../global_objects/date/getseconds/index.html | 79 + .../global_objects/date/gettime/index.html | 125 + .../date/gettimezoneoffset/index.html | 99 + .../reference/global_objects/date/index.html | 249 + .../reference/global_objects/date/now/index.html | 96 + .../reference/global_objects/date/utc/index.html | 135 + .../reference/global_objects/decodeuri/index.html | 120 + .../global_objects/decodeuricomponent/index.html | 124 + .../reference/global_objects/encodeuri/index.html | 160 + .../global_objects/encodeuricomponent/index.html | 162 + .../reference/global_objects/escape/index.html | 126 + .../reference/global_objects/eval/index.html | 231 + .../global_objects/function/apply/index.html | 250 + .../global_objects/function/arguments/index.html | 92 + .../global_objects/function/arity/index.html | 26 + .../global_objects/function/bind/index.html | 277 + .../global_objects/function/call/index.html | 175 + .../reference/global_objects/function/index.html | 237 + .../global_objects/function/length/index.html | 87 + .../reference/global_objects/generator/index.html | 187 + .../global_objects/generator/next/index.html | 157 + .../javascript/reference/global_objects/index.html | 182 + .../reference/global_objects/infinity/index.html | 114 + .../reference/global_objects/isfinite/index.html | 136 + .../reference/global_objects/isnan/index.html | 176 + .../reference/global_objects/json/index.html | 244 + .../reference/global_objects/json/parse/index.html | 126 + .../global_objects/json/stringify/index.html | 325 + .../reference/global_objects/map/clear/index.html | 76 + .../reference/global_objects/map/delete/index.html | 74 + .../global_objects/map/foreach/index.html | 88 + .../reference/global_objects/map/index.html | 439 + .../reference/global_objects/math/abs/index.html | 95 + .../reference/global_objects/math/acos/index.html | 94 + .../reference/global_objects/math/atan/index.html | 100 + .../reference/global_objects/math/atan2/index.html | 155 + .../reference/global_objects/math/ceil/index.html | 161 + .../reference/global_objects/math/e/index.html | 79 + .../reference/global_objects/math/floor/index.html | 158 + .../reference/global_objects/math/index.html | 208 + .../reference/global_objects/math/max/index.html | 145 + .../reference/global_objects/math/min/index.html | 160 + .../reference/global_objects/math/pow/index.html | 151 + .../global_objects/math/random/index.html | 107 + .../reference/global_objects/math/round/index.html | 100 + .../reference/global_objects/math/sqrt/index.html | 136 + .../reference/global_objects/nan/index.html | 79 + .../reference/global_objects/null/index.html | 89 + .../reference/global_objects/number/index.html | 188 + .../global_objects/object/assign/index.html | 268 + .../global_objects/object/create/index.html | 234 + .../object/defineproperties/index.html | 224 + .../global_objects/object/freeze/index.html | 210 + .../object/getprototypeof/index.html | 130 + .../object/hasownproperty/index.html | 164 + .../reference/global_objects/object/index.html | 224 + .../reference/global_objects/object/is/index.html | 130 + .../global_objects/object/isfrozen/index.html | 184 + .../global_objects/object/issealed/index.html | 146 + .../global_objects/object/keys/index.html | 167 + .../global_objects/object/observe/index.html | 189 + .../global_objects/object/prototype/index.html | 214 + .../global_objects/object/seal/index.html | 157 + .../global_objects/object/tostring/index.html | 170 + .../reference/global_objects/parsefloat/index.html | 139 + .../reference/global_objects/parseint/index.html | 190 + .../global_objects/promise/all/index.html | 110 + .../global_objects/promise/catch/index.html | 124 + .../reference/global_objects/promise/index.html | 248 + .../global_objects/proxy/handler/apply/index.html | 119 + .../global_objects/proxy/handler/index.html | 83 + .../reference/global_objects/proxy/index.html | 396 + .../global_objects/proxy/revocabile/index.html | 86 + .../global_objects/set/entries/index.html | 113 + .../reference/global_objects/set/index.html | 394 + .../reference/global_objects/set/values/index.html | 114 + .../global_objects/string/charat/index.html | 247 + .../global_objects/string/includes/index.html | 188 + .../reference/global_objects/string/index.html | 410 + .../global_objects/string/indexof/index.html | 151 + .../global_objects/string/length/index.html | 90 + .../global_objects/string/prototype/index.html | 178 + .../reference/global_objects/string/raw/index.html | 108 + .../reference/global_objects/symbol/index.html | 230 + .../reference/global_objects/undefined/index.html | 173 + .../reference/global_objects/unescape/index.html | 124 + .../reference/global_objects/uneval/index.html | 112 + files/it/web/javascript/reference/index.html | 49 + .../operators/destructuring_assignment/index.html | 451 + .../javascript/reference/operators/in/index.html | 198 + .../web/javascript/reference/operators/index.html | 282 + .../javascript/reference/operators/new/index.html | 186 + .../operators/operator_condizionale/index.html | 171 + .../operators/operatore_virgola/index.html | 105 + .../operators/operatori_aritmetici/index.html | 291 + .../reference/operators/spread_syntax/index.html | 257 + .../reference/operators/super/index.html | 181 + .../javascript/reference/operators/this/index.html | 410 + .../reference/operators/yield/index.html | 163 + .../reference/statements/break/index.html | 130 + .../reference/statements/empty/index.html | 102 + .../reference/statements/export/index.html | 259 + .../reference/statements/for...of/index.html | 264 + .../reference/statements/function_star_/index.html | 280 + .../reference/statements/import/index.html | 167 + .../web/javascript/reference/statements/index.html | 131 + .../javascript/reference/statements/let/index.html | 208 + .../reference/statements/switch/index.html | 320 + .../reference/statements/throw/index.html | 195 + .../javascript/reference/statements/var/index.html | 221 + .../reference/template_strings/index.html | 210 + .../una_reintroduzione_al_javascript/index.html | 966 + files/it/web/performance/index.html | 286 + .../percorso_critico_di_rendering/index.html | 62 + files/it/web/reference/api/index.html | 58 + files/it/web/reference/index.html | 23 + files/it/web/security/index.html | 18 + files/it/web/security/password_insicure/index.html | 67 + files/it/web/svg/element/animate/index.html | 115 + files/it/web/svg/element/index.html | 297 + files/it/web/tutorials/index.html | 152 + files/it/web/web_components/index.html | 210 + .../usare_custom_elements/index.html | 297 + files/it/web/xslt/index.html | 40 + .../mobile/design_sensibile/index.html | 49 + files/it/web_development/mobile/index.html | 17 + files/it/websockets/index.html | 179 + .../index.html | 184 + files/it/window.find/index.html | 32 + files/it/xforms/index.html | 47 + files/it/xhtml/index.html | 26 + files/it/xml_in_mozilla/index.html | 283 + files/it/xml_web_services/index.html | 38 + files/it/xpcnativewrapper/index.html | 191 + files/it/xpcom/binding_per_i_linguaggi/index.html | 22 + files/it/xpcom/index.html | 53 + files/it/zone/index.html | 57 + files/kab/_redirects.txt | 6 + files/kab/_wikihistory.json | 420 + files/kab/games/imedyaten/index.html | 126 + files/kab/games/index.html | 96 + .../techniques/3d_collision_detection/index.html | 148 + .../3d_on_the_web/basic_theory/index.html | 119 + .../kab/games/techniques/3d_on_the_web/index.html | 117 + files/kab/games/techniques/index.html | 32 + files/kab/games/tools/engines_and_tools/index.html | 66 + files/kab/games/tools/index.html | 40 + .../tutorials/2d_breakout_game_phaser/index.html | 53 + files/kab/games/tutorials/index.html | 27 + files/kab/glossary/abstraction/index.html | 14 + files/kab/glossary/ajax/index.html | 22 + files/kab/glossary/aneggaf/index.html | 8 + files/kab/glossary/css/index.html | 44 + files/kab/glossary/html/index.html | 44 + files/kab/glossary/http/index.html | 17 + files/kab/glossary/index.html | 27 + .../kab/glossary/responsive_web_design/index.html | 16 + files/kab/glossary/svg/index.html | 33 + files/kab/glossary/url/index.html | 24 + files/kab/glossary/xml/index.html | 14 + .../html_basics/index.html | 218 + .../lmed/getting_started_with_the_web/index.html | 60 + files/kab/lmed/html/index.html | 59 + .../kab/lmed/html/introduction_to_html/index.html | 55 + files/kab/lmed/index.html | 61 + files/kab/mdn/about/index.html | 124 + files/kab/mdn/contribute/feedback/index.html | 62 + .../howto/create_an_mdn_account/index.html | 38 + files/kab/mdn/contribute/howto/index.html | 15 + files/kab/mdn/contribute/index.html | 20 + files/kab/mdn/index.html | 39 + files/kab/mdn/tamezdaynutt/index.html | 49 + files/kab/mozilla/add-ons/index.html | 82 + files/kab/mozilla/add-ons/webextensions/index.html | 113 + files/kab/mozilla/firefox/index.html | 86 + files/kab/mozilla/firefox/releases/78/index.html | 116 + files/kab/mozilla/firefox/releases/index.html | 26 + files/kab/mozilla/index.html | 17 + files/kab/tools/debugger/index.html | 56 + files/kab/tools/index.html | 161 + files/kab/tools/network_monitor/index.html | 553 + files/kab/tools/page_inspector/index.html | 48 + files/kab/tools/performance/index.html | 94 + files/kab/tools/tadiwent_web/index.html | 37 + files/kab/web/api/index.html | 8 + files/kab/web/css/index.html | 58 + files/kab/web/css/tools/index.html | 26 + files/kab/web/guide/graphics/index.html | 39 + files/kab/web/guide/index.html | 56 + files/kab/web/html/index.html | 74 + files/kab/web/http/index.html | 77 + files/kab/web/index.html | 85 + files/kab/web/javascript/amnir/index.html | 119 + files/kab/web/javascript/index.html | 100 + files/kab/web/mathml/index.html | 110 + files/kab/web/reference/api/index.html | 59 + files/kab/web/reference/index.html | 28 + files/kab/web/svg/index.html | 85 + files/kab/web/tuffart/index.html | 72 + files/kab/web/tutorials/index.html | 232 + files/ko/_redirects.txt | 975 + files/ko/_wikihistory.json | 18712 +++++++++++++++++++ files/ko/a_basic_raycaster/index.html | 53 + .../ko/a_re-introduction_to_javascript/index.html | 1038 + .../index.html | 26 + .../index.html | 125 + files/ko/animated_png_graphics/index.html | 430 + .../add-ons/code_snippets/cookies/index.html | 15 + files/ko/archive/add-ons/code_snippets/index.html | 55 + .../add-ons/code_snippets/page_loading/index.html | 26 + .../code_snippets/running_applications/index.html | 51 + .../add-ons/code_snippets/windows/index.html | 25 + .../archive/add-ons/code_snippets/xml/index.html | 22 + .../index.html | 193 + files/ko/archive/add-ons/index.html | 8 + .../index.html | 114 + files/ko/archive/api/index.html | 13 + files/ko/archive/api/navigator/index.html | 8 + files/ko/archive/apps/design/planning/index.html | 23 + files/ko/archive/apps/index.html | 14 + files/ko/archive/b2g_os/api/camera_api/index.html | 38 + .../b2g_os/api/camera_api/introduction/index.html | 247 + files/ko/archive/b2g_os/api/index.html | 120 + files/ko/archive/b2g_os/api/tcpsocket/index.html | 102 + .../b2g_os/application_development/index.html | 12 + files/ko/archive/b2g_os/apps/index.html | 57 + .../writing_a_web_app_for_firefox_os/index.html | 25 + .../ko/archive/b2g_os/automated_testing/index.html | 84 + files/ko/archive/b2g_os/building/index.html | 125 + .../building_and_installing_firefox_os/index.html | 49 + .../debugging/debugging_b2g_using_gdb/index.html | 153 + files/ko/archive/b2g_os/debugging/index.html | 84 + .../index.html | 79 + files/ko/archive/b2g_os/firefox_os_apps/index.html | 85 + .../b2g_os/firefox_os_apps/localization/index.html | 92 + .../firefox_os_build_prerequisites/index.html | 267 + files/ko/archive/b2g_os/firefox_os_faq/index.html | 39 + files/ko/archive/b2g_os/index.html | 181 + .../installing_on_a_mobile_device/index.html | 61 + files/ko/archive/b2g_os/introduction/index.html | 83 + files/ko/archive/b2g_os/pandaboard/index.html | 36 + files/ko/archive/b2g_os/phone_guide/index.html | 6 + .../b2g_os/platform/architecture/index.html | 532 + files/ko/archive/b2g_os/platform/gonk/index.html | 103 + files/ko/archive/b2g_os/platform/index.html | 99 + files/ko/archive/b2g_os/porting/index.html | 121 + .../preparing_for_your_first_b2g_build/index.html | 148 + files/ko/archive/b2g_os/quickstart/index.html | 49 + .../quickstart/intro_to_firefox_os/index.html | 14 + .../quickstart/intro_to_open_web_apps/index.html | 53 + files/ko/archive/b2g_os/security/index.html | 58 + .../index.html" | 253 + files/ko/archive/b2g_os/simulator/index.html | 280 + .../b2g_os/\354\204\261\353\212\245/index.html" | 146 + .../index.html" | 247 + files/ko/archive/css3/index.html | 582 + files/ko/archive/index.html | 21 + files/ko/archive/mdn/index.html | 20 + files/ko/archive/meta_docs/index.html | 15 + files/ko/archive/misc_top_level/index.html | 8 + .../index.html | 18 + .../using_content_preferences/index.html | 35 + .../creating_a_skin_for_seamonkey_2.x/index.html | 19 + files/ko/archive/mozilla/drag_and_drop/index.html | 148 + files/ko/archive/mozilla/firefox/index.html | 8 + .../mozilla/firefox/using_microformats/index.html | 144 + files/ko/archive/mozilla/index.html | 10 + .../mozilla/rdf_datasource_how-to/index.html | 224 + files/ko/archive/mozilla/xbl/index.html | 32 + .../xbl/xbl_1.0_reference/elements/index.html | 387 + .../mozilla/xbl/xbl_1.0_reference/index.html | 118 + .../xulrunner/dialogs_in_xulrunner/index.html | 121 + .../getting_started_with_xulrunner/index.html | 98 + files/ko/archive/mozilla/xulrunner/index.html | 26 + .../xulrunner/what_xulrunner_provides/index.html | 64 + .../xulrunner/xul_application_packaging/index.html | 107 + .../mozilla/xulrunner/xulrunner_faq/index.html | 64 + .../xulrunner/xulrunner_hall_of_fame/index.html | 178 + .../mozilla/xulrunner/xulrunner_tips/index.html | 168 + files/ko/archive/rss/getting_started/index.html | 56 + .../rss/getting_started/what_is_rss/index.html | 230 + files/ko/archive/rss/index.html | 48 + files/ko/archive/rss/module/index.html | 70 + files/ko/archive/rss/version/index.html | 109 + files/ko/archive/security/index.html | 14 + files/ko/archive/security/tcp_ip/index.html | 50 + files/ko/archive/web/index.html | 12 + .../ecmascript_7_support_in_mozilla/index.html | 98 + files/ko/archive/web/javascript/index.html | 12 + .../legacy_generator_function/index.html | 58 + .../legacy_generator_function_statement/index.html | 59 + files/ko/archive/web_standards/index.html | 64 + .../index.html | 66 + .../mozilla_s_doctype_sniffing/index.html | 141 + .../rdf_in_fifty_words_or_less/index.html | 87 + .../web_standards/rdf_in_mozilla_faq/index.html | 292 + .../index.html | 263 + files/ko/building_an_extension/index.html | 240 + files/ko/bundles/index.html | 67 + files/ko/consistent_list_indentation/index.html | 106 + files/ko/creating_a_microsummary/index.html | 169 + files/ko/creating_mozsearch_plugins/index.html | 169 + .../an_overview_of_xpcom/index.html | 531 + files/ko/creating_xpcom_components/index.html | 355 + .../creating_xpcom_components/preface/index.html | 78 + files/ko/css3_columns/index.html | 204 + files/ko/css_improvements_in_firefox_3/index.html | 35 + .../index.html | 28 + files/ko/dhtml/index.html | 42 + files/ko/dom_improvements_in_firefox_3/index.html | 30 + .../index.html | 39 + files/ko/drag_and_drop_events/index.html | 34 + files/ko/drawing_text_using_a_canvas/index.html | 164 + .../index.html | 82 + files/ko/e4x/index.html | 28 + files/ko/embedding_mozilla/index.html | 57 + files/ko/embedding_the_editor/index.html | 26 + files/ko/extensions/community/index.html | 18 + files/ko/extensions/index.html | 72 + .../index.html | 28 + files/ko/extensions/thunderbird/index.html | 112 + files/ko/firefox_1.5_for_developers/index.html | 150 + files/ko/firefox_2_for_developers/index.html | 85 + files/ko/firefox_3.5_for_developers/index.html | 302 + files/ko/fuel/index.html | 31 + files/ko/full_page_zoom/index.html | 32 + files/ko/games/index.html | 95 + files/ko/games/index/index.html | 10 + files/ko/games/introduction/index.html | 118 + .../tutorials/2d_breakout_game_phaser/index.html | 64 + .../\353\223\235\354\240\220/index.html" | 73 + .../index.html | 447 + files/ko/games/tutorials/index.html | 28 + .../bounce_off_the_walls/index.html" | 99 + .../build_the_brick_field/index.html" | 112 + .../collision_detection/index.html" | 128 + .../finishing_up/index.html" | 111 + .../game_over/index.html" | 77 + .../index.html" | 55 + .../mouse_controls/index.html" | 57 + .../paddle_and_keyboard_controls/index.html" | 122 + .../track_the_score_and_win/index.html" | 100 + .../index.html" | 145 + .../index.html" | 114 + files/ko/gecko/index.html | 73 + .../index.html | 73 + files/ko/gecko_embedding_basics/index.html | 401 + files/ko/gecko_plugin_api_reference/index.html | 213 + files/ko/glossary/abstraction/index.html | 52 + files/ko/glossary/accessibility/index.html | 33 + files/ko/glossary/ajax/index.html | 26 + files/ko/glossary/algorithm/index.html | 38 + files/ko/glossary/api/index.html | 33 + files/ko/glossary/argument/index.html | 20 + files/ko/glossary/ascii/index.html | 12 + files/ko/glossary/attribute/index.html | 32 + files/ko/glossary/bandwidth/index.html | 15 + files/ko/glossary/block/css/index.html | 24 + files/ko/glossary/block/index.html | 13 + files/ko/glossary/browser/index.html | 41 + files/ko/glossary/call_stack/index.html | 84 + files/ko/glossary/character/index.html | 18 + files/ko/glossary/character_encoding/index.html | 23 + files/ko/glossary/character_set/index.html | 31 + files/ko/glossary/chrome/index.html | 12 + files/ko/glossary/client_hints/index.html | 41 + files/ko/glossary/compile/index.html | 28 + files/ko/glossary/computer_programming/index.html | 17 + files/ko/glossary/copyleft/index.html | 14 + files/ko/glossary/cors/index.html | 23 + files/ko/glossary/cross_axis/index.html | 72 + files/ko/glossary/csp/index.html | 22 + files/ko/glossary/css/index.html | 45 + files/ko/glossary/css_preprocessor/index.html | 26 + files/ko/glossary/descriptor_(css)/index.html | 12 + files/ko/glossary/doctype/index.html | 23 + files/ko/glossary/dom/index.html | 28 + files/ko/glossary/domain_name/index.html | 21 + files/ko/glossary/ecmascript/index.html | 20 + files/ko/glossary/element/index.html | 24 + files/ko/glossary/empty_element/index.html | 34 + files/ko/glossary/endianness/index.html | 44 + files/ko/glossary/entity_header/index.html | 26 + files/ko/glossary/falsy/index.html | 107 + files/ko/glossary/firewall/index.html | 19 + files/ko/glossary/first-class_function/index.html | 105 + files/ko/glossary/flex_container/index.html | 36 + files/ko/glossary/flex_item/index.html | 34 + files/ko/glossary/flexbox/index.html | 79 + files/ko/glossary/fork/index.html | 27 + files/ko/glossary/ftp/index.html | 17 + files/ko/glossary/function/index.html | 94 + files/ko/glossary/general_header/index.html | 11 + files/ko/glossary/gif/index.html | 20 + files/ko/glossary/global_object/index.html | 70 + files/ko/glossary/google_chrome/index.html | 33 + files/ko/glossary/gpl/index.html | 14 + files/ko/glossary/gpu/index.html | 6 + files/ko/glossary/graceful_degradation/index.html | 36 + files/ko/glossary/head/index.html | 15 + files/ko/glossary/header/index.html | 61 + files/ko/glossary/hoisting/index.html | 73 + files/ko/glossary/html/index.html | 50 + files/ko/glossary/http/index.html | 19 + files/ko/glossary/http_2/index.html | 25 + files/ko/glossary/https/index.html | 17 + files/ko/glossary/idempotent/index.html | 49 + files/ko/glossary/iife/index.html | 59 + files/ko/glossary/index.html | 39 + files/ko/glossary/index/index.html | 11 + files/ko/glossary/internet/index.html | 16 + files/ko/glossary/ip_address/index.html | 16 + files/ko/glossary/ipv4/index.html | 14 + files/ko/glossary/ipv6/index.html | 14 + files/ko/glossary/java/index.html | 20 + files/ko/glossary/javascript/index.html | 43 + files/ko/glossary/jquery/index.html | 57 + files/ko/glossary/json/index.html | 24 + files/ko/glossary/main_axis/index.html | 50 + files/ko/glossary/metadata/index.html | 25 + files/ko/glossary/method/index.html | 40 + files/ko/glossary/microsoft_edge/index.html | 18 + .../microsoft_internet_explorer/index.html | 37 + files/ko/glossary/mime_type/index.html | 27 + files/ko/glossary/mozilla_firefox/index.html | 29 + files/ko/glossary/mvc/index.html | 62 + files/ko/glossary/node.js/index.html | 29 + files/ko/glossary/null/index.html | 38 + files/ko/glossary/object/index.html | 16 + files/ko/glossary/object_reference/index.html | 16 + files/ko/glossary/oop/index.html | 17 + files/ko/glossary/operator/index.html | 20 + files/ko/glossary/origin/index.html | 81 + files/ko/glossary/pdf/index.html | 14 + files/ko/glossary/php/index.html | 19 + files/ko/glossary/pixel/index.html | 16 + files/ko/glossary/png/index.html | 14 + files/ko/glossary/polyfill/index.html | 22 + files/ko/glossary/preflight_request/index.html | 34 + files/ko/glossary/primitive/index.html | 125 + .../ko/glossary/progressive_enhancement/index.html | 24 + files/ko/glossary/protocol/index.html | 26 + .../prototype-based_programming/index.html | 19 + files/ko/glossary/prototype/index.html | 16 + files/ko/glossary/proxy_server/index.html | 20 + files/ko/glossary/pseudocode/index.html | 14 + files/ko/glossary/python/index.html | 22 + files/ko/glossary/reflow/index.html | 12 + files/ko/glossary/regular_expression/index.html | 27 + files/ko/glossary/request_header/index.html | 41 + files/ko/glossary/response_header/index.html | 39 + files/ko/glossary/rest/index.html | 24 + .../self-executing_anonymous_function/index.html | 8 + files/ko/glossary/semantics/index.html | 153 + files/ko/glossary/seo/index.html | 41 + files/ko/glossary/server/index.html | 25 + files/ko/glossary/shim/index.html | 14 + files/ko/glossary/signature/function/index.html | 52 + files/ko/glossary/signature/index.html | 19 + files/ko/glossary/simd/index.html | 20 + files/ko/glossary/smtp/index.html | 31 + files/ko/glossary/sql/index.html | 21 + files/ko/glossary/ssl/index.html | 27 + files/ko/glossary/stacking_context/index.html | 18 + files/ko/glossary/string/index.html | 17 + files/ko/glossary/svg/index.html | 37 + files/ko/glossary/symbol/index.html | 61 + files/ko/glossary/tag/index.html | 27 + files/ko/glossary/tcp/index.html | 31 + files/ko/glossary/tls/index.html | 39 + files/ko/glossary/truthy/index.html | 53 + files/ko/glossary/ui/index.html | 15 + files/ko/glossary/undefined/index.html | 25 + files/ko/glossary/unicode/index.html | 20 + files/ko/glossary/uri/index.html | 23 + files/ko/glossary/url/index.html | 36 + files/ko/glossary/user_agent/index.html | 56 + files/ko/glossary/utf-8/index.html | 17 + files/ko/glossary/variable/index.html | 21 + files/ko/glossary/viewport/index.html | 22 + files/ko/glossary/webextensions/index.html | 14 + files/ko/glossary/webrtc/index.html | 25 + files/ko/glossary/websockets/index.html | 31 + files/ko/glossary/whatwg/index.html | 23 + files/ko/glossary/world_wide_web/index.html | 41 + files/ko/glossary/wrapper/index.html | 27 + files/ko/glossary/xhr_(xmlhttprequest)/index.html | 26 + .../index.html" | 20 + .../glossary/\353\260\260\354\227\264/index.html" | 30 + .../glossary/\353\266\210\353\246\260/index.html" | 54 + .../index.html" | 24 + .../index.html" | 39 + .../index.html" | 21 + .../index.html" | 21 + .../glossary/\354\272\220\354\213\234/index.html" | 14 + files/ko/gre/index.html | 35 + files/ko/hacking_firefox/index.html | 30 + .../index.html | 192 + files/ko/install.rdf/index.html | 40 + .../index.html | 57 + .../index.html | 27 + .../index.html | 438 + .../index.html | 367 + .../index.html | 434 + .../using_javascript_code_modules/index.html | 144 + files/ko/jsapi_reference/index.html | 268 + files/ko/jsapi_reference/jsclass.flags/index.html | 177 + .../how_does_the_internet_work/index.html | 93 + .../html_features_for_accessibility/index.html | 49 + files/ko/learn/common_questions/index.html | 127 + .../index.html | 125 + .../set_up_a_local_testing_server/index.html | 112 + .../upload_files_to_a_web_server/index.html | 134 + .../what_are_hyperlinks/index.html | 91 + .../what_is_a_domain_name/index.html | 149 + .../common_questions/what_is_a_url/index.html | 158 + .../what_is_a_web_server/index.html | 118 + .../what_software_do_i_need/index.html | 180 + .../index.html" | 170 + .../index.html" | 176 + files/ko/learn/css/basics/layout/index.html | 408 + .../backgrounds_and_borders/index.html | 318 + .../cascade_and_inheritance/index.html | 337 + .../css/building_blocks/debugging_css/index.html | 200 + .../handling_different_text_directions/index.html | 147 + .../images_media_form_elements/index.html | 195 + files/ko/learn/css/building_blocks/index.html | 90 + .../css/building_blocks/organizing/index.html | 350 + .../building_blocks/overflowing_content/index.html | 119 + .../building_blocks/sizing_items_in_css/index.html | 131 + .../css/building_blocks/styling_tables/index.html | 308 + .../building_blocks/values_and_units/index.html | 388 + .../index.html" | 347 + .../index.html" | 223 + files/ko/learn/css/css_layout/flexbox/index.html | 340 + files/ko/learn/css/css_layout/floats/index.html | 517 + files/ko/learn/css/css_layout/grids/index.html | 711 + files/ko/learn/css/css_layout/index.html | 76 + .../learn/css/css_layout/introduction/index.html | 720 + .../css_layout/legacy_layout_methods/index.html | 588 + .../css_layout/multiple-column_layout/index.html | 415 + .../index.html" | 424 + .../index.html" | 333 + .../index.html" | 585 + .../index.html" | 248 + .../index.html" | 102 + .../css/first_steps/getting_started/index.html | 253 + .../first_steps/how_css_is_structured/index.html | 504 + .../learn/css/first_steps/how_css_works/index.html | 156 + files/ko/learn/css/first_steps/index.html | 46 + .../using_your_new_knowledge/index.html | 96 + .../learn/css/first_steps/what_is_css/index.html | 119 + .../learn/css/howto/generated_content/index.html | 123 + files/ko/learn/css/howto/index.html | 86 + files/ko/learn/css/index.html | 60 + .../index.html" | 128 + .../learn/css/styling_text/fundamentals/index.html | 734 + files/ko/learn/css/styling_text/index.html | 48 + .../css/styling_text/styling_lists/index.html | 389 + files/ko/learn/front-end_web_developer/index.html | 194 + .../css_\352\270\260\353\263\270/index.html" | 293 + .../html_\352\270\260\353\263\270/index.html" | 234 + .../learn/getting_started_with_the_web/index.html | 64 + .../javascript_basics/index.html | 427 + .../what_will_your_website_look_like/index.html | 95 + .../index.html" | 75 + .../index.html" | 176 + .../index.html" | 99 + .../index.html" | 117 + files/ko/learn/how_to_contribute/index.html | 105 + .../index.html" | 928 + files/ko/learn/html/forms/index.html | 358 + .../sending_and_retrieving_form_data/index.html | 249 + .../html/forms/your_first_html_form/index.html | 272 + files/ko/learn/html/howto/index.html | 153 + .../index.html | 267 + .../index.html" | 82 + files/ko/learn/html/index.html | 53 + .../advanced_text_formatting/index.html | 478 + .../creating_hyperlinks/index.html | 338 + .../introduction_to_html/debugging_html/index.html | 179 + .../document_and_website_structure/index.html | 267 + .../getting_started/index.html | 725 + .../html_text_fundamentals/index.html | 654 + .../ko/learn/html/introduction_to_html/index.html | 59 + .../marking_up_a_letter/index.html | 102 + .../the_head_metadata_in_html/index.html | 277 + .../ideo_and_audio_content/index.html | 327 + .../images_in_html/index.html | 496 + .../learn/html/multimedia_and_embedding/index.html | 77 + .../responsive_images/index.html | 261 + files/ko/learn/html/tables/index.html | 42 + files/ko/learn/index.html | 167 + files/ko/learn/index/index.html | 10 + files/ko/learn/infrastructure/index.html | 18 + .../javascript/asynchronous/async_await/index.html | 383 + .../javascript/asynchronous/concepts/index.html | 159 + files/ko/learn/javascript/asynchronous/index.html | 59 + .../javascript/asynchronous/introducing/index.html | 281 + .../javascript/asynchronous/promises/index.html | 588 + .../asynchronous/timeouts_and_intervals/index.html | 598 + .../build_your_own_function/index.html | 251 + .../building_blocks/functions/index.html | 394 + .../ko/learn/javascript/building_blocks/index.html | 49 + .../building_blocks/looping_code/index.html | 948 + .../index.html" | 770 + .../client-side_storage/index.html | 780 + .../javascript/client-side_web_apis/index.html | 37 + .../first_steps/a_first_splash/index.html | 680 + .../learn/javascript/first_steps/arrays/index.html | 664 + files/ko/learn/javascript/first_steps/index.html | 60 + .../learn/javascript/first_steps/math/index.html | 422 + .../first_steps/silly_story_generator/index.html | 192 + .../javascript/first_steps/strings/index.html | 294 + .../first_steps/useful_string_methods/index.html | 461 + .../javascript/first_steps/variables/index.html | 360 + .../first_steps/what_is_javascript/index.html | 423 + .../first_steps/what_went_wrong/index.html | 237 + files/ko/learn/javascript/howto/index.html | 294 + files/ko/learn/javascript/index.html | 70 + .../ko/learn/javascript/objects/basics/index.html | 268 + files/ko/learn/javascript/objects/index.html | 50 + .../javascript/objects/inheritance/index.html | 394 + files/ko/learn/javascript/objects/json/index.html | 351 + .../objects/object-oriented_js/index.html | 287 + .../objects/object_prototypes/index.html | 274 + .../learn/server-side/django/admin_site/index.html | 357 + .../server-side/django/authentication/index.html | 707 + .../learn/server-side/django/deployment/index.html | 685 + .../django/development_environment/index.html | 439 + files/ko/learn/server-side/django/forms/index.html | 682 + .../server-side/django/generic_views/index.html | 623 + .../learn/server-side/django/home_page/index.html | 414 + files/ko/learn/server-side/django/index.html | 65 + .../server-side/django/introduction/index.html | 256 + .../ko/learn/server-side/django/models/index.html | 454 + .../learn/server-side/django/sessions/index.html | 190 + .../server-side/django/skeleton_website/index.html | 398 + .../ko/learn/server-side/django/testing/index.html | 933 + .../tutorial_local_library_website/index.html | 92 + .../django/web_application_security/index.html | 176 + .../ko/learn/server-side/express_nodejs/index.html | 63 + .../express_nodejs/introduction/index.html | 488 + .../server-side/express_nodejs/mongoose/index.html | 792 + .../server-side/express_nodejs/routes/index.html | 639 + .../index.html" | 403 + .../index.html" | 512 + .../first_steps/client-server_overview/index.html | 324 + files/ko/learn/server-side/first_steps/index.html | 39 + .../first_steps/introduction/index.html | 184 + .../first_steps/web_frameworks/index.html | 312 + .../first_steps/website_security/index.html | 164 + files/ko/learn/server-side/index.html | 57 + files/ko/learn/skills/index.html | 21 + .../client-side_javascript_frameworks/index.html | 165 + .../vue_first_component/index.html | 384 + .../vue_getting_started/index.html | 293 + files/ko/learn/tools_and_testing/github/index.html | 82 + files/ko/learn/tools_and_testing/index.html | 31 + .../learn/web_\352\270\260\354\210\240/index.html" | 23 + .../html/index.html" | 537 + .../index.html" | 59 + .../what_is_accessibility/index.html" | 205 + .../index.html" | 315 + files/ko/localization/index.html | 63 + .../localizing_extension_descriptions/index.html | 90 + files/ko/mdn/about/index.html | 118 + files/ko/mdn/about/mdn_services/index.html | 15 + files/ko/mdn/community/conversations/index.html | 63 + files/ko/mdn/community/index.html | 46 + files/ko/mdn/community/roles/admins/index.html | 59 + files/ko/mdn/community/roles/index.html | 14 + .../roles/localization_driver_role/index.html | 66 + .../mdn/community/working_in_community/index.html | 110 + .../creating_and_editing_pages/index.html | 166 + .../ko/mdn/contribute/does_this_belong/index.html | 139 + files/ko/mdn/contribute/feedback/index.html | 74 + files/ko/mdn/contribute/getting_started/index.html | 111 + .../howto/do_a_technical_review/index.html | 41 + .../howto/do_an_editorial_review/index.html | 48 + files/ko/mdn/contribute/howto/index.html | 14 + .../index.html" | 32 + .../contribute/howto/report_a_problem/index.html | 20 + .../howto/set_the_summary_for_a_page/index.html | 53 + files/ko/mdn/contribute/howto/tag/index.html | 396 + .../howto/tag_javascript_pages/index.html | 69 + .../index.html | 108 + .../index.html" | 39 + files/ko/mdn/contribute/index.html | 17 + files/ko/mdn/contribute/processes/index.html | 16 + files/ko/mdn/editor/index.html | 19 + files/ko/mdn/editor/links/index.html | 181 + files/ko/mdn/guidelines/best_practices/index.html | 34 + .../code_guidelines/code_guidelines/index.html | 159 + .../mdn/guidelines/code_guidelines/css/index.html | 249 + files/ko/mdn/guidelines/code_guidelines/index.html | 80 + files/ko/mdn/guidelines/index.html | 14 + files/ko/mdn/guidelines/style_guide/index.html | 833 + files/ko/mdn/index.html | 34 + files/ko/mdn/kuma/index.html | 26 + .../api_reference_sidebars/index.html | 114 + files/ko/mdn/structures/api_references/index.html | 58 + .../mdn/structures/compatibility_tables/index.html | 496 + files/ko/mdn/structures/index.html | 18 + .../macros/commonly-used_macros/index.html | 220 + files/ko/mdn/structures/macros/index.html | 46 + files/ko/mdn/tools/index.html | 16 + files/ko/mdn/tools/kumascript/index.html | 472 + .../tools/kumascript/troubleshooting/index.html | 59 + .../index.html" | 34 + files/ko/mdn/user_guide/index.html | 11 + files/ko/mdn_at_ten/index.html | 43 + files/ko/mercurial_faq/index.html | 646 + .../index.html | 1058 ++ files/ko/mozilla's_quirks_mode/index.html | 22 + files/ko/mozilla/add-ons/amo/index.html | 15 + files/ko/mozilla/add-ons/amo/policy/index.html | 29 + .../add-ons/bootstrapped_extensions/index.html | 349 + .../index.html | 59 + .../mozilla/add-ons/extension_packaging/index.html | 34 + files/ko/mozilla/add-ons/index.html | 116 + files/ko/mozilla/add-ons/plugins/index.html | 43 + .../add-ons/plugins/macromedia_flash/index.html | 150 + .../mozilla/add-ons/plugins/reference/index.html | 16 + .../reference/np_getmimedescription/index.html | 38 + .../plugins/reference/npn_posturlnotify/index.html | 76 + .../index.html | 89 + files/ko/mozilla/add-ons/themes/index.html | 64 + .../contents.rdf/index.html | 44 + .../getting_started/index.html | 108 + .../creating_a_skin_for_firefox/index.html | 27 + .../install.rdf/index.html | 44 + .../creating_a_skin_for_firefox/uuid/index.html | 10 + .../ko/mozilla/add-ons/themes/obsolete/index.html | 10 + .../anatomy_of_a_webextension/index.html | 131 + .../webextensions/api/browsingdata/index.html | 115 + .../webextensions/api/contentscripts/index.html | 38 + .../api/contextmenus/contexttype/index.html | 95 + .../api/contextmenus/create/index.html | 212 + .../api/contextmenus/gettargetelement/index.html | 58 + .../webextensions/api/contextmenus/index.html | 183 + .../api/contextmenus/onshown/index.html | 144 + .../mozilla/add-ons/webextensions/api/index.html | 51 + .../webextensions/api/pageaction/index.html | 99 + .../webextensions/api/pageaction/show/index.html | 93 + .../add-ons/webextensions/api/storage/index.html | 111 + .../webextensions/api/storage/local/index.html | 88 + .../api/storage/storagearea/get/index.html | 125 + .../api/storage/storagearea/index.html | 85 + .../api/storage/storagearea/set/index.html | 90 + .../webextensions/api/storage/sync/index.html | 77 + .../webextensions/api/tabs/create/index.html | 131 + .../add-ons/webextensions/api/tabs/index.html | 213 + .../webextensions/api/tabs/insertcss/index.html | 129 + .../webextensions/api/webrequest/index.html | 204 + .../api/webrequest/onbeforerequest/index.html | 239 + .../webextensions/content_scripts/index.html | 479 + .../add-ons/webextensions/examples/index.html | 22 + files/ko/mozilla/add-ons/webextensions/index.html | 143 + .../manifest.json/content_scripts/index.html | 227 + .../add-ons/webextensions/manifest.json/index.html | 101 + .../manifest.json/page_action/index.html | 200 + .../add-ons/webextensions/prerequisites/index.html | 10 + .../add-ons/webextensions/user_actions/index.html | 43 + .../webextensions/user_interface/index.html | 96 + .../user_interface/page_actions/index.html | 98 + .../what_are_webextensions/index.html | 28 + .../your_first_webextension/index.html | 154 + .../your_second_webextension/index.html | 456 + .../developer_guide/eclipse/eclipse_cdt/index.html | 443 + .../ko/mozilla/developer_guide/eclipse/index.html | 10 + files/ko/mozilla/developer_guide/index.html | 92 + .../developer_guide/mozilla_build_faq/index.html | 415 + .../mozilla/developer_guide/source_code/index.html | 49 + .../mozilla/firefox/developer_edition/index.html | 56 + files/ko/mozilla/firefox/headless_mode/index.html | 204 + files/ko/mozilla/firefox/index.html | 76 + .../mozilla/firefox/multiple_profiles/index.html | 242 + files/ko/mozilla/firefox/releases/3/index.html | 273 + files/ko/mozilla/firefox/releases/66/index.html | 157 + files/ko/mozilla/firefox/releases/index.html | 23 + files/ko/mozilla/http_cache/index.html | 483 + .../index.html | 73 + files/ko/mozilla/index.html | 21 + .../ko/mozilla/javascript_code_modules/index.html | 97 + files/ko/mozilla/js-ctypes/index.html | 53 + .../\354\206\214\352\260\234/index.html" | 84 + files/ko/mozilla/marketplace/submission/index.html | 9 + files/ko/mozilla/marketplace_kr/index.html | 137 + files/ko/mozilla/mobile/index.html | 30 + .../ko/mozilla/mobile/viewport_meta_tag/index.html | 99 + .../index.html | 98 + .../persona/bootstrapping_persona/index.html | 29 + .../persona/browser_compatibility/index.html | 86 + files/ko/mozilla/persona/index.html | 137 + files/ko/mozilla/persona/quick_setup/index.html | 248 + .../persona/user_interface_guidelines/index.html | 113 + files/ko/mozilla/persona/why_persona/index.html | 31 + files/ko/mozilla/projects/emscripten/index.html | 37 + files/ko/mozilla/projects/index.html | 14 + files/ko/mozilla/projects/l20n/index.html | 126 + files/ko/mozilla/projects/psm/index.html | 15 + .../mozilla/qa/bug_writing_guidelines/index.html | 177 + files/ko/mozilla/qa/index.html | 65 + files/ko/mozilla/tech/index.html | 13 + files/ko/mozilla/tech/xpcom/guide/index.html | 16 + .../tech/xpcom/language_bindings/index.html | 25 + files/ko/mozilla/tech/xpcom/reference/index.html | 30 + .../about_scriptable_interfaces/index.html | 26 + .../reference/interface/nsiloginmanager/index.html | 372 + .../tech/xul/attribute/accesskey/index.html | 44 + .../tech/xul/attribute/currentset/index.html | 25 + .../tech/xul/attribute/image.onload/index.html | 12 + files/ko/mozilla/tech/xul/attribute/index.html | 270 + files/ko/mozilla/tech/xul/index.html | 25 + files/ko/mozilla/tech/xul/menu/index.html | 338 + files/ko/mozilla/tech/xul/property/index.html | 219 + files/ko/mozilla/tech/xul/splitter/index.html | 79 + .../ko/mozilla/tech/xul/template_guide/index.html | 52 + files/ko/mozilla/tech/xul/toolbar/index.html | 218 + files/ko/mozilla/tech/xul/toolbarbutton/index.html | 477 + .../ko/mozilla/tech/xul/toolbarpalette/index.html | 98 + files/ko/mozilla/tech/xul/xul_controls/index.html | 548 + files/ko/mozilla/tech/xul/xul_reference/index.html | 148 + .../xul/xul_tutorial/adding_buttons/index.html | 102 + .../xul_tutorial/adding_event_handlers/index.html | 137 + .../xul_tutorial/adding_html_elements/index.html | 114 + .../adding_labels_and_images/index.html | 65 + .../xul_tutorial/adding_more_elements/index.html | 87 + .../xul/xul_tutorial/box_model_details/index.html | 99 + .../xul/xul_tutorial/content_panels/index.html | 55 + .../xul/xul_tutorial/creating_a_window/index.html | 113 + .../xul_tutorial/cross_package_overlays/index.html | 79 + .../xul_tutorial/element_positioning/index.html | 259 + .../xul_tutorial/focus_and_selection/index.html | 132 + .../mozilla/tech/xul/xul_tutorial/grids/index.html | 156 + .../tech/xul/xul_tutorial/groupboxes/index.html | 74 + files/ko/mozilla/tech/xul/xul_tutorial/index.html | 132 + .../xul/xul_tutorial/input_controls/index.html | 110 + .../tech/xul/xul_tutorial/introduction/index.html | 38 + .../xul_tutorial/introduction_to_rdf/index.html | 74 + .../xul_tutorial/introduction_to_xbl/index.html | 82 + .../xul/xul_tutorial/keyboard_shortcuts/index.html | 384 + .../tech/xul/xul_tutorial/list_controls/index.html | 133 + .../tech/xul/xul_tutorial/localization/index.html | 279 + .../xul/xul_tutorial/manifest_files/index.html | 118 + .../xul_tutorial/more_button_features/index.html | 69 + .../xul_tutorial/more_event_handlers/index.html | 140 + .../xul/xul_tutorial/more_menu_features/index.html | 109 + .../tech/xul/xul_tutorial/popup_menus/index.html | 190 + .../xul/xul_tutorial/progress_meters/index.html | 59 + .../xul/xul_tutorial/property_files/index.html | 64 + .../tech/xul/xul_tutorial/scroll_bars/index.html | 71 + .../xul/xul_tutorial/scrolling_menus/index.html | 46 + .../xul/xul_tutorial/simple_menu_bars/index.html | 160 + .../tech/xul/xul_tutorial/splitters/index.html | 139 + .../xul/xul_tutorial/stack_positioning/index.html | 35 + .../xul/xul_tutorial/stacks_and_decks/index.html | 61 + .../tech/xul/xul_tutorial/tabboxes/index.html | 159 + .../tech/xul/xul_tutorial/templates/index.html | 126 + .../tech/xul/xul_tutorial/the_box_model/index.html | 118 + .../xul/xul_tutorial/the_chrome_url/index.html | 45 + .../tech/xul/xul_tutorial/toolbars/index.html | 107 + .../mozilla/tech/xul/xul_tutorial/trees/index.html | 166 + .../tech/xul/xul_tutorial/using_spacers/index.html | 112 + .../xul/xul_tutorial/xpcom_examples/index.html | 132 + .../xul/xul_tutorial/xpcom_interfaces/index.html | 187 + .../tech/xul/xul_tutorial/xul_structure/index.html | 166 + .../index.html" | 124 + .../index.html" | 47 + .../index.html" | 26 + .../localizing_with_verbatim/index.html" | 125 + .../index.html" | 135 + files/ko/mozilla_source_code_via_cvs/index.html | 136 + files/ko/msx_emulator_(jsmsx)/index.html | 28 + files/ko/navigation_timing/index.html | 137 + files/ko/new_compatibility_tables_beta/index.html | 24 + files/ko/node_server_without_framework/index.html | 74 + .../ko/notable_bugs_fixed_in_firefox_3/index.html | 32 + files/ko/nsicryptohash/index.html | 271 + files/ko/nsiidleservice/index.html | 134 + files/ko/nss/index.html | 64 + files/ko/nss/new_nss_samples/index.html | 37 + files/ko/places/accessing_bookmarks/index.html | 81 + files/ko/places/custom_containers/index.html | 21 + files/ko/places/index.html | 70 + files/ko/places/instantiating_views/index.html | 70 + files/ko/places/query_system/index.html | 173 + files/ko/places/views/index.html | 43 + files/ko/preferences_system/examples/index.html | 32 + files/ko/preferences_system/index.html | 49 + files/ko/pyxpcom/index.html | 62 + files/ko/rdf/index.html | 56 + files/ko/rhino/index.html | 18 + files/ko/sandbox/index.html | 14 + files/ko/scripting_plugins/index.html | 6 + files/ko/spidermonkey/index.html | 67 + files/ko/storage/index.html | 396 + files/ko/svg_improvements_in_firefox_3/index.html | 56 + files/ko/svg_in_firefox/index.html | 845 + files/ko/the_basics_of_web_services/index.html | 35 + files/ko/the_dom_and_javascript/index.html | 115 + files/ko/theme_packaging/index.html | 98 + .../index.html | 132 + files/ko/toolkit_api/index.html | 33 + files/ko/tools/add-ons/dom_inspector/index.html | 16 + files/ko/tools/add-ons/index.html | 17 + files/ko/tools/debugger/index.html | 85 + files/ko/tools/debugger/ui_tour/index.html | 98 + .../index.html" | 10 + files/ko/tools/how_to/index.html | 11 + files/ko/tools/how_to/open_the_debugger/index.html | 24 + files/ko/tools/how_to/search/index.html | 24 + files/ko/tools/how_to/set_a_breakpoint/index.html | 31 + files/ko/tools/index.html | 217 + files/ko/tools/network_monitor/index.html | 63 + files/ko/tools/page_inspector/index.html | 48 + files/ko/tools/page_inspector/ui_tour/index.html | 104 + files/ko/tools/performance/index.html | 94 + files/ko/tools/performance/ui_tour/index.html | 127 + .../firefox_for_android/index.html | 138 + files/ko/tools/remote_debugging/index.html | 31 + files/ko/tools/scratchpad/index.html | 90 + files/ko/tools/web_console/index.html | 37 + files/ko/tools/webide/index.html | 42 + .../index.html" | 115 + .../updating_extensions_for_firefox_2/index.html | 30 + .../updating_extensions_for_firefox_3/index.html | 137 + .../index.html | 38 + .../index.html | 13 + files/ko/using_nsiloginmanager/index.html | 141 + files/ko/using_xpath/index.html | 86 + .../using_xpinstall_to_install_plugins/index.html | 218 + .../index.html | 222 + .../aria/aria_live_regions/index.html | 255 + .../accessibility/aria/aria_techniques/index.html | 213 + .../using_the_aria-label_attribute/index.html | 66 + .../web/accessibility/aria/forms/alerts/index.html | 146 + .../aria/forms/basic_form_hints/index.html | 116 + files/ko/web/accessibility/aria/forms/index.html | 17 + files/ko/web/accessibility/aria/index.html | 131 + .../aria/roles/dialog_role/index.html | 158 + files/ko/web/accessibility/aria/roles/index.html | 78 + files/ko/web/accessibility/index.html | 49 + .../mobile_accessibility_checklist/index.html | 106 + .../accessibility/understanding_wcag/index.html | 59 + .../understanding_wcag/keyboard/index.html | 87 + files/ko/web/api/abortcontroller/abort/index.html | 93 + .../api/abortcontroller/abortcontroller/index.html | 88 + files/ko/web/api/abortcontroller/index.html | 103 + files/ko/web/api/abortcontroller/signal/index.html | 89 + files/ko/web/api/abortsignal/aborted/index.html | 64 + files/ko/web/api/abortsignal/index.html | 107 + .../ko/web/api/abstractrange/collapsed/index.html | 46 + files/ko/web/api/abstractrange/index.html | 199 + files/ko/web/api/abstractworker/index.html | 83 + files/ko/web/api/analysernode/index.html | 164 + files/ko/web/api/angle_instanced_arrays/index.html | 83 + .../api/animationevent/animationevent/index.html | 76 + .../api/animationevent/animationname/index.html | 53 + files/ko/web/api/animationevent/index.html | 78 + .../api/animationtimeline/currenttime/index.html | 102 + files/ko/web/api/animationtimeline/index.html | 56 + .../using_the_audiochannels_api/index.html | 248 + files/ko/web/api/audiobuffer/index.html | 172 + files/ko/web/api/audiobuffersourcenode/index.html | 146 + files/ko/web/api/audiochannelmanager/index.html | 74 + files/ko/web/api/audiochannels_api/index.html | 121 + files/ko/web/api/audiocontext/index.html | 179 + files/ko/web/api/audiodestinationnode/index.html | 142 + files/ko/web/api/audionode/index.html | 185 + files/ko/web/api/audioparam/index.html | 114 + files/ko/web/api/background_tasks_api/index.html | 511 + .../ko/web/api/batterymanager/charging/index.html | 117 + .../web/api/batterymanager/chargingtime/index.html | 74 + .../api/batterymanager/dischargingtime/index.html | 71 + files/ko/web/api/batterymanager/index.html | 74 + files/ko/web/api/biquadfilternode/index.html | 249 + files/ko/web/api/blob/blob/index.html | 59 + files/ko/web/api/blob/index.html | 151 + files/ko/web/api/body/index.html | 97 + files/ko/web/api/body/json/index.html | 73 + files/ko/web/api/broadcastchannel/index.html | 92 + files/ko/web/api/cache/index.html | 148 + files/ko/web/api/cache/put/index.html | 118 + .../canvas/index.html | 69 + .../api/canvascapturemediastreamtrack/index.html | 72 + .../requestframe/index.html | 69 + files/ko/web/api/channel_messaging_api/index.html | 91 + .../using_channel_messaging/index.html | 220 + files/ko/web/api/characterdata/index.html | 97 + files/ko/web/api/childnode/before/index.html | 144 + files/ko/web/api/childnode/index.html | 76 + files/ko/web/api/childnode/remove/index.html | 97 + files/ko/web/api/clients/claim/index.html | 66 + files/ko/web/api/clients/index.html | 102 + files/ko/web/api/clipboard/index.html | 89 + files/ko/web/api/clipboard_api/index.html | 74 + .../api/clipboardevent/clipboarddata/index.html | 51 + files/ko/web/api/clipboardevent/index.html | 67 + files/ko/web/api/comment/index.html | 73 + files/ko/web/api/console/assert/index.html | 99 + files/ko/web/api/console/clear/index.html | 43 + files/ko/web/api/console/count/index.html | 102 + files/ko/web/api/console/countreset/index.html | 108 + files/ko/web/api/console/debug/index.html | 59 + files/ko/web/api/console/error/index.html | 77 + files/ko/web/api/console/group/index.html | 83 + files/ko/web/api/console/index.html | 296 + files/ko/web/api/console/log/index.html | 94 + files/ko/web/api/console/time/index.html | 56 + files/ko/web/api/console/timeend/index.html | 68 + files/ko/web/api/console/trace/index.html | 77 + files/ko/web/api/console/warn/index.html | 70 + files/ko/web/api/console_api/index.html | 76 + files/ko/web/api/crypto/getrandomvalues/index.html | 73 + files/ko/web/api/crypto/index.html | 35 + files/ko/web/api/crypto/subtle/index.html | 36 + files/ko/web/api/css/index.html | 81 + files/ko/web/api/css_object_model/index.html | 189 + files/ko/web/api/cssmediarule/index.html | 70 + files/ko/web/api/cssomstring/index.html | 73 + files/ko/web/api/cssstylesheet/index.html | 139 + files/ko/web/api/customelementregistry/index.html | 94 + .../ko/web/api/customevent/customevent/index.html | 110 + files/ko/web/api/customevent/index.html | 96 + files/ko/web/api/datatransfer/getdata/index.html | 112 + files/ko/web/api/datatransfer/index.html | 137 + files/ko/web/api/document/adoptnode/index.html | 58 + files/ko/web/api/document/alinkcolor/index.html | 26 + files/ko/web/api/document/all/index.html | 49 + files/ko/web/api/document/anchors/index.html | 31 + files/ko/web/api/document/applets/index.html | 30 + files/ko/web/api/document/body/index.html | 74 + files/ko/web/api/document/characterset/index.html | 47 + files/ko/web/api/document/compatmode/index.html | 64 + files/ko/web/api/document/cookie/index.html | 243 + .../api/document/createdocumentfragment/index.html | 134 + files/ko/web/api/document/createelement/index.html | 101 + .../ko/web/api/document/createelementns/index.html | 173 + files/ko/web/api/document/createrange/index.html | 33 + .../ko/web/api/document/createtextnode/index.html | 60 + .../web/api/document/createtreewalker/index.html | 160 + files/ko/web/api/document/defaultview/index.html | 46 + files/ko/web/api/document/designmode/index.html | 50 + files/ko/web/api/document/doctype/index.html | 58 + files/ko/web/api/document/document/index.html | 43 + .../ko/web/api/document/documentelement/index.html | 60 + files/ko/web/api/document/documenturi/index.html | 116 + files/ko/web/api/document/domain/index.html | 91 + files/ko/web/api/document/drag_event/index.html | 183 + files/ko/web/api/document/dragend_event/index.html | 97 + .../ko/web/api/document/dragstart_event/index.html | 90 + files/ko/web/api/document/embeds/index.html | 36 + files/ko/web/api/document/execcommand/index.html | 157 + files/ko/web/api/document/forms/index.html | 77 + .../ko/web/api/document/getelementbyid/index.html | 152 + .../api/document/getelementsbytagname/index.html | 117 + .../api/document/getelementsbytagnamens/index.html | 149 + files/ko/web/api/document/getselection/index.html | 8 + files/ko/web/api/document/hasfocus/index.html | 101 + files/ko/web/api/document/head/index.html | 69 + files/ko/web/api/document/hidden/index.html | 26 + files/ko/web/api/document/images/index.html | 52 + .../ko/web/api/document/implementation/index.html | 55 + files/ko/web/api/document/importnode/index.html | 67 + files/ko/web/api/document/index.html | 480 + files/ko/web/api/document/keydown_event/index.html | 153 + files/ko/web/api/document/keyup_event/index.html | 99 + files/ko/web/api/document/links/index.html | 102 + files/ko/web/api/document/location/index.html | 69 + files/ko/web/api/document/open/index.html | 106 + files/ko/web/api/document/queryselector/index.html | 130 + .../web/api/document/queryselectorall/index.html | 180 + files/ko/web/api/document/readystate/index.html | 125 + .../api/document/readystatechange_event/index.html | 139 + files/ko/web/api/document/referrer/index.html | 23 + files/ko/web/api/document/scroll_event/index.html | 141 + .../ko/web/api/document/stylesheetsets/index.html | 59 + files/ko/web/api/document/url/index.html | 69 + .../api/document/visibilitychange_event/index.html | 72 + .../ko/web/api/document/visibilitystate/index.html | 56 + files/ko/web/api/document/write/index.html | 102 + .../api/document_object_model/events/index.html | 84 + .../api/document_object_model/examples/index.html | 372 + files/ko/web/api/document_object_model/index.html | 350 + .../index.html | 51 + .../using_the_w3c_dom_level_1_core/index.html | 95 + .../\354\206\214\352\260\234/index.html" | 239 + files/ko/web/api/documentfragment/index.html | 139 + .../documentorshadowroot/activeelement/index.html | 94 + files/ko/web/api/documentorshadowroot/index.html | 74 + .../documentorshadowroot/stylesheets/index.html | 57 + files/ko/web/api/documenttype/index.html | 90 + files/ko/web/api/domobject/index.html | 35 + files/ko/web/api/domparser/index.html | 203 + files/ko/web/api/domstring/index.html | 43 + files/ko/web/api/domtokenlist/contains/index.html | 117 + files/ko/web/api/domtokenlist/index.html | 115 + files/ko/web/api/dragevent/index.html | 109 + files/ko/web/api/element/accesskey/index.html | 34 + files/ko/web/api/element/attributes/index.html | 72 + files/ko/web/api/element/classlist/index.html | 285 + files/ko/web/api/element/classname/index.html | 122 + files/ko/web/api/element/click_event/index.html | 227 + files/ko/web/api/element/clientheight/index.html | 70 + files/ko/web/api/element/clientleft/index.html | 66 + files/ko/web/api/element/closest/index.html | 145 + files/ko/web/api/element/currentstyle/index.html | 80 + files/ko/web/api/element/getattribute/index.html | 53 + .../api/element/getelementsbyclassname/index.html | 108 + .../api/element/getelementsbytagname/index.html | 136 + files/ko/web/api/element/id/index.html | 67 + files/ko/web/api/element/index.html | 306 + files/ko/web/api/element/innerhtml/index.html | 204 + .../web/api/element/insertadjacenthtml/index.html | 79 + files/ko/web/api/element/outerhtml/index.html | 119 + .../ko/web/api/element/removeattribute/index.html | 66 + files/ko/web/api/element/scrollheight/index.html | 168 + files/ko/web/api/element/scrollintoview/index.html | 88 + files/ko/web/api/element/tagname/index.html | 62 + .../web/api/element/touchcancel_event/index.html | 116 + files/ko/web/api/encoding_api/index.html | 62 + files/ko/web/api/event/cancelable/index.html | 23 + files/ko/web/api/event/cancelbubble/index.html | 90 + files/ko/web/api/event/createevent/index.html | 29 + files/ko/web/api/event/event/index.html | 77 + files/ko/web/api/event/eventphase/index.html | 179 + files/ko/web/api/event/index.html | 212 + files/ko/web/api/event/istrusted/index.html | 61 + files/ko/web/api/event/preventdefault/index.html | 93 + .../api/event/stopimmediatepropagation/index.html | 91 + files/ko/web/api/event/stoppropagation/index.html | 99 + files/ko/web/api/event/target/index.html | 96 + files/ko/web/api/eventlistener/index.html | 84 + .../ko/web/api/eventsource/eventsource/index.html | 79 + files/ko/web/api/eventsource/index.html | 121 + .../api/eventtarget/addeventlistener/index.html | 690 + .../web/api/eventtarget/dispatchevent/index.html | 79 + .../ko/web/api/eventtarget/eventtarget/index.html | 70 + files/ko/web/api/eventtarget/index.html | 133 + .../api/eventtarget/removeeventlistener/index.html | 211 + .../ko/web/api/fetch_api/basic_concepts/index.html | 66 + .../index.html" | 419 + files/ko/web/api/fetch_api/index.html | 88 + files/ko/web/api/fetchevent/index.html | 110 + files/ko/web/api/fetchevent/respondwith/index.html | 115 + files/ko/web/api/file/file/index.html | 72 + files/ko/web/api/file/index.html | 99 + files/ko/web/api/file/name/index.html | 66 + files/ko/web/api/file/size/index.html | 30 + .../using_files_from_web_applications/index.html | 496 + .../api/file_and_directory_entries_api/index.html | 131 + files/ko/web/api/filelist/index.html | 155 + files/ko/web/api/filereader/index.html | 111 + .../ko/web/api/filereader/loadend_event/index.html | 165 + .../ko/web/api/filereader/readasdataurl/index.html | 171 + files/ko/web/api/filereader/readastext/index.html | 60 + files/ko/web/api/filereader/result/index.html | 33 + files/ko/web/api/formdata/append/index.html | 90 + files/ko/web/api/formdata/delete/index.html | 70 + files/ko/web/api/formdata/entries/index.html | 70 + files/ko/web/api/formdata/formdata/index.html | 92 + files/ko/web/api/formdata/get/index.html | 74 + files/ko/web/api/formdata/getall/index.html | 74 + files/ko/web/api/formdata/has/index.html | 73 + files/ko/web/api/formdata/index.html | 82 + files/ko/web/api/formdata/keys/index.html | 70 + files/ko/web/api/formdata/set/index.html | 79 + files/ko/web/api/formdata/values/index.html | 70 + files/ko/web/api/gamepad_api/index.html | 94 + .../gamepad_api/using_the_gamepad_api/index.html | 342 + files/ko/web/api/geolocation/clearwatch/index.html | 92 + .../api/geolocation/getcurrentposition/index.html | 88 + files/ko/web/api/geolocation/index.html | 70 + .../web/api/geolocation/watchposition/index.html | 99 + files/ko/web/api/geolocation_api/index.html | 97 + files/ko/web/api/geolocationposition/index.html | 62 + files/ko/web/api/globaleventhandlers/index.html | 268 + .../api/globaleventhandlers/onchange/index.html | 73 + .../web/api/globaleventhandlers/onclick/index.html | 89 + .../globaleventhandlers/oncontextmenu/index.html | 103 + .../api/globaleventhandlers/ondblclick/index.html | 70 + .../api/globaleventhandlers/onkeydown/index.html | 60 + .../web/api/globaleventhandlers/onkeyup/index.html | 27 + .../globaleventhandlers/onpointerenter/index.html | 79 + .../api/globaleventhandlers/onscroll/index.html | 98 + .../api/globaleventhandlers/onsubmit/index.html | 70 + .../globaleventhandlers/ontouchstart/index.html | 128 + files/ko/web/api/history/back/index.html | 70 + files/ko/web/api/history/forward/index.html | 69 + files/ko/web/api/history/go/index.html | 82 + files/ko/web/api/history/index.html | 85 + files/ko/web/api/history/length/index.html | 50 + files/ko/web/api/history/pushstate/index.html | 84 + files/ko/web/api/history/replacestate/index.html | 68 + .../web/api/history/scrollrestoration/index.html | 72 + files/ko/web/api/history/state/index.html | 67 + files/ko/web/api/history_api/index.html | 117 + .../drag_operations/index.html" | 343 + .../index.html" | 303 + files/ko/web/api/htmlbrelement/index.html | 64 + .../api/htmlcanvaselement/getcontext/index.html | 144 + files/ko/web/api/htmlcanvaselement/index.html | 242 + files/ko/web/api/htmlcollection/index.html | 96 + files/ko/web/api/htmlcollection/item/index.html | 50 + files/ko/web/api/htmldivelement/index.html | 72 + files/ko/web/api/htmldocument/index.html | 21 + .../web/api/htmlelement/accesskeylabel/index.html | 84 + files/ko/web/api/htmlelement/click/index.html | 47 + .../web/api/htmlelement/contenteditable/index.html | 59 + files/ko/web/api/htmlelement/dataset/index.html | 127 + files/ko/web/api/htmlelement/index.html | 271 + .../ko/web/api/htmlelement/input_event/index.html | 100 + .../ko/web/api/htmlelement/offsetparent/index.html | 43 + files/ko/web/api/htmlelement/outertext/index.html | 33 + files/ko/web/api/htmlelement/style/index.html | 41 + files/ko/web/api/htmlelement/tabindex/index.html | 26 + files/ko/web/api/htmlformelement/index.html | 240 + .../api/htmlhyperlinkelementutils/href/index.html | 51 + .../web/api/htmlhyperlinkelementutils/index.html | 91 + files/ko/web/api/htmllielement/index.html | 77 + .../web/api/htmlmediaelement/autoplay/index.html | 79 + .../api/htmlmediaelement/canplay_event/index.html | 82 + .../canplaythrough_event/index.html | 82 + files/ko/web/api/htmlmediaelement/index.html | 282 + files/ko/web/api/htmloptionelement/index.html | 88 + files/ko/web/api/htmlselectelement/index.html | 166 + .../htmlselectelement/selectedoptions/index.html | 123 + files/ko/web/api/htmlspanelement/index.html | 61 + files/ko/web/api/htmltableelement/index.html | 109 + files/ko/web/api/htmltableelement/width/index.html | 28 + files/ko/web/api/htmltemplateelement/index.html | 58 + files/ko/web/api/htmltitleelement/index.html | 77 + files/ko/web/api/htmlvideoelement/index.html | 117 + .../ko/web/api/idledeadline/didtimeout/index.html | 58 + files/ko/web/api/idledeadline/index.html | 66 + .../imagecapture/getphotocapabilities/index.html | 79 + .../api/imagecapture/getphotosettings/index.html | 86 + files/ko/web/api/imagecapture/grabframe/index.html | 73 + .../web/api/imagecapture/imagecapture/index.html | 67 + files/ko/web/api/imagecapture/index.html | 123 + files/ko/web/api/imagecapture/takephoto/index.html | 82 + files/ko/web/api/imagecapture/track/index.html | 49 + files/ko/web/api/imagedata/index.html | 134 + files/ko/web/api/index.html | 33 + files/ko/web/api/index/index.html | 10 + .../basic_concepts_behind_indexeddb/index.html | 219 + files/ko/web/api/indexeddb_api/index.html | 157 + .../api/indexeddb_api/using_indexeddb/index.html | 1325 ++ .../web/api/intersection_observer_api/index.html | 598 + files/ko/web/api/intersectionobserver/index.html | 97 + .../intersectionobserver/index.html | 87 + .../api/intersectionobserver/observe/index.html | 65 + .../web/api/intersectionobserver/root/index.html | 57 + files/ko/web/api/location/index.html | 112 + files/ko/web/api/location/reload/index.html | 56 + files/ko/web/api/media_streams_api/index.html | 92 + .../api/mediadevices/enumeratedevices/index.html | 88 + .../web/api/mediadevices/getusermedia/index.html | 296 + files/ko/web/api/mediadevices/index.html | 122 + .../api/mediastream_image_capture_api/index.html | 100 + .../mediastreamtrack/applyconstraints/index.html | 91 + files/ko/web/api/mediastreamtrack/clone/index.html | 46 + .../ko/web/api/mediastreamtrack/enabled/index.html | 83 + .../mediastreamtrack/getcapabilities/index.html | 48 + .../api/mediastreamtrack/getconstraints/index.html | 62 + .../api/mediastreamtrack/getsettings/index.html | 49 + files/ko/web/api/mediastreamtrack/id/index.html | 50 + files/ko/web/api/mediastreamtrack/index.html | 135 + files/ko/web/api/mediastreamtrack/kind/index.html | 59 + files/ko/web/api/mediastreamtrack/label/index.html | 54 + files/ko/web/api/mediastreamtrack/muted/index.html | 67 + .../web/api/mediastreamtrack/readystate/index.html | 60 + files/ko/web/api/mediastreamtrack/stop/index.html | 82 + files/ko/web/api/mediatrackconstraints/index.html | 178 + files/ko/web/api/messageevent/index.html | 104 + files/ko/web/api/mouseevent/clientx/index.html | 82 + files/ko/web/api/mouseevent/index.html | 188 + files/ko/web/api/mozmmsevent/index.html | 82 + files/ko/web/api/mozmmsmessage/index.html | 83 + .../ko/web/api/mozmobilemessagemanager/index.html | 101 + files/ko/web/api/mozmobilemessagethread/index.html | 40 + files/ko/web/api/mozsmsevent/index.html | 109 + files/ko/web/api/mozsmsfilter/index.html | 108 + files/ko/web/api/mozsmsmanager/index.html | 95 + files/ko/web/api/mozsmsmessage/index.html | 56 + files/ko/web/api/mozsmssegmentinfo/index.html | 36 + files/ko/web/api/mutationobserver/index.html | 240 + files/ko/web/api/navigator/battery/index.html | 24 + files/ko/web/api/navigator/geolocation/index.html | 50 + files/ko/web/api/navigator/index.html | 137 + files/ko/web/api/navigator/mediadevices/index.html | 56 + .../web/api/navigator/mozmobilemessage/index.html | 58 + .../web/api/navigator/moznotification/index.html | 63 + files/ko/web/api/navigator/mozsms/index.html | 67 + .../navigator/registerprotocolhandler/index.html | 125 + files/ko/web/api/navigator/share/index.html | 68 + files/ko/web/api/navigatorid/index.html | 74 + files/ko/web/api/navigatorlanguage/index.html | 65 + .../web/api/navigatorlanguage/language/index.html | 133 + files/ko/web/api/navigatoronline/index.html | 63 + .../online_and_offline_events/index.html | 107 + .../api/networkinformation/connection/index.html | 105 + files/ko/web/api/networkinformation/index.html | 90 + files/ko/web/api/node/appendchild/index.html | 125 + files/ko/web/api/node/childnodes/index.html | 51 + files/ko/web/api/node/clonenode/index.html | 160 + files/ko/web/api/node/contains/index.html | 105 + files/ko/web/api/node/firstchild/index.html | 67 + files/ko/web/api/node/haschildnodes/index.html | 42 + files/ko/web/api/node/index.html | 263 + files/ko/web/api/node/innertext/index.html | 88 + files/ko/web/api/node/insertbefore/index.html | 167 + files/ko/web/api/node/lastchild/index.html | 25 + files/ko/web/api/node/nextsibling/index.html | 83 + files/ko/web/api/node/normalize/index.html | 56 + files/ko/web/api/node/ownerdocument/index.html | 63 + files/ko/web/api/node/previoussibling/index.html | 42 + files/ko/web/api/node/replacechild/index.html | 71 + files/ko/web/api/node/textcontent/index.html | 111 + files/ko/web/api/nodefilter/index.html | 115 + files/ko/web/api/nodelist/entries/index.html | 70 + files/ko/web/api/nodelist/foreach/index.html | 118 + files/ko/web/api/nodelist/index.html | 153 + files/ko/web/api/nodelist/item/index.html | 44 + files/ko/web/api/nodelist/keys/index.html | 72 + files/ko/web/api/nodelist/length/index.html | 35 + files/ko/web/api/nodelist/values/index.html | 72 + files/ko/web/api/notification/index.html | 493 + .../ko/web/api/notification/permission/index.html | 43 + files/ko/web/api/notifications_api/index.html | 83 + .../web/api/notifyaudioavailableevent/index.html | 32 + .../web/api/offscreencanvas/getcontext/index.html | 117 + files/ko/web/api/offscreencanvas/height/index.html | 63 + files/ko/web/api/offscreencanvas/index.html | 153 + .../api/offscreencanvas/offscreencanvas/index.html | 74 + files/ko/web/api/offscreencanvas/toblob/index.html | 77 + files/ko/web/api/offscreencanvas/width/index.html | 63 + files/ko/web/api/page_visibility_api/index.html | 141 + files/ko/web/api/parentnode/append/index.html | 134 + .../api/parentnode/childelementcount/index.html | 97 + files/ko/web/api/parentnode/children/index.html | 85 + files/ko/web/api/parentnode/index.html | 80 + files/ko/web/api/parentnode/prepend/index.html | 133 + files/ko/web/api/performance/index.html | 138 + files/ko/web/api/performance/mark/index.html | 101 + files/ko/web/api/performance/now/index.html | 99 + files/ko/web/api/performanceentry/index.html | 142 + files/ko/web/api/photocapabilities/index.html | 84 + files/ko/web/api/plugin/index.html | 67 + files/ko/web/api/positionoptions/index.html | 64 + files/ko/web/api/push_api/index.html | 118 + files/ko/web/api/pushmanager/index.html | 111 + files/ko/web/api/pushmessagedata/index.html | 67 + files/ko/web/api/range/index.html | 142 + .../ko/web/api/range/selectnodecontents/index.html | 68 + files/ko/web/api/readablestream/index.html | 105 + files/ko/web/api/request/credentials/index.html | 70 + files/ko/web/api/request/index.html | 293 + files/ko/web/api/request/request/index.html | 214 + files/ko/web/api/rtcconfiguration/index.html | 97 + .../web/api/rtcdatachannelevent/channel/index.html | 63 + files/ko/web/api/rtcdatachannelevent/index.html | 77 + .../rtcdatachannelevent/index.html | 75 + .../web/api/rtcicecandidate/candidate/index.html | 84 + files/ko/web/api/rtcicecandidate/index.html | 90 + files/ko/web/api/rtcicecandidate/tojson/index.html | 49 + .../rtcpeerconnection/addicecandidate/index.html | 148 + .../web/api/rtcpeerconnection/addtrack/index.html | 208 + .../cantrickleicecandidates/index.html | 87 + .../ko/web/api/rtcpeerconnection/close/index.html | 72 + .../rtcpeerconnection/connectionstate/index.html | 111 + .../api/rtcpeerconnection/createanswer/index.html | 96 + .../rtcpeerconnection/createdatachannel/index.html | 146 + .../currentlocaldescription/index.html | 76 + .../currentremotedescription/index.html | 72 + .../generatecertificate/index.html | 69 + .../rtcpeerconnection/getconfiguration/index.html | 78 + .../getidentityassertion/index.html | 60 + .../api/rtcpeerconnection/getreceivers/index.html | 55 + .../api/rtcpeerconnection/getsenders/index.html | 55 + .../rtcpeerconnection/gettransceivers/index.html | 63 + .../rtcpeerconnection/icegatheringstate/index.html | 85 + .../icegatheringstatechange_event/index.html | 102 + files/ko/web/api/rtcpeerconnection/index.html | 356 + .../rtcpeerconnection/localdescription/index.html | 64 + .../onconnectionstatechange/index.html | 65 + .../api/rtcpeerconnection/ondatachannel/index.html | 62 + .../rtcpeerconnection/onicecandidate/index.html | 63 + .../onicegatheringstatechange/index.html | 76 + .../rtcpeerconnection/onidentityresult/index.html | 55 + .../web/api/rtcpeerconnection/ontrack/index.html | 63 + .../api/rtcpeerconnection/removetrack/index.html | 80 + .../api/rtcpeerconnection/restartice/index.html | 80 + .../rtcpeerconnection/rtcpeerconnection/index.html | 59 + .../rtcpeerconnection/setconfiguration/index.html | 99 + .../setidentityprovider/index.html | 66 + .../setlocaldescription/index.html | 125 + .../rtcpeerconnectioniceevent/candidate/index.html | 56 + .../web/api/rtcpeerconnectioniceevent/index.html | 76 + files/ko/web/api/rtcsessiondescription/index.html | 129 + .../web/api/rtcsessiondescription/sdp/index.html | 69 + .../web/api/rtcsessiondescription/type/index.html | 65 + .../web/api/screen.onorientationchange/index.html | 85 + files/ko/web/api/screen/index.html | 76 + files/ko/web/api/screen/lockorientation/index.html | 92 + files/ko/web/api/screen/orientation/index.html | 120 + .../ko/web/api/screen/unlockorientation/index.html | 62 + files/ko/web/api/selection/index.html | 209 + files/ko/web/api/selection/tostring/index.html | 58 + files/ko/web/api/server-sent_events/index.html | 77 + files/ko/web/api/service_worker_api/index.html | 175 + .../using_service_workers/index.html | 521 + files/ko/web/api/serviceworker/index.html | 113 + .../web/api/serviceworker/onstatechange/index.html | 72 + .../serviceworkerglobalscope/clients/index.html | 55 + .../ko/web/api/serviceworkerglobalscope/index.html | 152 + .../notificationclick_event/index.html | 104 + .../skipwaiting/index.html | 71 + .../serviceworkerregistration/active/index.html | 59 + .../web/api/serviceworkerregistration/index.html | 150 + .../installing/index.html | 54 + .../navigationpreload/index.html | 39 + files/ko/web/api/sharedworker/index.html | 105 + files/ko/web/api/storage/index.html | 107 + files/ko/web/api/storage/key/index.html | 74 + files/ko/web/api/storage/length/index.html | 68 + files/ko/web/api/storage/removeitem/index.html | 134 + files/ko/web/api/storageevent/index.html | 79 + files/ko/web/api/streams_api/index.html | 152 + .../streams_api/using_readable_streams/index.html | 317 + .../\354\273\250\354\205\211/index.html" | 115 + files/ko/web/api/stylesheet/index.html | 61 + files/ko/web/api/svgrect/index.html | 90 + files/ko/web/api/text/index.html | 117 + files/ko/web/api/text/splittext/index.html | 95 + files/ko/web/api/text/text/index.html | 55 + files/ko/web/api/touch_events/index.html | 399 + files/ko/web/api/treewalker/currentnode/index.html | 63 + files/ko/web/api/treewalker/index.html | 168 + files/ko/web/api/url/createobjecturl/index.html | 101 + files/ko/web/api/url/hash/index.html | 62 + files/ko/web/api/url/host/index.html | 67 + files/ko/web/api/url/hostname/index.html | 59 + files/ko/web/api/url/href/index.html | 59 + files/ko/web/api/url/index.html | 143 + files/ko/web/api/url/origin/index.html | 61 + files/ko/web/api/url/password/index.html | 61 + files/ko/web/api/url/pathname/index.html | 60 + files/ko/web/api/url/port/index.html | 61 + files/ko/web/api/url/protocol/index.html | 61 + files/ko/web/api/url/revokeobjecturl/index.html | 68 + files/ko/web/api/url/search/index.html | 63 + files/ko/web/api/url/searchparams/index.html | 56 + files/ko/web/api/url/tojson/index.html | 52 + files/ko/web/api/url/tostring/index.html | 59 + files/ko/web/api/url/url/index.html | 107 + files/ko/web/api/url/username/index.html | 61 + files/ko/web/api/urlsearchparams/index.html | 136 + .../ko/web/api/urlsearchparams/tostring/index.html | 78 + .../api/urlsearchparams/urlsearchparams/index.html | 76 + files/ko/web/api/usvstring/index.html | 40 + files/ko/web/api/validitystate/index.html | 83 + files/ko/web/api/vreyeparameters/index.html | 88 + .../basic_concepts_behind_web_audio_api/index.html | 354 + files/ko/web/api/web_audio_api/index.html | 523 + .../web_audio_api/using_web_audio_api/index.html | 238 + files/ko/web/api/web_storage_api/index.html | 117 + .../using_the_web_storage_api/index.html | 218 + .../web/api/web_workers_api/basic_usage/index.html | 908 + files/ko/web/api/web_workers_api/index.html | 92 + .../structured_clone_algorithm/index.html | 153 + .../by_example/clearing_by_clicking/index.html | 110 + .../webgl_api/by_example/detect_webgl/index.html | 72 + .../api/webgl_api/by_example/hello_glsl/index.html | 168 + .../by_example/hello_vertex_attributes/index.html | 181 + files/ko/web/api/webgl_api/by_example/index.html | 83 + .../by_example/scissor_animation/index.html | 166 + .../by_example/simple_color_animation/index.html | 125 + .../by_example/textures_from_code/index.html | 174 + .../api/webgl_api/cross-domain_textures/index.html | 33 + files/ko/web/api/webgl_api/index.html | 255 + .../index.html | 236 + .../animating_objects_with_webgl/index.html | 125 + .../animating_textures_in_webgl/index.html | 117 + .../creating_3d_objects_using_webgl/index.html | 132 + .../tutorial/getting_started_with_webgl/index.html | 100 + files/ko/web/api/webgl_api/tutorial/index.html | 40 + .../tutorial/lighting_in_webgl/index.html | 177 + .../index.html | 98 + .../tutorial/using_textures_in_webgl/index.html | 183 + .../api/webgl_api/webgl_best_practices/index.html | 46 + files/ko/web/api/webglrenderbuffer/index.html | 64 + files/ko/web/api/webglshader/index.html | 171 + files/ko/web/api/webrtc_api/adapter.js/index.html | 40 + files/ko/web/api/webrtc_api/index.html | 225 + files/ko/web/api/webrtc_api/protocols/index.html | 57 + .../signaling_and_video_calling/index.html | 651 + .../api/webrtc_api/using_data_channels/index.html | 95 + files/ko/web/api/websocket/index.html | 248 + files/ko/web/api/websocket/readystate/index.html | 71 + files/ko/web/api/websocket/websocket/index.html | 51 + files/ko/web/api/window/alert/index.html | 71 + .../web/api/window/beforeunload_event/index.html | 105 + .../web/api/window/cancelanimationframe/index.html | 72 + files/ko/web/api/window/closed/index.html | 70 + files/ko/web/api/window/confirm/index.html | 76 + files/ko/web/api/window/console/index.html | 53 + files/ko/web/api/window/crypto/index.html | 75 + files/ko/web/api/window/customelements/index.html | 63 + .../ko/web/api/window/devicepixelratio/index.html | 180 + files/ko/web/api/window/document/index.html | 47 + files/ko/web/api/window/event/index.html | 52 + files/ko/web/api/window/frameelement/index.html | 61 + .../ko/web/api/window/getcomputedstyle/index.html | 137 + files/ko/web/api/window/getselection/index.html | 129 + files/ko/web/api/window/history/index.html | 59 + files/ko/web/api/window/index.html | 700 + files/ko/web/api/window/innerwidth/index.html | 78 + files/ko/web/api/window/length/index.html | 51 + files/ko/web/api/window/localstorage/index.html | 92 + files/ko/web/api/window/location/index.html | 213 + files/ko/web/api/window/matchmedia/index.html | 77 + files/ko/web/api/window/name/index.html | 32 + files/ko/web/api/window/navigator/index.html | 44 + files/ko/web/api/window/open/index.html | 665 + files/ko/web/api/window/opener/index.html | 52 + .../api/window/orientationchange_event/index.html | 66 + files/ko/web/api/window/outerwidth/index.html | 101 + files/ko/web/api/window/pageyoffset/index.html | 164 + files/ko/web/api/window/popstate_event/index.html | 66 + files/ko/web/api/window/postmessage/index.html | 183 + files/ko/web/api/window/prompt/index.html | 94 + .../api/window/requestanimationframe/index.html | 112 + .../web/api/window/requestidlecallback/index.html | 76 + files/ko/web/api/window/resize_event/index.html | 192 + files/ko/web/api/window/resizeto/index.html | 73 + files/ko/web/api/window/scrollto/index.html | 48 + files/ko/web/api/window/scrollx/index.html | 82 + files/ko/web/api/window/scrolly/index.html | 86 + files/ko/web/api/window/self/index.html | 72 + files/ko/web/api/window/sessionstorage/index.html | 101 + files/ko/web/api/window/status/index.html | 25 + files/ko/web/api/window/stop/index.html | 50 + files/ko/web/api/window/toolbar/index.html | 51 + files/ko/web/api/window/top/index.html | 55 + files/ko/web/api/window/unload_event/index.html | 126 + files/ko/web/api/window/window/index.html | 43 + files/ko/web/api/windoweventhandlers/index.html | 101 + .../windoweventhandlers/onhashchange/index.html | 159 + .../api/windoweventhandlers/onpopstate/index.html | 57 + .../api/windoweventhandlers/onstorage/index.html | 64 + .../ko/web/api/windowtimers/settimeout/index.html | 429 + files/ko/web/api/worker/index.html | 129 + files/ko/web/api/worker/postmessage/index.html | 205 + files/ko/web/api/writablestream/index.html | 144 + files/ko/web/api/xmlhttprequest/index.html | 194 + .../api/xmlhttprequest/setrequestheader/index.html | 55 + .../index.html | 231 + files/ko/web/api/xmlhttprequest/timeout/index.html | 123 + files/ko/web/api/xmlhttprequest/upload/index.html | 88 + files/ko/web/apps/design/index.html | 35 + .../marketplace_review_criteria/index.html | 77 + files/ko/web/css/-moz-image-region/index.html | 54 + files/ko/web/css/-webkit-line-clamp/index.html | 111 + .../web/css/-webkit-overflow-scrolling/index.html | 86 + files/ko/web/css/@charset/index.html | 78 + .../ko/web/css/@font-face/font-display/index.html | 101 + files/ko/web/css/@font-face/index.html | 216 + files/ko/web/css/@import/index.html | 83 + files/ko/web/css/@keyframes/index.html | 152 + files/ko/web/css/@media/index.html | 153 + .../web/css/@media/prefers-color-scheme/index.html | 89 + files/ko/web/css/@namespace/index.html | 78 + files/ko/web/css/@page/index.html | 96 + files/ko/web/css/@supports/index.html | 193 + files/ko/web/css/@viewport/height/index.html | 75 + files/ko/web/css/@viewport/index.html | 120 + files/ko/web/css/@viewport/viewport-fit/index.html | 72 + files/ko/web/css/@viewport/zoom/index.html | 70 + files/ko/web/css/_colon_active/index.html | 127 + files/ko/web/css/_colon_checked/index.html | 193 + files/ko/web/css/_colon_default/index.html | 101 + files/ko/web/css/_colon_defined/index.html | 118 + files/ko/web/css/_colon_disabled/index.html | 129 + files/ko/web/css/_colon_enabled/index.html | 100 + files/ko/web/css/_colon_first-child/index.html | 134 + files/ko/web/css/_colon_first-of-type/index.html | 115 + files/ko/web/css/_colon_first/index.html | 97 + files/ko/web/css/_colon_focus-within/index.html | 96 + files/ko/web/css/_colon_focus/index.html | 116 + files/ko/web/css/_colon_fullscreen/index.html | 94 + files/ko/web/css/_colon_hover/index.html | 97 + files/ko/web/css/_colon_link/index.html | 105 + files/ko/web/css/_colon_not/index.html | 71 + files/ko/web/css/_colon_nth-child/index.html | 196 + files/ko/web/css/_colon_root/index.html | 78 + files/ko/web/css/_colon_visited/index.html | 121 + files/ko/web/css/_doublecolon_after/index.html | 179 + files/ko/web/css/_doublecolon_before/index.html | 237 + .../ko/web/css/_doublecolon_placeholder/index.html | 147 + files/ko/web/css/actual_value/index.html | 47 + files/ko/web/css/align-content/index.html | 297 + files/ko/web/css/all/index.html | 171 + .../css/all_about_the_containing_block/index.html | 263 + .../ko/web/css/alternative_style_sheets/index.html | 24 + files/ko/web/css/angle-percentage/index.html | 52 + files/ko/web/css/angle/index.html | 115 + files/ko/web/css/animation-delay/index.html | 85 + files/ko/web/css/animation-direction/index.html | 191 + files/ko/web/css/animation-duration/index.html | 140 + files/ko/web/css/animation-fill-mode/index.html | 241 + files/ko/web/css/animation/index.html | 349 + files/ko/web/css/at-rule/index.html | 76 + files/ko/web/css/attribute_selectors/index.html | 228 + files/ko/web/css/backdrop-filter/index.html | 146 + files/ko/web/css/backface-visibility/index.html | 217 + files/ko/web/css/background-attachment/index.html | 153 + files/ko/web/css/background-clip/index.html | 129 + files/ko/web/css/background-color/index.html | 169 + files/ko/web/css/background-image/index.html | 152 + files/ko/web/css/background-origin/index.html | 113 + files/ko/web/css/background-repeat/index.html | 233 + files/ko/web/css/background-size/index.html | 196 + files/ko/web/css/background/index.html | 178 + files/ko/web/css/basic-shape/index.html | 179 + files/ko/web/css/blend-mode/index.html | 404 + files/ko/web/css/border-bottom-color/index.html | 114 + files/ko/web/css/border-bottom-style/index.html | 134 + files/ko/web/css/border-bottom-width/index.html | 150 + files/ko/web/css/border-bottom/index.html | 109 + files/ko/web/css/border-collapse/index.html | 148 + files/ko/web/css/border-color/index.html | 184 + files/ko/web/css/border-image-outset/index.html | 113 + files/ko/web/css/border-image-repeat/index.html | 125 + files/ko/web/css/border-image-slice/index.html | 107 + files/ko/web/css/border-image-source/index.html | 78 + files/ko/web/css/border-image-width/index.html | 128 + files/ko/web/css/border-image/index.html | 168 + files/ko/web/css/border-left-color/index.html | 114 + files/ko/web/css/border-left-style/index.html | 134 + files/ko/web/css/border-left-width/index.html | 150 + files/ko/web/css/border-left/index.html | 109 + files/ko/web/css/border-radius/index.html | 228 + files/ko/web/css/border-right-color/index.html | 114 + files/ko/web/css/border-right-style/index.html | 134 + files/ko/web/css/border-right-width/index.html | 150 + files/ko/web/css/border-right/index.html | 109 + files/ko/web/css/border-spacing/index.html | 131 + files/ko/web/css/border-style/index.html | 241 + files/ko/web/css/border-top-color/index.html | 114 + files/ko/web/css/border-top-style/index.html | 134 + files/ko/web/css/border-top-width/index.html | 148 + files/ko/web/css/border-top/index.html | 109 + files/ko/web/css/border-width/index.html | 194 + files/ko/web/css/border/index.html | 151 + files/ko/web/css/box-shadow/index.html | 126 + files/ko/web/css/box-sizing/index.html | 119 + files/ko/web/css/calc()/index.html | 160 + files/ko/web/css/cascade/index.html | 229 + files/ko/web/css/child_combinator/index.html | 92 + files/ko/web/css/class_selectors/index.html | 107 + files/ko/web/css/clear/index.html | 231 + files/ko/web/css/clip-path/index.html | 614 + files/ko/web/css/color/index.html | 163 + files/ko/web/css/color_value/index.html | 1374 ++ files/ko/web/css/comments/index.html | 54 + files/ko/web/css/common_css_questions/index.html | 199 + files/ko/web/css/computed_value/index.html | 55 + files/ko/web/css/contain/index.html | 206 + files/ko/web/css/content/index.html | 297 + .../ko/web/css/css_animated_properties/index.html | 14 + files/ko/web/css/css_animations/index.html | 87 + .../css_animations/using_css_animations/index.html | 330 + .../border-image_generator/index.html | 2627 +++ .../border-radius_generator/index.html | 1601 ++ .../box-shadow_generator/index.html | 2881 +++ .../using_css_multiple_backgrounds/index.html | 55 + .../web/css/css_backgrounds_and_borders/index.html | 113 + .../scaling_background_images/index.html | 137 + .../using_multiple_backgrounds/index.html | 59 + .../ko/web/css/css_basic_user_interface/index.html | 75 + files/ko/web/css/css_box_model/index.html | 113 + .../introduction_to_the_css_box_model/index.html | 70 + .../mastering_margin_collapsing/index.html | 82 + files/ko/web/css/css_charsets/index.html | 44 + files/ko/web/css/css_color/index.html | 110 + .../css/css_colors/color_picker_tool/index.html | 3238 ++++ files/ko/web/css/css_columns/index.html | 89 + files/ko/web/css/css_conditional_rules/index.html | 44 + files/ko/web/css/css_containment/index.html | 123 + files/ko/web/css/css_device_adaptation/index.html | 42 + .../aligning_items_in_a_flex_container/index.html | 211 + .../index.html" | 236 + .../ko/web/css/css_flexible_box_layout/index.html | 108 + .../index.html" | 141 + files/ko/web/css/css_flow_layout/index.html | 46 + .../intro_to_formatting_contexts/index.html | 92 + .../index.html" | 72 + .../index.html" | 122 + .../index.html" | 92 + .../index.html" | 73 + files/ko/web/css/css_fonts/index.html | 102 + files/ko/web/css/css_generated_content/index.html | 43 + .../basic_concepts_of_grid_layout/index.html | 765 + .../css_grid_layout/grid_template_areas/index.html | 533 + files/ko/web/css/css_grid_layout/index.html | 253 + .../layout_using_named_grid_lines/index.html | 497 + .../line-based_placement_with_css_grid/index.html | 649 + .../relationship_of_grid_layout/index.html | 625 + .../implementing_image_sprites_in_css/index.html | 56 + files/ko/web/css/css_images/index.html | 107 + .../css/css_images/using_css_gradients/index.html | 750 + files/ko/web/css/css_lists_and_counters/index.html | 57 + .../using_css_counters/index.html | 148 + files/ko/web/css/css_logical_properties/index.html | 136 + files/ko/web/css/css_masks/index.html | 68 + files/ko/web/css/css_miscellaneous/index.html | 43 + files/ko/web/css/css_namespaces/index.html | 42 + files/ko/web/css/css_pages/index.html | 73 + files/ko/web/css/css_positioning/index.html | 61 + .../adding_z-index/index.html | 157 + .../understanding_z_index/index.html | 32 + .../stacking_and_float/index.html | 146 + .../stacking_context_example_1/index.html | 120 + .../stacking_context_example_2/index.html | 123 + .../stacking_context_example_3/index.html | 167 + .../stacking_without_z-index/index.html | 145 + .../the_stacking_context/index.html | 240 + files/ko/web/css/css_ruby/index.html | 45 + files/ko/web/css/css_scroll_snap_points/index.html | 50 + files/ko/web/css/css_selectors/index.html | 133 + files/ko/web/css/css_shapes/index.html | 80 + files/ko/web/css/css_table/index.html | 48 + files/ko/web/css/css_text/index.html | 71 + files/ko/web/css/css_text_decoration/index.html | 69 + files/ko/web/css/css_transforms/index.html | 66 + .../css_transforms/using_css_transforms/index.html | 80 + files/ko/web/css/css_transitions/index.html | 59 + .../using_css_transitions/index.html | 1058 ++ files/ko/web/css/css_types/index.html | 100 + files/ko/web/css/css_variables/index.html | 37 + files/ko/web/css/css_writing_modes/index.html | 57 + .../index.html" | 497 + files/ko/web/css/cursor/index.html | 315 + .../index.html | 70 + files/ko/web/css/descendant_combinator/index.html | 108 + files/ko/web/css/display-internal/index.html | 131 + files/ko/web/css/display/index.html | 234 + files/ko/web/css/filter-function/blur()/index.html | 40 + .../css/filter-function/brightness()/index.html | 41 + .../web/css/filter-function/contrast()/index.html | 41 + files/ko/web/css/filter-function/index.html | 210 + files/ko/web/css/filter/index.html | 1138 ++ files/ko/web/css/filter_effects/index.html | 70 + files/ko/web/css/flex-basis/index.html | 209 + files/ko/web/css/flex-direction/index.html | 155 + files/ko/web/css/flex-flow/index.html | 91 + files/ko/web/css/flex-grow/index.html | 123 + files/ko/web/css/flex-shrink/index.html | 123 + files/ko/web/css/flex-wrap/index.html | 159 + files/ko/web/css/flex/index.html | 267 + files/ko/web/css/float/index.html | 215 + files/ko/web/css/font-family/index.html | 177 + files/ko/web/css/font-feature-settings/index.html | 128 + files/ko/web/css/font-size/index.html | 220 + files/ko/web/css/font-synthesis/index.html | 111 + files/ko/web/css/font-weight/index.html | 283 + files/ko/web/css/font/index.html | 345 + files/ko/web/css/frequency/index.html | 75 + files/ko/web/css/gap/index.html | 220 + .../web/css/general_sibling_combinator/index.html | 80 + .../web/css/getting_started/javascript/index.html | 144 + .../css/getting_started/svg_graphics/index.html | 195 + .../css/getting_started/xbl_bindings/index.html | 198 + .../ko/web/css/getting_started/xml_data/index.html | 186 + .../getting_started/xul_user_interfaces/index.html | 315 + files/ko/web/css/gradient/index.html | 160 + files/ko/web/css/grid-area/index.html | 206 + files/ko/web/css/grid/index.html | 192 + files/ko/web/css/height/index.html | 175 + files/ko/web/css/hyphens/index.html | 159 + files/ko/web/css/id_selectors/index.html | 85 + files/ko/web/css/image-rendering/index.html | 120 + files/ko/web/css/image/index.html | 175 + files/ko/web/css/index.html | 96 + files/ko/web/css/index/index.html | 10 + files/ko/web/css/inherit/index.html | 77 + files/ko/web/css/inheritance/index.html | 54 + files/ko/web/css/initial/index.html | 78 + files/ko/web/css/initial_value/index.html | 51 + files/ko/web/css/integer/index.html | 93 + files/ko/web/css/isolation/index.html | 114 + files/ko/web/css/layout_mode/index.html | 32 + files/ko/web/css/length-percentage/index.html | 55 + files/ko/web/css/length/index.html | 252 + files/ko/web/css/letter-spacing/index.html | 135 + files/ko/web/css/line-break/index.html | 112 + files/ko/web/css/linear-gradient()/index.html | 204 + files/ko/web/css/margin-bottom/index.html | 100 + files/ko/web/css/margin-left/index.html | 160 + files/ko/web/css/margin-right/index.html | 159 + files/ko/web/css/margin-top/index.html | 100 + files/ko/web/css/margin/index.html | 176 + files/ko/web/css/mask/index.html | 117 + files/ko/web/css/max-height/index.html | 127 + files/ko/web/css/max-width/index.html | 173 + files/ko/web/css/media_queries/index.html | 103 + .../index.html | 93 + files/ko/web/css/min-height/index.html | 123 + files/ko/web/css/min-width/index.html | 122 + files/ko/web/css/mix-blend-mode/index.html | 651 + files/ko/web/css/number/index.html | 85 + files/ko/web/css/object-fit/index.html | 170 + files/ko/web/css/object-position/index.html | 123 + files/ko/web/css/opacity/index.html | 144 + files/ko/web/css/order/index.html | 110 + files/ko/web/css/outline-style/index.html | 256 + files/ko/web/css/outline-width/index.html | 141 + files/ko/web/css/outline/index.html | 158 + files/ko/web/css/overflow-wrap/index.html | 118 + files/ko/web/css/overflow/index.html | 146 + files/ko/web/css/padding-bottom/index.html | 111 + files/ko/web/css/padding-left/index.html | 109 + files/ko/web/css/padding-right/index.html | 109 + files/ko/web/css/padding-top/index.html | 111 + files/ko/web/css/padding/index.html | 158 + files/ko/web/css/paged_media/index.html | 19 + files/ko/web/css/paint-order/index.html | 110 + files/ko/web/css/percentage/index.html | 86 + files/ko/web/css/pointer-events/index.html | 168 + files/ko/web/css/position/index.html | 316 + files/ko/web/css/position_value/index.html | 135 + files/ko/web/css/pseudo-classes/index.html | 166 + files/ko/web/css/pseudo-elements/index.html | 124 + files/ko/web/css/reference/index.html | 190 + .../web/css/reference/property_template/index.html | 131 + files/ko/web/css/replaced_element/index.html | 65 + files/ko/web/css/resolved_value/index.html | 39 + files/ko/web/css/revert/index.html | 137 + files/ko/web/css/selector_list/index.html | 101 + files/ko/web/css/shorthand_properties/index.html | 156 + files/ko/web/css/specificity/index.html | 331 + files/ko/web/css/specified_value/index.html | 67 + files/ko/web/css/syntax/index.html | 79 + files/ko/web/css/tab-size/index.html | 121 + files/ko/web/css/text-align/index.html | 234 + files/ko/web/css/text-decoration/index.html | 133 + files/ko/web/css/text-shadow/index.html | 126 + files/ko/web/css/time/index.html | 88 + files/ko/web/css/transform-function/index.html | 158 + .../web/css/transform-function/matrix()/index.html | 89 + .../web/css/transform-function/scalex()/index.html | 101 + files/ko/web/css/transform/index.html | 151 + files/ko/web/css/transition-delay/index.html | 395 + files/ko/web/css/transition/index.html | 150 + files/ko/web/css/type_selectors/index.html | 86 + files/ko/web/css/universal_selectors/index.html | 105 + files/ko/web/css/unset/index.html | 120 + files/ko/web/css/url/index.html | 79 + files/ko/web/css/used_value/index.html | 127 + files/ko/web/css/user-select/index.html | 123 + .../web/css/using_css_custom_properties/index.html | 262 + .../ko/web/css/value_definition_syntax/index.html | 436 + files/ko/web/css/var()/index.html | 99 + files/ko/web/css/vertical-align/index.html | 246 + files/ko/web/css/visibility/index.html | 176 + files/ko/web/css/white-space/index.html | 242 + files/ko/web/css/width/index.html | 200 + files/ko/web/css/will-change/index.html | 171 + files/ko/web/css/word-break/index.html | 141 + files/ko/web/css/word-spacing/index.html | 127 + files/ko/web/css/z-index/index.html | 138 + .../index.html" | 244 + .../index.html" | 346 + .../\353\260\260\354\271\230/index.html" | 369 + .../\354\203\201\354\236\220/index.html" | 330 + .../index.html" | 126 + .../index.html" | 474 + .../index.html" | 149 + .../index.html" | 83 + files/ko/web/events/abort/index.html | 73 + files/ko/web/events/blur/index.html | 154 + files/ko/web/events/chargingchange/index.html | 66 + files/ko/web/events/domcontentloaded/index.html | 77 + files/ko/web/events/domsubtreemodified/index.html | 17 + files/ko/web/events/index.html | 3114 +++ files/ko/web/events/load/index.html | 128 + files/ko/web/events/message/index.html | 152 + files/ko/web/exslt/index.html | 96 + files/ko/web/guide/ajax/community/index.html | 21 + files/ko/web/guide/ajax/getting_started/index.html | 296 + files/ko/web/guide/ajax/index.html | 71 + files/ko/web/guide/api/index.html | 24 + .../web/guide/api/vibration/vibration/index.html | 100 + .../index.html | 321 + .../web/guide/audio_and_video_delivery/index.html | 554 + .../guide/css/block_formatting_context/index.html | 198 + files/ko/web/guide/css/media_queries/index.html | 386 + .../guide/css/visual_formatting_model/index.html | 223 + files/ko/web/guide/dom/index.html | 21 + .../guide/dom/using_full_screen_mode/index.html | 198 + .../creating_and_triggering_events/index.html | 140 + files/ko/web/guide/events/index.html | 51 + .../overview_of_events_and_handlers/index.html | 142 + .../web/guide/html/content_categories/index.html | 180 + .../ko/web/guide/html/content_editable/index.html | 65 + files/ko/web/guide/index.html | 31 + files/ko/web/guide/index/index.html | 11 + files/ko/web/guide/mobile/index.html | 77 + .../ko/web/guide/mobile/separate_sites/index.html | 53 + .../index.html" | 141 + .../index.html" | 48 + files/ko/web/html/applying_color/index.html | 510 + .../ko/web/html/attributes/autocomplete/index.html | 247 + .../ko/web/html/attributes/crossorigin/index.html | 96 + files/ko/web/html/attributes/index.html | 733 + files/ko/web/html/block-level_elements/index.html | 127 + files/ko/web/html/canvas/index.html | 135 + .../manipulating_video_using_canvas/index.html | 164 + .../canvas/tutorial/advanced_animations/index.html | 376 + .../tutorial/applying_styles_and_colors/index.html | 732 + .../canvas/tutorial/basic_animations/index.html | 310 + .../html/canvas/tutorial/basic_usage/index.html | 154 + .../canvas/tutorial/compositing/example/index.html | 293 + .../html/canvas/tutorial/compositing/index.html | 106 + .../html/canvas/tutorial/drawing_shapes/index.html | 577 + .../ko/web/html/canvas/tutorial/finale/index.html | 51 + .../hit_regions_and_accessibility/index.html | 97 + files/ko/web/html/canvas/tutorial/index.html | 62 + .../canvas/tutorial/optimizing_canvas/index.html | 110 + .../html/canvas/tutorial/using_images/index.html | 347 + .../tutorial/\353\263\200\355\230\225/index.html" | 286 + files/ko/web/html/cors_enabled_image/index.html | 112 + files/ko/web/html/element/a/index.html | 489 + files/ko/web/html/element/abbr/index.html | 194 + files/ko/web/html/element/address/index.html | 128 + files/ko/web/html/element/applet/index.html | 115 + files/ko/web/html/element/area/index.html | 184 + files/ko/web/html/element/article/index.html | 137 + files/ko/web/html/element/aside/index.html | 122 + files/ko/web/html/element/audio/index.html | 417 + files/ko/web/html/element/b/index.html | 121 + files/ko/web/html/element/base/index.html | 136 + files/ko/web/html/element/bdo/index.html | 111 + files/ko/web/html/element/blockquote/index.html | 131 + files/ko/web/html/element/body/index.html | 166 + files/ko/web/html/element/br/index.html | 130 + files/ko/web/html/element/button/index.html | 293 + files/ko/web/html/element/canvas/index.html | 194 + files/ko/web/html/element/caption/index.html | 153 + files/ko/web/html/element/center/index.html | 51 + files/ko/web/html/element/cite/index.html | 143 + files/ko/web/html/element/code/index.html | 109 + files/ko/web/html/element/col/index.html | 159 + files/ko/web/html/element/colgroup/index.html | 142 + files/ko/web/html/element/command/index.html | 111 + files/ko/web/html/element/content/index.html | 101 + files/ko/web/html/element/data/index.html | 104 + files/ko/web/html/element/datalist/index.html | 115 + files/ko/web/html/element/dd/index.html | 111 + files/ko/web/html/element/del/index.html | 140 + files/ko/web/html/element/details/index.html | 284 + files/ko/web/html/element/dfn/index.html | 196 + files/ko/web/html/element/dialog/index.html | 180 + files/ko/web/html/element/div/index.html | 147 + files/ko/web/html/element/dl/index.html | 223 + files/ko/web/html/element/dt/index.html | 99 + files/ko/web/html/element/element/index.html | 57 + files/ko/web/html/element/em/index.html | 124 + files/ko/web/html/element/embed/index.html | 81 + files/ko/web/html/element/fieldset/index.html | 151 + files/ko/web/html/element/figcaption/index.html | 88 + files/ko/web/html/element/figure/index.html | 175 + files/ko/web/html/element/font/index.html | 48 + files/ko/web/html/element/footer/index.html | 109 + files/ko/web/html/element/form/index.html | 186 + files/ko/web/html/element/frame/index.html | 56 + files/ko/web/html/element/frameset/index.html | 39 + files/ko/web/html/element/head/index.html | 129 + files/ko/web/html/element/header/index.html | 109 + .../web/html/element/heading_elements/index.html | 242 + files/ko/web/html/element/hgroup/index.html | 105 + files/ko/web/html/element/hr/index.html | 131 + files/ko/web/html/element/html/index.html | 123 + files/ko/web/html/element/i/index.html | 119 + files/ko/web/html/element/iframe/index.html | 253 + files/ko/web/html/element/img/index.html | 389 + files/ko/web/html/element/index.html | 102 + files/ko/web/html/element/input/button/index.html | 343 + files/ko/web/html/element/input/date/index.html | 497 + files/ko/web/html/element/input/file/index.html | 509 + files/ko/web/html/element/input/index.html | 865 + files/ko/web/html/element/input/radio/index.html | 367 + files/ko/web/html/element/ins/index.html | 137 + files/ko/web/html/element/kbd/index.html | 208 + files/ko/web/html/element/keygen/index.html | 122 + files/ko/web/html/element/label/index.html | 189 + files/ko/web/html/element/legend/index.html | 91 + files/ko/web/html/element/li/index.html | 154 + files/ko/web/html/element/link/index.html | 365 + files/ko/web/html/element/main/index.html | 172 + files/ko/web/html/element/map/index.html | 121 + files/ko/web/html/element/mark/index.html | 161 + files/ko/web/html/element/menu/index.html | 132 + files/ko/web/html/element/meta/index.html | 151 + files/ko/web/html/element/meta/name/index.html | 312 + files/ko/web/html/element/meter/index.html | 142 + files/ko/web/html/element/nav/index.html | 101 + files/ko/web/html/element/noscript/index.html | 113 + files/ko/web/html/element/object/index.html | 117 + files/ko/web/html/element/ol/index.html | 207 + files/ko/web/html/element/optgroup/index.html | 120 + files/ko/web/html/element/option/index.html | 101 + files/ko/web/html/element/output/index.html | 104 + files/ko/web/html/element/p/index.html | 175 + files/ko/web/html/element/param/index.html | 116 + files/ko/web/html/element/pre/index.html | 150 + files/ko/web/html/element/progress/index.html | 122 + files/ko/web/html/element/q/index.html | 111 + files/ko/web/html/element/rb/index.html | 150 + files/ko/web/html/element/rp/index.html | 134 + files/ko/web/html/element/rt/index.html | 129 + files/ko/web/html/element/rtc/index.html | 121 + files/ko/web/html/element/ruby/index.html | 110 + files/ko/web/html/element/s/index.html | 126 + files/ko/web/html/element/samp/index.html | 156 + files/ko/web/html/element/script/index.html | 220 + files/ko/web/html/element/section/index.html | 123 + files/ko/web/html/element/select/index.html | 210 + files/ko/web/html/element/slot/index.html | 122 + files/ko/web/html/element/small/index.html | 117 + files/ko/web/html/element/span/index.html | 125 + files/ko/web/html/element/strong/index.html | 135 + files/ko/web/html/element/style/index.html | 201 + files/ko/web/html/element/sub/index.html | 137 + files/ko/web/html/element/summary/index.html | 151 + files/ko/web/html/element/sup/index.html | 142 + files/ko/web/html/element/table/index.html | 370 + files/ko/web/html/element/tbody/index.html | 320 + files/ko/web/html/element/td/index.html | 213 + files/ko/web/html/element/template/index.html | 165 + files/ko/web/html/element/textarea/index.html | 158 + files/ko/web/html/element/th/index.html | 226 + files/ko/web/html/element/thead/index.html | 270 + files/ko/web/html/element/time/index.html | 169 + files/ko/web/html/element/title/index.html | 134 + files/ko/web/html/element/tr/index.html | 217 + files/ko/web/html/element/track/index.html | 175 + files/ko/web/html/element/u/index.html | 206 + files/ko/web/html/element/ul/index.html | 188 + files/ko/web/html/element/var/index.html | 116 + files/ko/web/html/element/video/index.html | 145 + files/ko/web/html/element/wbr/index.html | 111 + .../html/global_attributes/accesskey/index.html | 139 + .../global_attributes/autocapitalize/index.html | 47 + .../global_attributes/contenteditable/index.html | 76 + .../html/global_attributes/contextmenu/index.html | 121 + .../html/global_attributes/data-_star_/index.html | 79 + files/ko/web/html/global_attributes/dir/index.html | 89 + .../html/global_attributes/draggable/index.html | 66 + .../web/html/global_attributes/dropzone/index.html | 53 + .../web/html/global_attributes/hidden/index.html | 69 + files/ko/web/html/global_attributes/id/index.html | 72 + files/ko/web/html/global_attributes/index.html | 166 + .../html/global_attributes/inputmode/index.html | 64 + files/ko/web/html/global_attributes/is/index.html | 64 + .../web/html/global_attributes/itemid/index.html | 105 + .../web/html/global_attributes/itemprop/index.html | 472 + .../web/html/global_attributes/itemref/index.html | 95 + .../html/global_attributes/itemscope/index.html | 284 + .../ko/web/html/global_attributes/lang/index.html | 90 + .../ko/web/html/global_attributes/part/index.html | 43 + .../ko/web/html/global_attributes/slot/index.html | 48 + .../html/global_attributes/spellcheck/index.html | 67 + .../ko/web/html/global_attributes/style/index.html | 69 + .../web/html/global_attributes/tabindex/index.html | 92 + .../ko/web/html/global_attributes/title/index.html | 125 + .../html/global_attributes/translate/index.html | 64 + .../index.html" | 64 + files/ko/web/html/html5/index.html | 122 + .../html/html5/introduction_to_html5/index.html | 40 + .../index.html" | 367 + files/ko/web/html/index.html | 117 + files/ko/web/html/index/index.html | 10 + files/ko/web/html/inline_elements/index.html | 169 + files/ko/web/html/link_types/index.html | 332 + files/ko/web/html/preloading_content/index.html | 233 + .../html/quirks_mode_and_standards_mode/index.html | 46 + files/ko/web/html/reference/index.html | 32 + .../html/using_the_application_cache/index.html | 338 + files/ko/web/http/authentication/index.html | 111 + .../index.html | 65 + .../web/http/basics_of_http/data_uris/index.html | 162 + .../basics_of_http/evolution_of_http/index.html | 201 + .../identifying_resources_on_the_web/index.html | 167 + files/ko/web/http/basics_of_http/index.html | 51 + .../mime_types/common_types/index.html | 305 + .../web/http/basics_of_http/mime_types/index.html | 306 + files/ko/web/http/caching/index.html | 193 + files/ko/web/http/compression/index.html | 64 + files/ko/web/http/conditional_requests/index.html | 139 + .../connection_management_in_http_1.x/index.html | 86 + files/ko/web/http/content_negotiation/index.html | 129 + files/ko/web/http/cookies/index.html | 201 + .../http/cors/errors/corsdidnotsucceed/index.html | 22 + .../http/cors/errors/corsrequestnothttp/index.html | 43 + files/ko/web/http/cors/errors/index.html | 76 + files/ko/web/http/cors/index.html | 476 + .../ko/web/http/headers/accept-charset/index.html | 80 + .../ko/web/http/headers/accept-encoding/index.html | 109 + .../ko/web/http/headers/accept-language/index.html | 89 + files/ko/web/http/headers/accept-ranges/index.html | 72 + files/ko/web/http/headers/accept/index.html | 81 + .../access-control-allow-credentials/index.html | 90 + .../access-control-allow-headers/index.html | 117 + .../headers/access-control-allow-origin/index.html | 140 + .../access-control-request-headers/index.html | 71 + .../access-control-request-method/index.html | 71 + files/ko/web/http/headers/age/index.html | 69 + files/ko/web/http/headers/allow/index.html | 67 + files/ko/web/http/headers/authorization/index.html | 90 + files/ko/web/http/headers/cache-control/index.html | 171 + files/ko/web/http/headers/connection/index.html | 53 + .../http/headers/content-disposition/index.html | 133 + .../web/http/headers/content-encoding/index.html | 94 + .../web/http/headers/content-language/index.html | 92 + .../ko/web/http/headers/content-length/index.html | 60 + .../web/http/headers/content-location/index.html | 66 + files/ko/web/http/headers/content-range/index.html | 89 + .../content-security-policy/default-src/index.html | 149 + .../content-security-policy/img-src/index.html | 84 + .../headers/content-security-policy/index.html | 259 + .../content-security-policy/report-to/index.html | 80 + .../content-security-policy/script-src/index.html | 167 + files/ko/web/http/headers/content-type/index.html | 108 + files/ko/web/http/headers/cookie/index.html | 66 + files/ko/web/http/headers/date/index.html | 81 + files/ko/web/http/headers/dnt/index.html | 83 + files/ko/web/http/headers/etag/index.html | 99 + files/ko/web/http/headers/expect/index.html | 90 + files/ko/web/http/headers/expires/index.html | 75 + files/ko/web/http/headers/forwarded/index.html | 110 + files/ko/web/http/headers/from/index.html | 70 + files/ko/web/http/headers/host/index.html | 70 + .../web/http/headers/if-modified-since/index.html | 91 + files/ko/web/http/headers/if-range/index.html | 104 + files/ko/web/http/headers/index.html | 444 + files/ko/web/http/headers/keep-alive/index.html | 88 + files/ko/web/http/headers/last-modified/index.html | 92 + files/ko/web/http/headers/origin/index.html | 88 + files/ko/web/http/headers/pragma/index.html | 84 + files/ko/web/http/headers/range/index.html | 84 + files/ko/web/http/headers/referer/index.html | 79 + files/ko/web/http/headers/retry-after/index.html | 80 + files/ko/web/http/headers/server/index.html | 70 + files/ko/web/http/headers/set-cookie/index.html | 161 + .../headers/strict-transport-security/index.html | 108 + .../web/http/headers/transfer-encoding/index.html | 104 + files/ko/web/http/headers/vary/index.html | 82 + files/ko/web/http/headers/via/index.html | 79 + .../ko/web/http/headers/x-forwarded-for/index.html | 81 + .../web/http/headers/x-forwarded-host/index.html | 74 + .../web/http/headers/x-forwarded-proto/index.html | 61 + .../ko/web/http/headers/x-frame-options/index.html | 129 + .../web/http/headers/x-xss-protection/index.html | 83 + files/ko/web/http/index.html | 87 + files/ko/web/http/index/index.html | 11 + files/ko/web/http/messages/index.html | 147 + files/ko/web/http/methods/connect/index.html | 86 + files/ko/web/http/methods/delete/index.html | 98 + files/ko/web/http/methods/get/index.html | 75 + files/ko/web/http/methods/head/index.html | 77 + files/ko/web/http/methods/index.html | 73 + files/ko/web/http/methods/options/index.html | 131 + files/ko/web/http/methods/patch/index.html | 95 + files/ko/web/http/methods/post/index.html | 127 + files/ko/web/http/methods/put/index.html | 101 + files/ko/web/http/overview/index.html | 179 + files/ko/web/http/range_requests/index.html | 119 + files/ko/web/http/redirections/index.html | 256 + .../http/resources_and_specifications/index.html | 242 + files/ko/web/http/resources_and_uris/index.html | 27 + files/ko/web/http/session/index.html | 159 + files/ko/web/http/status/100/index.html | 46 + files/ko/web/http/status/101/index.html | 52 + files/ko/web/http/status/103/index.html | 43 + files/ko/web/http/status/200/index.html | 54 + files/ko/web/http/status/201/index.html | 48 + files/ko/web/http/status/202/index.html | 39 + files/ko/web/http/status/204/index.html | 54 + files/ko/web/http/status/205/index.html | 39 + files/ko/web/http/status/206/index.html | 85 + files/ko/web/http/status/301/index.html | 54 + files/ko/web/http/status/302/index.html | 54 + files/ko/web/http/status/304/index.html | 63 + files/ko/web/http/status/307/index.html | 48 + files/ko/web/http/status/400/index.html | 36 + files/ko/web/http/status/401/index.html | 60 + files/ko/web/http/status/403/index.html | 49 + files/ko/web/http/status/404/index.html | 59 + files/ko/web/http/status/405/index.html | 37 + files/ko/web/http/status/408/index.html | 42 + files/ko/web/http/status/409/index.html | 41 + files/ko/web/http/status/411/index.html | 36 + files/ko/web/http/status/413/index.html | 34 + files/ko/web/http/status/416/index.html | 51 + files/ko/web/http/status/418/index.html | 45 + files/ko/web/http/status/422/index.html | 40 + files/ko/web/http/status/431/index.html | 45 + files/ko/web/http/status/500/index.html | 41 + files/ko/web/http/status/501/index.html | 48 + files/ko/web/http/status/502/index.html | 49 + files/ko/web/http/status/503/index.html | 55 + files/ko/web/http/status/504/index.html | 50 + files/ko/web/http/status/505/index.html | 33 + files/ko/web/http/status/index.html | 194 + .../index.html" | 296 + files/ko/web/index.html | 109 + files/ko/web/javascript/about/index.html | 58 + files/ko/web/javascript/data_structures/index.html | 221 + .../index.html | 63 + .../index.html | 331 + .../equality_comparisons_and_sameness/index.html | 503 + files/ko/web/javascript/eventloop/index.html | 147 + files/ko/web/javascript/guide/closures/index.html | 454 + .../control_flow_and_error_handling/index.html | 433 + .../guide/expressions_and_operators/index.html | 926 + files/ko/web/javascript/guide/index.html | 138 + .../guide/indexed_collections/index.html | 456 + .../inheritance_and_the_prototype_chain/index.html | 531 + .../guide/iterators_and_generators/index.html | 193 + .../javascript/guide/keyed_collections/index.html | 149 + .../guide/loops_and_iteration/index.html | 332 + files/ko/web/javascript/guide/modules/index.html | 414 + .../javascript/guide/numbers_and_dates/index.html | 384 + .../core_javascript_1.5_guide/about/index.html | 109 + .../index.html | 26 + .../core_javascript_1.5_guide/constants/index.html | 28 + .../creating_a_regular_expression/index.html | 35 + .../defining_getters_and_setters/index.html | 84 + .../defining_methods/index.html | 43 + .../index.html | 11 + .../deleting_properties/index.html | 20 + .../creating_new_objects/index.html | 6 + .../indexing_object_properties/index.html | 9 + .../using_a_constructor_function/index.html | 58 + .../using_this_for_object_references/index.html | 25 + .../expressions/index.html | 16 + .../javascript_overview/index.html | 44 + .../core_javascript_1.5_guide/literals/index.html | 174 + .../objects_and_properties/index.html | 39 + .../operators/arithmetic_operators/index.html | 44 + .../operators/assignment_operators/index.html | 62 + .../operators/bitwise_operators/index.html | 101 + .../core_javascript_1.5_guide/operators/index.html | 108 + .../operators/logical_operators/index.html | 68 + .../operators/special_operators/index.html | 228 + .../operators/string_operators/index.html | 11 + .../array_object/index.html | 133 + .../predefined_core_objects/index.html | 20 + .../core_javascript_1.5_guide/unicode/index.html | 109 + .../core_javascript_1.5_guide/values/index.html | 39 + .../core_javascript_1.5_guide/variables/index.html | 64 + .../javascript/guide/text_formatting/index.html | 275 + .../web/javascript/guide/using_promises/index.html | 361 + .../values,_variables,_and_literals/index.html | 708 + .../guide/working_with_objects/index.html | 500 + .../index.html" | 714 + .../index.html" | 258 + .../guide/\354\206\214\352\260\234/index.html" | 153 + .../assertions/index.html" | 244 + .../groups_and_ranges/index.html" | 91 + .../index.html" | 666 + .../guide/\355\225\250\354\210\230/index.html" | 658 + files/ko/web/javascript/index.html | 118 + .../index.html | 289 + .../javascript_technologies_overview/index.html | 83 + .../ko/web/javascript/memory_management/index.html | 183 + .../javascript/new_in_javascript/1.5/index.html | 37 + .../javascript/new_in_javascript/1.6/index.html | 85 + .../javascript/new_in_javascript/1.8.1/index.html | 26 + .../javascript/new_in_javascript/1.8.5/index.html | 126 + .../javascript/new_in_javascript/1.8/index.html | 138 + .../ecmascript_5_support_in_mozilla/index.html | 45 + .../ecmascript_6_support_in_mozilla/index.html | 285 + .../ko/web/javascript/new_in_javascript/index.html | 71 + files/ko/web/javascript/reference/about/index.html | 51 + .../reference/classes/class_fields/index.html | 396 + .../reference/classes/constructor/index.html | 128 + .../reference/classes/extends/index.html | 112 + .../ko/web/javascript/reference/classes/index.html | 402 + .../classes/private_class_fields/index.html | 201 + .../javascript/reference/classes/static/index.html | 136 + .../deprecated_and_obsolete_features/index.html | 290 + .../reference/errors/bad_octal/index.html | 45 + .../reference/errors/bad_radix/index.html | 57 + .../reference/errors/bad_regexp_flag/index.html | 107 + .../errors/bad_return_or_yield/index.html | 51 + .../index.html | 56 + .../errors/delete_in_strict_mode/index.html | 71 + .../index.html | 70 + .../reference/errors/deprecated_octal/index.html | 64 + .../errors/identifier_after_number/index.html | 57 + .../reference/errors/illegal_character/index.html | 81 + .../ko/web/javascript/reference/errors/index.html | 12 + .../errors/invalid_array_length/index.html | 73 + .../invalid_assignment_left-hand_side/index.html | 50 + .../reference/errors/invalid_date/index.html | 50 + .../errors/invalid_for-in_initializer/index.html | 75 + .../errors/invalid_for-of_initializer/index.html | 64 + .../reference/errors/is_not_iterable/index.html | 106 + .../reference/errors/json_bad_parse/index.html | 105 + .../errors/malformed_formal_parameter/index.html | 57 + .../errors/missing_bracket_after_list/index.html | 56 + .../missing_colon_after_property_id/index.html | 78 + .../missing_curly_after_property_list/index.html | 47 + .../errors/missing_initializer_in_const/index.html | 55 + .../missing_name_after_dot_operator/index.html | 63 + .../index.html | 38 + .../missing_parenthesis_after_condition/index.html | 65 + .../missing_semicolon_before_statement/index.html | 63 + .../errors/more_arguments_needed/index.html | 45 + .../errors/negative_repetition_count/index.html | 40 + .../reference/errors/no_variable_name/index.html | 79 + .../reference/errors/not_a_codepoint/index.html | 51 + .../reference/errors/not_a_constructor/index.html | 91 + .../reference/errors/not_defined/index.html | 66 + .../reference/errors/precision_range/index.html | 92 + .../errors/property_access_denied/index.html | 42 + .../reference/errors/read-only/index.html | 77 + .../index.html | 83 + .../errors/reserved_identifier/index.html | 80 + .../errors/resulting_string_too_large/index.html | 46 + .../errors/strict_non_simple_params/index.html | 107 + .../reference/errors/too_much_recursion/index.html | 50 + .../reference/errors/undeclared_var/index.html | 62 + .../reference/errors/undefined_prop/index.html | 58 + .../reference/errors/unexpected_token/index.html | 49 + .../reference/errors/unexpected_type/index.html | 67 + .../errors/unnamed_function_statement/index.html | 118 + .../functions/arguments/@@iterator/index.html | 78 + .../functions/arguments/callee/index.html | 203 + .../functions/arguments/caller/index.html | 93 + .../reference/functions/arguments/index.html | 189 + .../functions/arguments/length/index.html | 74 + .../functions/default_parameters/index.html | 239 + .../javascript/reference/functions/get/index.html | 179 + .../web/javascript/reference/functions/index.html | 596 + .../functions/method_definitions/index.html | 230 + .../reference/functions/rest_parameters/index.html | 223 + .../javascript/reference/functions/set/index.html | 208 + .../index.html" | 465 + .../global_objects/aggregateerror/index.html | 87 + .../global_objects/array/@@iterator/index.html | 84 + .../global_objects/array/@@species/index.html | 75 + .../global_objects/array/@@unscopables/index.html | 72 + .../global_objects/array/array/index.html | 86 + .../global_objects/array/concat/index.html | 138 + .../global_objects/array/copywithin/index.html | 183 + .../global_objects/array/entries/index.html | 89 + .../global_objects/array/every/index.html | 191 + .../reference/global_objects/array/fill/index.html | 146 + .../global_objects/array/filter/index.html | 231 + .../reference/global_objects/array/find/index.html | 226 + .../global_objects/array/findindex/index.html | 146 + .../reference/global_objects/array/flat/index.html | 160 + .../global_objects/array/flatmap/index.html | 148 + .../global_objects/array/foreach/index.html | 264 + .../reference/global_objects/array/from/index.html | 244 + .../global_objects/array/includes/index.html | 173 + .../reference/global_objects/array/index.html | 493 + .../global_objects/array/indexof/index.html | 196 + .../global_objects/array/isarray/index.html | 131 + .../reference/global_objects/array/join/index.html | 91 + .../reference/global_objects/array/keys/index.html | 69 + .../global_objects/array/lastindexof/index.html | 103 + .../global_objects/array/length/index.html | 135 + .../reference/global_objects/array/map/index.html | 293 + .../global_objects/array/observe/index.html | 87 + .../reference/global_objects/array/of/index.html | 104 + .../reference/global_objects/array/pop/index.html | 91 + .../reference/global_objects/array/push/index.html | 113 + .../global_objects/array/reduce/index.html | 573 + .../global_objects/array/reduceright/index.html | 283 + .../global_objects/array/reverse/index.html | 87 + .../global_objects/array/shift/index.html | 102 + .../global_objects/array/slice/index.html | 155 + .../reference/global_objects/array/some/index.html | 202 + .../reference/global_objects/array/sort/index.html | 245 + .../global_objects/array/splice/index.html | 153 + .../global_objects/array/tolocalestring/index.html | 195 + .../global_objects/array/tosource/index.html | 71 + .../global_objects/array/tostring/index.html | 80 + .../global_objects/array/unshift/index.html | 91 + .../global_objects/array/values/index.html | 87 + .../arraybuffer/arraybuffer/index.html | 70 + .../arraybuffer/bytelength/index.html | 57 + .../global_objects/arraybuffer/index.html | 97 + .../global_objects/arraybuffer/isview/index.html | 76 + .../global_objects/arraybuffer/slice/index.html | 77 + .../global_objects/asyncfunction/index.html | 125 + .../reference/global_objects/atomics/index.html | 162 + .../global_objects/bigint/bigint/index.html | 62 + .../reference/global_objects/bigint/index.html | 280 + .../global_objects/bigint/prototype/index.html | 59 + .../global_objects/boolean/boolean/index.html | 55 + .../reference/global_objects/boolean/index.html | 108 + .../global_objects/boolean/prototype/index.html | 81 + .../global_objects/boolean/tostring/index.html | 69 + .../global_objects/boolean/valueof/index.html | 67 + .../global_objects/dataview/dataview/index.html | 75 + .../reference/global_objects/dataview/index.html | 168 + .../global_objects/date/getdate/index.html | 84 + .../global_objects/date/getday/index.html | 95 + .../global_objects/date/getfullyear/index.html | 88 + .../global_objects/date/gethours/index.html | 83 + .../global_objects/date/getmilliseconds/index.html | 81 + .../global_objects/date/getminutes/index.html | 83 + .../global_objects/date/getmonth/index.html | 94 + .../global_objects/date/getseconds/index.html | 83 + .../global_objects/date/gettime/index.html | 139 + .../date/gettimezoneoffset/index.html | 119 + .../global_objects/date/getutcdate/index.html | 118 + .../global_objects/date/getutcday/index.html | 118 + .../global_objects/date/getutcfullyear/index.html | 121 + .../global_objects/date/getutchours/index.html | 117 + .../date/getutcmilliseconds/index.html | 117 + .../global_objects/date/getutcminutes/index.html | 117 + .../global_objects/date/getutcmonth/index.html | 117 + .../global_objects/date/getutcseconds/index.html | 117 + .../reference/global_objects/date/index.html | 239 + .../reference/global_objects/date/now/index.html | 119 + .../reference/global_objects/date/parse/index.html | 231 + .../global_objects/date/prototype/index.html | 182 + .../global_objects/date/setdate/index.html | 127 + .../global_objects/date/setfullyear/index.html | 133 + .../global_objects/date/sethours/index.html | 138 + .../global_objects/date/setmilliseconds/index.html | 126 + .../global_objects/date/setminutes/index.html | 136 + .../global_objects/date/setmonth/index.html | 147 + .../global_objects/date/setseconds/index.html | 134 + .../global_objects/date/settime/index.html | 127 + .../global_objects/date/setutcdate/index.html | 126 + .../global_objects/date/setutcfullyear/index.html | 132 + .../global_objects/date/setutchours/index.html | 134 + .../date/setutcmilliseconds/index.html | 126 + .../global_objects/date/setutcminutes/index.html | 132 + .../global_objects/date/setutcmonth/index.html | 130 + .../global_objects/date/setutcseconds/index.html | 130 + .../global_objects/date/todatestring/index.html | 82 + .../global_objects/date/toisostring/index.html | 107 + .../global_objects/date/tojson/index.html | 81 + .../global_objects/date/tostring/index.html | 125 + .../reference/global_objects/date/utc/index.html | 139 + .../global_objects/date/valueof/index.html | 79 + .../reference/global_objects/decodeuri/index.html | 101 + .../global_objects/decodeuricomponent/index.html | 92 + .../reference/global_objects/encodeuri/index.html | 111 + .../global_objects/encodeuricomponent/index.html | 148 + .../reference/global_objects/error/index.html | 240 + .../reference/global_objects/error/name/index.html | 72 + .../reference/global_objects/eval/index.html | 285 + .../reference/global_objects/evalerror/index.html | 112 + .../global_objects/function/apply/index.html | 236 + .../global_objects/function/arguments/index.html | 60 + .../global_objects/function/bind/index.html | 296 + .../global_objects/function/call/index.html | 197 + .../reference/global_objects/function/index.html | 167 + .../global_objects/function/length/index.html | 80 + .../global_objects/function/name/index.html | 191 + .../global_objects/function/tosource/index.html | 71 + .../reference/global_objects/generator/index.html | 186 + .../global_objects/generator/next/index.html | 153 + .../global_objects/generator/return/index.html | 132 + .../global_objects/generator/throw/index.html | 99 + .../global_objects/generatorfunction/index.html | 112 + .../reference/global_objects/globalthis/index.html | 89 + .../javascript/reference/global_objects/index.html | 204 + .../reference/global_objects/infinity/index.html | 65 + .../global_objects/internalerror/index.html | 120 + .../internalerror/prototype/index.html | 100 + .../global_objects/intl/datetimeformat/index.html | 303 + .../intl/datetimeformat/prototype/index.html | 86 + .../reference/global_objects/intl/index.html | 134 + .../global_objects/intl/locale/index.html | 77 + .../global_objects/intl/locale/language/index.html | 62 + .../global_objects/intl/numberformat/index.html | 198 + .../intl/numberformat/prototype/index.html | 85 + .../reference/global_objects/isfinite/index.html | 84 + .../reference/global_objects/isnan/index.html | 190 + .../reference/global_objects/json/index.html | 122 + .../reference/global_objects/json/parse/index.html | 123 + .../global_objects/json/stringify/index.html | 230 + .../global_objects/map/@@tostringtag/index.html | 51 + .../reference/global_objects/map/clear/index.html | 75 + .../reference/global_objects/map/delete/index.html | 79 + .../global_objects/map/entries/index.html | 78 + .../global_objects/map/foreach/index.html | 98 + .../reference/global_objects/map/get/index.html | 80 + .../reference/global_objects/map/has/index.html | 81 + .../reference/global_objects/map/index.html | 244 + .../reference/global_objects/map/map/index.html | 60 + .../global_objects/map/prototype/index.html | 86 + .../reference/global_objects/map/set/index.html | 96 + .../reference/global_objects/map/size/index.html | 62 + .../reference/global_objects/math/abs/index.html | 104 + .../reference/global_objects/math/acos/index.html | 103 + .../reference/global_objects/math/cbrt/index.html | 98 + .../reference/global_objects/math/ceil/index.html | 209 + .../reference/global_objects/math/e/index.html | 84 + .../reference/global_objects/math/exp/index.html | 90 + .../reference/global_objects/math/floor/index.html | 171 + .../global_objects/math/fround/index.html | 130 + .../reference/global_objects/math/imul/index.html | 130 + .../reference/global_objects/math/index.html | 155 + .../reference/global_objects/math/ln10/index.html | 84 + .../reference/global_objects/math/ln2/index.html | 86 + .../reference/global_objects/math/log/index.html | 104 + .../global_objects/math/log10e/index.html | 84 + .../reference/global_objects/math/log2/index.html | 96 + .../reference/global_objects/math/log2e/index.html | 84 + .../reference/global_objects/math/max/index.html | 110 + .../reference/global_objects/math/min/index.html | 103 + .../reference/global_objects/math/pi/index.html | 82 + .../global_objects/math/random/index.html | 106 + .../reference/global_objects/math/round/index.html | 92 + .../reference/global_objects/math/sign/index.html | 112 + .../reference/global_objects/math/sin/index.html | 97 + .../reference/global_objects/math/sinh/index.html | 96 + .../reference/global_objects/math/sqrt/index.html | 90 + .../global_objects/math/sqrt1_2/index.html | 59 + .../reference/global_objects/math/sqrt2/index.html | 74 + .../reference/global_objects/math/tan/index.html | 102 + .../reference/global_objects/math/tanh/index.html | 85 + .../reference/global_objects/math/trunc/index.html | 96 + .../reference/global_objects/nan/index.html | 91 + .../reference/global_objects/null/index.html | 69 + .../global_objects/number/epsilon/index.html | 61 + .../reference/global_objects/number/index.html | 177 + .../global_objects/number/isfinite/index.html | 90 + .../global_objects/number/isinteger/index.html | 96 + .../global_objects/number/isnan/index.html | 100 + .../global_objects/number/issafeinteger/index.html | 100 + .../number/max_safe_integer/index.html | 76 + .../global_objects/number/max_value/index.html | 81 + .../number/min_safe_integer/index.html | 66 + .../global_objects/number/min_value/index.html | 84 + .../reference/global_objects/number/nan/index.html | 62 + .../number/negative_infinity/index.html | 82 + .../global_objects/number/parsefloat/index.html | 79 + .../global_objects/number/parseint/index.html | 78 + .../number/positive_infinity/index.html | 82 + .../global_objects/number/prototype/index.html | 90 + .../global_objects/number/toexponential/index.html | 108 + .../global_objects/number/tofixed/index.html | 109 + .../global_objects/number/toprecision/index.html | 110 + .../global_objects/number/tostring/index.html | 112 + .../global_objects/number/valueof/index.html | 86 + .../object/__definegetter__/index.html | 99 + .../global_objects/object/assign/index.html | 284 + .../global_objects/object/constructor/index.html | 155 + .../global_objects/object/create/index.html | 271 + .../object/defineproperties/index.html | 191 + .../object/defineproperty/index.html | 417 + .../global_objects/object/entries/index.html | 145 + .../global_objects/object/freeze/index.html | 257 + .../global_objects/object/fromentries/index.html | 98 + .../object/getownpropertydescriptor/index.html | 126 + .../object/getprototypeof/index.html | 134 + .../object/hasownproperty/index.html | 146 + .../reference/global_objects/object/index.html | 177 + .../reference/global_objects/object/is/index.html | 124 + .../global_objects/object/isextensible/index.html | 110 + .../global_objects/object/isfrozen/index.html | 155 + .../global_objects/object/isprototypeof/index.html | 111 + .../global_objects/object/issealed/index.html | 128 + .../global_objects/object/observe/index.html | 193 + .../object/preventextensions/index.html | 126 + .../object/propertyisenumerable/index.html | 146 + .../global_objects/object/prototype/index.html | 218 + .../global_objects/object/seal/index.html | 135 + .../object/setprototypeof/index.html | 242 + .../object/tolocalestring/index.html | 86 + .../global_objects/object/tostring/index.html | 134 + .../global_objects/object/valueof/index.html | 118 + .../global_objects/object/values/index.html | 98 + .../reference/global_objects/parsefloat/index.html | 120 + .../reference/global_objects/parseint/index.html | 220 + .../global_objects/promise/all/index.html | 239 + .../global_objects/promise/allsettled/index.html | 66 + .../global_objects/promise/finally/index.html | 100 + .../reference/global_objects/promise/index.html | 226 + .../global_objects/promise/promise/index.html | 78 + .../global_objects/promise/prototype/index.html | 71 + .../global_objects/promise/race/index.html | 187 + .../global_objects/promise/reject/index.html | 81 + .../global_objects/promise/resolve/index.html | 162 + .../global_objects/promise/then/index.html | 308 + .../global_objects/proxy/handler/apply/index.html | 154 + .../global_objects/proxy/handler/index.html | 81 + .../reference/global_objects/proxy/index.html | 394 + .../reference/global_objects/rangeerror/index.html | 163 + .../global_objects/referenceerror/index.html | 129 + .../global_objects/reflect/apply/index.html | 93 + .../global_objects/reflect/construct/index.html | 154 + .../reflect/defineproperty/index.html | 100 + .../reflect/deleteproperty/index.html | 98 + .../global_objects/reflect/get/index.html | 100 + .../reflect/getownpropertydescriptor/index.html | 103 + .../reflect/getprototypeof/index.html | 104 + .../global_objects/reflect/has/index.html | 97 + .../reference/global_objects/reflect/index.html | 106 + .../global_objects/reflect/isextensible/index.html | 111 + .../global_objects/reflect/ownkeys/index.html | 95 + .../reflect/preventextensions/index.html | 103 + .../global_objects/reflect/set/index.html | 108 + .../reflect/setprototypeof/index.html | 88 + .../global_objects/regexp/exec/index.html | 188 + .../reference/global_objects/regexp/index.html | 233 + .../reference/global_objects/regexp/n/index.html | 66 + .../global_objects/regexp/regexp/index.html | 114 + .../global_objects/regexp/test/index.html | 129 + .../reference/global_objects/set/add/index.html | 83 + .../reference/global_objects/set/clear/index.html | 76 + .../reference/global_objects/set/delete/index.html | 98 + .../global_objects/set/foreach/index.html | 117 + .../reference/global_objects/set/has/index.html | 93 + .../reference/global_objects/set/index.html | 237 + .../global_objects/set/prototype/index.html | 86 + .../reference/global_objects/set/size/index.html | 69 + .../reference/global_objects/set/values/index.html | 72 + .../global_objects/sharedarraybuffer/index.html | 137 + .../sharedarraybuffer/prototype/index.html | 65 + .../global_objects/string/charat/index.html | 260 + .../global_objects/string/charcodeat/index.html | 169 + .../global_objects/string/concat/index.html | 105 + .../global_objects/string/endswith/index.html | 142 + .../global_objects/string/fromcharcode/index.html | 101 + .../global_objects/string/includes/index.html | 125 + .../reference/global_objects/string/index.html | 298 + .../global_objects/string/indexof/index.html | 159 + .../global_objects/string/lastindexof/index.html | 105 + .../global_objects/string/length/index.html | 84 + .../global_objects/string/localecompare/index.html | 159 + .../global_objects/string/match/index.html | 156 + .../global_objects/string/normalize/index.html | 163 + .../global_objects/string/padend/index.html | 99 + .../global_objects/string/padstart/index.html | 104 + .../global_objects/string/prototype/index.html | 218 + .../global_objects/string/repeat/index.html | 113 + .../global_objects/string/replace/index.html | 299 + .../global_objects/string/search/index.html | 100 + .../global_objects/string/slice/index.html | 129 + .../global_objects/string/split/index.html | 231 + .../global_objects/string/startswith/index.html | 95 + .../global_objects/string/substr/index.html | 131 + .../global_objects/string/substring/index.html | 190 + .../global_objects/string/tolowercase/index.html | 83 + .../global_objects/string/tosource/index.html | 49 + .../global_objects/string/tostring/index.html | 59 + .../global_objects/string/touppercase/index.html | 105 + .../global_objects/string/trim/index.html | 97 + .../global_objects/string/valueof/index.html | 83 + .../reference/global_objects/symbol/for/index.html | 150 + .../reference/global_objects/symbol/index.html | 233 + .../global_objects/symbol/iterator/index.html | 95 + .../global_objects/syntaxerror/index.html | 123 + .../syntaxerror/prototype/index.html | 126 + .../typedarray/@@iterator/index.html | 127 + .../global_objects/typedarray/buffer/index.html | 111 + .../typedarray/bytelength/index.html | 73 + .../typedarray/byteoffset/index.html | 69 + .../typedarray/bytes_per_element/index.html | 75 + .../global_objects/typedarray/fill/index.html | 75 + .../reference/global_objects/typedarray/index.html | 342 + .../global_objects/typedarray/indexof/index.html | 80 + .../global_objects/typedarray/length/index.html | 68 + .../global_objects/typedarray/name/index.html | 70 + .../global_objects/typedarray/of/index.html | 92 + .../global_objects/typedarray/prototype/index.html | 175 + .../global_objects/typedarray/reverse/index.html | 69 + .../global_objects/typedarray/set/index.html | 95 + .../global_objects/typedarray/slice/index.html | 129 + .../global_objects/typedarray/some/index.html | 106 + .../global_objects/typedarray/sort/index.html | 119 + .../global_objects/typedarray/values/index.html | 127 + .../reference/global_objects/typeerror/index.html | 123 + .../reference/global_objects/undefined/index.html | 138 + .../reference/global_objects/uneval/index.html | 67 + .../global_objects/weakmap/delete/index.html | 80 + .../reference/global_objects/weakmap/index.html | 283 + .../global_objects/weakmap/prototype/index.html | 142 + .../reference/global_objects/weakset/index.html | 108 + .../global_objects/weakset/prototype/index.html | 141 + .../global_objects/webassembly/compile/index.html | 83 + .../webassembly/compileerror/index.html | 114 + .../webassembly/compilestreaming/index.html | 79 + .../global_objects/webassembly/global/index.html | 116 + .../webassembly/global/prototype/index.html | 69 + .../global_objects/webassembly/index.html | 100 + .../global_objects/webassembly/instance/index.html | 74 + .../webassembly/instantiate/index.html | 168 + .../webassembly/instantiatestreaming/index.html | 83 + .../webassembly/linkerror/index.html | 113 + .../global_objects/webassembly/memory/index.html | 112 + .../global_objects/webassembly/module/index.html | 83 + .../webassembly/runtimeerror/index.html | 111 + .../global_objects/webassembly/table/index.html | 130 + .../global_objects/webassembly/validate/index.html | 75 + files/ko/web/javascript/reference/index.html | 48 + .../reference/iteration_protocols/index.html | 394 + .../reference/lexical_grammar/index.html | 657 + .../javascript/reference/liveconnect/index.html | 17 + .../reference/operators/addition/index.html | 77 + .../operators/arithmetic_operators/index.html | 290 + .../operators/assignment_operators/index.html | 394 + .../reference/operators/async_function/index.html | 96 + .../reference/operators/await/index.html | 137 + .../operators/bitwise_operators/index.html | 540 + .../reference/operators/class/index.html | 100 + .../reference/operators/comma_operator/index.html | 91 + .../operators/comparison_operators/index.html | 215 + .../operators/conditional_operator/index.html | 193 + .../reference/operators/delete/index.html | 282 + .../operators/destructuring_assignment/index.html | 409 + .../reference/operators/equality/index.html | 123 + .../operators/expression_closures/index.html | 79 + .../reference/operators/function/index.html | 154 + .../reference/operators/function_star_/index.html | 85 + .../operators/generator_comprehensions/index.html | 174 + .../reference/operators/grouping/index.html | 92 + .../javascript/reference/operators/in/index.html | 188 + .../web/javascript/reference/operators/index.html | 304 + .../reference/operators/instanceof/index.html | 161 + .../reference/operators/new.target/index.html | 93 + .../javascript/reference/operators/new/index.html | 187 + .../nullish_coalescing_operator/index.html | 161 + .../operators/object_initializer/index.html | 302 + .../operators/optional_chaining/index.html | 187 + .../operators/pipeline_operator/index.html | 76 + .../operators/property_accessors/index.html | 153 + .../reference/operators/remainder/index.html | 73 + .../reference/operators/spread_syntax/index.html | 255 + .../reference/operators/super/index.html | 176 + .../javascript/reference/operators/this/index.html | 398 + .../reference/operators/typeof/index.html | 227 + .../javascript/reference/operators/void/index.html | 122 + .../reference/operators/yield/index.html | 182 + .../reference/operators/yield_star_/index.html | 164 + .../index.html" | 249 + .../operators/\353\260\260\354\227\264/index.html" | 200 + .../index.html" | 462 + .../reference/statements/async_function/index.html | 243 + .../reference/statements/block/index.html | 132 + .../reference/statements/break/index.html | 119 + .../reference/statements/class/index.html | 119 + .../reference/statements/const/index.html | 136 + .../reference/statements/continue/index.html | 164 + .../reference/statements/debugger/index.html | 79 + .../reference/statements/default/index.html | 121 + .../reference/statements/do...while/index.html | 78 + .../reference/statements/empty/index.html | 102 + .../reference/statements/export/index.html | 199 + .../reference/statements/for-await...of/index.html | 144 + .../reference/statements/for...in/index.html | 176 + .../reference/statements/for...of/index.html | 228 + .../javascript/reference/statements/for/index.html | 160 + .../reference/statements/for_each...in/index.html | 85 + .../reference/statements/function/index.html | 177 + .../reference/statements/function_star_/index.html | 159 + .../reference/statements/if...else/index.html | 177 + .../reference/statements/import/index.html | 156 + .../web/javascript/reference/statements/index.html | 143 + .../reference/statements/label/index.html | 241 + .../javascript/reference/statements/let/index.html | 246 + .../reference/statements/return/index.html | 159 + .../reference/statements/switch/index.html | 306 + .../reference/statements/throw/index.html | 198 + .../reference/statements/try...catch/index.html | 273 + .../javascript/reference/statements/var/index.html | 195 + .../reference/statements/while/index.html | 142 + .../reference/statements/with/index.html | 127 + .../javascript/reference/strict_mode/index.html | 383 + .../transitioning_to_strict_mode/index.html | 137 + .../reference/template_literals/index.html | 254 + .../reference/trailing_commas/index.html | 185 + files/ko/web/javascript/typed_arrays/index.html | 222 + "files/ko/web/javascript/\354\211\230/index.html" | 40 + .../index.html" | 327 + .../index.html" | 155 + files/ko/web/manifest/index.html | 121 + files/ko/web/mathml/index.html | 65 + files/ko/web/media/autoplay_guide/index.html | 262 + files/ko/web/media/formats/index.html | 86 + .../index.html" | 1646 ++ .../index.html" | 1279 ++ .../index.html" | 971 + files/ko/web/media/index.html | 81 + files/ko/web/performance/index.html | 291 + .../index.html" | 204 + .../index.html" | 60 + .../add_to_home_screen/index.html | 218 + .../progressive_web_apps/app_structure/index.html | 283 + files/ko/web/progressive_web_apps/index.html | 76 + .../installable_pwas/index.html | 123 + .../offline_service_workers/index.html | 205 + .../re-engageable_notifications_push/index.html | 253 + .../\354\206\214\352\260\234/index.html" | 92 + files/ko/web/security/index.html | 24 + .../ko/web/security/insecure_passwords/index.html | 67 + .../ko/web/security/same-origin_policy/index.html | 271 + .../security/transport_layer_security/index.html | 110 + .../index.html" | 28 + .../index.html" | 99 + .../index.html | 229 + files/ko/web/svg/attribute/calcmode/index.html | 55 + files/ko/web/svg/attribute/cx/index.html | 67 + files/ko/web/svg/attribute/d/index.html | 575 + files/ko/web/svg/attribute/index.html | 461 + files/ko/web/svg/attribute/keytimes/index.html | 87 + files/ko/web/svg/attribute/values/index.html | 86 + files/ko/web/svg/attribute/version/index.html | 35 + files/ko/web/svg/attribute/viewbox/index.html | 59 + files/ko/web/svg/element/a/index.html | 149 + files/ko/web/svg/element/altglyph/index.html | 79 + files/ko/web/svg/element/circle/index.html | 95 + files/ko/web/svg/element/ellipse/index.html | 110 + files/ko/web/svg/element/index.html | 218 + .../index.html" | 95 + files/ko/web/svg/index.html | 101 + files/ko/web/svg/tutorial/index.html | 36 + files/ko/web/svg/tutorial/introduction/index.html | 49 + files/ko/web/svg/tutorial/paths/index.html | 216 + files/ko/web/svg/tutorial/patterns/index.html | 72 + files/ko/web/svg/tutorial/svg_image_tag/index.html | 35 + .../tutorial/svg_in_html_introduction/index.html | 73 + .../index.html" | 141 + .../index.html" | 94 + .../tutorial/\354\234\204\354\271\230/index.html" | 45 + files/ko/web/tutorials/index.html | 186 + files/ko/web/web_components/index.html | 223 + .../using_custom_elements/index.html | 248 + .../web/web_components/using_shadow_dom/index.html | 230 + files/ko/web/xml/index.html | 17 + files/ko/web/xml/xml_introduction/index.html | 33 + .../ko/web/xpath/axes/ancestor-or-self/index.html | 7 + files/ko/web/xpath/axes/ancestor/index.html | 7 + files/ko/web/xpath/axes/attribute/index.html | 6 + files/ko/web/xpath/axes/child/index.html | 6 + .../web/xpath/axes/descendant-or-self/index.html | 6 + files/ko/web/xpath/axes/descendant/index.html | 6 + .../ko/web/xpath/axes/following-sibling/index.html | 6 + files/ko/web/xpath/axes/following/index.html | 6 + files/ko/web/xpath/axes/index.html | 70 + files/ko/web/xpath/axes/namespace/index.html | 10 + files/ko/web/xpath/axes/parent/index.html | 6 + .../ko/web/xpath/axes/preceding-sibling/index.html | 6 + files/ko/web/xpath/axes/preceding/index.html | 6 + files/ko/web/xpath/axes/self/index.html | 6 + files/ko/web/xpath/functions/boolean/index.html | 39 + files/ko/web/xpath/functions/ceiling/index.html | 41 + files/ko/web/xpath/functions/concat/index.html | 29 + files/ko/web/xpath/functions/contains/index.html | 47 + files/ko/web/xpath/functions/count/index.html | 29 + files/ko/web/xpath/functions/current/index.html | 61 + files/ko/web/xpath/functions/document/index.html | 61 + .../xpath/functions/element-available/index.html | 29 + files/ko/web/xpath/functions/false/index.html | 25 + files/ko/web/xpath/functions/floor/index.html | 32 + .../web/xpath/functions/format-number/index.html | 49 + .../xpath/functions/function-available/index.html | 29 + .../ko/web/xpath/functions/generate-id/index.html | 37 + files/ko/web/xpath/functions/id/index.html | 46 + files/ko/web/xpath/functions/index.html | 74 + files/ko/web/xpath/functions/key/index.html | 43 + files/ko/web/xpath/functions/lang/index.html | 55 + files/ko/web/xpath/functions/last/index.html | 23 + files/ko/web/xpath/functions/local-name/index.html | 33 + files/ko/web/xpath/functions/name/index.html | 33 + .../web/xpath/functions/namespace-uri/index.html | 36 + .../web/xpath/functions/normalize-space/index.html | 29 + files/ko/web/xpath/functions/not/index.html | 33 + files/ko/web/xpath/functions/number/index.html | 35 + files/ko/web/xpath/functions/position/index.html | 34 + files/ko/web/xpath/functions/round/index.html | 35 + .../ko/web/xpath/functions/starts-with/index.html | 42 + .../web/xpath/functions/string-length/index.html | 28 + files/ko/web/xpath/functions/string/index.html | 42 + .../web/xpath/functions/substring-after/index.html | 49 + .../xpath/functions/substring-before/index.html | 49 + files/ko/web/xpath/functions/substring/index.html | 55 + files/ko/web/xpath/functions/sum/index.html | 39 + .../web/xpath/functions/system-property/index.html | 34 + files/ko/web/xpath/functions/translate/index.html | 92 + files/ko/web/xpath/functions/true/index.html | 19 + .../xpath/functions/unparsed-entity-url/index.html | 21 + files/ko/web/xpath/index.html | 13 + files/ko/web/xslt/apply-imports/index.html | 22 + files/ko/web/xslt/apply-templates/index.html | 33 + files/ko/web/xslt/attribute-set/index.html | 33 + files/ko/web/xslt/attribute/index.html | 33 + files/ko/web/xslt/call-template/index.html | 29 + files/ko/web/xslt/choose/index.html | 24 + files/ko/web/xslt/comment/index.html | 23 + files/ko/web/xslt/copy-of/index.html | 26 + files/ko/web/xslt/copy/index.html | 28 + files/ko/web/xslt/decimal-format/index.html | 100 + files/ko/web/xslt/element/element/index.html | 37 + files/ko/web/xslt/element/index.html | 76 + files/ko/web/xslt/fallback/index.html | 23 + files/ko/web/xslt/for-each/index.html | 29 + files/ko/web/xslt/if/index.html | 28 + files/ko/web/xslt/import/index.html | 26 + files/ko/web/xslt/include/index.html | 26 + files/ko/web/xslt/index.html | 49 + files/ko/web/xslt/key/index.html | 35 + files/ko/web/xslt/message/index.html | 28 + files/ko/web/xslt/namespace-alias/index.html | 30 + files/ko/web/xslt/number/index.html | 173 + files/ko/web/xslt/otherwise/index.html | 23 + files/ko/web/xslt/output/index.html | 90 + files/ko/web/xslt/param/index.html | 33 + files/ko/web/xslt/preserve-space/index.html | 26 + .../ko/web/xslt/processing-instruction/index.html | 26 + files/ko/web/xslt/sort/index.html | 55 + files/ko/web/xslt/strip-space/index.html | 26 + files/ko/web/xslt/stylesheet/index.html | 52 + files/ko/web/xslt/template/index.html | 51 + files/ko/web/xslt/text/index.html | 28 + .../index.html | 17 + .../introduction/index.html | 10 + .../setting_parameters/index.html | 23 + files/ko/web/xslt/transform/index.html | 11 + .../web/xslt/transforming_xml_with_xslt/index.html | 107 + .../the_netscape_xslt_xpath_reference/index.html | 380 + .../index.html | 60 + files/ko/web/xslt/value-of/index.html | 31 + files/ko/web/xslt/variable/index.html | 33 + files/ko/web/xslt/when/index.html | 28 + files/ko/web/xslt/with-param/index.html | 33 + .../web/\354\260\270\354\241\260/api/index.html" | 65 + "files/ko/web/\354\260\270\354\241\260/index.html" | 30 + files/ko/web_development/index.html | 66 + files/ko/webapi/alarm/index.html | 181 + files/ko/webapi/battery_status/index.html | 75 + files/ko/webapi/contacts/index.html | 210 + .../webapi/detecting_device_orientation/index.html | 273 + files/ko/webapi/idle/index.html | 66 + files/ko/webapi/index.html | 138 + .../webapi/managing_screen_orientation/index.html | 136 + files/ko/webapi/network_information/index.html | 46 + files/ko/webapi/power_management/index.html | 102 + files/ko/webapi/proximity/index.html | 119 + files/ko/webapi/simple_push/index.html | 92 + files/ko/webapi/time_and_clock/index.html | 29 + files/ko/webapi/using_geolocation/index.html | 165 + files/ko/webapi/using_light_events/index.html | 64 + files/ko/webapi/using_web_notifications/index.html | 265 + files/ko/webapi/webfm_api/index.html | 132 + files/ko/webapi/websms/index.html | 85 + .../introduction_to_websms/index.html | 23 + files/ko/webassembly/c_to_wasm/index.html | 199 + files/ko/webassembly/caching_modules/index.html | 160 + files/ko/webassembly/concepts/index.html | 152 + files/ko/webassembly/existing_c_to_wasm/index.html | 171 + files/ko/webassembly/exported_functions/index.html | 71 + files/ko/webassembly/index.html | 126 + .../ko/webassembly/loading_and_running/index.html | 109 + files/ko/webassembly/rust_to_wasm/index.html | 295 + .../ko/webassembly/text_format_to_wasm/index.html | 65 + .../understanding_the_text_format/index.html | 607 + .../using_the_javascript_api/index.html | 307 + files/ko/websockets/index.html | 172 + .../index.html | 191 + .../writing_websocket_servers/index.html | 258 + files/ko/windows_and_menus_in_xulrunner/index.html | 127 + files/ko/xforms/index.html | 86 + files/ko/xhtml/index.html | 76 + files/ko/xml_web_services/index.html | 47 + .../xmlhttprequest_changes_for_gecko1.8/index.html | 19 + files/ko/xpcom/index.html | 92 + .../xpcom/setting_http_request_headers/index.html | 209 + files/ko/xpcom/the_thread_manager/index.html | 44 + files/ko/xpcom_interface_reference/index.html | 14 + files/ko/xpconnect/index.html | 57 + files/ko/xpconnect/using_components/index.html | 17 + files/ko/xpi/index.html | 17 + files/ko/xpinstall/index.html | 65 + files/ko/xpinstall_api_reference/index.html | 261 + .../install_object/index.html | 35 + .../install_object/properties/index.html | 32 + .../return_codes/index.html | 268 + files/ko/xslt_in_gecko/basic_example/index.html | 49 + .../xslt_in_gecko/browser_differences/index.html | 8 + files/ko/xslt_in_gecko/generating_html/index.html | 174 + files/ko/xslt_in_gecko/index.html | 14 + files/ko/xslt_in_gecko/introduction/index.html | 13 + files/ko/xslt_in_gecko/resources/index.html | 14 + .../index.html | 17 + files/ko/xtech_2005_presentations/index.html | 6 + files/ko/xul_changes_for_firefox_1.5/index.html | 44 + files/ko/xul_improvements_in_firefox_3/index.html | 76 + files/ko/zones/index.html | 70 + .../index.html" | 261 + .../index.html" | 5 + .../index.html" | 88 + files/ms/_redirects.txt | 6 + files/ms/_wikihistory.json | 233 + files/ms/archive/add-ons/index.html | 69 + files/ms/archive/firefox_os/index.html | 11 + files/ms/archive/index.html | 21 + files/ms/archive/mozilla/firefox/index.html | 13 + .../index.html | 54 + files/ms/archive/mozilla/index.html | 10 + files/ms/glossary/ajax/index.html | 22 + files/ms/glossary/index.html | 45 + files/ms/html/canvas/index.html | 80 + .../canvas/melukis_grafik_dengan_canvas/index.html | 158 + files/ms/html/elemen/index.html | 208 + files/ms/html/index.html | 79 + .../index.html | 133 + files/ms/learn/accessibility/index.html | 89 + files/ms/learn/html/forms/index.html | 340 + .../add_responsive_image_to_a_webpage/index.html | 170 + files/ms/learn/html/howto/index.html | 153 + files/ms/learn/html/index.html | 48 + files/ms/learn/index.html | 94 + .../berurusan_dengan_fail/index.html | 103 + .../ms/learn/memulakan_pembelajaran_web/index.html | 57 + .../memasang_perisian_asas/index.html | 58 + .../server-side/express_nodejs/forms/index.html | 276 + .../ms/learn/server-side/express_nodejs/index.html | 77 + files/ms/learn/server-side/index.html | 59 + files/ms/learn/soalan_lazim/index.html | 119 + files/ms/mdn/about/index.html | 99 + files/ms/mdn/community/index.html | 69 + files/ms/mdn/contribute/getting_started/index.html | 100 + .../howto/bagaimana_membuat_akaun_mdn/index.html | 38 + files/ms/mdn/contribute/howto/index.html | 13 + files/ms/mdn/contribute/index.html | 71 + files/ms/mdn/contribute/localize/index.html | 29 + .../localize/translating_pages/index.html | 37 + files/ms/mdn/index.html | 39 + files/ms/mdn_at_ten/index.html | 37 + files/ms/web/index.html | 51 + files/ms/web_development/index.html | 97 + files/my/_redirects.txt | 3 + files/my/_wikihistory.json | 141 + files/my/archive/index.html | 20 + files/my/learn/css/css_layout/flexbox/index.html | 339 + files/my/learn/css/css_layout/index.html | 88 + files/my/learn/css/index.html | 67 + .../learn/html/forms/html5_input_types/index.html | 276 + files/my/learn/html/forms/index.html | 83 + .../my/learn/html/forms/your_first_form/index.html | 298 + files/my/learn/html/index.html | 52 + files/my/learn/index.html | 89 + files/my/learn/javascript/index.html | 66 + files/my/mozilla/index.html | 12 + files/my/mozilla/localization/index.html | 17 + .../localization/l10n_style_guide/index.html | 485 + .../adding_a_new_telemetry_probe/index.html | 184 + files/my/mozilla/performance/index.html | 143 + files/my/web/css/@font-face/index.html | 196 + files/my/web/css/css_transitions/index.html | 59 + files/my/web/css/index.html | 110 + files/my/web/guide/index.html | 67 + .../connection_management_in_http_1.x/index.html | 86 + files/my/web/http/index.html | 90 + files/my/web/index.html | 90 + files/my/web/javascript/index.html | 104 + files/my/web/javascript/reference/index.html | 312 + .../reference/statements/function_star_/index.html | 252 + .../web/javascript/reference/statements/index.html | 130 + 4317 files changed, 629101 insertions(+) create mode 100644 files/id/_redirects.txt create mode 100644 files/id/_wikihistory.json create mode 100644 files/id/archive/add-ons/index.html create mode 100644 files/id/archive/b2g_os/developing_firefox_os/index.html create mode 100644 files/id/archive/b2g_os/developing_firefox_os/porting/index.html create mode 100644 files/id/archive/b2g_os/firefox_os_apps/index.html create mode 100644 files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html create mode 100644 files/id/archive/b2g_os/index.html create mode 100644 files/id/archive/b2g_os/installing_on_a_mobile_device/index.html create mode 100644 files/id/archive/b2g_os/introduction/index.html create mode 100644 files/id/archive/b2g_os/phone_guide/flame/index.html create mode 100644 files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html create mode 100644 files/id/archive/b2g_os/phone_guide/index.html create mode 100644 files/id/archive/b2g_os/platform/index.html create mode 100644 files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html create mode 100644 files/id/archive/b2g_os/quickstart/index.html create mode 100644 files/id/archive/b2g_os/simulator/index.html create mode 100644 files/id/archive/b2g_os/using_the_app_manager/index.html create mode 100644 files/id/archive/css3/index.html create mode 100644 files/id/archive/index.html create mode 100644 files/id/archive/meta_docs/index.html create mode 100644 files/id/archive/mozilla/index.html create mode 100644 files/id/archive/mozilla/xul/index.html create mode 100644 files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html create mode 100644 files/id/archive/mozilla/xul/school_tutorial/index.html create mode 100644 files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html create mode 100644 files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html create mode 100644 files/id/archive/mozilla/xulrunner/index.html create mode 100644 files/id/archive/web/index.html create mode 100644 files/id/archive/web/standards-compliant_authoring_tools/index.html create mode 100644 files/id/developer_guide/index.html create mode 100644 files/id/developer_guide/virtual_arm_di_lingkungan_linux/index.html create mode 100644 files/id/games/index.html create mode 100644 files/id/games/publishing_games/game_promotion/index.html create mode 100644 files/id/games/publishing_games/index.html create mode 100644 files/id/games/techniques/index.html create mode 100644 files/id/glossary/404/index.html create mode 100644 files/id/glossary/ajax/index.html create mode 100644 files/id/glossary/algoritma/index.html create mode 100644 files/id/glossary/api/index.html create mode 100644 files/id/glossary/asynchronous/index.html create mode 100644 files/id/glossary/css/index.html create mode 100644 files/id/glossary/html/index.html create mode 100644 files/id/glossary/http/index.html create mode 100644 files/id/glossary/identifier/index.html create mode 100644 files/id/glossary/index.html create mode 100644 files/id/glossary/javascript/index.html create mode 100644 files/id/glossary/json/index.html create mode 100644 files/id/glossary/method/index.html create mode 100644 files/id/glossary/null/index.html create mode 100644 files/id/glossary/primitive/index.html create mode 100644 files/id/glossary/property/index.html create mode 100644 files/id/glossary/python/index.html create mode 100644 files/id/glossary/seo/index.html create mode 100644 files/id/glossary/statement/index.html create mode 100644 files/id/glossary/svg/index.html create mode 100644 files/id/glossary/url/index.html create mode 100644 files/id/glossary/variable/index.html create mode 100644 files/id/glossary/xml/index.html create mode 100644 files/id/learn/accessibility/index.html create mode 100644 files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html create mode 100644 files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html create mode 100644 files/id/learn/common_questions/index.html create mode 100644 files/id/learn/common_questions/pages_sites_servers_and_search_engines/index.html create mode 100644 files/id/learn/common_questions/set_up_a_local_testing_server/index.html create mode 100644 files/id/learn/css/index.html create mode 100644 files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html create mode 100644 files/id/learn/getting_started_with_the_web/css_basics/index.html create mode 100644 files/id/learn/getting_started_with_the_web/how_the_web_works/index.html create mode 100644 files/id/learn/getting_started_with_the_web/html_basics/index.html create mode 100644 files/id/learn/getting_started_with_the_web/index.html create mode 100644 files/id/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/id/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/id/learn/getting_started_with_the_web/mengelola_file/index.html create mode 100644 files/id/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/id/learn/how_to_contribute/index.html create mode 100644 files/id/learn/html/howto/index.html create mode 100644 files/id/learn/html/index.html create mode 100644 files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html create mode 100644 files/id/learn/html/multimedia_dan_embedding/index.html create mode 100644 files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html create mode 100644 files/id/learn/html/pengenalan_html/document_and_website_structure/index.html create mode 100644 files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html create mode 100644 files/id/learn/html/pengenalan_html/index.html create mode 100644 files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html create mode 100644 files/id/learn/html/tabel/index.html create mode 100644 files/id/learn/index.html create mode 100644 files/id/learn/javascript/building_blocks/index.html create mode 100644 files/id/learn/javascript/client-side_web_apis/index.html create mode 100644 files/id/learn/javascript/client-side_web_apis/introduction/index.html create mode 100644 files/id/learn/javascript/first_steps/index.html create mode 100644 files/id/learn/javascript/first_steps/what_is_javascript/index.html create mode 100644 files/id/learn/javascript/index.html create mode 100644 files/id/learn/javascript/objects/dasar-dasar/index.html create mode 100644 files/id/learn/javascript/objects/index.html create mode 100644 files/id/learn/server-side/django/development_environment/index.html create mode 100644 files/id/learn/server-side/django/index.html create mode 100644 files/id/learn/server-side/django/tutorial_local_library_website/index.html create mode 100644 files/id/learn/server-side/first_steps/index.html create mode 100644 files/id/learn/server-side/index.html create mode 100644 files/id/learn/web_mechanics/index.html create mode 100644 files/id/mdn/about/index.html create mode 100644 files/id/mdn/contribute/feedback/index.html create mode 100644 files/id/mdn/contribute/getting_started/index.html create mode 100644 files/id/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/id/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/id/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/id/mdn/contribute/howto/index.html create mode 100644 files/id/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/id/mdn/contribute/howto/tag/index.html create mode 100644 files/id/mdn/contribute/index.html create mode 100644 files/id/mdn/contribute/processes/index.html create mode 100644 files/id/mdn/contribute/tugas/index.html create mode 100644 files/id/mdn/guidelines/index.html create mode 100644 files/id/mdn/guidelines/layout/index.html create mode 100644 files/id/mdn/guidelines/writing_style_guide/index.html create mode 100644 files/id/mdn/index.html create mode 100644 files/id/mdn/komunitas/conversations/index.html create mode 100644 files/id/mdn/komunitas/index.html create mode 100644 files/id/mdn/user_guide/index.html create mode 100644 files/id/mdn/user_guide/menghapus_halaman/index.html create mode 100644 files/id/mozilla/add-ons/index.html create mode 100644 files/id/mozilla/add-ons/setting_up_extension_development_environment/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/apa_itu_webextensions/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/api/browsersettings/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/api/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/api/notifikasi/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/api/windows/createtype/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/api/windows/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/content_scripts/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/index.html create mode 100644 files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html create mode 100644 files/id/mozilla/connect/index.html create mode 100644 files/id/mozilla/firefox/edisi_pengembang/index.html create mode 100644 files/id/mozilla/firefox/index.html create mode 100644 files/id/mozilla/firefox/privacy/index.html create mode 100644 files/id/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html create mode 100644 files/id/mozilla/firefox/privacy/storage_access_policy/errors/index.html create mode 100644 files/id/mozilla/firefox/privacy/storage_access_policy/index.html create mode 100644 files/id/mozilla/firefox/releases/index.html create mode 100644 files/id/mozilla/gecko/index.html create mode 100644 files/id/mozilla/index.html create mode 100644 files/id/mozilla/localization/index.html create mode 100644 files/id/mozilla/localization/localizing_with_verbatim/index.html create mode 100644 files/id/mozilla/localization/quick_start_guide/index.html create mode 100644 files/id/mozilla/localization/quick_start_guide/qa_phase/index.html create mode 100644 files/id/mozilla/localization/web_localizability/index.html create mode 100644 files/id/mozilla/mercurial/basics/index.html create mode 100644 files/id/mozilla/mercurial/index.html create mode 100644 files/id/mozilla/persona/index.html create mode 100644 files/id/mozilla/projects/index.html create mode 100644 files/id/mozilla/projects/nss/index.html create mode 100644 files/id/mozilla/projects/rhino/index.html create mode 100644 files/id/pengembangan_web/index.html create mode 100644 files/id/sandbox/index.html create mode 100644 files/id/tools/accessibility_inspector/index.html create mode 100644 files/id/tools/debugger/index.html create mode 100644 files/id/tools/index.html create mode 100644 files/id/tools/page_inspector/how_to/index.html create mode 100644 files/id/tools/page_inspector/index.html create mode 100644 files/id/tools/remote_debugging/index.html create mode 100644 files/id/tools/webide/index.html create mode 100644 files/id/tools/webide/troubleshooting/index.html create mode 100644 files/id/web/api/abstractworker/index.html create mode 100644 files/id/web/api/api_push/index.html create mode 100644 files/id/web/api/cachestorage/index.html create mode 100644 files/id/web/api/canvas_api/index.html create mode 100644 files/id/web/api/console/index.html create mode 100644 files/id/web/api/document/createelement/index.html create mode 100644 files/id/web/api/document/index.html create mode 100644 files/id/web/api/document/links/index.html create mode 100644 files/id/web/api/document/write/index.html create mode 100644 files/id/web/api/event/currenttarget/index.html create mode 100644 files/id/web/api/event/index.html create mode 100644 files/id/web/api/event/target/index.html create mode 100644 files/id/web/api/fetch_api/index.html create mode 100644 files/id/web/api/index.html create mode 100644 files/id/web/api/mobile_connection_api/index.html create mode 100644 files/id/web/api/navigator/index.html create mode 100644 files/id/web/api/navigator/mediadevices/index.html create mode 100644 files/id/web/api/navigator/serviceworker/index.html create mode 100644 files/id/web/api/service_worker_api/index.html create mode 100644 files/id/web/api/service_worker_api/using_service_workers/index.html create mode 100644 files/id/web/api/serviceworker/index.html create mode 100644 files/id/web/api/serviceworkercontainer/index.html create mode 100644 files/id/web/api/serviceworkerregistration/index.html create mode 100644 files/id/web/api/serviceworkerregistration/pushmanager/index.html create mode 100644 files/id/web/api/speechsynthesis/index.html create mode 100644 files/id/web/api/speechsynthesis/onvoiceschanged/index.html create mode 100644 files/id/web/api/storage/index.html create mode 100644 files/id/web/api/webgl_api/index.html create mode 100644 files/id/web/api/webrtc_api/index.html create mode 100644 files/id/web/api/window/getselection/index.html create mode 100644 files/id/web/api/window/index.html create mode 100644 files/id/web/api/window/window/index.html create mode 100644 files/id/web/api/xmlhttprequest/index.html create mode 100644 files/id/web/api/xmlhttprequest/using_xmlhttprequest/index.html create mode 100644 files/id/web/css/@font-face/font-display/index.html create mode 100644 files/id/web/css/@font-face/index.html create mode 100644 files/id/web/css/_colon_active/index.html create mode 100644 files/id/web/css/background-color/index.html create mode 100644 files/id/web/css/css_box_model/index.html create mode 100644 files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/id/web/css/css_selectors/index.html create mode 100644 files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/id/web/css/flex-direction/index.html create mode 100644 files/id/web/css/index.html create mode 100644 files/id/web/css/mask-border-width/index.html create mode 100644 files/id/web/css/referensi/index.html create mode 100644 files/id/web/css/text-transform/index.html create mode 100644 files/id/web/css/type_selectors/index.html create mode 100644 files/id/web/events/cached/index.html create mode 100644 files/id/web/events/error/index.html create mode 100644 files/id/web/events/index.html create mode 100644 files/id/web/guide/api/index.html create mode 100644 files/id/web/guide/api/webrtc/index.html create mode 100644 files/id/web/guide/css/getting_started/index.html create mode 100644 files/id/web/guide/css/media_queries/index.html create mode 100644 files/id/web/guide/grafis/index.html create mode 100644 files/id/web/guide/html/forms/index.html create mode 100644 files/id/web/guide/html/html5/index.html create mode 100644 files/id/web/guide/index.html create mode 100644 files/id/web/html/element/base/index.html create mode 100644 files/id/web/html/element/dialog/index.html create mode 100644 files/id/web/html/element/image/index.html create mode 100644 files/id/web/html/element/index.html create mode 100644 files/id/web/html/index.html create mode 100644 files/id/web/http/basics_of_http/index.html create mode 100644 files/id/web/http/gambaran/index.html create mode 100644 files/id/web/http/index.html create mode 100644 files/id/web/http/methods/get/index.html create mode 100644 files/id/web/http/methods/index.html create mode 100644 files/id/web/http/proxy_servers_and_tunneling/index.html create mode 100644 files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html create mode 100644 files/id/web/http/status/100/index.html create mode 100644 files/id/web/http/status/200/index.html create mode 100644 files/id/web/http/status/400/index.html create mode 100644 files/id/web/http/status/403/index.html create mode 100644 files/id/web/http/status/404/index.html create mode 100644 files/id/web/http/status/405/index.html create mode 100644 files/id/web/http/status/410/index.html create mode 100644 files/id/web/http/status/500/index.html create mode 100644 files/id/web/http/status/index.html create mode 100644 files/id/web/index.html create mode 100644 files/id/web/javascript/a_re-introduction_to_javascript/index.html create mode 100644 files/id/web/javascript/data_structures/index.html create mode 100644 files/id/web/javascript/index.html create mode 100644 files/id/web/javascript/inheritance_dan_prototype_chain/index.html create mode 100644 files/id/web/javascript/language_resources/index.html create mode 100644 files/id/web/javascript/memory_management/index.html create mode 100644 files/id/web/javascript/new_in_javascript/index.html create mode 100644 files/id/web/javascript/panduan/closures/index.html create mode 100644 files/id/web/javascript/panduan/index.html create mode 100644 files/id/web/javascript/panduan/loops_and_iteration/index.html create mode 100644 files/id/web/javascript/panduan/numbers_and_dates/index.html create mode 100644 files/id/web/javascript/panduan/pengenalan/index.html create mode 100644 files/id/web/javascript/panduan/tentang/index.html create mode 100644 files/id/web/javascript/panduan/values,_variables,_and_literals/index.html create mode 100644 files/id/web/javascript/panduan/working_with_objects/index.html create mode 100644 files/id/web/javascript/reference/about/index.html create mode 100644 files/id/web/javascript/reference/classes/constructor/index.html create mode 100644 files/id/web/javascript/reference/classes/extends/index.html create mode 100644 files/id/web/javascript/reference/classes/index.html create mode 100644 files/id/web/javascript/reference/errors/called_on_incompatible_type/index.html create mode 100644 files/id/web/javascript/reference/errors/index.html create mode 100644 files/id/web/javascript/reference/errors/invalid_array_length/index.html create mode 100644 files/id/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/id/web/javascript/reference/errors/negative_repetition_count/index.html create mode 100644 files/id/web/javascript/reference/errors/not_a_codepoint/index.html create mode 100644 files/id/web/javascript/reference/errors/not_defined/index.html create mode 100644 files/id/web/javascript/reference/errors/property_access_denied/index.html create mode 100644 files/id/web/javascript/reference/errors/too_much_recursion/index.html create mode 100644 files/id/web/javascript/reference/functions/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/id/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/id/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/id/web/javascript/reference/global_objects/date/index.html create mode 100644 files/id/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/id/web/javascript/reference/global_objects/date/tojson/index.html create mode 100644 files/id/web/javascript/reference/global_objects/date/totimestring/index.html create mode 100644 files/id/web/javascript/reference/global_objects/error/index.html create mode 100644 files/id/web/javascript/reference/global_objects/error/name/index.html create mode 100644 files/id/web/javascript/reference/global_objects/function/displayname/index.html create mode 100644 files/id/web/javascript/reference/global_objects/function/index.html create mode 100644 files/id/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/id/web/javascript/reference/global_objects/function/name/index.html create mode 100644 files/id/web/javascript/reference/global_objects/function/prototype/index.html create mode 100644 files/id/web/javascript/reference/global_objects/index.html create mode 100644 files/id/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/id/web/javascript/reference/global_objects/json/index.html create mode 100644 files/id/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/id/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/id/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/id/web/javascript/reference/global_objects/map/index.html create mode 100644 files/id/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/id/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/id/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/id/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/id/web/javascript/reference/global_objects/math/index.html create mode 100644 files/id/web/javascript/reference/global_objects/math/ln10/index.html create mode 100644 files/id/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/id/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/id/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/id/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/id/web/javascript/reference/global_objects/object/index.html create mode 100644 files/id/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/id/web/javascript/reference/global_objects/object/preventextensions/index.html create mode 100644 files/id/web/javascript/reference/global_objects/promise/catch/index.html create mode 100644 files/id/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/id/web/javascript/reference/global_objects/promise/reject/index.html create mode 100644 files/id/web/javascript/reference/global_objects/promise/resolve/index.html create mode 100644 files/id/web/javascript/reference/global_objects/promise/then/index.html create mode 100644 files/id/web/javascript/reference/global_objects/regexp/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/concat/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/fromcharcode/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/fromcodepoint/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/link/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/purwarupa/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/split/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/tolowercase/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/tostring/index.html create mode 100644 files/id/web/javascript/reference/global_objects/string/touppercase/index.html create mode 100644 files/id/web/javascript/reference/global_objects/typedarray/index.html create mode 100644 files/id/web/javascript/reference/global_objects/typedarray/join/index.html create mode 100644 files/id/web/javascript/reference/index.html create mode 100644 files/id/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/id/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/id/web/javascript/reference/operators/fungsi/index.html create mode 100644 files/id/web/javascript/reference/operators/index.html create mode 100644 files/id/web/javascript/reference/operators/yield/index.html create mode 100644 files/id/web/javascript/reference/statements/class/index.html create mode 100644 files/id/web/javascript/reference/statements/do...while/index.html create mode 100644 files/id/web/javascript/reference/statements/empty/index.html create mode 100644 files/id/web/javascript/reference/statements/export/index.html create mode 100644 files/id/web/javascript/reference/statements/for...in/index.html create mode 100644 files/id/web/javascript/reference/statements/fungsi/index.html create mode 100644 files/id/web/javascript/reference/statements/index.html create mode 100644 files/id/web/javascript/sekilas_teknologi_javascript/index.html create mode 100644 files/id/web/mathml/element/index.html create mode 100644 files/id/web/mathml/index.html create mode 100644 files/id/web/reference/api/index.html create mode 100644 files/id/web/reference/index.html create mode 100644 files/id/web/security/index.html create mode 100644 files/id/web/web_components/index.html create mode 100644 files/id/zones/index.html create mode 100644 files/it/_redirects.txt create mode 100644 files/it/_wikihistory.json create mode 100644 files/it/adattare_le_applicazioni_xul_a_firefox_1.5/index.html create mode 100644 files/it/aggiungere_fornitori_di_dati_anti-phishing/index.html create mode 100644 files/it/api_sociale/index.html create mode 100644 files/it/archive/add-ons/index.html create mode 100644 files/it/archive/add-ons/supportare_i_suggerimenti_nei_plugin_di_ricerca/index.html create mode 100644 files/it/archive/add-ons/sviluppare_un_estensione/index.html create mode 100644 files/it/archive/b2g_os/apps/index.html create mode 100644 files/it/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/automated_testing/index.html create mode 100644 files/it/archive/b2g_os/building/index.html create mode 100644 files/it/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html create mode 100644 files/it/archive/b2g_os/building_and_installing_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/building_and_installing_firefox_os/sommario_del_processo_di_compilazione_di_b2g_os/index.html create mode 100644 files/it/archive/b2g_os/debugging/index.html create mode 100644 files/it/archive/b2g_os/debugging/installazione_adb/index.html create mode 100644 files/it/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/developing_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/firefox_os_apps/building_blocks/index.html create mode 100644 files/it/archive/b2g_os/firefox_os_apps/index.html create mode 100644 files/it/archive/b2g_os/firefox_os_usage_tips/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/build_system_primer/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/customizing_build-time_apps/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/diversi_modi_per_eseguire_gaia/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/gaia_tools_reference/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/make_options_reference/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/making_gaia_code_changes/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/running_the_gaia_codebase/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/submitting_a_gaia_patch/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/testing_gaia_code_changes/index.html create mode 100644 files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/understanding_the_gaia_codebase/index.html create mode 100644 files/it/archive/b2g_os/index.html create mode 100644 files/it/archive/b2g_os/installare_su_un_dispositivo_mobile/index.html create mode 100644 files/it/archive/b2g_os/introduction/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/fairphone/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/flame/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/geeksphone/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/specifiche_telefoni_dispositivi/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/zte_open/index.html create mode 100644 files/it/archive/b2g_os/phone_guide/zte_open_c/index.html create mode 100644 files/it/archive/b2g_os/platform/apps_architecture/index.html create mode 100644 files/it/archive/b2g_os/platform/architecture/index.html create mode 100644 files/it/archive/b2g_os/platform/feature_support_chart/index.html create mode 100644 files/it/archive/b2g_os/platform/gaia/gaia_apps/index.html create mode 100644 files/it/archive/b2g_os/platform/gaia/hacking/index.html create mode 100644 files/it/archive/b2g_os/platform/gaia/index.html create mode 100644 files/it/archive/b2g_os/platform/gonk/index.html create mode 100644 files/it/archive/b2g_os/platform/index.html create mode 100644 files/it/archive/b2g_os/platform/settings_list/index.html create mode 100644 files/it/archive/b2g_os/preparazione_della_tua_prima_build_di_b2g/index.html create mode 100644 files/it/archive/b2g_os/prerequisiti_firefox_os_build/index.html create mode 100644 files/it/archive/b2g_os/quickstart/app_tools/index.html create mode 100644 files/it/archive/b2g_os/quickstart/index.html create mode 100644 files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html create mode 100644 files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html create mode 100644 files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html create mode 100644 files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html create mode 100644 files/it/archive/b2g_os/security/index.html create mode 100644 files/it/archive/b2g_os/security/security_model/index.html create mode 100644 files/it/archive/b2g_os/simulator/index.html create mode 100644 files/it/archive/b2g_os/sviluppo_applicazioni/index.html create mode 100644 files/it/archive/b2g_os/tvs_connected_devices/index.html create mode 100644 files/it/archive/b2g_os/usare_l_app_manager/index.html create mode 100644 files/it/archive/b2g_os/ux/building_blocks/action_menu/index.html create mode 100644 files/it/archive/b2g_os/ux/building_blocks/bottoni/index.html create mode 100644 files/it/archive/b2g_os/ux/building_blocks/conferme/index.html create mode 100644 files/it/archive/b2g_os/ux/building_blocks/index.html create mode 100644 files/it/archive/b2g_os/ux/design_asset_library/index.html create mode 100644 files/it/archive/b2g_os/web_applications/index.html create mode 100644 files/it/archive/index.html create mode 100644 files/it/archive/mdn/index.html create mode 100644 files/it/archive/mozilla/index.html create mode 100644 files/it/archive/mozilla/persona/.well-known-browserid/index.html create mode 100644 "files/it/archive/mozilla/persona/compatibilit\303\240_con_i_browser/index.html" create mode 100644 files/it/archive/mozilla/persona/index.html create mode 100644 files/it/archive/mozilla/persona/internationalization/index.html create mode 100644 files/it/archive/mozilla/persona/libraries_and_plugins/index.html create mode 100644 files/it/archive/mozilla/persona/marchio/index.html create mode 100644 files/it/archive/mozilla/persona/quick_setup/index.html create mode 100644 files/it/archive/mozilla/persona/remote_verification_api/index.html create mode 100644 files/it/archive/mozilla/persona/security_considerations/index.html create mode 100644 files/it/archive/mozilla/persona/the_implementor_s_guide/index.html create mode 100644 files/it/archive/mozilla/persona/the_implementor_s_guide/testing/index.html create mode 100644 files/it/archive/mozilla/persona/the_navigator.id_api/index.html create mode 100644 files/it/archive/mozilla/persona/why_persona/index.html create mode 100644 files/it/archive/mozilla/xbl/index.html create mode 100644 files/it/archive/mozilla/xul/index.html create mode 100644 files/it/archive/mozilla/xul/tutorial/index.html create mode 100644 files/it/archive/mozilla/xulrunner/a_cosa_serve_xulrunner/index.html create mode 100644 files/it/archive/mozilla/xulrunner/applicazioni_basate_su_xulrunner/index.html create mode 100644 files/it/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html create mode 100644 files/it/archive/mozilla/xulrunner/index.html create mode 100644 files/it/archive/mozilla/xulrunner/note_di_rilascio_di_xulrunner_1.8.0.4/index.html create mode 100644 files/it/archive/mozilla/xulrunner/xulrunner_faq/index.html create mode 100644 files/it/archive/rss/index.html create mode 100644 files/it/archive/rss/iniziare/index.html create mode 100644 files/it/archive/standard_web/index.html create mode 100644 files/it/archive/standard_web/issues_arising_from_arbitrary-element_hover/index.html create mode 100644 files/it/archive/standard_web/rdf_in_fifty_words_or_less/index.html create mode 100644 files/it/archive/web/index.html create mode 100644 files/it/archive/web/server-side_javascript/index.html create mode 100644 files/it/cambiamenti_di_xmlhttprequest_in_gecko1.8/index.html create mode 100644 files/it/circa_il_document_object_model/index.html create mode 100644 "files/it/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" create mode 100644 files/it/conoscere_i_css/che_cosa_sono_i_css/index.html create mode 100644 files/it/conoscere_i_css/come_funzionano_i_css/index.html create mode 100644 files/it/conoscere_i_css/css_leggibili/index.html create mode 100644 files/it/conoscere_i_css/i_selettori/index.html create mode 100644 files/it/conoscere_i_css/index.html create mode 100644 "files/it/conoscere_i_css/perch\303\251_usare_i_css/index.html" create mode 100644 files/it/costruire_e_decostruire_un_documento_xml/index.html create mode 100644 files/it/creare_estensioni_personalizzate_per_firefox_con_il_sistema_di_sviluppo_di_mozilla/index.html create mode 100644 files/it/creare_patch/index.html create mode 100644 files/it/creare_plugin_mozsearch/index.html create mode 100644 files/it/creare_un_installer_per_windows_di_seamonkey/index.html create mode 100644 files/it/creare_un_microsommario/index.html create mode 100644 files/it/dare_una_mano_al_puntatore/index.html create mode 100644 files/it/dhtml/index.html create mode 100644 files/it/dom/index.html create mode 100644 files/it/dom_inspector/index.html create mode 100644 files/it/domande_frequenti_sulle_estensioni/index.html create mode 100644 files/it/e4x/index.html create mode 100644 "files/it/estensioni/comunit\303\240/index.html" create mode 100644 files/it/estensioni/index.html create mode 100644 files/it/firefox_1.5_per_sviluppatori/index.html create mode 100644 files/it/firefox_18_for_developers/index.html create mode 100644 files/it/firefox_2.0_per_sviluppatori/index.html create mode 100644 files/it/games/index.html create mode 100644 files/it/games/publishing_games/index.html create mode 100644 files/it/gecko/index.html create mode 100644 files/it/gli_user_agent_di_gecko/index.html create mode 100644 files/it/glossary/ajax/index.html create mode 100644 files/it/glossary/array/index.html create mode 100644 files/it/glossary/block/css/index.html create mode 100644 files/it/glossary/block/index.html create mode 100644 files/it/glossary/control_flow/index.html create mode 100644 files/it/glossary/css/index.html create mode 100644 files/it/glossary/doctype/index.html create mode 100644 files/it/glossary/first-class_function/index.html create mode 100644 files/it/glossary/head/index.html create mode 100644 files/it/glossary/header_di_risposta/index.html create mode 100644 files/it/glossary/hoisting/index.html create mode 100644 files/it/glossary/html/index.html create mode 100644 files/it/glossary/html5/index.html create mode 100644 files/it/glossary/http/index.html create mode 100644 files/it/glossary/index.html create mode 100644 files/it/glossary/javascript/index.html create mode 100644 files/it/glossary/node/dom/index.html create mode 100644 files/it/glossary/node/index.html create mode 100644 files/it/glossary/nullish/index.html create mode 100644 files/it/glossary/primitive/index.html create mode 100644 files/it/glossary/protocollo/index.html create mode 100644 files/it/glossary/reflow/index.html create mode 100644 files/it/glossary/rest/index.html create mode 100644 files/it/glossary/serialization/index.html create mode 100644 files/it/glossary/undefined/index.html create mode 100644 files/it/glossary/world_wide_web/index.html create mode 100644 files/it/il_modulo_xml_extras/index.html create mode 100644 files/it/impacchettare_l'estensione/index.html create mode 100644 files/it/incorporare_mozilla/index.html create mode 100644 files/it/indentazione_corretta_delle_liste/index.html create mode 100644 files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html create mode 100644 files/it/introduzione_a_svg_dentro_xhtml/index.html create mode 100644 files/it/le_colonne_nei_css3/index.html create mode 100644 files/it/le_preferenze_utente_e_xforms/index.html create mode 100644 "files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/multimedia/index.html" create mode 100644 "files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" create mode 100644 files/it/learn/come_contribuire/index.html create mode 100644 files/it/learn/common_questions/index.html create mode 100644 files/it/learn/common_questions/thinking_before_coding/index.html create mode 100644 files/it/learn/css/building_blocks/index.html create mode 100644 files/it/learn/css/building_blocks/selettori/index.html create mode 100644 files/it/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/it/learn/css/css_layout/flexbox/index.html create mode 100644 files/it/learn/css/css_layout/index.html create mode 100644 files/it/learn/css/css_layout/introduction/index.html create mode 100644 files/it/learn/css/css_layout/normal_flow/index.html create mode 100644 files/it/learn/css/index.html create mode 100644 files/it/learn/css/styling_text/definire_stili_link/index.html create mode 100644 files/it/learn/css/styling_text/index.html create mode 100644 "files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/index.html" create 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/css_basics/index.html create 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/html_basics/index.html create mode 100644 files/it/learn/getting_started_with_the_web/index.html create mode 100644 files/it/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/it/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/it/learn/getting_started_with_the_web/pubbicare_sito/index.html create mode 100644 files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html create mode 100644 files/it/learn/html/forms/form_validation/index.html create mode 100644 files/it/learn/html/forms/index.html create mode 100644 files/it/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/it/learn/html/howto/index.html create mode 100644 files/it/learn/html/howto/uso_attributi_data/index.html create mode 100644 files/it/learn/html/index.html create 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/getting_started/index.html create 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/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/immagini_reattive/index.html create mode 100644 files/it/learn/html/multimedia_and_embedding/index.html create mode 100644 files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html create mode 100644 files/it/learn/html/tables/index.html create mode 100644 files/it/learn/index.html create mode 100644 files/it/learn/javascript/building_blocks/index.html create mode 100644 files/it/learn/javascript/comefare/index.html create mode 100644 "files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" create mode 100644 files/it/learn/javascript/first_steps/index.html create mode 100644 files/it/learn/javascript/first_steps/variabili/index.html create mode 100644 files/it/learn/javascript/index.html create mode 100644 files/it/learn/javascript/oggetti/basics/index.html create mode 100644 files/it/learn/javascript/oggetti/index.html create mode 100644 files/it/learn/javascript/oggetti/json/index.html create mode 100644 "files/it/learn/riservatezza,_integrit\303\240_e_disponibilit\303\240/index.html" create mode 100644 files/it/learn/server-side/django/admin_site/index.html create mode 100644 files/it/learn/server-side/django/authentication/index.html create mode 100644 files/it/learn/server-side/django/development_environment/index.html create mode 100644 files/it/learn/server-side/django/forms/index.html create mode 100644 files/it/learn/server-side/django/generic_views/index.html create mode 100644 files/it/learn/server-side/django/home_page/index.html create mode 100644 files/it/learn/server-side/django/index.html create mode 100644 files/it/learn/server-side/django/introduzione/index.html create mode 100644 files/it/learn/server-side/django/models/index.html create mode 100644 files/it/learn/server-side/django/sessions/index.html create mode 100644 files/it/learn/server-side/django/skeleton_website/index.html create mode 100644 files/it/learn/server-side/django/tutorial_local_library_website/index.html create mode 100644 files/it/learn/server-side/express_nodejs/index.html create mode 100644 files/it/learn/server-side/index.html create mode 100644 files/it/link_prefetching_faq/index.html create mode 100644 files/it/localization/index.html create mode 100644 files/it/mdn/about/index.html create mode 100644 files/it/mdn/community/index.html create mode 100644 files/it/mdn/contribute/creating_and_editing_pages/index.html create mode 100644 files/it/mdn/contribute/feedback/index.html create mode 100644 files/it/mdn/contribute/getting_started/index.html create mode 100644 files/it/mdn/contribute/howto/convert_code_samples_to_be_live/index.html create mode 100644 files/it/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/it/mdn/contribute/howto/delete_my_profile/index.html create mode 100644 files/it/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/it/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/index.html create mode 100644 files/it/mdn/contribute/howto/index.html create mode 100644 files/it/mdn/contribute/howto/tag/index.html create mode 100644 files/it/mdn/contribute/index.html create mode 100644 files/it/mdn/contribute/localize/guidaitaliano/index.html create mode 100644 files/it/mdn/contribute/localize/index.html create mode 100644 files/it/mdn/contribute/localize/progetti_localizzazione/index.html create mode 100644 files/it/mdn/contribute/localize/translating_pages/index.html create mode 100644 files/it/mdn/contribute/persona_sign-in/index.html create mode 100644 files/it/mdn/editor/index.html create mode 100644 files/it/mdn/guidelines/index.html create mode 100644 files/it/mdn/guidelines/macros/index.html create mode 100644 files/it/mdn/guidelines/migliore_pratica/index.html create mode 100644 files/it/mdn/index.html create mode 100644 files/it/mdn/structures/index.html create mode 100644 "files/it/mdn/structures/tabelle_compatibilit\303\240/index.html" create mode 100644 files/it/mdn_at_ten/index.html create mode 100644 files/it/midas/index.html create mode 100644 files/it/midas/security_preferences/index.html create mode 100644 files/it/migrare_applicazioni_da_internet_explorer_a_mozilla/index.html create mode 100644 files/it/mozilla/add-ons/index.html create mode 100644 files/it/mozilla/add-ons/kaspersky/index.html create mode 100644 files/it/mozilla/add-ons/overlay_extensions/firefox_addons_developer_guide/index.html create mode 100644 files/it/mozilla/add-ons/overlay_extensions/index.html create mode 100644 files/it/mozilla/add-ons/overlay_extensions/xul_school/getting_started_with_firefox_extensions/index.html create mode 100644 files/it/mozilla/add-ons/overlay_extensions/xul_school/index.html create mode 100644 files/it/mozilla/add-ons/performance_best_practices_in_extensions/index.html create mode 100644 files/it/mozilla/add-ons/sdk/builder/index.html create mode 100644 files/it/mozilla/add-ons/sdk/guide/index.html create mode 100644 files/it/mozilla/add-ons/sdk/index.html create mode 100644 files/it/mozilla/add-ons/sdk/tutorials/index.html create mode 100644 files/it/mozilla/add-ons/sdk/tutorials/installazione/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/api/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/api/runtime/connectnative/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/api/runtime/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/api/search/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/cosa_sono_le_webextensions/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/la_tua_prima_webextension/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/script_contenuto/index.html create mode 100644 files/it/mozilla/add-ons/webextensions/user_interface/index.html create mode 100644 files/it/mozilla/bugzilla/index.html create mode 100644 files/it/mozilla/bugzilla/testopia/index.html create mode 100644 files/it/mozilla/connettere/index.html create mode 100644 files/it/mozilla/developer_guide/index.html create mode 100644 files/it/mozilla/firefox/developer_edition/index.html create mode 100644 files/it/mozilla/firefox/developer_edition/ripristinare/index.html create mode 100644 "files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" create mode 100644 files/it/mozilla/firefox/index.html create mode 100644 files/it/mozilla/firefox/multiprocess_firefox/index.html create mode 100644 files/it/mozilla/firefox/releases/40/index.html create mode 100644 files/it/mozilla/firefox/releases/42/index.html create mode 100644 files/it/mozilla/firefox/releases/59/index.html create mode 100644 files/it/mozilla/firefox/releases/64/index.html create mode 100644 files/it/mozilla/firefox/releases/66/index.html create mode 100644 files/it/mozilla/firefox/releases/index.html create mode 100644 files/it/mozilla/firefox_for_android/index.html create mode 100644 files/it/mozilla/index.html create mode 100644 files/it/mozilla/localizzazione/index.html create mode 100644 files/it/mozilla/marketplace/criteri_revisione_marketplace/index.html create mode 100644 files/it/mozilla/marketplace/index.html create mode 100644 files/it/mozilla/marketplace/monetization/introduction_monetization/index.html create mode 100644 files/it/mozilla/marketplace/monetization/profiting_from_your_app/index.html create mode 100644 files/it/mozilla/marketplace/options/index.html create mode 100644 files/it/mozilla/marketplace/options/packaged_apps/index.html create mode 100644 files/it/mozilla/marketplace/prepare/choosing_your_business_model/index.html create mode 100644 files/it/mozilla/marketplace/prepare/introduction/index.html create mode 100644 files/it/mozilla/marketplace/publishing/index.html create mode 100644 files/it/mozilla/marketplace/publishing/opzioni_pubblicazione_app/index.html create mode 100644 files/it/mozilla/marketplace/publishing/submit/index.html create mode 100644 files/it/mozilla/mobile/index.html create mode 100644 files/it/mozilla/mobile/viewport_meta_tag/index.html create mode 100644 files/it/mozilla/performance/about_colon_memory/index.html create mode 100644 files/it/mozilla/performance/index.html create mode 100644 files/it/mozilla/preferences/index.html create mode 100644 files/it/mozilla/preferences/una_breve_guida_alle_impostazioni_di_mozilla/index.html create mode 100644 files/it/mozilla/projects/index.html create mode 100644 files/it/mozilla/projects/nss/esempi_codice_nss/index.html create mode 100644 files/it/mozilla/projects/nss/index.html create mode 100644 files/it/mozilla/qa/bug_writing_lineeguida/index.html create mode 100644 files/it/mozilla/qa/index.html create mode 100644 files/it/mozilla/tech/index.html create mode 100644 files/it/nspr/index.html create mode 100644 files/it/nuove_tabelle_di_compatibilita_in_beta/index.html create mode 100644 files/it/plug-in/index.html create mode 100644 files/it/python/index.html create mode 100644 files/it/rdf/index.html create mode 100644 files/it/rhino/index.html create mode 100644 files/it/rhino/scarica_rhino/index.html create mode 100644 files/it/spidermonkey/index.html create mode 100644 files/it/stringhe_user_agent_di_gecko/index.html create mode 100644 files/it/strumenti_di_sviluppo_aderenti_agli_standard/index.html create mode 100644 files/it/svg/index.html create mode 100644 files/it/sviluppare_mozilla/index.html create mode 100644 files/it/sviluppo_web/index.html create mode 100644 files/it/temi/background/index.html create mode 100644 files/it/temi/index.html create mode 100644 files/it/toolkit_api/index.html create mode 100644 files/it/tools/add-ons/index.html create mode 100644 files/it/tools/debugger/how_to/disable_breakpoints/index.html create mode 100644 files/it/tools/debugger/how_to/index.html create mode 100644 files/it/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/it/tools/debugger/how_to/set_a_breakpoint/index.html create mode 100644 files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html create mode 100644 files/it/tools/debugger/how_to/step_through_code/index.html create mode 100644 files/it/tools/debugger/index.html create mode 100644 files/it/tools/index.html create mode 100644 files/it/tools/page_inspector/index.html create mode 100644 files/it/tools/prestazioni/index.html create mode 100644 files/it/tools/remote_debugging/index.html create mode 100644 files/it/tools/visualizzazione_flessibile/index.html create mode 100644 files/it/tools/web_console/helpers/index.html create mode 100644 files/it/tools/web_console/index.html create mode 100644 files/it/tools/webide/index.html create mode 100644 files/it/tools/webide/monitor/index.html create mode 100644 files/it/tools/webide/troubleshooting/index.html create mode 100644 files/it/tutorial_sulle_canvas/index.html create mode 100644 files/it/venkman/index.html create mode 100644 files/it/visualizzare_e_cercare_il_sorgente_di_mozilla_online/index.html create mode 100644 files/it/web/accessibility/index.html create mode 100644 files/it/web/accessibility/sviluppo_web/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html create mode 100644 files/it/web/api/closeevent/index.html create mode 100644 files/it/web/api/console/index.html create mode 100644 files/it/web/api/console/log/index.html create mode 100644 files/it/web/api/console/table/index.html create mode 100644 files/it/web/api/crypto/index.html create mode 100644 files/it/web/api/crypto/subtle/index.html create mode 100644 files/it/web/api/datatransfer/getdata/index.html create mode 100644 files/it/web/api/datatransfer/index.html create mode 100644 files/it/web/api/document/anchors/index.html create mode 100644 files/it/web/api/document/applets/index.html create mode 100644 files/it/web/api/document/body/index.html create mode 100644 files/it/web/api/document/characterset/index.html create mode 100644 files/it/web/api/document/close/index.html create mode 100644 files/it/web/api/document/createelement/index.html create mode 100644 files/it/web/api/document/createrange/index.html create mode 100644 files/it/web/api/document/defaultview/index.html create mode 100644 files/it/web/api/document/doctype/index.html create mode 100644 files/it/web/api/document/documentelement/index.html create mode 100644 files/it/web/api/document/firstchild/index.html create mode 100644 files/it/web/api/document/forms/index.html create mode 100644 files/it/web/api/document/getelementbyid/index.html create mode 100644 files/it/web/api/document/getelementsbyclassname/index.html create mode 100644 files/it/web/api/document/getelementsbyname/index.html create mode 100644 files/it/web/api/document/getelementsbytagname/index.html create mode 100644 files/it/web/api/document/head/index.html create mode 100644 files/it/web/api/document/height/index.html create mode 100644 files/it/web/api/document/images/index.html create mode 100644 files/it/web/api/document/importnode/index.html create mode 100644 files/it/web/api/document/index.html create mode 100644 files/it/web/api/document/lastmodified/index.html create mode 100644 files/it/web/api/document/links/index.html create mode 100644 files/it/web/api/document/namespaceuri/index.html create mode 100644 files/it/web/api/document/open/index.html create mode 100644 files/it/web/api/document/queryselector/index.html create mode 100644 files/it/web/api/document/queryselectorall/index.html create mode 100644 files/it/web/api/document/referrer/index.html create mode 100644 files/it/web/api/document/stylesheets/index.html create mode 100644 files/it/web/api/document/title/index.html create mode 100644 files/it/web/api/document/url/index.html create mode 100644 files/it/web/api/document/width/index.html create mode 100644 files/it/web/api/document/write/index.html create mode 100644 files/it/web/api/document/writeln/index.html create mode 100644 files/it/web/api/document_object_model/index.html create mode 100644 files/it/web/api/document_object_model/introduzione/index.html create mode 100644 files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html create mode 100644 files/it/web/api/domapplicationsregistry/getinstalled/index.html create mode 100644 files/it/web/api/domapplicationsregistry/index.html create mode 100644 files/it/web/api/domstring/index.html create mode 100644 files/it/web/api/domtokenlist/index.html create mode 100644 files/it/web/api/domtokenlist/item/index.html create mode 100644 files/it/web/api/element/addeventlistener/index.html create mode 100644 files/it/web/api/element/attributes/index.html create mode 100644 files/it/web/api/element/childnodes/index.html create mode 100644 files/it/web/api/element/classlist/index.html create mode 100644 files/it/web/api/element/classname/index.html create mode 100644 files/it/web/api/element/clientheight/index.html create mode 100644 files/it/web/api/element/closest/index.html create mode 100644 files/it/web/api/element/firstchild/index.html create mode 100644 files/it/web/api/element/getattribute/index.html create mode 100644 files/it/web/api/element/getelementsbytagname/index.html create mode 100644 files/it/web/api/element/hasattribute/index.html create mode 100644 files/it/web/api/element/hasattributes/index.html create mode 100644 files/it/web/api/element/index.html create mode 100644 files/it/web/api/element/innerhtml/index.html create mode 100644 files/it/web/api/element/insertadjacenthtml/index.html create mode 100644 files/it/web/api/element/nodename/index.html create mode 100644 files/it/web/api/element/nodetype/index.html create mode 100644 files/it/web/api/element/nodevalue/index.html create mode 100644 files/it/web/api/element/parentnode/index.html create mode 100644 files/it/web/api/element/prefix/index.html create mode 100644 files/it/web/api/element/queryselector/index.html create mode 100644 files/it/web/api/element/queryselectorall/index.html create mode 100644 files/it/web/api/element/removeattribute/index.html create mode 100644 files/it/web/api/element/requestfullscreen/index.html create mode 100644 files/it/web/api/element/scrollheight/index.html create mode 100644 files/it/web/api/element/scrolltop/index.html create mode 100644 files/it/web/api/element/setattribute/index.html create mode 100644 files/it/web/api/element/tagname/index.html create mode 100644 files/it/web/api/element/textcontent/index.html create mode 100644 files/it/web/api/element/toggleattribute/index.html create mode 100644 files/it/web/api/event/altkey/index.html create mode 100644 files/it/web/api/event/bubbles/index.html create mode 100644 files/it/web/api/event/button/index.html create mode 100644 files/it/web/api/event/cancelable/index.html create mode 100644 files/it/web/api/event/charcode/index.html create mode 100644 files/it/web/api/event/ctrlkey/index.html create mode 100644 files/it/web/api/event/currenttarget/index.html create mode 100644 files/it/web/api/event/eventphase/index.html create mode 100644 files/it/web/api/event/index.html create mode 100644 files/it/web/api/event/ischar/index.html create mode 100644 files/it/web/api/event/keycode/index.html create mode 100644 files/it/web/api/event/layerx/index.html create mode 100644 files/it/web/api/event/layery/index.html create mode 100644 files/it/web/api/event/metakey/index.html create mode 100644 files/it/web/api/event/pagex/index.html create mode 100644 files/it/web/api/event/pagey/index.html create mode 100644 files/it/web/api/event/preventdefault/index.html create mode 100644 files/it/web/api/event/shiftkey/index.html create mode 100644 files/it/web/api/event/stoppropagation/index.html create mode 100644 files/it/web/api/event/timestamp/index.html create mode 100644 files/it/web/api/event/type/index.html create mode 100644 files/it/web/api/event/view/index.html create mode 100644 files/it/web/api/event/which/index.html create mode 100644 files/it/web/api/fetch_api/index.html create mode 100644 files/it/web/api/file/index.html create mode 100644 files/it/web/api/file/using_files_from_web_applications/index.html create mode 100644 files/it/web/api/geolocation/index.html create mode 100644 files/it/web/api/geolocation/using_geolocation/index.html create mode 100644 files/it/web/api/geolocation/watchposition/index.html create mode 100644 files/it/web/api/geolocationposition/index.html create mode 100644 files/it/web/api/globaleventhandlers/index.html create mode 100644 files/it/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/it/web/api/htmlcanvaselement/index.html create mode 100644 files/it/web/api/htmlcanvaselement/toblob/index.html create mode 100644 files/it/web/api/htmlcollection/index.html create mode 100644 files/it/web/api/htmlcollection/item/index.html create mode 100644 files/it/web/api/htmlelement/index.html create mode 100644 files/it/web/api/htmlelement/offsetheight/index.html create mode 100644 files/it/web/api/htmlformelement/acceptcharset/index.html create mode 100644 files/it/web/api/htmlformelement/action/index.html create mode 100644 files/it/web/api/htmlformelement/elements/index.html create mode 100644 files/it/web/api/htmlformelement/enctype/index.html create mode 100644 files/it/web/api/htmlformelement/index.html create mode 100644 files/it/web/api/htmlformelement/length/index.html create mode 100644 files/it/web/api/htmlformelement/method/index.html create mode 100644 files/it/web/api/htmlformelement/name/index.html create mode 100644 files/it/web/api/htmlformelement/reset/index.html create mode 100644 files/it/web/api/htmlformelement/submit/index.html create mode 100644 files/it/web/api/htmlformelement/target/index.html create mode 100644 files/it/web/api/htmliframeelement/index.html create mode 100644 files/it/web/api/htmliframeelement/mute/index.html create mode 100644 files/it/web/api/htmlunknownelement/index.html create mode 100644 files/it/web/api/index.html create mode 100644 files/it/web/api/indexeddb_api/index.html create mode 100644 files/it/web/api/mutationobserver/index.html create mode 100644 files/it/web/api/navigator/cookieenabled/index.html create mode 100644 files/it/web/api/navigator/credentials/index.html create mode 100644 files/it/web/api/navigator/index.html create mode 100644 files/it/web/api/navigatorconcurrenthardware/index.html create mode 100644 files/it/web/api/node/appendchild/index.html create mode 100644 files/it/web/api/node/index.html create mode 100644 files/it/web/api/node/lastchild/index.html create mode 100644 files/it/web/api/node/nextsibling/index.html create mode 100644 files/it/web/api/node/previoussibling/index.html create mode 100644 files/it/web/api/nodelist/foreach/index.html create mode 100644 files/it/web/api/nodelist/index.html create mode 100644 files/it/web/api/notifiche/dir/index.html create mode 100644 files/it/web/api/notifiche/index.html create mode 100644 files/it/web/api/parentnode/children/index.html create mode 100644 files/it/web/api/parentnode/firstelementchild/index.html create mode 100644 files/it/web/api/parentnode/index.html create mode 100644 files/it/web/api/parentnode/lastelementchild/index.html create mode 100644 files/it/web/api/performance/index.html create mode 100644 files/it/web/api/performance/now/index.html create mode 100644 files/it/web/api/range/clonecontents/index.html create mode 100644 files/it/web/api/range/clonerange/index.html create mode 100644 files/it/web/api/range/collapse/index.html create mode 100644 files/it/web/api/range/collapsed/index.html create mode 100644 files/it/web/api/range/commonancestorcontainer/index.html create mode 100644 files/it/web/api/range/compareboundarypoints/index.html create mode 100644 files/it/web/api/range/comparepoint/index.html create mode 100644 files/it/web/api/range/createcontextualfragment/index.html create mode 100644 files/it/web/api/range/deletecontents/index.html create mode 100644 files/it/web/api/range/detach/index.html create mode 100644 files/it/web/api/range/endcontainer/index.html create mode 100644 files/it/web/api/range/endoffset/index.html create mode 100644 files/it/web/api/range/extractcontents/index.html create mode 100644 files/it/web/api/range/index.html create mode 100644 files/it/web/api/range/insertnode/index.html create mode 100644 files/it/web/api/range/ispointinrange/index.html create mode 100644 files/it/web/api/range/selectnode/index.html create mode 100644 files/it/web/api/range/selectnodecontents/index.html create mode 100644 files/it/web/api/range/setend/index.html create mode 100644 files/it/web/api/range/setendafter/index.html create mode 100644 files/it/web/api/range/setendbefore/index.html create mode 100644 files/it/web/api/range/setstart/index.html create mode 100644 files/it/web/api/range/setstartafter/index.html create mode 100644 files/it/web/api/range/setstartbefore/index.html create mode 100644 files/it/web/api/range/startcontainer/index.html create mode 100644 files/it/web/api/range/startoffset/index.html create mode 100644 files/it/web/api/range/surroundcontents/index.html create mode 100644 files/it/web/api/range/tostring/index.html create mode 100644 files/it/web/api/selection/addrange/index.html create mode 100644 files/it/web/api/selection/anchornode/index.html create mode 100644 files/it/web/api/selection/anchoroffset/index.html create mode 100644 files/it/web/api/selection/collapse/index.html create mode 100644 files/it/web/api/selection/collapsetoend/index.html create mode 100644 files/it/web/api/selection/collapsetostart/index.html create mode 100644 files/it/web/api/selection/containsnode/index.html create mode 100644 files/it/web/api/selection/deletefromdocument/index.html create mode 100644 files/it/web/api/selection/extend/index.html create mode 100644 files/it/web/api/selection/focusnode/index.html create mode 100644 files/it/web/api/selection/focusoffset/index.html create mode 100644 files/it/web/api/selection/getrangeat/index.html create mode 100644 files/it/web/api/selection/index.html create mode 100644 files/it/web/api/selection/iscollapsed/index.html create mode 100644 files/it/web/api/selection/rangecount/index.html create mode 100644 files/it/web/api/selection/removeallranges/index.html create mode 100644 files/it/web/api/selection/removerange/index.html create mode 100644 files/it/web/api/selection/selectallchildren/index.html create mode 100644 files/it/web/api/selection/tostring/index.html create mode 100644 files/it/web/api/storage/clear/index.html create mode 100644 files/it/web/api/storage/getitem/index.html create mode 100644 files/it/web/api/storage/index.html create mode 100644 files/it/web/api/storage/setitem/index.html create mode 100644 files/it/web/api/urlutils/index.html create mode 100644 files/it/web/api/webgl_api/index.html create mode 100644 files/it/web/api/websocket/index.html create mode 100644 files/it/web/api/websocket/websocket/index.html create mode 100644 files/it/web/api/window/alert/index.html create mode 100644 files/it/web/api/window/back/index.html create mode 100644 files/it/web/api/window/blur/index.html create mode 100644 files/it/web/api/window/close/index.html create mode 100644 files/it/web/api/window/closed/index.html create mode 100644 files/it/web/api/window/confirm/index.html create mode 100644 files/it/web/api/window/crypto/index.html create mode 100644 files/it/web/api/window/defaultstatus/index.html create mode 100644 files/it/web/api/window/devicemotion_event/index.html create mode 100644 files/it/web/api/window/document/index.html create mode 100644 files/it/web/api/window/focus/index.html create mode 100644 files/it/web/api/window/forward/index.html create mode 100644 files/it/web/api/window/getselection/index.html create mode 100644 files/it/web/api/window/history/index.html create mode 100644 files/it/web/api/window/home/index.html create mode 100644 files/it/web/api/window/index.html create mode 100644 files/it/web/api/window/localstorage/index.html create mode 100644 files/it/web/api/window/locationbar/index.html create mode 100644 files/it/web/api/window/matchmedia/index.html create mode 100644 files/it/web/api/window/moveby/index.html create mode 100644 files/it/web/api/window/moveto/index.html create mode 100644 files/it/web/api/window/name/index.html create mode 100644 files/it/web/api/window/onuserproximity/index.html create mode 100644 files/it/web/api/window/opener/index.html create mode 100644 files/it/web/api/window/orientationchange_event/index.html create mode 100644 files/it/web/api/window/print/index.html create mode 100644 files/it/web/api/window/prompt/index.html create mode 100644 files/it/web/api/window/requestanimationframe/index.html create mode 100644 files/it/web/api/window/resizeby/index.html create mode 100644 files/it/web/api/window/resizeto/index.html create mode 100644 files/it/web/api/window/sessionstorage/index.html create mode 100644 files/it/web/api/window/sidebar/index.html create mode 100644 files/it/web/api/window/sizetocontent/index.html create mode 100644 files/it/web/api/window/status/index.html create mode 100644 files/it/web/api/window/statusbar/index.html create mode 100644 files/it/web/api/window/stop/index.html create mode 100644 files/it/web/api/window/top/index.html create mode 100644 files/it/web/api/windoworworkerglobalscope/fetch/index.html create mode 100644 files/it/web/api/windoworworkerglobalscope/index.html create mode 100644 files/it/web/api/windowtimers/clearinterval/index.html create mode 100644 files/it/web/api/windowtimers/index.html create mode 100644 files/it/web/api/worker/index.html create mode 100644 files/it/web/api/xmlhttprequest/index.html create mode 100644 files/it/web/api/xmlhttprequest/onreadystatechange/index.html create mode 100644 files/it/web/api/xmlhttprequest/open/index.html create mode 100644 files/it/web/api/xmlhttprequest/readystate/index.html create mode 100644 files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html create mode 100644 files/it/web/api/xmlhttprequest/xmlhttprequest/index.html create mode 100644 files/it/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/it/web/css/-moz-font-language-override/index.html create mode 100644 files/it/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/it/web/css/@document/index.html create mode 100644 files/it/web/css/_colon_-moz-first-node/index.html create mode 100644 files/it/web/css/_colon_-moz-last-node/index.html create mode 100644 files/it/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/it/web/css/_colon_active/index.html create mode 100644 files/it/web/css/_colon_focus/index.html create mode 100644 files/it/web/css/_colon_hover/index.html create mode 100644 files/it/web/css/_doublecolon_selection/index.html create mode 100644 files/it/web/css/attribute_selectors/index.html create mode 100644 files/it/web/css/background-attachment/index.html create mode 100644 files/it/web/css/background-color/index.html create mode 100644 files/it/web/css/background-image/index.html create mode 100644 files/it/web/css/background-position/index.html create mode 100644 files/it/web/css/background-repeat/index.html create mode 100644 files/it/web/css/background/index.html create mode 100644 files/it/web/css/border-bottom/index.html create mode 100644 files/it/web/css/border-style/index.html create mode 100644 files/it/web/css/border/index.html create mode 100644 files/it/web/css/cascade/index.html create mode 100644 files/it/web/css/color/index.html create mode 100644 files/it/web/css/css_box_model/index.html create mode 100644 files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/it/web/css/css_flexible_box_layout/index.html create mode 100644 files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/it/web/css/css_positioning/index.html create mode 100644 files/it/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/it/web/css/cursor/index.html create 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/flex-shrink/index.html create mode 100644 files/it/web/css/flex/index.html create mode 100644 files/it/web/css/font-size-adjust/index.html create mode 100644 files/it/web/css/guida_di_riferimento_ai_css/index.html create mode 100644 files/it/web/css/index.html create mode 100644 files/it/web/css/media_queries/index.html create mode 100644 files/it/web/css/min-width/index.html create mode 100644 files/it/web/css/mozilla_extensions/index.html create mode 100644 files/it/web/css/object-fit/index.html create mode 100644 files/it/web/css/pseudo-classes/index.html create mode 100644 files/it/web/css/ricette_layout/index.html create mode 100644 files/it/web/css/selettore_figli_diretti/index.html create mode 100644 files/it/web/css/text-align/index.html create mode 100644 files/it/web/css/text-shadow/index.html create mode 100644 files/it/web/css/transition-timing-function/index.html create mode 100644 files/it/web/css/type_selectors/index.html create mode 100644 files/it/web/css/universal_selectors/index.html create mode 100644 files/it/web/css/word-break/index.html create mode 100644 files/it/web/css/z-index/index.html create mode 100644 files/it/web/esempi_di_tecnologie_web_open/index.html create mode 100644 files/it/web/events/domcontentloaded/index.html create mode 100644 files/it/web/events/index.html create mode 100644 files/it/web/events/load/index.html create mode 100644 files/it/web/guide/ajax/index.html create mode 100644 files/it/web/guide/ajax/iniziare/index.html create mode 100644 files/it/web/guide/api/index.html create mode 100644 files/it/web/guide/css/index.html create mode 100644 files/it/web/guide/graphics/index.html create mode 100644 files/it/web/guide/html/categorie_di_contenuto/index.html create mode 100644 files/it/web/guide/html/editable_content/index.html create mode 100644 files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html create mode 100644 files/it/web/guide/index.html create mode 100644 files/it/web/guide/woff/index.html create mode 100644 files/it/web/html/attributi/index.html create mode 100644 files/it/web/html/canvas/drawing_graphics_with_canvas/index.html create mode 100644 files/it/web/html/canvas/index.html create mode 100644 files/it/web/html/element/a/index.html create mode 100644 files/it/web/html/element/abbr/index.html create mode 100644 files/it/web/html/element/acronym/index.html create mode 100644 files/it/web/html/element/address/index.html create mode 100644 files/it/web/html/element/applet/index.html create mode 100644 files/it/web/html/element/area/index.html create mode 100644 files/it/web/html/element/article/index.html create mode 100644 files/it/web/html/element/aside/index.html create mode 100644 files/it/web/html/element/audio/index.html create mode 100644 files/it/web/html/element/b/index.html create mode 100644 files/it/web/html/element/base/index.html create mode 100644 files/it/web/html/element/basefont/index.html create mode 100644 files/it/web/html/element/bdi/index.html create mode 100644 files/it/web/html/element/bdo/index.html create mode 100644 files/it/web/html/element/bgsound/index.html create mode 100644 files/it/web/html/element/big/index.html create mode 100644 files/it/web/html/element/blink/index.html create mode 100644 files/it/web/html/element/blockquote/index.html create mode 100644 files/it/web/html/element/body/index.html create mode 100644 files/it/web/html/element/br/index.html create mode 100644 files/it/web/html/element/canvas/index.html create mode 100644 files/it/web/html/element/caption/index.html create mode 100644 files/it/web/html/element/center/index.html create mode 100644 files/it/web/html/element/div/index.html create mode 100644 files/it/web/html/element/figura/index.html create mode 100644 files/it/web/html/element/footer/index.html create mode 100644 files/it/web/html/element/head/index.html create mode 100644 files/it/web/html/element/header/index.html create mode 100644 files/it/web/html/element/hgroup/index.html create mode 100644 files/it/web/html/element/html/index.html create mode 100644 files/it/web/html/element/i/index.html create mode 100644 files/it/web/html/element/iframe/index.html create mode 100644 files/it/web/html/element/img/index.html create mode 100644 files/it/web/html/element/index.html create mode 100644 files/it/web/html/element/input/file/index.html create mode 100644 files/it/web/html/element/input/index.html create mode 100644 files/it/web/html/element/kbd/index.html create mode 100644 files/it/web/html/element/main/index.html create mode 100644 files/it/web/html/element/nav/index.html create mode 100644 files/it/web/html/element/output/index.html create mode 100644 files/it/web/html/element/p/index.html create mode 100644 files/it/web/html/element/section/index.html create mode 100644 files/it/web/html/element/span/index.html create mode 100644 files/it/web/html/element/strike/index.html create mode 100644 files/it/web/html/element/table/index.html create mode 100644 files/it/web/html/element/time/index.html create mode 100644 files/it/web/html/element/title/index.html create mode 100644 files/it/web/html/forms_in_html/index.html create mode 100644 files/it/web/html/global_attributes/id/index.html create mode 100644 files/it/web/html/global_attributes/index.html create mode 100644 files/it/web/html/html5/index.html create mode 100644 files/it/web/html/html5/introduction_to_html5/index.html create mode 100644 files/it/web/html/index.html create mode 100644 files/it/web/html/riferimento/index.html create mode 100644 files/it/web/html/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/it/web/html/utilizzare_application_cache/index.html create mode 100644 files/it/web/http/authentication/index.html create mode 100644 files/it/web/http/basi_http/index.html create mode 100644 files/it/web/http/caching/index.html create mode 100644 files/it/web/http/compressione/index.html create mode 100644 files/it/web/http/conditional_requests/index.html create mode 100644 files/it/web/http/cookies/index.html create mode 100644 files/it/web/http/cors/errors/corsdidnotsucceed/index.html create mode 100644 files/it/web/http/cors/errors/corsmissingalloworigin/index.html create mode 100644 files/it/web/http/cors/errors/index.html create mode 100644 files/it/web/http/cors/index.html create mode 100644 files/it/web/http/feature_policy/index.html create mode 100644 files/it/web/http/headers/age/index.html create mode 100644 files/it/web/http/headers/authorization/index.html create mode 100644 files/it/web/http/headers/cookie/index.html create mode 100644 files/it/web/http/headers/host/index.html create mode 100644 files/it/web/http/headers/index.html create mode 100644 files/it/web/http/headers/server/index.html create mode 100644 files/it/web/http/headers/strict-transport-security/index.html create mode 100644 files/it/web/http/headers/x-content-type-options/index.html create mode 100644 files/it/web/http/headers/x-xss-protection/index.html create mode 100644 files/it/web/http/index.html create mode 100644 files/it/web/http/negoziazione-del-contenuto/index.html create mode 100644 files/it/web/http/panoramica/index.html create mode 100644 files/it/web/http/protocol_upgrade_mechanism/index.html create mode 100644 files/it/web/http/redirections/index.html create mode 100644 files/it/web/http/resources_and_specifications/index.html create mode 100644 files/it/web/http/richieste_range/index.html create mode 100644 files/it/web/http/sessione/index.html create mode 100644 files/it/web/http/status/100/index.html create mode 100644 files/it/web/http/status/101/index.html create mode 100644 files/it/web/http/status/200/index.html create mode 100644 files/it/web/http/status/302/index.html create mode 100644 files/it/web/http/status/404/index.html create mode 100644 files/it/web/http/status/500/index.html create mode 100644 files/it/web/http/status/index.html create mode 100644 files/it/web/index.html create mode 100644 files/it/web/javascript/chiusure/index.html create mode 100644 "files/it/web/javascript/cos\303\250_javascript/index.html" create mode 100644 files/it/web/javascript/data_structures/index.html create mode 100644 files/it/web/javascript/ecmascript_6_support_in_mozilla/index.html create mode 100644 files/it/web/javascript/eventloop/index.html create mode 100644 files/it/web/javascript/gestione_della_memoria/index.html create mode 100644 files/it/web/javascript/getting_started/index.html create mode 100644 files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html create mode 100644 files/it/web/javascript/guida/dettagli_object_model/index.html create mode 100644 files/it/web/javascript/guida/espressioni_regolari/index.html create mode 100644 files/it/web/javascript/guida/functions/index.html create mode 100644 files/it/web/javascript/guida/grammar_and_types/index.html create mode 100644 files/it/web/javascript/guida/index.html create mode 100644 files/it/web/javascript/guida/introduzione/index.html create mode 100644 files/it/web/javascript/guida/iteratori_e_generatori/index.html create mode 100644 files/it/web/javascript/guida/loops_and_iteration/index.html create mode 100644 files/it/web/javascript/il_dom_e_javascript/index.html create mode 100644 files/it/web/javascript/index.html create mode 100644 files/it/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html create mode 100644 files/it/web/javascript/new_in_javascript/1.8.5/index.html create mode 100644 files/it/web/javascript/new_in_javascript/index.html create mode 100644 "files/it/web/javascript/new_in_javascript/novit\303\240_in_javascript_1.6/index.html" create mode 100644 "files/it/web/javascript/new_in_javascript/novit\303\240_in_javascript_1.7/index.html" create mode 100644 files/it/web/javascript/reference/classes/costruttore/index.html create mode 100644 files/it/web/javascript/reference/classes/extends/index.html create mode 100644 files/it/web/javascript/reference/classes/index.html create mode 100644 files/it/web/javascript/reference/classes/static/index.html create mode 100644 files/it/web/javascript/reference/errors/index.html create mode 100644 files/it/web/javascript/reference/errors/invalid_array_length/index.html create mode 100644 files/it/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html create mode 100644 files/it/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/it/web/javascript/reference/errors/too_much_recursion/index.html create mode 100644 files/it/web/javascript/reference/errors/unexpected_token/index.html create mode 100644 files/it/web/javascript/reference/errors/unexpected_type/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/get/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/set/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/it/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/it/web/javascript/reference/global_objects/atomics/index.html create mode 100644 files/it/web/javascript/reference/global_objects/atomics/store/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/it/web/javascript/reference/global_objects/decodeuri/index.html create mode 100644 files/it/web/javascript/reference/global_objects/decodeuricomponent/index.html create mode 100644 files/it/web/javascript/reference/global_objects/encodeuri/index.html create mode 100644 files/it/web/javascript/reference/global_objects/encodeuricomponent/index.html create mode 100644 files/it/web/javascript/reference/global_objects/escape/index.html create mode 100644 files/it/web/javascript/reference/global_objects/eval/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/arity/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/it/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/it/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/it/web/javascript/reference/global_objects/index.html create mode 100644 files/it/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/it/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/it/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/it/web/javascript/reference/global_objects/json/index.html create mode 100644 files/it/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/it/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/foreach/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/random/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/round/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/it/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/it/web/javascript/reference/global_objects/null/index.html create mode 100644 files/it/web/javascript/reference/global_objects/number/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/defineproperties/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/issealed/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/observe/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/prototype/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/seal/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/tostring/index.html create mode 100644 files/it/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/it/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/it/web/javascript/reference/global_objects/promise/catch/index.html create mode 100644 files/it/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/handler/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html create mode 100644 files/it/web/javascript/reference/global_objects/set/entries/index.html create mode 100644 files/it/web/javascript/reference/global_objects/set/index.html create mode 100644 files/it/web/javascript/reference/global_objects/set/values/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/prototype/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/raw/index.html create mode 100644 files/it/web/javascript/reference/global_objects/symbol/index.html create mode 100644 files/it/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/it/web/javascript/reference/global_objects/unescape/index.html create mode 100644 files/it/web/javascript/reference/global_objects/uneval/index.html create mode 100644 files/it/web/javascript/reference/index.html create mode 100644 files/it/web/javascript/reference/operators/destructuring_assignment/index.html create mode 100644 files/it/web/javascript/reference/operators/in/index.html create mode 100644 files/it/web/javascript/reference/operators/index.html create mode 100644 files/it/web/javascript/reference/operators/new/index.html create mode 100644 files/it/web/javascript/reference/operators/operator_condizionale/index.html create mode 100644 files/it/web/javascript/reference/operators/operatore_virgola/index.html create mode 100644 files/it/web/javascript/reference/operators/operatori_aritmetici/index.html create mode 100644 files/it/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/it/web/javascript/reference/operators/super/index.html create mode 100644 files/it/web/javascript/reference/operators/this/index.html create mode 100644 files/it/web/javascript/reference/operators/yield/index.html create mode 100644 files/it/web/javascript/reference/statements/break/index.html create mode 100644 files/it/web/javascript/reference/statements/empty/index.html create mode 100644 files/it/web/javascript/reference/statements/export/index.html create mode 100644 files/it/web/javascript/reference/statements/for...of/index.html create mode 100644 files/it/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/it/web/javascript/reference/statements/import/index.html create mode 100644 files/it/web/javascript/reference/statements/index.html create mode 100644 files/it/web/javascript/reference/statements/let/index.html create mode 100644 files/it/web/javascript/reference/statements/switch/index.html create mode 100644 files/it/web/javascript/reference/statements/throw/index.html create mode 100644 files/it/web/javascript/reference/statements/var/index.html create mode 100644 files/it/web/javascript/reference/template_strings/index.html create mode 100644 files/it/web/javascript/una_reintroduzione_al_javascript/index.html create mode 100644 files/it/web/performance/index.html create mode 100644 files/it/web/performance/percorso_critico_di_rendering/index.html create mode 100644 files/it/web/reference/api/index.html create mode 100644 files/it/web/reference/index.html create mode 100644 files/it/web/security/index.html create mode 100644 files/it/web/security/password_insicure/index.html create mode 100644 files/it/web/svg/element/animate/index.html create mode 100644 files/it/web/svg/element/index.html create mode 100644 files/it/web/tutorials/index.html create mode 100644 files/it/web/web_components/index.html create mode 100644 files/it/web/web_components/usare_custom_elements/index.html create mode 100644 files/it/web/xslt/index.html create mode 100644 files/it/web_development/mobile/design_sensibile/index.html create mode 100644 files/it/web_development/mobile/index.html create mode 100644 files/it/websockets/index.html create mode 100644 files/it/websockets/writing_websocket_client_applications/index.html create mode 100644 files/it/window.find/index.html create mode 100644 files/it/xforms/index.html create mode 100644 files/it/xhtml/index.html create mode 100644 files/it/xml_in_mozilla/index.html create mode 100644 files/it/xml_web_services/index.html create mode 100644 files/it/xpcnativewrapper/index.html create mode 100644 files/it/xpcom/binding_per_i_linguaggi/index.html create mode 100644 files/it/xpcom/index.html create mode 100644 files/it/zone/index.html create mode 100644 files/kab/_redirects.txt create mode 100644 files/kab/_wikihistory.json create mode 100644 files/kab/games/imedyaten/index.html create mode 100644 files/kab/games/index.html create mode 100644 files/kab/games/techniques/3d_collision_detection/index.html create mode 100644 files/kab/games/techniques/3d_on_the_web/basic_theory/index.html create mode 100644 files/kab/games/techniques/3d_on_the_web/index.html create mode 100644 files/kab/games/techniques/index.html create mode 100644 files/kab/games/tools/engines_and_tools/index.html create mode 100644 files/kab/games/tools/index.html create mode 100644 files/kab/games/tutorials/2d_breakout_game_phaser/index.html create mode 100644 files/kab/games/tutorials/index.html create mode 100644 files/kab/glossary/abstraction/index.html create mode 100644 files/kab/glossary/ajax/index.html create mode 100644 files/kab/glossary/aneggaf/index.html create mode 100644 files/kab/glossary/css/index.html create mode 100644 files/kab/glossary/html/index.html create mode 100644 files/kab/glossary/http/index.html create mode 100644 files/kab/glossary/index.html create mode 100644 files/kab/glossary/responsive_web_design/index.html create mode 100644 files/kab/glossary/svg/index.html create mode 100644 files/kab/glossary/url/index.html create mode 100644 files/kab/glossary/xml/index.html create mode 100644 files/kab/lmed/getting_started_with_the_web/html_basics/index.html create mode 100644 files/kab/lmed/getting_started_with_the_web/index.html create mode 100644 files/kab/lmed/html/index.html create mode 100644 files/kab/lmed/html/introduction_to_html/index.html create mode 100644 files/kab/lmed/index.html create mode 100644 files/kab/mdn/about/index.html create mode 100644 files/kab/mdn/contribute/feedback/index.html create mode 100644 files/kab/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/kab/mdn/contribute/howto/index.html create mode 100644 files/kab/mdn/contribute/index.html create mode 100644 files/kab/mdn/index.html create mode 100644 files/kab/mdn/tamezdaynutt/index.html create mode 100644 files/kab/mozilla/add-ons/index.html create mode 100644 files/kab/mozilla/add-ons/webextensions/index.html create mode 100644 files/kab/mozilla/firefox/index.html create mode 100644 files/kab/mozilla/firefox/releases/78/index.html create mode 100644 files/kab/mozilla/firefox/releases/index.html create mode 100644 files/kab/mozilla/index.html create mode 100644 files/kab/tools/debugger/index.html create mode 100644 files/kab/tools/index.html create mode 100644 files/kab/tools/network_monitor/index.html create mode 100644 files/kab/tools/page_inspector/index.html create mode 100644 files/kab/tools/performance/index.html create mode 100644 files/kab/tools/tadiwent_web/index.html create mode 100644 files/kab/web/api/index.html create mode 100644 files/kab/web/css/index.html create mode 100644 files/kab/web/css/tools/index.html create mode 100644 files/kab/web/guide/graphics/index.html create mode 100644 files/kab/web/guide/index.html create mode 100644 files/kab/web/html/index.html create mode 100644 files/kab/web/http/index.html create mode 100644 files/kab/web/index.html create mode 100644 files/kab/web/javascript/amnir/index.html create mode 100644 files/kab/web/javascript/index.html create mode 100644 files/kab/web/mathml/index.html create mode 100644 files/kab/web/reference/api/index.html create mode 100644 files/kab/web/reference/index.html create mode 100644 files/kab/web/svg/index.html create mode 100644 files/kab/web/tuffart/index.html create mode 100644 files/kab/web/tutorials/index.html create mode 100644 files/ko/_redirects.txt create mode 100644 files/ko/_wikihistory.json create mode 100644 files/ko/a_basic_raycaster/index.html create mode 100644 files/ko/a_re-introduction_to_javascript/index.html create mode 100644 files/ko/adapting_xul_applications_for_firefox_1.5/index.html create mode 100644 files/ko/aggregating_the_in-memory_datasource/index.html create mode 100644 files/ko/animated_png_graphics/index.html create mode 100644 files/ko/archive/add-ons/code_snippets/cookies/index.html create mode 100644 files/ko/archive/add-ons/code_snippets/index.html create mode 100644 files/ko/archive/add-ons/code_snippets/page_loading/index.html create mode 100644 files/ko/archive/add-ons/code_snippets/running_applications/index.html create mode 100644 files/ko/archive/add-ons/code_snippets/windows/index.html create mode 100644 files/ko/archive/add-ons/code_snippets/xml/index.html create mode 100644 files/ko/archive/add-ons/extension_versioning,_update_and_compatibility/index.html create mode 100644 files/ko/archive/add-ons/index.html create mode 100644 files/ko/archive/add-ons/listening_to_events_in_firefox_extensions/index.html create mode 100644 files/ko/archive/api/index.html create mode 100644 files/ko/archive/api/navigator/index.html create mode 100644 files/ko/archive/apps/design/planning/index.html create mode 100644 files/ko/archive/apps/index.html create mode 100644 files/ko/archive/b2g_os/api/camera_api/index.html create mode 100644 files/ko/archive/b2g_os/api/camera_api/introduction/index.html create mode 100644 files/ko/archive/b2g_os/api/index.html create mode 100644 files/ko/archive/b2g_os/api/tcpsocket/index.html create mode 100644 files/ko/archive/b2g_os/application_development/index.html create mode 100644 files/ko/archive/b2g_os/apps/index.html create mode 100644 files/ko/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html create mode 100644 files/ko/archive/b2g_os/automated_testing/index.html create mode 100644 files/ko/archive/b2g_os/building/index.html create mode 100644 files/ko/archive/b2g_os/building_and_installing_firefox_os/index.html create mode 100644 files/ko/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html create mode 100644 files/ko/archive/b2g_os/debugging/index.html create mode 100644 files/ko/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html create mode 100644 files/ko/archive/b2g_os/firefox_os_apps/index.html create mode 100644 files/ko/archive/b2g_os/firefox_os_apps/localization/index.html create mode 100644 files/ko/archive/b2g_os/firefox_os_build_prerequisites/index.html create mode 100644 files/ko/archive/b2g_os/firefox_os_faq/index.html create mode 100644 files/ko/archive/b2g_os/index.html create mode 100644 files/ko/archive/b2g_os/installing_on_a_mobile_device/index.html create mode 100644 files/ko/archive/b2g_os/introduction/index.html create mode 100644 files/ko/archive/b2g_os/pandaboard/index.html create mode 100644 files/ko/archive/b2g_os/phone_guide/index.html create mode 100644 files/ko/archive/b2g_os/platform/architecture/index.html create mode 100644 files/ko/archive/b2g_os/platform/gonk/index.html create mode 100644 files/ko/archive/b2g_os/platform/index.html create mode 100644 files/ko/archive/b2g_os/porting/index.html create mode 100644 files/ko/archive/b2g_os/preparing_for_your_first_b2g_build/index.html create mode 100644 files/ko/archive/b2g_os/quickstart/index.html create mode 100644 files/ko/archive/b2g_os/quickstart/intro_to_firefox_os/index.html create mode 100644 files/ko/archive/b2g_os/quickstart/intro_to_open_web_apps/index.html create mode 100644 files/ko/archive/b2g_os/security/index.html create mode 100644 "files/ko/archive/b2g_os/security/\353\263\264\354\225\210_\353\252\250\353\215\270/index.html" create mode 100644 files/ko/archive/b2g_os/simulator/index.html create mode 100644 "files/ko/archive/b2g_os/\354\204\261\353\212\245/index.html" create mode 100644 "files/ko/archive/b2g_os/\354\225\261_\352\264\200\353\246\254\354\236\220_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" create mode 100644 files/ko/archive/css3/index.html create mode 100644 files/ko/archive/index.html create mode 100644 files/ko/archive/mdn/index.html create mode 100644 files/ko/archive/meta_docs/index.html create mode 100644 files/ko/archive/misc_top_level/index.html create mode 100644 files/ko/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html create mode 100644 files/ko/archive/misc_top_level/using_content_preferences/index.html create mode 100644 files/ko/archive/mozilla/creating_a_skin_for_seamonkey_2.x/index.html create mode 100644 files/ko/archive/mozilla/drag_and_drop/index.html create mode 100644 files/ko/archive/mozilla/firefox/index.html create mode 100644 files/ko/archive/mozilla/firefox/using_microformats/index.html create mode 100644 files/ko/archive/mozilla/index.html create mode 100644 files/ko/archive/mozilla/rdf_datasource_how-to/index.html create mode 100644 files/ko/archive/mozilla/xbl/index.html create mode 100644 files/ko/archive/mozilla/xbl/xbl_1.0_reference/elements/index.html create mode 100644 files/ko/archive/mozilla/xbl/xbl_1.0_reference/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/dialogs_in_xulrunner/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/what_xulrunner_provides/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/xul_application_packaging/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/xulrunner_faq/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/xulrunner_hall_of_fame/index.html create mode 100644 files/ko/archive/mozilla/xulrunner/xulrunner_tips/index.html create mode 100644 files/ko/archive/rss/getting_started/index.html create mode 100644 files/ko/archive/rss/getting_started/what_is_rss/index.html create mode 100644 files/ko/archive/rss/index.html create mode 100644 files/ko/archive/rss/module/index.html create mode 100644 files/ko/archive/rss/version/index.html create mode 100644 files/ko/archive/security/index.html create mode 100644 files/ko/archive/security/tcp_ip/index.html create mode 100644 files/ko/archive/web/index.html create mode 100644 files/ko/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html create mode 100644 files/ko/archive/web/javascript/index.html create mode 100644 files/ko/archive/web/javascript/legacy_generator_function/index.html create mode 100644 files/ko/archive/web/javascript/legacy_generator_function_statement/index.html create mode 100644 files/ko/archive/web_standards/index.html create mode 100644 files/ko/archive/web_standards/issues_arising_from_arbitrary-element_hover/index.html create mode 100644 files/ko/archive/web_standards/mozilla_s_doctype_sniffing/index.html create mode 100644 files/ko/archive/web_standards/rdf_in_fifty_words_or_less/index.html create mode 100644 files/ko/archive/web_standards/rdf_in_mozilla_faq/index.html create mode 100644 files/ko/archive/web_standards/using_the_right_markup_to_invoke_plugins/index.html create mode 100644 files/ko/building_an_extension/index.html create mode 100644 files/ko/bundles/index.html create mode 100644 files/ko/consistent_list_indentation/index.html create mode 100644 files/ko/creating_a_microsummary/index.html create mode 100644 files/ko/creating_mozsearch_plugins/index.html create mode 100644 files/ko/creating_xpcom_components/an_overview_of_xpcom/index.html create mode 100644 files/ko/creating_xpcom_components/index.html create mode 100644 files/ko/creating_xpcom_components/preface/index.html create mode 100644 files/ko/css3_columns/index.html create mode 100644 files/ko/css_improvements_in_firefox_3/index.html create mode 100644 files/ko/determining_the_dimensions_of_elements/index.html create mode 100644 files/ko/dhtml/index.html create mode 100644 files/ko/dom_improvements_in_firefox_3/index.html create mode 100644 files/ko/download_manager_improvements_in_firefox_3/index.html create mode 100644 files/ko/drag_and_drop_events/index.html create mode 100644 files/ko/drawing_text_using_a_canvas/index.html create mode 100644 files/ko/dynamically_modifying_xul-based_user_interface/index.html create mode 100644 files/ko/e4x/index.html create mode 100644 files/ko/embedding_mozilla/index.html create mode 100644 files/ko/embedding_the_editor/index.html create mode 100644 files/ko/extensions/community/index.html create mode 100644 files/ko/extensions/index.html create mode 100644 files/ko/extensions/thunderbird/building_a_thunderbird_extension_4_colon__chrome_manifest/index.html create mode 100644 files/ko/extensions/thunderbird/index.html create mode 100644 files/ko/firefox_1.5_for_developers/index.html create mode 100644 files/ko/firefox_2_for_developers/index.html create mode 100644 files/ko/firefox_3.5_for_developers/index.html create mode 100644 files/ko/fuel/index.html create mode 100644 files/ko/full_page_zoom/index.html create mode 100644 files/ko/games/index.html create mode 100644 files/ko/games/index/index.html create mode 100644 files/ko/games/introduction/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_phaser/index.html create mode 100644 "files/ko/games/tutorials/2d_breakout_game_phaser/\353\223\235\354\240\220/index.html" create mode 100644 files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.html create mode 100644 files/ko/games/tutorials/index.html create mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/bounce_off_the_walls/index.html" create mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/build_the_brick_field/index.html" create mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/collision_detection/index.html" create mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/finishing_up/index.html" create mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/game_over/index.html" create mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/index.html" create mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/mouse_controls/index.html" create mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/paddle_and_keyboard_controls/index.html" create mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/track_the_score_and_win/index.html" create mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/\352\263\265_\354\233\200\354\247\201\354\235\264\352\270\260/index.html" create mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/\354\272\224\353\262\204\354\212\244_\354\203\235\354\204\261\352\263\274_\352\267\270\353\246\254\352\270\260/index.html" create mode 100644 files/ko/gecko/index.html create mode 100644 files/ko/gecko_1.9_changes_affecting_websites/index.html create mode 100644 files/ko/gecko_embedding_basics/index.html create mode 100644 files/ko/gecko_plugin_api_reference/index.html create mode 100644 files/ko/glossary/abstraction/index.html create mode 100644 files/ko/glossary/accessibility/index.html create mode 100644 files/ko/glossary/ajax/index.html create mode 100644 files/ko/glossary/algorithm/index.html create mode 100644 files/ko/glossary/api/index.html create mode 100644 files/ko/glossary/argument/index.html create mode 100644 files/ko/glossary/ascii/index.html create mode 100644 files/ko/glossary/attribute/index.html create mode 100644 files/ko/glossary/bandwidth/index.html create mode 100644 files/ko/glossary/block/css/index.html create mode 100644 files/ko/glossary/block/index.html create mode 100644 files/ko/glossary/browser/index.html create mode 100644 files/ko/glossary/call_stack/index.html create mode 100644 files/ko/glossary/character/index.html create mode 100644 files/ko/glossary/character_encoding/index.html create mode 100644 files/ko/glossary/character_set/index.html create mode 100644 files/ko/glossary/chrome/index.html create mode 100644 files/ko/glossary/client_hints/index.html create mode 100644 files/ko/glossary/compile/index.html create mode 100644 files/ko/glossary/computer_programming/index.html create mode 100644 files/ko/glossary/copyleft/index.html create mode 100644 files/ko/glossary/cors/index.html create mode 100644 files/ko/glossary/cross_axis/index.html create mode 100644 files/ko/glossary/csp/index.html create mode 100644 files/ko/glossary/css/index.html create mode 100644 files/ko/glossary/css_preprocessor/index.html create mode 100644 files/ko/glossary/descriptor_(css)/index.html create mode 100644 files/ko/glossary/doctype/index.html create mode 100644 files/ko/glossary/dom/index.html create mode 100644 files/ko/glossary/domain_name/index.html create mode 100644 files/ko/glossary/ecmascript/index.html create mode 100644 files/ko/glossary/element/index.html create mode 100644 files/ko/glossary/empty_element/index.html create mode 100644 files/ko/glossary/endianness/index.html create mode 100644 files/ko/glossary/entity_header/index.html create mode 100644 files/ko/glossary/falsy/index.html create mode 100644 files/ko/glossary/firewall/index.html create mode 100644 files/ko/glossary/first-class_function/index.html create mode 100644 files/ko/glossary/flex_container/index.html create mode 100644 files/ko/glossary/flex_item/index.html create mode 100644 files/ko/glossary/flexbox/index.html create mode 100644 files/ko/glossary/fork/index.html create mode 100644 files/ko/glossary/ftp/index.html create mode 100644 files/ko/glossary/function/index.html create mode 100644 files/ko/glossary/general_header/index.html create mode 100644 files/ko/glossary/gif/index.html create mode 100644 files/ko/glossary/global_object/index.html create mode 100644 files/ko/glossary/google_chrome/index.html create mode 100644 files/ko/glossary/gpl/index.html create mode 100644 files/ko/glossary/gpu/index.html create mode 100644 files/ko/glossary/graceful_degradation/index.html create mode 100644 files/ko/glossary/head/index.html create mode 100644 files/ko/glossary/header/index.html create mode 100644 files/ko/glossary/hoisting/index.html create mode 100644 files/ko/glossary/html/index.html create mode 100644 files/ko/glossary/http/index.html create mode 100644 files/ko/glossary/http_2/index.html create mode 100644 files/ko/glossary/https/index.html create mode 100644 files/ko/glossary/idempotent/index.html create mode 100644 files/ko/glossary/iife/index.html create mode 100644 files/ko/glossary/index.html create mode 100644 files/ko/glossary/index/index.html create mode 100644 files/ko/glossary/internet/index.html create mode 100644 files/ko/glossary/ip_address/index.html create mode 100644 files/ko/glossary/ipv4/index.html create mode 100644 files/ko/glossary/ipv6/index.html create mode 100644 files/ko/glossary/java/index.html create mode 100644 files/ko/glossary/javascript/index.html create mode 100644 files/ko/glossary/jquery/index.html create mode 100644 files/ko/glossary/json/index.html create mode 100644 files/ko/glossary/main_axis/index.html create mode 100644 files/ko/glossary/metadata/index.html create mode 100644 files/ko/glossary/method/index.html create mode 100644 files/ko/glossary/microsoft_edge/index.html create mode 100644 files/ko/glossary/microsoft_internet_explorer/index.html create mode 100644 files/ko/glossary/mime_type/index.html create mode 100644 files/ko/glossary/mozilla_firefox/index.html create mode 100644 files/ko/glossary/mvc/index.html create mode 100644 files/ko/glossary/node.js/index.html create mode 100644 files/ko/glossary/null/index.html create mode 100644 files/ko/glossary/object/index.html create mode 100644 files/ko/glossary/object_reference/index.html create mode 100644 files/ko/glossary/oop/index.html create mode 100644 files/ko/glossary/operator/index.html create mode 100644 files/ko/glossary/origin/index.html create mode 100644 files/ko/glossary/pdf/index.html create mode 100644 files/ko/glossary/php/index.html create mode 100644 files/ko/glossary/pixel/index.html create mode 100644 files/ko/glossary/png/index.html create mode 100644 files/ko/glossary/polyfill/index.html create mode 100644 files/ko/glossary/preflight_request/index.html create mode 100644 files/ko/glossary/primitive/index.html create mode 100644 files/ko/glossary/progressive_enhancement/index.html create mode 100644 files/ko/glossary/protocol/index.html create mode 100644 files/ko/glossary/prototype-based_programming/index.html create mode 100644 files/ko/glossary/prototype/index.html create mode 100644 files/ko/glossary/proxy_server/index.html create mode 100644 files/ko/glossary/pseudocode/index.html create mode 100644 files/ko/glossary/python/index.html create mode 100644 files/ko/glossary/reflow/index.html create mode 100644 files/ko/glossary/regular_expression/index.html create mode 100644 files/ko/glossary/request_header/index.html create mode 100644 files/ko/glossary/response_header/index.html create mode 100644 files/ko/glossary/rest/index.html create mode 100644 files/ko/glossary/self-executing_anonymous_function/index.html create mode 100644 files/ko/glossary/semantics/index.html create mode 100644 files/ko/glossary/seo/index.html create mode 100644 files/ko/glossary/server/index.html create mode 100644 files/ko/glossary/shim/index.html create mode 100644 files/ko/glossary/signature/function/index.html create mode 100644 files/ko/glossary/signature/index.html create mode 100644 files/ko/glossary/simd/index.html create mode 100644 files/ko/glossary/smtp/index.html create mode 100644 files/ko/glossary/sql/index.html create mode 100644 files/ko/glossary/ssl/index.html create mode 100644 files/ko/glossary/stacking_context/index.html create mode 100644 files/ko/glossary/string/index.html create mode 100644 files/ko/glossary/svg/index.html create mode 100644 files/ko/glossary/symbol/index.html create mode 100644 files/ko/glossary/tag/index.html create mode 100644 files/ko/glossary/tcp/index.html create mode 100644 files/ko/glossary/tls/index.html create mode 100644 files/ko/glossary/truthy/index.html create mode 100644 files/ko/glossary/ui/index.html create mode 100644 files/ko/glossary/undefined/index.html create mode 100644 files/ko/glossary/unicode/index.html create mode 100644 files/ko/glossary/uri/index.html create mode 100644 files/ko/glossary/url/index.html create mode 100644 files/ko/glossary/user_agent/index.html create mode 100644 files/ko/glossary/utf-8/index.html create mode 100644 files/ko/glossary/variable/index.html create mode 100644 files/ko/glossary/viewport/index.html create mode 100644 files/ko/glossary/webextensions/index.html create mode 100644 files/ko/glossary/webrtc/index.html create mode 100644 files/ko/glossary/websockets/index.html create mode 100644 files/ko/glossary/whatwg/index.html create mode 100644 files/ko/glossary/world_wide_web/index.html create mode 100644 files/ko/glossary/wrapper/index.html create mode 100644 files/ko/glossary/xhr_(xmlhttprequest)/index.html create mode 100644 "files/ko/glossary/\353\217\231\354\240\201_\355\224\204\353\241\234\352\267\270\353\236\230\353\260\215_\354\226\270\354\226\264/index.html" create mode 100644 "files/ko/glossary/\353\260\260\354\227\264/index.html" create mode 100644 "files/ko/glossary/\353\266\210\353\246\260/index.html" create mode 100644 "files/ko/glossary/\353\270\214\353\235\274\354\232\260\354\240\200-\354\273\250\355\205\215\354\212\244\355\212\270/index.html" create mode 100644 "files/ko/glossary/\354\212\244\354\275\224\355\224\204/index.html" create mode 100644 "files/ko/glossary/\354\213\235\353\263\204\354\236\220/index.html" create mode 100644 "files/ko/glossary/\354\240\204\354\206\241_\354\240\234\354\226\264_\355\224\204\353\241\234\355\206\240\354\275\234_(tcp)/index.html" create mode 100644 "files/ko/glossary/\354\272\220\354\213\234/index.html" create mode 100644 files/ko/gre/index.html create mode 100644 files/ko/hacking_firefox/index.html create mode 100644 files/ko/how_to_build_an_xpcom_component_in_javascript/index.html create mode 100644 files/ko/install.rdf/index.html create mode 100644 files/ko/interfacing_with_the_xpcom_cycle_collector/index.html create mode 100644 files/ko/international_characters_in_xul_javascript/index.html create mode 100644 files/ko/introduction_to_the_javascript_shell/index.html create mode 100644 files/ko/introduction_to_using_xpath_in_javascript/index.html create mode 100644 files/ko/javascript_c_engine_embedder's_guide/index.html create mode 100644 files/ko/javascript_code_modules/using_javascript_code_modules/index.html create mode 100644 files/ko/jsapi_reference/index.html create mode 100644 files/ko/jsapi_reference/jsclass.flags/index.html create mode 100644 files/ko/learn/common_questions/how_does_the_internet_work/index.html create mode 100644 files/ko/learn/common_questions/html_features_for_accessibility/index.html create mode 100644 files/ko/learn/common_questions/index.html create mode 100644 files/ko/learn/common_questions/pages_sites_servers_and_search_engines/index.html create mode 100644 files/ko/learn/common_questions/set_up_a_local_testing_server/index.html create mode 100644 files/ko/learn/common_questions/upload_files_to_a_web_server/index.html create mode 100644 files/ko/learn/common_questions/what_are_hyperlinks/index.html create mode 100644 files/ko/learn/common_questions/what_is_a_domain_name/index.html create mode 100644 files/ko/learn/common_questions/what_is_a_url/index.html create mode 100644 files/ko/learn/common_questions/what_is_a_web_server/index.html create mode 100644 files/ko/learn/common_questions/what_software_do_i_need/index.html create mode 100644 "files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" create mode 100644 "files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" create mode 100644 files/ko/learn/css/basics/layout/index.html create mode 100644 files/ko/learn/css/building_blocks/backgrounds_and_borders/index.html create mode 100644 files/ko/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/ko/learn/css/building_blocks/debugging_css/index.html create mode 100644 files/ko/learn/css/building_blocks/handling_different_text_directions/index.html create mode 100644 files/ko/learn/css/building_blocks/images_media_form_elements/index.html create mode 100644 files/ko/learn/css/building_blocks/index.html create mode 100644 files/ko/learn/css/building_blocks/organizing/index.html create mode 100644 files/ko/learn/css/building_blocks/overflowing_content/index.html create mode 100644 files/ko/learn/css/building_blocks/sizing_items_in_css/index.html create mode 100644 files/ko/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/ko/learn/css/building_blocks/values_and_units/index.html create mode 100644 "files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" create mode 100644 "files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" create mode 100644 files/ko/learn/css/css_layout/flexbox/index.html create mode 100644 files/ko/learn/css/css_layout/floats/index.html create mode 100644 files/ko/learn/css/css_layout/grids/index.html create mode 100644 files/ko/learn/css/css_layout/index.html create mode 100644 files/ko/learn/css/css_layout/introduction/index.html create mode 100644 files/ko/learn/css/css_layout/legacy_layout_methods/index.html create mode 100644 files/ko/learn/css/css_layout/multiple-column_layout/index.html create mode 100644 "files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" create mode 100644 "files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" create mode 100644 "files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" create mode 100644 "files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" create mode 100644 "files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" create mode 100644 files/ko/learn/css/first_steps/getting_started/index.html create mode 100644 files/ko/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/ko/learn/css/first_steps/how_css_works/index.html create mode 100644 files/ko/learn/css/first_steps/index.html create mode 100644 files/ko/learn/css/first_steps/using_your_new_knowledge/index.html create mode 100644 files/ko/learn/css/first_steps/what_is_css/index.html create mode 100644 files/ko/learn/css/howto/generated_content/index.html create mode 100644 files/ko/learn/css/howto/index.html create mode 100644 files/ko/learn/css/index.html create mode 100644 "files/ko/learn/css/introduction_to_css/\352\270\260\353\263\270\354\240\201\354\235\270_css_\354\235\264\355\225\264/index.html" create mode 100644 files/ko/learn/css/styling_text/fundamentals/index.html create mode 100644 files/ko/learn/css/styling_text/index.html create mode 100644 files/ko/learn/css/styling_text/styling_lists/index.html create mode 100644 files/ko/learn/front-end_web_developer/index.html create mode 100644 "files/ko/learn/getting_started_with_the_web/css_\352\270\260\353\263\270/index.html" create mode 100644 "files/ko/learn/getting_started_with_the_web/html_\352\270\260\353\263\270/index.html" create mode 100644 files/ko/learn/getting_started_with_the_web/index.html create mode 100644 files/ko/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/ko/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html create mode 100644 "files/ko/learn/getting_started_with_the_web/\352\270\260\353\263\270_\354\206\214\355\224\204\355\212\270\354\233\250\354\226\264_\354\204\244\354\271\230\355\225\230\352\270\260/index.html" create mode 100644 "files/ko/learn/getting_started_with_the_web/\354\233\271\354\202\254\354\235\264\355\212\270_\354\266\234\355\214\220\355\225\230\352\270\260/index.html" create mode 100644 "files/ko/learn/getting_started_with_the_web/\354\233\271\354\235\230_\353\217\231\354\236\221_\353\260\251\354\213\235/index.html" create mode 100644 "files/ko/learn/getting_started_with_the_web/\355\214\214\354\235\274\353\223\244_\353\213\244\353\243\250\352\270\260/index.html" create mode 100644 files/ko/learn/how_to_contribute/index.html create mode 100644 "files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" create mode 100644 files/ko/learn/html/forms/index.html create mode 100644 files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/ko/learn/html/forms/your_first_html_form/index.html create mode 100644 files/ko/learn/html/howto/index.html create mode 100644 files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html create mode 100644 "files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" create mode 100644 files/ko/learn/html/index.html create mode 100644 files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/ko/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/ko/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/ko/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/ko/learn/html/introduction_to_html/index.html create mode 100644 files/ko/learn/html/introduction_to_html/marking_up_a_letter/index.html create mode 100644 files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html create mode 100644 files/ko/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/ko/learn/html/multimedia_and_embedding/index.html create mode 100644 files/ko/learn/html/multimedia_and_embedding/responsive_images/index.html create mode 100644 files/ko/learn/html/tables/index.html create mode 100644 files/ko/learn/index.html create mode 100644 files/ko/learn/index/index.html create mode 100644 files/ko/learn/infrastructure/index.html create mode 100644 files/ko/learn/javascript/asynchronous/async_await/index.html create mode 100644 files/ko/learn/javascript/asynchronous/concepts/index.html create mode 100644 files/ko/learn/javascript/asynchronous/index.html create mode 100644 files/ko/learn/javascript/asynchronous/introducing/index.html create mode 100644 files/ko/learn/javascript/asynchronous/promises/index.html create mode 100644 files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html create mode 100644 files/ko/learn/javascript/building_blocks/build_your_own_function/index.html create mode 100644 files/ko/learn/javascript/building_blocks/functions/index.html create mode 100644 files/ko/learn/javascript/building_blocks/index.html create mode 100644 files/ko/learn/javascript/building_blocks/looping_code/index.html create mode 100644 "files/ko/learn/javascript/building_blocks/\354\241\260\352\261\264\353\254\270/index.html" create mode 100644 files/ko/learn/javascript/client-side_web_apis/client-side_storage/index.html create mode 100644 files/ko/learn/javascript/client-side_web_apis/index.html create mode 100644 files/ko/learn/javascript/first_steps/a_first_splash/index.html create mode 100644 files/ko/learn/javascript/first_steps/arrays/index.html create mode 100644 files/ko/learn/javascript/first_steps/index.html create mode 100644 files/ko/learn/javascript/first_steps/math/index.html create mode 100644 files/ko/learn/javascript/first_steps/silly_story_generator/index.html create mode 100644 files/ko/learn/javascript/first_steps/strings/index.html create mode 100644 files/ko/learn/javascript/first_steps/useful_string_methods/index.html create mode 100644 files/ko/learn/javascript/first_steps/variables/index.html create mode 100644 files/ko/learn/javascript/first_steps/what_is_javascript/index.html create mode 100644 files/ko/learn/javascript/first_steps/what_went_wrong/index.html create mode 100644 files/ko/learn/javascript/howto/index.html create mode 100644 files/ko/learn/javascript/index.html create mode 100644 files/ko/learn/javascript/objects/basics/index.html create mode 100644 files/ko/learn/javascript/objects/index.html create mode 100644 files/ko/learn/javascript/objects/inheritance/index.html create mode 100644 files/ko/learn/javascript/objects/json/index.html create mode 100644 files/ko/learn/javascript/objects/object-oriented_js/index.html create mode 100644 files/ko/learn/javascript/objects/object_prototypes/index.html create mode 100644 files/ko/learn/server-side/django/admin_site/index.html create mode 100644 files/ko/learn/server-side/django/authentication/index.html create mode 100644 files/ko/learn/server-side/django/deployment/index.html create mode 100644 files/ko/learn/server-side/django/development_environment/index.html create mode 100644 files/ko/learn/server-side/django/forms/index.html create mode 100644 files/ko/learn/server-side/django/generic_views/index.html create mode 100644 files/ko/learn/server-side/django/home_page/index.html create mode 100644 files/ko/learn/server-side/django/index.html create mode 100644 files/ko/learn/server-side/django/introduction/index.html create mode 100644 files/ko/learn/server-side/django/models/index.html create mode 100644 files/ko/learn/server-side/django/sessions/index.html create mode 100644 files/ko/learn/server-side/django/skeleton_website/index.html create mode 100644 files/ko/learn/server-side/django/testing/index.html create mode 100644 files/ko/learn/server-side/django/tutorial_local_library_website/index.html create mode 100644 files/ko/learn/server-side/django/web_application_security/index.html create mode 100644 files/ko/learn/server-side/express_nodejs/index.html create mode 100644 files/ko/learn/server-side/express_nodejs/introduction/index.html create mode 100644 files/ko/learn/server-side/express_nodejs/mongoose/index.html create mode 100644 files/ko/learn/server-side/express_nodejs/routes/index.html create mode 100644 "files/ko/learn/server-side/express_nodejs/\352\260\234\353\260\234_\355\231\230\352\262\275/index.html" create mode 100644 "files/ko/learn/server-side/express_nodejs/\354\212\244\354\274\210\353\240\210\355\206\244_\354\233\271\354\202\254\354\235\264\355\212\270/index.html" create mode 100644 files/ko/learn/server-side/first_steps/client-server_overview/index.html create mode 100644 files/ko/learn/server-side/first_steps/index.html create mode 100644 files/ko/learn/server-side/first_steps/introduction/index.html create mode 100644 files/ko/learn/server-side/first_steps/web_frameworks/index.html create mode 100644 files/ko/learn/server-side/first_steps/website_security/index.html create mode 100644 files/ko/learn/server-side/index.html create mode 100644 files/ko/learn/skills/index.html create mode 100644 files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.html create mode 100644 files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html create mode 100644 files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html create mode 100644 files/ko/learn/tools_and_testing/github/index.html create mode 100644 files/ko/learn/tools_and_testing/index.html create mode 100644 "files/ko/learn/web_\352\270\260\354\210\240/index.html" create mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/html/index.html" create mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/index.html" create mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/what_is_accessibility/index.html" create mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/\353\252\250\353\260\224\354\235\274/index.html" create mode 100644 files/ko/localization/index.html create mode 100644 files/ko/localizing_extension_descriptions/index.html create mode 100644 files/ko/mdn/about/index.html create mode 100644 files/ko/mdn/about/mdn_services/index.html create mode 100644 files/ko/mdn/community/conversations/index.html create mode 100644 files/ko/mdn/community/index.html create mode 100644 files/ko/mdn/community/roles/admins/index.html create mode 100644 files/ko/mdn/community/roles/index.html create mode 100644 files/ko/mdn/community/roles/localization_driver_role/index.html create mode 100644 files/ko/mdn/community/working_in_community/index.html create mode 100644 files/ko/mdn/contribute/creating_and_editing_pages/index.html create mode 100644 files/ko/mdn/contribute/does_this_belong/index.html create mode 100644 files/ko/mdn/contribute/feedback/index.html create mode 100644 files/ko/mdn/contribute/getting_started/index.html create mode 100644 files/ko/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/ko/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/ko/mdn/contribute/howto/index.html create mode 100644 "files/ko/mdn/contribute/howto/mdn_\352\263\204\354\240\225_\354\203\235\354\204\261\355\225\230\352\270\260/index.html" create mode 100644 files/ko/mdn/contribute/howto/report_a_problem/index.html create mode 100644 files/ko/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/ko/mdn/contribute/howto/tag/index.html create mode 100644 files/ko/mdn/contribute/howto/tag_javascript_pages/index.html create mode 100644 files/ko/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html create mode 100644 "files/ko/mdn/contribute/howto/\354\202\264\354\225\204\354\236\210\353\212\224_\354\275\224\353\223\234_\354\203\230\355\224\214\353\241\234_\353\263\200\355\231\230\355\225\230\352\270\260/index.html" create mode 100644 files/ko/mdn/contribute/index.html create mode 100644 files/ko/mdn/contribute/processes/index.html create mode 100644 files/ko/mdn/editor/index.html create mode 100644 files/ko/mdn/editor/links/index.html create mode 100644 files/ko/mdn/guidelines/best_practices/index.html create mode 100644 files/ko/mdn/guidelines/code_guidelines/code_guidelines/index.html create mode 100644 files/ko/mdn/guidelines/code_guidelines/css/index.html create mode 100644 files/ko/mdn/guidelines/code_guidelines/index.html create mode 100644 files/ko/mdn/guidelines/index.html create mode 100644 files/ko/mdn/guidelines/style_guide/index.html create mode 100644 files/ko/mdn/index.html create mode 100644 files/ko/mdn/kuma/index.html create mode 100644 files/ko/mdn/structures/api_references/api_reference_sidebars/index.html create mode 100644 files/ko/mdn/structures/api_references/index.html create mode 100644 files/ko/mdn/structures/compatibility_tables/index.html create mode 100644 files/ko/mdn/structures/index.html create mode 100644 files/ko/mdn/structures/macros/commonly-used_macros/index.html create mode 100644 files/ko/mdn/structures/macros/index.html create mode 100644 files/ko/mdn/tools/index.html create mode 100644 files/ko/mdn/tools/kumascript/index.html create mode 100644 files/ko/mdn/tools/kumascript/troubleshooting/index.html create mode 100644 "files/ko/mdn/tools/\355\216\230\354\235\264\354\247\200_\354\236\254\354\203\235\354\204\261/index.html" create mode 100644 files/ko/mdn/user_guide/index.html create mode 100644 files/ko/mdn_at_ten/index.html create mode 100644 files/ko/mercurial_faq/index.html create mode 100644 files/ko/migrate_apps_from_internet_explorer_to_mozilla/index.html create mode 100644 files/ko/mozilla's_quirks_mode/index.html create mode 100644 files/ko/mozilla/add-ons/amo/index.html create mode 100644 files/ko/mozilla/add-ons/amo/policy/index.html create mode 100644 files/ko/mozilla/add-ons/bootstrapped_extensions/index.html create mode 100644 files/ko/mozilla/add-ons/extension_frequently_asked_questions/index.html create mode 100644 files/ko/mozilla/add-ons/extension_packaging/index.html create mode 100644 files/ko/mozilla/add-ons/index.html create mode 100644 files/ko/mozilla/add-ons/plugins/index.html create mode 100644 files/ko/mozilla/add-ons/plugins/macromedia_flash/index.html create mode 100644 files/ko/mozilla/add-ons/plugins/reference/index.html create mode 100644 files/ko/mozilla/add-ons/plugins/reference/np_getmimedescription/index.html create mode 100644 files/ko/mozilla/add-ons/plugins/reference/npn_posturlnotify/index.html create mode 100644 files/ko/mozilla/add-ons/setting_up_extension_development_environment/index.html create mode 100644 files/ko/mozilla/add-ons/themes/index.html create mode 100644 files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/contents.rdf/index.html create mode 100644 files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/getting_started/index.html create mode 100644 files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/index.html create mode 100644 files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/install.rdf/index.html create mode 100644 files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/uuid/index.html create mode 100644 files/ko/mozilla/add-ons/themes/obsolete/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/browsingdata/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/contentscripts/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/contextmenus/contexttype/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/contextmenus/create/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/contextmenus/gettargetelement/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/contextmenus/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/contextmenus/onshown/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/pageaction/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/pageaction/show/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/storage/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/storage/local/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/storage/sync/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/tabs/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/webrequest/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/content_scripts/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/examples/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/manifest.json/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/manifest.json/page_action/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/prerequisites/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/user_actions/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/user_interface/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/your_second_webextension/index.html create mode 100644 files/ko/mozilla/developer_guide/eclipse/eclipse_cdt/index.html create mode 100644 files/ko/mozilla/developer_guide/eclipse/index.html create mode 100644 files/ko/mozilla/developer_guide/index.html create mode 100644 files/ko/mozilla/developer_guide/mozilla_build_faq/index.html create mode 100644 files/ko/mozilla/developer_guide/source_code/index.html create mode 100644 files/ko/mozilla/firefox/developer_edition/index.html create mode 100644 files/ko/mozilla/firefox/headless_mode/index.html create mode 100644 files/ko/mozilla/firefox/index.html create mode 100644 files/ko/mozilla/firefox/multiple_profiles/index.html create mode 100644 files/ko/mozilla/firefox/releases/3/index.html create mode 100644 files/ko/mozilla/firefox/releases/66/index.html create mode 100644 files/ko/mozilla/firefox/releases/index.html create mode 100644 files/ko/mozilla/http_cache/index.html create mode 100644 files/ko/mozilla/implementing_pontoon_in_a_mozilla_website/index.html create mode 100644 files/ko/mozilla/index.html create mode 100644 files/ko/mozilla/javascript_code_modules/index.html create mode 100644 files/ko/mozilla/js-ctypes/index.html create mode 100644 "files/ko/mozilla/marketplace/publishing/\354\206\214\352\260\234/index.html" create mode 100644 files/ko/mozilla/marketplace/submission/index.html create mode 100644 files/ko/mozilla/marketplace_kr/index.html create mode 100644 files/ko/mozilla/mobile/index.html create mode 100644 files/ko/mozilla/mobile/viewport_meta_tag/index.html create mode 100644 files/ko/mozilla/participating_in_the_mozilla_project/index.html create mode 100644 files/ko/mozilla/persona/bootstrapping_persona/index.html create mode 100644 files/ko/mozilla/persona/browser_compatibility/index.html create mode 100644 files/ko/mozilla/persona/index.html create mode 100644 files/ko/mozilla/persona/quick_setup/index.html create mode 100644 files/ko/mozilla/persona/user_interface_guidelines/index.html create mode 100644 files/ko/mozilla/persona/why_persona/index.html create mode 100644 files/ko/mozilla/projects/emscripten/index.html create mode 100644 files/ko/mozilla/projects/index.html create mode 100644 files/ko/mozilla/projects/l20n/index.html create mode 100644 files/ko/mozilla/projects/psm/index.html create mode 100644 files/ko/mozilla/qa/bug_writing_guidelines/index.html create mode 100644 files/ko/mozilla/qa/index.html create mode 100644 files/ko/mozilla/tech/index.html create mode 100644 files/ko/mozilla/tech/xpcom/guide/index.html create mode 100644 files/ko/mozilla/tech/xpcom/language_bindings/index.html create mode 100644 files/ko/mozilla/tech/xpcom/reference/index.html create mode 100644 files/ko/mozilla/tech/xpcom/reference/interface/about_scriptable_interfaces/index.html create mode 100644 files/ko/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html create mode 100644 files/ko/mozilla/tech/xul/attribute/accesskey/index.html create mode 100644 files/ko/mozilla/tech/xul/attribute/currentset/index.html create mode 100644 files/ko/mozilla/tech/xul/attribute/image.onload/index.html create mode 100644 files/ko/mozilla/tech/xul/attribute/index.html create mode 100644 files/ko/mozilla/tech/xul/index.html create mode 100644 files/ko/mozilla/tech/xul/menu/index.html create mode 100644 files/ko/mozilla/tech/xul/property/index.html create mode 100644 files/ko/mozilla/tech/xul/splitter/index.html create mode 100644 files/ko/mozilla/tech/xul/template_guide/index.html create mode 100644 files/ko/mozilla/tech/xul/toolbar/index.html create mode 100644 files/ko/mozilla/tech/xul/toolbarbutton/index.html create mode 100644 files/ko/mozilla/tech/xul/toolbarpalette/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_controls/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_reference/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/adding_buttons/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/adding_event_handlers/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/adding_html_elements/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/adding_labels_and_images/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/adding_more_elements/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/box_model_details/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/content_panels/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/creating_a_window/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/cross_package_overlays/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/element_positioning/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/focus_and_selection/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/grids/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/groupboxes/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/input_controls/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/introduction/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_rdf/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_xbl/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/keyboard_shortcuts/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/list_controls/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/localization/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/manifest_files/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/more_button_features/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/more_event_handlers/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/more_menu_features/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/popup_menus/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/progress_meters/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/property_files/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/scroll_bars/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/scrolling_menus/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/simple_menu_bars/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/splitters/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/stack_positioning/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/stacks_and_decks/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/the_box_model/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/the_chrome_url/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/toolbars/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/trees/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/using_spacers/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/xpcom_examples/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/xpcom_interfaces/index.html create mode 100644 files/ko/mozilla/tech/xul/xul_tutorial/xul_structure/index.html create mode 100644 "files/ko/mozilla/\352\260\234\353\260\234\354\236\220_\355\224\204\353\241\234\352\267\270\353\236\250/index.html" create mode 100644 "files/ko/mozilla/\354\225\210\353\223\234\353\241\234\354\235\264\353\223\234\354\232\251_\355\214\214\354\235\264\354\226\264\355\217\255\354\212\244/index.html" create mode 100644 "files/ko/mozilla/\354\247\200\354\227\255\355\231\224/index.html" create mode 100644 "files/ko/mozilla/\354\247\200\354\227\255\355\231\224/localizing_with_verbatim/index.html" create mode 100644 "files/ko/mozilla/\354\247\200\354\227\255\355\231\224/pontoon_\354\247\200\354\227\255\355\231\224/index.html" create mode 100644 files/ko/mozilla_source_code_via_cvs/index.html create mode 100644 files/ko/msx_emulator_(jsmsx)/index.html create mode 100644 files/ko/navigation_timing/index.html create mode 100644 files/ko/new_compatibility_tables_beta/index.html create mode 100644 files/ko/node_server_without_framework/index.html create mode 100644 files/ko/notable_bugs_fixed_in_firefox_3/index.html create mode 100644 files/ko/nsicryptohash/index.html create mode 100644 files/ko/nsiidleservice/index.html create mode 100644 files/ko/nss/index.html create mode 100644 files/ko/nss/new_nss_samples/index.html create mode 100644 files/ko/places/accessing_bookmarks/index.html create mode 100644 files/ko/places/custom_containers/index.html create mode 100644 files/ko/places/index.html create mode 100644 files/ko/places/instantiating_views/index.html create mode 100644 files/ko/places/query_system/index.html create mode 100644 files/ko/places/views/index.html create mode 100644 files/ko/preferences_system/examples/index.html create mode 100644 files/ko/preferences_system/index.html create mode 100644 files/ko/pyxpcom/index.html create mode 100644 files/ko/rdf/index.html create mode 100644 files/ko/rhino/index.html create mode 100644 files/ko/sandbox/index.html create mode 100644 files/ko/scripting_plugins/index.html create mode 100644 files/ko/spidermonkey/index.html create mode 100644 files/ko/storage/index.html create mode 100644 files/ko/svg_improvements_in_firefox_3/index.html create mode 100644 files/ko/svg_in_firefox/index.html create mode 100644 files/ko/the_basics_of_web_services/index.html create mode 100644 files/ko/the_dom_and_javascript/index.html create mode 100644 files/ko/theme_packaging/index.html create mode 100644 files/ko/tips_for_authoring_fast-loading_html_pages/index.html create mode 100644 files/ko/toolkit_api/index.html create mode 100644 files/ko/tools/add-ons/dom_inspector/index.html create mode 100644 files/ko/tools/add-ons/index.html create mode 100644 files/ko/tools/debugger/index.html create mode 100644 files/ko/tools/debugger/ui_tour/index.html create mode 100644 "files/ko/tools/debugger/\353\213\250\354\266\225\355\202\244/index.html" create mode 100644 files/ko/tools/how_to/index.html create mode 100644 files/ko/tools/how_to/open_the_debugger/index.html create mode 100644 files/ko/tools/how_to/search/index.html create mode 100644 files/ko/tools/how_to/set_a_breakpoint/index.html create mode 100644 files/ko/tools/index.html create mode 100644 files/ko/tools/network_monitor/index.html create mode 100644 files/ko/tools/page_inspector/index.html create mode 100644 files/ko/tools/page_inspector/ui_tour/index.html create mode 100644 files/ko/tools/performance/index.html create mode 100644 files/ko/tools/performance/ui_tour/index.html create mode 100644 files/ko/tools/remote_debugging/firefox_for_android/index.html create mode 100644 files/ko/tools/remote_debugging/index.html create mode 100644 files/ko/tools/scratchpad/index.html create mode 100644 files/ko/tools/web_console/index.html create mode 100644 files/ko/tools/webide/index.html create mode 100644 "files/ko/tools/webide/\353\254\270\354\240\234\355\225\264\352\262\260/index.html" create mode 100644 files/ko/updating_extensions_for_firefox_2/index.html create mode 100644 files/ko/updating_extensions_for_firefox_3/index.html create mode 100644 files/ko/updating_web_applications_for_firefox_3/index.html create mode 100644 files/ko/using_mozilla_in_testing_and_debugging_web_sites/index.html create mode 100644 files/ko/using_nsiloginmanager/index.html create mode 100644 files/ko/using_xpath/index.html create mode 100644 files/ko/using_xpinstall_to_install_plugins/index.html create mode 100644 files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html create mode 100644 files/ko/web/accessibility/aria/aria_live_regions/index.html create mode 100644 files/ko/web/accessibility/aria/aria_techniques/index.html create mode 100644 files/ko/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html create mode 100644 files/ko/web/accessibility/aria/forms/alerts/index.html create mode 100644 files/ko/web/accessibility/aria/forms/basic_form_hints/index.html create mode 100644 files/ko/web/accessibility/aria/forms/index.html create mode 100644 files/ko/web/accessibility/aria/index.html create mode 100644 files/ko/web/accessibility/aria/roles/dialog_role/index.html create mode 100644 files/ko/web/accessibility/aria/roles/index.html create mode 100644 files/ko/web/accessibility/index.html create mode 100644 files/ko/web/accessibility/mobile_accessibility_checklist/index.html create mode 100644 files/ko/web/accessibility/understanding_wcag/index.html create mode 100644 files/ko/web/accessibility/understanding_wcag/keyboard/index.html create mode 100644 files/ko/web/api/abortcontroller/abort/index.html create mode 100644 files/ko/web/api/abortcontroller/abortcontroller/index.html create mode 100644 files/ko/web/api/abortcontroller/index.html create mode 100644 files/ko/web/api/abortcontroller/signal/index.html create mode 100644 files/ko/web/api/abortsignal/aborted/index.html create mode 100644 files/ko/web/api/abortsignal/index.html create mode 100644 files/ko/web/api/abstractrange/collapsed/index.html create mode 100644 files/ko/web/api/abstractrange/index.html create mode 100644 files/ko/web/api/abstractworker/index.html create mode 100644 files/ko/web/api/analysernode/index.html create mode 100644 files/ko/web/api/angle_instanced_arrays/index.html create mode 100644 files/ko/web/api/animationevent/animationevent/index.html create mode 100644 files/ko/web/api/animationevent/animationname/index.html create mode 100644 files/ko/web/api/animationevent/index.html create mode 100644 files/ko/web/api/animationtimeline/currenttime/index.html create mode 100644 files/ko/web/api/animationtimeline/index.html create mode 100644 files/ko/web/api/audio_channels_api/using_the_audiochannels_api/index.html create mode 100644 files/ko/web/api/audiobuffer/index.html create mode 100644 files/ko/web/api/audiobuffersourcenode/index.html create mode 100644 files/ko/web/api/audiochannelmanager/index.html create mode 100644 files/ko/web/api/audiochannels_api/index.html create mode 100644 files/ko/web/api/audiocontext/index.html create mode 100644 files/ko/web/api/audiodestinationnode/index.html create mode 100644 files/ko/web/api/audionode/index.html create mode 100644 files/ko/web/api/audioparam/index.html create mode 100644 files/ko/web/api/background_tasks_api/index.html create mode 100644 files/ko/web/api/batterymanager/charging/index.html create mode 100644 files/ko/web/api/batterymanager/chargingtime/index.html create mode 100644 files/ko/web/api/batterymanager/dischargingtime/index.html create mode 100644 files/ko/web/api/batterymanager/index.html create mode 100644 files/ko/web/api/biquadfilternode/index.html create mode 100644 files/ko/web/api/blob/blob/index.html create mode 100644 files/ko/web/api/blob/index.html create mode 100644 files/ko/web/api/body/index.html create mode 100644 files/ko/web/api/body/json/index.html create mode 100644 files/ko/web/api/broadcastchannel/index.html create mode 100644 files/ko/web/api/cache/index.html create mode 100644 files/ko/web/api/cache/put/index.html create mode 100644 files/ko/web/api/canvascapturemediastreamtrack/canvas/index.html create mode 100644 files/ko/web/api/canvascapturemediastreamtrack/index.html create mode 100644 files/ko/web/api/canvascapturemediastreamtrack/requestframe/index.html create mode 100644 files/ko/web/api/channel_messaging_api/index.html create mode 100644 files/ko/web/api/channel_messaging_api/using_channel_messaging/index.html create mode 100644 files/ko/web/api/characterdata/index.html create mode 100644 files/ko/web/api/childnode/before/index.html create mode 100644 files/ko/web/api/childnode/index.html create mode 100644 files/ko/web/api/childnode/remove/index.html create mode 100644 files/ko/web/api/clients/claim/index.html create mode 100644 files/ko/web/api/clients/index.html create mode 100644 files/ko/web/api/clipboard/index.html create mode 100644 files/ko/web/api/clipboard_api/index.html create mode 100644 files/ko/web/api/clipboardevent/clipboarddata/index.html create mode 100644 files/ko/web/api/clipboardevent/index.html create mode 100644 files/ko/web/api/comment/index.html create mode 100644 files/ko/web/api/console/assert/index.html create mode 100644 files/ko/web/api/console/clear/index.html create mode 100644 files/ko/web/api/console/count/index.html create mode 100644 files/ko/web/api/console/countreset/index.html create mode 100644 files/ko/web/api/console/debug/index.html create mode 100644 files/ko/web/api/console/error/index.html create mode 100644 files/ko/web/api/console/group/index.html create mode 100644 files/ko/web/api/console/index.html create mode 100644 files/ko/web/api/console/log/index.html create mode 100644 files/ko/web/api/console/time/index.html create mode 100644 files/ko/web/api/console/timeend/index.html create mode 100644 files/ko/web/api/console/trace/index.html create mode 100644 files/ko/web/api/console/warn/index.html create mode 100644 files/ko/web/api/console_api/index.html create mode 100644 files/ko/web/api/crypto/getrandomvalues/index.html create mode 100644 files/ko/web/api/crypto/index.html create mode 100644 files/ko/web/api/crypto/subtle/index.html create mode 100644 files/ko/web/api/css/index.html create mode 100644 files/ko/web/api/css_object_model/index.html create mode 100644 files/ko/web/api/cssmediarule/index.html create mode 100644 files/ko/web/api/cssomstring/index.html create mode 100644 files/ko/web/api/cssstylesheet/index.html create mode 100644 files/ko/web/api/customelementregistry/index.html create mode 100644 files/ko/web/api/customevent/customevent/index.html create mode 100644 files/ko/web/api/customevent/index.html create mode 100644 files/ko/web/api/datatransfer/getdata/index.html create mode 100644 files/ko/web/api/datatransfer/index.html create mode 100644 files/ko/web/api/document/adoptnode/index.html create mode 100644 files/ko/web/api/document/alinkcolor/index.html create mode 100644 files/ko/web/api/document/all/index.html create mode 100644 files/ko/web/api/document/anchors/index.html create mode 100644 files/ko/web/api/document/applets/index.html create mode 100644 files/ko/web/api/document/body/index.html create mode 100644 files/ko/web/api/document/characterset/index.html create mode 100644 files/ko/web/api/document/compatmode/index.html create mode 100644 files/ko/web/api/document/cookie/index.html create mode 100644 files/ko/web/api/document/createdocumentfragment/index.html create mode 100644 files/ko/web/api/document/createelement/index.html create mode 100644 files/ko/web/api/document/createelementns/index.html create mode 100644 files/ko/web/api/document/createrange/index.html create mode 100644 files/ko/web/api/document/createtextnode/index.html create mode 100644 files/ko/web/api/document/createtreewalker/index.html create mode 100644 files/ko/web/api/document/defaultview/index.html create mode 100644 files/ko/web/api/document/designmode/index.html create mode 100644 files/ko/web/api/document/doctype/index.html create mode 100644 files/ko/web/api/document/document/index.html create mode 100644 files/ko/web/api/document/documentelement/index.html create mode 100644 files/ko/web/api/document/documenturi/index.html create mode 100644 files/ko/web/api/document/domain/index.html create mode 100644 files/ko/web/api/document/drag_event/index.html create mode 100644 files/ko/web/api/document/dragend_event/index.html create mode 100644 files/ko/web/api/document/dragstart_event/index.html create mode 100644 files/ko/web/api/document/embeds/index.html create mode 100644 files/ko/web/api/document/execcommand/index.html create mode 100644 files/ko/web/api/document/forms/index.html create mode 100644 files/ko/web/api/document/getelementbyid/index.html create mode 100644 files/ko/web/api/document/getelementsbytagname/index.html create mode 100644 files/ko/web/api/document/getelementsbytagnamens/index.html create mode 100644 files/ko/web/api/document/getselection/index.html create mode 100644 files/ko/web/api/document/hasfocus/index.html create mode 100644 files/ko/web/api/document/head/index.html create mode 100644 files/ko/web/api/document/hidden/index.html create mode 100644 files/ko/web/api/document/images/index.html create mode 100644 files/ko/web/api/document/implementation/index.html create mode 100644 files/ko/web/api/document/importnode/index.html create mode 100644 files/ko/web/api/document/index.html create mode 100644 files/ko/web/api/document/keydown_event/index.html create mode 100644 files/ko/web/api/document/keyup_event/index.html create mode 100644 files/ko/web/api/document/links/index.html create mode 100644 files/ko/web/api/document/location/index.html create mode 100644 files/ko/web/api/document/open/index.html create mode 100644 files/ko/web/api/document/queryselector/index.html create mode 100644 files/ko/web/api/document/queryselectorall/index.html create mode 100644 files/ko/web/api/document/readystate/index.html create mode 100644 files/ko/web/api/document/readystatechange_event/index.html create mode 100644 files/ko/web/api/document/referrer/index.html create mode 100644 files/ko/web/api/document/scroll_event/index.html create mode 100644 files/ko/web/api/document/stylesheetsets/index.html create mode 100644 files/ko/web/api/document/url/index.html create mode 100644 files/ko/web/api/document/visibilitychange_event/index.html create mode 100644 files/ko/web/api/document/visibilitystate/index.html create mode 100644 files/ko/web/api/document/write/index.html create mode 100644 files/ko/web/api/document_object_model/events/index.html create mode 100644 files/ko/web/api/document_object_model/examples/index.html create mode 100644 files/ko/web/api/document_object_model/index.html create mode 100644 files/ko/web/api/document_object_model/locating_dom_elements_using_selectors/index.html create mode 100644 files/ko/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html create mode 100644 "files/ko/web/api/document_object_model/\354\206\214\352\260\234/index.html" create mode 100644 files/ko/web/api/documentfragment/index.html create mode 100644 files/ko/web/api/documentorshadowroot/activeelement/index.html create mode 100644 files/ko/web/api/documentorshadowroot/index.html create mode 100644 files/ko/web/api/documentorshadowroot/stylesheets/index.html create mode 100644 files/ko/web/api/documenttype/index.html create mode 100644 files/ko/web/api/domobject/index.html create mode 100644 files/ko/web/api/domparser/index.html create mode 100644 files/ko/web/api/domstring/index.html create mode 100644 files/ko/web/api/domtokenlist/contains/index.html create mode 100644 files/ko/web/api/domtokenlist/index.html create mode 100644 files/ko/web/api/dragevent/index.html create mode 100644 files/ko/web/api/element/accesskey/index.html create mode 100644 files/ko/web/api/element/attributes/index.html create mode 100644 files/ko/web/api/element/classlist/index.html create mode 100644 files/ko/web/api/element/classname/index.html create mode 100644 files/ko/web/api/element/click_event/index.html create mode 100644 files/ko/web/api/element/clientheight/index.html create mode 100644 files/ko/web/api/element/clientleft/index.html create mode 100644 files/ko/web/api/element/closest/index.html create mode 100644 files/ko/web/api/element/currentstyle/index.html create mode 100644 files/ko/web/api/element/getattribute/index.html create mode 100644 files/ko/web/api/element/getelementsbyclassname/index.html create mode 100644 files/ko/web/api/element/getelementsbytagname/index.html create mode 100644 files/ko/web/api/element/id/index.html create mode 100644 files/ko/web/api/element/index.html create mode 100644 files/ko/web/api/element/innerhtml/index.html create mode 100644 files/ko/web/api/element/insertadjacenthtml/index.html create mode 100644 files/ko/web/api/element/outerhtml/index.html create mode 100644 files/ko/web/api/element/removeattribute/index.html create mode 100644 files/ko/web/api/element/scrollheight/index.html create mode 100644 files/ko/web/api/element/scrollintoview/index.html create mode 100644 files/ko/web/api/element/tagname/index.html create mode 100644 files/ko/web/api/element/touchcancel_event/index.html create mode 100644 files/ko/web/api/encoding_api/index.html create mode 100644 files/ko/web/api/event/cancelable/index.html create mode 100644 files/ko/web/api/event/cancelbubble/index.html create mode 100644 files/ko/web/api/event/createevent/index.html create mode 100644 files/ko/web/api/event/event/index.html create mode 100644 files/ko/web/api/event/eventphase/index.html create mode 100644 files/ko/web/api/event/index.html create mode 100644 files/ko/web/api/event/istrusted/index.html create mode 100644 files/ko/web/api/event/preventdefault/index.html create mode 100644 files/ko/web/api/event/stopimmediatepropagation/index.html create mode 100644 files/ko/web/api/event/stoppropagation/index.html create mode 100644 files/ko/web/api/event/target/index.html create mode 100644 files/ko/web/api/eventlistener/index.html create mode 100644 files/ko/web/api/eventsource/eventsource/index.html create mode 100644 files/ko/web/api/eventsource/index.html create mode 100644 files/ko/web/api/eventtarget/addeventlistener/index.html create mode 100644 files/ko/web/api/eventtarget/dispatchevent/index.html create mode 100644 files/ko/web/api/eventtarget/eventtarget/index.html create mode 100644 files/ko/web/api/eventtarget/index.html create mode 100644 files/ko/web/api/eventtarget/removeeventlistener/index.html create mode 100644 files/ko/web/api/fetch_api/basic_concepts/index.html create mode 100644 "files/ko/web/api/fetch_api/fetch\354\235\230_\354\202\254\354\232\251\353\262\225/index.html" create mode 100644 files/ko/web/api/fetch_api/index.html create mode 100644 files/ko/web/api/fetchevent/index.html create mode 100644 files/ko/web/api/fetchevent/respondwith/index.html create mode 100644 files/ko/web/api/file/file/index.html create mode 100644 files/ko/web/api/file/index.html create mode 100644 files/ko/web/api/file/name/index.html create mode 100644 files/ko/web/api/file/size/index.html create mode 100644 files/ko/web/api/file/using_files_from_web_applications/index.html create mode 100644 files/ko/web/api/file_and_directory_entries_api/index.html create mode 100644 files/ko/web/api/filelist/index.html create mode 100644 files/ko/web/api/filereader/index.html create mode 100644 files/ko/web/api/filereader/loadend_event/index.html create mode 100644 files/ko/web/api/filereader/readasdataurl/index.html create mode 100644 files/ko/web/api/filereader/readastext/index.html create mode 100644 files/ko/web/api/filereader/result/index.html create mode 100644 files/ko/web/api/formdata/append/index.html create mode 100644 files/ko/web/api/formdata/delete/index.html create mode 100644 files/ko/web/api/formdata/entries/index.html create mode 100644 files/ko/web/api/formdata/formdata/index.html create mode 100644 files/ko/web/api/formdata/get/index.html create mode 100644 files/ko/web/api/formdata/getall/index.html create mode 100644 files/ko/web/api/formdata/has/index.html create mode 100644 files/ko/web/api/formdata/index.html create mode 100644 files/ko/web/api/formdata/keys/index.html create mode 100644 files/ko/web/api/formdata/set/index.html create mode 100644 files/ko/web/api/formdata/values/index.html create mode 100644 files/ko/web/api/gamepad_api/index.html create mode 100644 files/ko/web/api/gamepad_api/using_the_gamepad_api/index.html create mode 100644 files/ko/web/api/geolocation/clearwatch/index.html create mode 100644 files/ko/web/api/geolocation/getcurrentposition/index.html create mode 100644 files/ko/web/api/geolocation/index.html create mode 100644 files/ko/web/api/geolocation/watchposition/index.html create mode 100644 files/ko/web/api/geolocation_api/index.html create mode 100644 files/ko/web/api/geolocationposition/index.html create mode 100644 files/ko/web/api/globaleventhandlers/index.html create mode 100644 files/ko/web/api/globaleventhandlers/onchange/index.html create mode 100644 files/ko/web/api/globaleventhandlers/onclick/index.html create mode 100644 files/ko/web/api/globaleventhandlers/oncontextmenu/index.html create mode 100644 files/ko/web/api/globaleventhandlers/ondblclick/index.html create mode 100644 files/ko/web/api/globaleventhandlers/onkeydown/index.html create mode 100644 files/ko/web/api/globaleventhandlers/onkeyup/index.html create mode 100644 files/ko/web/api/globaleventhandlers/onpointerenter/index.html create mode 100644 files/ko/web/api/globaleventhandlers/onscroll/index.html create mode 100644 files/ko/web/api/globaleventhandlers/onsubmit/index.html create mode 100644 files/ko/web/api/globaleventhandlers/ontouchstart/index.html create mode 100644 files/ko/web/api/history/back/index.html create mode 100644 files/ko/web/api/history/forward/index.html create mode 100644 files/ko/web/api/history/go/index.html create mode 100644 files/ko/web/api/history/index.html create mode 100644 files/ko/web/api/history/length/index.html create mode 100644 files/ko/web/api/history/pushstate/index.html create mode 100644 files/ko/web/api/history/replacestate/index.html create mode 100644 files/ko/web/api/history/scrollrestoration/index.html create mode 100644 files/ko/web/api/history/state/index.html create mode 100644 files/ko/web/api/history_api/index.html create mode 100644 "files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/drag_operations/index.html" create mode 100644 "files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/index.html" create mode 100644 files/ko/web/api/htmlbrelement/index.html create mode 100644 files/ko/web/api/htmlcanvaselement/getcontext/index.html create mode 100644 files/ko/web/api/htmlcanvaselement/index.html create mode 100644 files/ko/web/api/htmlcollection/index.html create mode 100644 files/ko/web/api/htmlcollection/item/index.html create mode 100644 files/ko/web/api/htmldivelement/index.html create mode 100644 files/ko/web/api/htmldocument/index.html create mode 100644 files/ko/web/api/htmlelement/accesskeylabel/index.html create mode 100644 files/ko/web/api/htmlelement/click/index.html create mode 100644 files/ko/web/api/htmlelement/contenteditable/index.html create mode 100644 files/ko/web/api/htmlelement/dataset/index.html create mode 100644 files/ko/web/api/htmlelement/index.html create mode 100644 files/ko/web/api/htmlelement/input_event/index.html create mode 100644 files/ko/web/api/htmlelement/offsetparent/index.html create mode 100644 files/ko/web/api/htmlelement/outertext/index.html create mode 100644 files/ko/web/api/htmlelement/style/index.html create mode 100644 files/ko/web/api/htmlelement/tabindex/index.html create mode 100644 files/ko/web/api/htmlformelement/index.html create mode 100644 files/ko/web/api/htmlhyperlinkelementutils/href/index.html create mode 100644 files/ko/web/api/htmlhyperlinkelementutils/index.html create mode 100644 files/ko/web/api/htmllielement/index.html create mode 100644 files/ko/web/api/htmlmediaelement/autoplay/index.html create mode 100644 files/ko/web/api/htmlmediaelement/canplay_event/index.html create mode 100644 files/ko/web/api/htmlmediaelement/canplaythrough_event/index.html create mode 100644 files/ko/web/api/htmlmediaelement/index.html create mode 100644 files/ko/web/api/htmloptionelement/index.html create mode 100644 files/ko/web/api/htmlselectelement/index.html create mode 100644 files/ko/web/api/htmlselectelement/selectedoptions/index.html create mode 100644 files/ko/web/api/htmlspanelement/index.html create mode 100644 files/ko/web/api/htmltableelement/index.html create mode 100644 files/ko/web/api/htmltableelement/width/index.html create mode 100644 files/ko/web/api/htmltemplateelement/index.html create mode 100644 files/ko/web/api/htmltitleelement/index.html create mode 100644 files/ko/web/api/htmlvideoelement/index.html create mode 100644 files/ko/web/api/idledeadline/didtimeout/index.html create mode 100644 files/ko/web/api/idledeadline/index.html create mode 100644 files/ko/web/api/imagecapture/getphotocapabilities/index.html create mode 100644 files/ko/web/api/imagecapture/getphotosettings/index.html create mode 100644 files/ko/web/api/imagecapture/grabframe/index.html create mode 100644 files/ko/web/api/imagecapture/imagecapture/index.html create mode 100644 files/ko/web/api/imagecapture/index.html create mode 100644 files/ko/web/api/imagecapture/takephoto/index.html create mode 100644 files/ko/web/api/imagecapture/track/index.html create mode 100644 files/ko/web/api/imagedata/index.html create mode 100644 files/ko/web/api/index.html create mode 100644 files/ko/web/api/index/index.html create mode 100644 files/ko/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html create mode 100644 files/ko/web/api/indexeddb_api/index.html create mode 100644 files/ko/web/api/indexeddb_api/using_indexeddb/index.html create mode 100644 files/ko/web/api/intersection_observer_api/index.html create mode 100644 files/ko/web/api/intersectionobserver/index.html create mode 100644 files/ko/web/api/intersectionobserver/intersectionobserver/index.html create mode 100644 files/ko/web/api/intersectionobserver/observe/index.html create mode 100644 files/ko/web/api/intersectionobserver/root/index.html create mode 100644 files/ko/web/api/location/index.html create mode 100644 files/ko/web/api/location/reload/index.html create mode 100644 files/ko/web/api/media_streams_api/index.html create mode 100644 files/ko/web/api/mediadevices/enumeratedevices/index.html create mode 100644 files/ko/web/api/mediadevices/getusermedia/index.html create mode 100644 files/ko/web/api/mediadevices/index.html create mode 100644 files/ko/web/api/mediastream_image_capture_api/index.html create mode 100644 files/ko/web/api/mediastreamtrack/applyconstraints/index.html create mode 100644 files/ko/web/api/mediastreamtrack/clone/index.html create mode 100644 files/ko/web/api/mediastreamtrack/enabled/index.html create mode 100644 files/ko/web/api/mediastreamtrack/getcapabilities/index.html create mode 100644 files/ko/web/api/mediastreamtrack/getconstraints/index.html create mode 100644 files/ko/web/api/mediastreamtrack/getsettings/index.html create mode 100644 files/ko/web/api/mediastreamtrack/id/index.html create mode 100644 files/ko/web/api/mediastreamtrack/index.html create mode 100644 files/ko/web/api/mediastreamtrack/kind/index.html create mode 100644 files/ko/web/api/mediastreamtrack/label/index.html create mode 100644 files/ko/web/api/mediastreamtrack/muted/index.html create mode 100644 files/ko/web/api/mediastreamtrack/readystate/index.html create mode 100644 files/ko/web/api/mediastreamtrack/stop/index.html create mode 100644 files/ko/web/api/mediatrackconstraints/index.html create mode 100644 files/ko/web/api/messageevent/index.html create mode 100644 files/ko/web/api/mouseevent/clientx/index.html create mode 100644 files/ko/web/api/mouseevent/index.html create mode 100644 files/ko/web/api/mozmmsevent/index.html create mode 100644 files/ko/web/api/mozmmsmessage/index.html create mode 100644 files/ko/web/api/mozmobilemessagemanager/index.html create mode 100644 files/ko/web/api/mozmobilemessagethread/index.html create mode 100644 files/ko/web/api/mozsmsevent/index.html create mode 100644 files/ko/web/api/mozsmsfilter/index.html create mode 100644 files/ko/web/api/mozsmsmanager/index.html create mode 100644 files/ko/web/api/mozsmsmessage/index.html create mode 100644 files/ko/web/api/mozsmssegmentinfo/index.html create mode 100644 files/ko/web/api/mutationobserver/index.html create mode 100644 files/ko/web/api/navigator/battery/index.html create mode 100644 files/ko/web/api/navigator/geolocation/index.html create mode 100644 files/ko/web/api/navigator/index.html create mode 100644 files/ko/web/api/navigator/mediadevices/index.html create mode 100644 files/ko/web/api/navigator/mozmobilemessage/index.html create mode 100644 files/ko/web/api/navigator/moznotification/index.html create mode 100644 files/ko/web/api/navigator/mozsms/index.html create mode 100644 files/ko/web/api/navigator/registerprotocolhandler/index.html create mode 100644 files/ko/web/api/navigator/share/index.html create mode 100644 files/ko/web/api/navigatorid/index.html create mode 100644 files/ko/web/api/navigatorlanguage/index.html create mode 100644 files/ko/web/api/navigatorlanguage/language/index.html create mode 100644 files/ko/web/api/navigatoronline/index.html create mode 100644 files/ko/web/api/navigatoronline/online_and_offline_events/index.html create mode 100644 files/ko/web/api/networkinformation/connection/index.html create mode 100644 files/ko/web/api/networkinformation/index.html create mode 100644 files/ko/web/api/node/appendchild/index.html create mode 100644 files/ko/web/api/node/childnodes/index.html create mode 100644 files/ko/web/api/node/clonenode/index.html create mode 100644 files/ko/web/api/node/contains/index.html create mode 100644 files/ko/web/api/node/firstchild/index.html create mode 100644 files/ko/web/api/node/haschildnodes/index.html create mode 100644 files/ko/web/api/node/index.html create mode 100644 files/ko/web/api/node/innertext/index.html create mode 100644 files/ko/web/api/node/insertbefore/index.html create mode 100644 files/ko/web/api/node/lastchild/index.html create mode 100644 files/ko/web/api/node/nextsibling/index.html create mode 100644 files/ko/web/api/node/normalize/index.html create mode 100644 files/ko/web/api/node/ownerdocument/index.html create mode 100644 files/ko/web/api/node/previoussibling/index.html create mode 100644 files/ko/web/api/node/replacechild/index.html create mode 100644 files/ko/web/api/node/textcontent/index.html create mode 100644 files/ko/web/api/nodefilter/index.html create mode 100644 files/ko/web/api/nodelist/entries/index.html create mode 100644 files/ko/web/api/nodelist/foreach/index.html create mode 100644 files/ko/web/api/nodelist/index.html create mode 100644 files/ko/web/api/nodelist/item/index.html create mode 100644 files/ko/web/api/nodelist/keys/index.html create mode 100644 files/ko/web/api/nodelist/length/index.html create mode 100644 files/ko/web/api/nodelist/values/index.html create mode 100644 files/ko/web/api/notification/index.html create mode 100644 files/ko/web/api/notification/permission/index.html create mode 100644 files/ko/web/api/notifications_api/index.html create mode 100644 files/ko/web/api/notifyaudioavailableevent/index.html create mode 100644 files/ko/web/api/offscreencanvas/getcontext/index.html create mode 100644 files/ko/web/api/offscreencanvas/height/index.html create mode 100644 files/ko/web/api/offscreencanvas/index.html create mode 100644 files/ko/web/api/offscreencanvas/offscreencanvas/index.html create mode 100644 files/ko/web/api/offscreencanvas/toblob/index.html create mode 100644 files/ko/web/api/offscreencanvas/width/index.html create mode 100644 files/ko/web/api/page_visibility_api/index.html create mode 100644 files/ko/web/api/parentnode/append/index.html create mode 100644 files/ko/web/api/parentnode/childelementcount/index.html create mode 100644 files/ko/web/api/parentnode/children/index.html create mode 100644 files/ko/web/api/parentnode/index.html create mode 100644 files/ko/web/api/parentnode/prepend/index.html create mode 100644 files/ko/web/api/performance/index.html create mode 100644 files/ko/web/api/performance/mark/index.html create mode 100644 files/ko/web/api/performance/now/index.html create mode 100644 files/ko/web/api/performanceentry/index.html create mode 100644 files/ko/web/api/photocapabilities/index.html create mode 100644 files/ko/web/api/plugin/index.html create mode 100644 files/ko/web/api/positionoptions/index.html create mode 100644 files/ko/web/api/push_api/index.html create mode 100644 files/ko/web/api/pushmanager/index.html create mode 100644 files/ko/web/api/pushmessagedata/index.html create mode 100644 files/ko/web/api/range/index.html create mode 100644 files/ko/web/api/range/selectnodecontents/index.html create mode 100644 files/ko/web/api/readablestream/index.html create mode 100644 files/ko/web/api/request/credentials/index.html create mode 100644 files/ko/web/api/request/index.html create mode 100644 files/ko/web/api/request/request/index.html create mode 100644 files/ko/web/api/rtcconfiguration/index.html create mode 100644 files/ko/web/api/rtcdatachannelevent/channel/index.html create mode 100644 files/ko/web/api/rtcdatachannelevent/index.html create mode 100644 files/ko/web/api/rtcdatachannelevent/rtcdatachannelevent/index.html create mode 100644 files/ko/web/api/rtcicecandidate/candidate/index.html create mode 100644 files/ko/web/api/rtcicecandidate/index.html create mode 100644 files/ko/web/api/rtcicecandidate/tojson/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/addicecandidate/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/addtrack/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/cantrickleicecandidates/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/close/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/connectionstate/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/createanswer/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/createdatachannel/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/currentlocaldescription/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/currentremotedescription/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/generatecertificate/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/getconfiguration/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/getidentityassertion/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/getreceivers/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/getsenders/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/gettransceivers/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/icegatheringstate/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/icegatheringstatechange_event/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/localdescription/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/onconnectionstatechange/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/ondatachannel/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/onicecandidate/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/onicegatheringstatechange/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/onidentityresult/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/ontrack/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/removetrack/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/restartice/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/setconfiguration/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/setidentityprovider/index.html create mode 100644 files/ko/web/api/rtcpeerconnection/setlocaldescription/index.html create mode 100644 files/ko/web/api/rtcpeerconnectioniceevent/candidate/index.html create mode 100644 files/ko/web/api/rtcpeerconnectioniceevent/index.html create mode 100644 files/ko/web/api/rtcsessiondescription/index.html create mode 100644 files/ko/web/api/rtcsessiondescription/sdp/index.html create mode 100644 files/ko/web/api/rtcsessiondescription/type/index.html create mode 100644 files/ko/web/api/screen.onorientationchange/index.html create mode 100644 files/ko/web/api/screen/index.html create mode 100644 files/ko/web/api/screen/lockorientation/index.html create mode 100644 files/ko/web/api/screen/orientation/index.html create mode 100644 files/ko/web/api/screen/unlockorientation/index.html create mode 100644 files/ko/web/api/selection/index.html create mode 100644 files/ko/web/api/selection/tostring/index.html create mode 100644 files/ko/web/api/server-sent_events/index.html create mode 100644 files/ko/web/api/service_worker_api/index.html create mode 100644 files/ko/web/api/service_worker_api/using_service_workers/index.html create mode 100644 files/ko/web/api/serviceworker/index.html create mode 100644 files/ko/web/api/serviceworker/onstatechange/index.html create mode 100644 files/ko/web/api/serviceworkerglobalscope/clients/index.html create mode 100644 files/ko/web/api/serviceworkerglobalscope/index.html create mode 100644 files/ko/web/api/serviceworkerglobalscope/notificationclick_event/index.html create mode 100644 files/ko/web/api/serviceworkerglobalscope/skipwaiting/index.html create mode 100644 files/ko/web/api/serviceworkerregistration/active/index.html create mode 100644 files/ko/web/api/serviceworkerregistration/index.html create mode 100644 files/ko/web/api/serviceworkerregistration/installing/index.html create mode 100644 files/ko/web/api/serviceworkerregistration/navigationpreload/index.html create mode 100644 files/ko/web/api/sharedworker/index.html create mode 100644 files/ko/web/api/storage/index.html create mode 100644 files/ko/web/api/storage/key/index.html create mode 100644 files/ko/web/api/storage/length/index.html create mode 100644 files/ko/web/api/storage/removeitem/index.html create mode 100644 files/ko/web/api/storageevent/index.html create mode 100644 files/ko/web/api/streams_api/index.html create mode 100644 files/ko/web/api/streams_api/using_readable_streams/index.html create mode 100644 "files/ko/web/api/streams_api/\354\273\250\354\205\211/index.html" create mode 100644 files/ko/web/api/stylesheet/index.html create mode 100644 files/ko/web/api/svgrect/index.html create mode 100644 files/ko/web/api/text/index.html create mode 100644 files/ko/web/api/text/splittext/index.html create mode 100644 files/ko/web/api/text/text/index.html create mode 100644 files/ko/web/api/touch_events/index.html create mode 100644 files/ko/web/api/treewalker/currentnode/index.html create mode 100644 files/ko/web/api/treewalker/index.html create mode 100644 files/ko/web/api/url/createobjecturl/index.html create mode 100644 files/ko/web/api/url/hash/index.html create mode 100644 files/ko/web/api/url/host/index.html create mode 100644 files/ko/web/api/url/hostname/index.html create mode 100644 files/ko/web/api/url/href/index.html create mode 100644 files/ko/web/api/url/index.html create mode 100644 files/ko/web/api/url/origin/index.html create mode 100644 files/ko/web/api/url/password/index.html create mode 100644 files/ko/web/api/url/pathname/index.html create mode 100644 files/ko/web/api/url/port/index.html create mode 100644 files/ko/web/api/url/protocol/index.html create mode 100644 files/ko/web/api/url/revokeobjecturl/index.html create mode 100644 files/ko/web/api/url/search/index.html create mode 100644 files/ko/web/api/url/searchparams/index.html create mode 100644 files/ko/web/api/url/tojson/index.html create mode 100644 files/ko/web/api/url/tostring/index.html create mode 100644 files/ko/web/api/url/url/index.html create mode 100644 files/ko/web/api/url/username/index.html create mode 100644 files/ko/web/api/urlsearchparams/index.html create mode 100644 files/ko/web/api/urlsearchparams/tostring/index.html create mode 100644 files/ko/web/api/urlsearchparams/urlsearchparams/index.html create mode 100644 files/ko/web/api/usvstring/index.html create mode 100644 files/ko/web/api/validitystate/index.html create mode 100644 files/ko/web/api/vreyeparameters/index.html create mode 100644 files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html create mode 100644 files/ko/web/api/web_audio_api/index.html create mode 100644 files/ko/web/api/web_audio_api/using_web_audio_api/index.html create mode 100644 files/ko/web/api/web_storage_api/index.html create mode 100644 files/ko/web/api/web_storage_api/using_the_web_storage_api/index.html create mode 100644 files/ko/web/api/web_workers_api/basic_usage/index.html create mode 100644 files/ko/web/api/web_workers_api/index.html create mode 100644 files/ko/web/api/web_workers_api/structured_clone_algorithm/index.html create mode 100644 files/ko/web/api/webgl_api/by_example/clearing_by_clicking/index.html create mode 100644 files/ko/web/api/webgl_api/by_example/detect_webgl/index.html create mode 100644 files/ko/web/api/webgl_api/by_example/hello_glsl/index.html create mode 100644 files/ko/web/api/webgl_api/by_example/hello_vertex_attributes/index.html create mode 100644 files/ko/web/api/webgl_api/by_example/index.html create mode 100644 files/ko/web/api/webgl_api/by_example/scissor_animation/index.html create mode 100644 files/ko/web/api/webgl_api/by_example/simple_color_animation/index.html create mode 100644 files/ko/web/api/webgl_api/by_example/textures_from_code/index.html create mode 100644 files/ko/web/api/webgl_api/cross-domain_textures/index.html create mode 100644 files/ko/web/api/webgl_api/index.html create mode 100644 files/ko/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html create mode 100644 files/ko/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html create mode 100644 files/ko/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html create mode 100644 files/ko/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html create mode 100644 files/ko/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html create mode 100644 files/ko/web/api/webgl_api/tutorial/index.html create mode 100644 files/ko/web/api/webgl_api/tutorial/lighting_in_webgl/index.html create mode 100644 files/ko/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html create mode 100644 files/ko/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html create mode 100644 files/ko/web/api/webgl_api/webgl_best_practices/index.html create mode 100644 files/ko/web/api/webglrenderbuffer/index.html create mode 100644 files/ko/web/api/webglshader/index.html create mode 100644 files/ko/web/api/webrtc_api/adapter.js/index.html create mode 100644 files/ko/web/api/webrtc_api/index.html create mode 100644 files/ko/web/api/webrtc_api/protocols/index.html create mode 100644 files/ko/web/api/webrtc_api/signaling_and_video_calling/index.html create mode 100644 files/ko/web/api/webrtc_api/using_data_channels/index.html create mode 100644 files/ko/web/api/websocket/index.html create mode 100644 files/ko/web/api/websocket/readystate/index.html create mode 100644 files/ko/web/api/websocket/websocket/index.html create mode 100644 files/ko/web/api/window/alert/index.html create mode 100644 files/ko/web/api/window/beforeunload_event/index.html create mode 100644 files/ko/web/api/window/cancelanimationframe/index.html create mode 100644 files/ko/web/api/window/closed/index.html create mode 100644 files/ko/web/api/window/confirm/index.html create mode 100644 files/ko/web/api/window/console/index.html create mode 100644 files/ko/web/api/window/crypto/index.html create mode 100644 files/ko/web/api/window/customelements/index.html create mode 100644 files/ko/web/api/window/devicepixelratio/index.html create mode 100644 files/ko/web/api/window/document/index.html create mode 100644 files/ko/web/api/window/event/index.html create mode 100644 files/ko/web/api/window/frameelement/index.html create mode 100644 files/ko/web/api/window/getcomputedstyle/index.html create mode 100644 files/ko/web/api/window/getselection/index.html create mode 100644 files/ko/web/api/window/history/index.html create mode 100644 files/ko/web/api/window/index.html create mode 100644 files/ko/web/api/window/innerwidth/index.html create mode 100644 files/ko/web/api/window/length/index.html create mode 100644 files/ko/web/api/window/localstorage/index.html create mode 100644 files/ko/web/api/window/location/index.html create mode 100644 files/ko/web/api/window/matchmedia/index.html create mode 100644 files/ko/web/api/window/name/index.html create mode 100644 files/ko/web/api/window/navigator/index.html create mode 100644 files/ko/web/api/window/open/index.html create mode 100644 files/ko/web/api/window/opener/index.html create mode 100644 files/ko/web/api/window/orientationchange_event/index.html create mode 100644 files/ko/web/api/window/outerwidth/index.html create mode 100644 files/ko/web/api/window/pageyoffset/index.html create mode 100644 files/ko/web/api/window/popstate_event/index.html create mode 100644 files/ko/web/api/window/postmessage/index.html create mode 100644 files/ko/web/api/window/prompt/index.html create mode 100644 files/ko/web/api/window/requestanimationframe/index.html create mode 100644 files/ko/web/api/window/requestidlecallback/index.html create mode 100644 files/ko/web/api/window/resize_event/index.html create mode 100644 files/ko/web/api/window/resizeto/index.html create mode 100644 files/ko/web/api/window/scrollto/index.html create mode 100644 files/ko/web/api/window/scrollx/index.html create mode 100644 files/ko/web/api/window/scrolly/index.html create mode 100644 files/ko/web/api/window/self/index.html create mode 100644 files/ko/web/api/window/sessionstorage/index.html create mode 100644 files/ko/web/api/window/status/index.html create mode 100644 files/ko/web/api/window/stop/index.html create mode 100644 files/ko/web/api/window/toolbar/index.html create mode 100644 files/ko/web/api/window/top/index.html create mode 100644 files/ko/web/api/window/unload_event/index.html create mode 100644 files/ko/web/api/window/window/index.html create mode 100644 files/ko/web/api/windoweventhandlers/index.html create mode 100644 files/ko/web/api/windoweventhandlers/onhashchange/index.html create mode 100644 files/ko/web/api/windoweventhandlers/onpopstate/index.html create mode 100644 files/ko/web/api/windoweventhandlers/onstorage/index.html create mode 100644 files/ko/web/api/windowtimers/settimeout/index.html create mode 100644 files/ko/web/api/worker/index.html create mode 100644 files/ko/web/api/worker/postmessage/index.html create mode 100644 files/ko/web/api/writablestream/index.html create mode 100644 files/ko/web/api/xmlhttprequest/index.html create mode 100644 files/ko/web/api/xmlhttprequest/setrequestheader/index.html create mode 100644 files/ko/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html create mode 100644 files/ko/web/api/xmlhttprequest/timeout/index.html create mode 100644 files/ko/web/api/xmlhttprequest/upload/index.html create mode 100644 files/ko/web/apps/design/index.html create mode 100644 files/ko/web/apps/publishing/marketplace_review_criteria/index.html create mode 100644 files/ko/web/css/-moz-image-region/index.html create mode 100644 files/ko/web/css/-webkit-line-clamp/index.html create mode 100644 files/ko/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/ko/web/css/@charset/index.html create mode 100644 files/ko/web/css/@font-face/font-display/index.html create mode 100644 files/ko/web/css/@font-face/index.html create mode 100644 files/ko/web/css/@import/index.html create mode 100644 files/ko/web/css/@keyframes/index.html create mode 100644 files/ko/web/css/@media/index.html create mode 100644 files/ko/web/css/@media/prefers-color-scheme/index.html create mode 100644 files/ko/web/css/@namespace/index.html create mode 100644 files/ko/web/css/@page/index.html create mode 100644 files/ko/web/css/@supports/index.html create mode 100644 files/ko/web/css/@viewport/height/index.html create mode 100644 files/ko/web/css/@viewport/index.html create mode 100644 files/ko/web/css/@viewport/viewport-fit/index.html create mode 100644 files/ko/web/css/@viewport/zoom/index.html create mode 100644 files/ko/web/css/_colon_active/index.html create mode 100644 files/ko/web/css/_colon_checked/index.html create mode 100644 files/ko/web/css/_colon_default/index.html create mode 100644 files/ko/web/css/_colon_defined/index.html create mode 100644 files/ko/web/css/_colon_disabled/index.html create mode 100644 files/ko/web/css/_colon_enabled/index.html create mode 100644 files/ko/web/css/_colon_first-child/index.html create mode 100644 files/ko/web/css/_colon_first-of-type/index.html create mode 100644 files/ko/web/css/_colon_first/index.html create mode 100644 files/ko/web/css/_colon_focus-within/index.html create mode 100644 files/ko/web/css/_colon_focus/index.html create mode 100644 files/ko/web/css/_colon_fullscreen/index.html create mode 100644 files/ko/web/css/_colon_hover/index.html create mode 100644 files/ko/web/css/_colon_link/index.html create mode 100644 files/ko/web/css/_colon_not/index.html create mode 100644 files/ko/web/css/_colon_nth-child/index.html create mode 100644 files/ko/web/css/_colon_root/index.html create mode 100644 files/ko/web/css/_colon_visited/index.html create mode 100644 files/ko/web/css/_doublecolon_after/index.html create mode 100644 files/ko/web/css/_doublecolon_before/index.html create mode 100644 files/ko/web/css/_doublecolon_placeholder/index.html create mode 100644 files/ko/web/css/actual_value/index.html create mode 100644 files/ko/web/css/align-content/index.html create mode 100644 files/ko/web/css/all/index.html create mode 100644 files/ko/web/css/all_about_the_containing_block/index.html create mode 100644 files/ko/web/css/alternative_style_sheets/index.html create mode 100644 files/ko/web/css/angle-percentage/index.html create mode 100644 files/ko/web/css/angle/index.html create mode 100644 files/ko/web/css/animation-delay/index.html create mode 100644 files/ko/web/css/animation-direction/index.html create mode 100644 files/ko/web/css/animation-duration/index.html create mode 100644 files/ko/web/css/animation-fill-mode/index.html create mode 100644 files/ko/web/css/animation/index.html create mode 100644 files/ko/web/css/at-rule/index.html create mode 100644 files/ko/web/css/attribute_selectors/index.html create mode 100644 files/ko/web/css/backdrop-filter/index.html create mode 100644 files/ko/web/css/backface-visibility/index.html create mode 100644 files/ko/web/css/background-attachment/index.html create mode 100644 files/ko/web/css/background-clip/index.html create mode 100644 files/ko/web/css/background-color/index.html create mode 100644 files/ko/web/css/background-image/index.html create mode 100644 files/ko/web/css/background-origin/index.html create mode 100644 files/ko/web/css/background-repeat/index.html create mode 100644 files/ko/web/css/background-size/index.html create mode 100644 files/ko/web/css/background/index.html create mode 100644 files/ko/web/css/basic-shape/index.html create mode 100644 files/ko/web/css/blend-mode/index.html create mode 100644 files/ko/web/css/border-bottom-color/index.html create mode 100644 files/ko/web/css/border-bottom-style/index.html create mode 100644 files/ko/web/css/border-bottom-width/index.html create mode 100644 files/ko/web/css/border-bottom/index.html create mode 100644 files/ko/web/css/border-collapse/index.html create mode 100644 files/ko/web/css/border-color/index.html create mode 100644 files/ko/web/css/border-image-outset/index.html create mode 100644 files/ko/web/css/border-image-repeat/index.html create mode 100644 files/ko/web/css/border-image-slice/index.html create mode 100644 files/ko/web/css/border-image-source/index.html create mode 100644 files/ko/web/css/border-image-width/index.html create mode 100644 files/ko/web/css/border-image/index.html create mode 100644 files/ko/web/css/border-left-color/index.html create mode 100644 files/ko/web/css/border-left-style/index.html create mode 100644 files/ko/web/css/border-left-width/index.html create mode 100644 files/ko/web/css/border-left/index.html create mode 100644 files/ko/web/css/border-radius/index.html create mode 100644 files/ko/web/css/border-right-color/index.html create mode 100644 files/ko/web/css/border-right-style/index.html create mode 100644 files/ko/web/css/border-right-width/index.html create mode 100644 files/ko/web/css/border-right/index.html create mode 100644 files/ko/web/css/border-spacing/index.html create mode 100644 files/ko/web/css/border-style/index.html create mode 100644 files/ko/web/css/border-top-color/index.html create mode 100644 files/ko/web/css/border-top-style/index.html create mode 100644 files/ko/web/css/border-top-width/index.html create mode 100644 files/ko/web/css/border-top/index.html create mode 100644 files/ko/web/css/border-width/index.html create mode 100644 files/ko/web/css/border/index.html create mode 100644 files/ko/web/css/box-shadow/index.html create mode 100644 files/ko/web/css/box-sizing/index.html create mode 100644 files/ko/web/css/calc()/index.html create mode 100644 files/ko/web/css/cascade/index.html create mode 100644 files/ko/web/css/child_combinator/index.html create mode 100644 files/ko/web/css/class_selectors/index.html create mode 100644 files/ko/web/css/clear/index.html create mode 100644 files/ko/web/css/clip-path/index.html create mode 100644 files/ko/web/css/color/index.html create mode 100644 files/ko/web/css/color_value/index.html create mode 100644 files/ko/web/css/comments/index.html create mode 100644 files/ko/web/css/common_css_questions/index.html create mode 100644 files/ko/web/css/computed_value/index.html create mode 100644 files/ko/web/css/contain/index.html create mode 100644 files/ko/web/css/content/index.html create mode 100644 files/ko/web/css/css_animated_properties/index.html create mode 100644 files/ko/web/css/css_animations/index.html create mode 100644 files/ko/web/css/css_animations/using_css_animations/index.html create mode 100644 files/ko/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 files/ko/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html create mode 100644 files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/ko/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html create mode 100644 files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/ko/web/css/css_basic_user_interface/index.html create mode 100644 files/ko/web/css/css_box_model/index.html create mode 100644 files/ko/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/ko/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/ko/web/css/css_charsets/index.html create mode 100644 files/ko/web/css/css_color/index.html create mode 100644 files/ko/web/css/css_colors/color_picker_tool/index.html create mode 100644 files/ko/web/css/css_columns/index.html create mode 100644 files/ko/web/css/css_conditional_rules/index.html create mode 100644 files/ko/web/css/css_containment/index.html create mode 100644 files/ko/web/css/css_device_adaptation/index.html create mode 100644 files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 "files/ko/web/css/css_flexible_box_layout/flexbox\354\235\230_\352\270\260\353\263\270_\352\260\234\353\205\220/index.html" create mode 100644 files/ko/web/css/css_flexible_box_layout/index.html create mode 100644 "files/ko/web/css/css_flexible_box_layout/\352\260\200\353\263\200\354\203\201\354\236\220\354\235\230_\353\214\200\355\221\234\354\240\201\354\235\270_\354\202\254\354\232\251\353\241\200/index.html" create mode 100644 files/ko/web/css/css_flow_layout/index.html create mode 100644 files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html create mode 100644 "files/ko/web/css/css_flow_layout/\353\214\200\354\227\264\352\263\274_\355\203\210\353\214\200\354\227\264/index.html" create mode 100644 "files/ko/web/css/css_flow_layout/\354\235\274\353\260\230_\355\235\220\353\246\204_\354\206\215_\353\270\224\353\241\235_\353\260\217_\354\235\270\353\235\274\354\235\270_\353\240\210\354\235\264\354\225\204\354\233\203/index.html" create mode 100644 "files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\223\260\352\270\260_\353\252\250\353\223\234/index.html" create mode 100644 "files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\230\244\353\262\204\355\224\214\353\241\234/index.html" create mode 100644 files/ko/web/css/css_fonts/index.html create mode 100644 files/ko/web/css/css_generated_content/index.html create mode 100644 files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html create mode 100644 files/ko/web/css/css_grid_layout/grid_template_areas/index.html create mode 100644 files/ko/web/css/css_grid_layout/index.html create mode 100644 files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html create mode 100644 files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html create mode 100644 files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html create mode 100644 files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html create mode 100644 files/ko/web/css/css_images/index.html create mode 100644 files/ko/web/css/css_images/using_css_gradients/index.html create mode 100644 files/ko/web/css/css_lists_and_counters/index.html create mode 100644 files/ko/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/ko/web/css/css_logical_properties/index.html create mode 100644 files/ko/web/css/css_masks/index.html create mode 100644 files/ko/web/css/css_miscellaneous/index.html create mode 100644 files/ko/web/css/css_namespaces/index.html create mode 100644 files/ko/web/css/css_pages/index.html create mode 100644 files/ko/web/css/css_positioning/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html create mode 100644 files/ko/web/css/css_ruby/index.html create mode 100644 files/ko/web/css/css_scroll_snap_points/index.html create mode 100644 files/ko/web/css/css_selectors/index.html create mode 100644 files/ko/web/css/css_shapes/index.html create mode 100644 files/ko/web/css/css_table/index.html create mode 100644 files/ko/web/css/css_text/index.html create mode 100644 files/ko/web/css/css_text_decoration/index.html create mode 100644 files/ko/web/css/css_transforms/index.html create mode 100644 files/ko/web/css/css_transforms/using_css_transforms/index.html create mode 100644 files/ko/web/css/css_transitions/index.html create mode 100644 files/ko/web/css/css_transitions/using_css_transitions/index.html create mode 100644 files/ko/web/css/css_types/index.html create mode 100644 files/ko/web/css/css_variables/index.html create mode 100644 files/ko/web/css/css_writing_modes/index.html create mode 100644 "files/ko/web/css/css_\353\213\250\354\234\204\354\231\200_\352\260\222/index.html" create mode 100644 files/ko/web/css/cursor/index.html create mode 100644 files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html create mode 100644 files/ko/web/css/descendant_combinator/index.html create mode 100644 files/ko/web/css/display-internal/index.html create mode 100644 files/ko/web/css/display/index.html create mode 100644 files/ko/web/css/filter-function/blur()/index.html create mode 100644 files/ko/web/css/filter-function/brightness()/index.html create mode 100644 files/ko/web/css/filter-function/contrast()/index.html create mode 100644 files/ko/web/css/filter-function/index.html create mode 100644 files/ko/web/css/filter/index.html create mode 100644 files/ko/web/css/filter_effects/index.html create mode 100644 files/ko/web/css/flex-basis/index.html create mode 100644 files/ko/web/css/flex-direction/index.html create mode 100644 files/ko/web/css/flex-flow/index.html create mode 100644 files/ko/web/css/flex-grow/index.html create mode 100644 files/ko/web/css/flex-shrink/index.html create mode 100644 files/ko/web/css/flex-wrap/index.html create mode 100644 files/ko/web/css/flex/index.html create mode 100644 files/ko/web/css/float/index.html create mode 100644 files/ko/web/css/font-family/index.html create mode 100644 files/ko/web/css/font-feature-settings/index.html create mode 100644 files/ko/web/css/font-size/index.html create mode 100644 files/ko/web/css/font-synthesis/index.html create mode 100644 files/ko/web/css/font-weight/index.html create mode 100644 files/ko/web/css/font/index.html create mode 100644 files/ko/web/css/frequency/index.html create mode 100644 files/ko/web/css/gap/index.html create mode 100644 files/ko/web/css/general_sibling_combinator/index.html create mode 100644 files/ko/web/css/getting_started/javascript/index.html create mode 100644 files/ko/web/css/getting_started/svg_graphics/index.html create mode 100644 files/ko/web/css/getting_started/xbl_bindings/index.html create mode 100644 files/ko/web/css/getting_started/xml_data/index.html create mode 100644 files/ko/web/css/getting_started/xul_user_interfaces/index.html create mode 100644 files/ko/web/css/gradient/index.html create mode 100644 files/ko/web/css/grid-area/index.html create mode 100644 files/ko/web/css/grid/index.html create mode 100644 files/ko/web/css/height/index.html create mode 100644 files/ko/web/css/hyphens/index.html create mode 100644 files/ko/web/css/id_selectors/index.html create mode 100644 files/ko/web/css/image-rendering/index.html create mode 100644 files/ko/web/css/image/index.html create mode 100644 files/ko/web/css/index.html create mode 100644 files/ko/web/css/index/index.html create mode 100644 files/ko/web/css/inherit/index.html create mode 100644 files/ko/web/css/inheritance/index.html create mode 100644 files/ko/web/css/initial/index.html create mode 100644 files/ko/web/css/initial_value/index.html create mode 100644 files/ko/web/css/integer/index.html create mode 100644 files/ko/web/css/isolation/index.html create mode 100644 files/ko/web/css/layout_mode/index.html create mode 100644 files/ko/web/css/length-percentage/index.html create mode 100644 files/ko/web/css/length/index.html create mode 100644 files/ko/web/css/letter-spacing/index.html create mode 100644 files/ko/web/css/line-break/index.html create mode 100644 files/ko/web/css/linear-gradient()/index.html create mode 100644 files/ko/web/css/margin-bottom/index.html create mode 100644 files/ko/web/css/margin-left/index.html create mode 100644 files/ko/web/css/margin-right/index.html create mode 100644 files/ko/web/css/margin-top/index.html create mode 100644 files/ko/web/css/margin/index.html create mode 100644 files/ko/web/css/mask/index.html create mode 100644 files/ko/web/css/max-height/index.html create mode 100644 files/ko/web/css/max-width/index.html create mode 100644 files/ko/web/css/media_queries/index.html create mode 100644 files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html create mode 100644 files/ko/web/css/min-height/index.html create mode 100644 files/ko/web/css/min-width/index.html create mode 100644 files/ko/web/css/mix-blend-mode/index.html create mode 100644 files/ko/web/css/number/index.html create mode 100644 files/ko/web/css/object-fit/index.html create mode 100644 files/ko/web/css/object-position/index.html create mode 100644 files/ko/web/css/opacity/index.html create mode 100644 files/ko/web/css/order/index.html create mode 100644 files/ko/web/css/outline-style/index.html create mode 100644 files/ko/web/css/outline-width/index.html create mode 100644 files/ko/web/css/outline/index.html create mode 100644 files/ko/web/css/overflow-wrap/index.html create mode 100644 files/ko/web/css/overflow/index.html create mode 100644 files/ko/web/css/padding-bottom/index.html create mode 100644 files/ko/web/css/padding-left/index.html create mode 100644 files/ko/web/css/padding-right/index.html create mode 100644 files/ko/web/css/padding-top/index.html create mode 100644 files/ko/web/css/padding/index.html create mode 100644 files/ko/web/css/paged_media/index.html create mode 100644 files/ko/web/css/paint-order/index.html create mode 100644 files/ko/web/css/percentage/index.html create mode 100644 files/ko/web/css/pointer-events/index.html create mode 100644 files/ko/web/css/position/index.html create mode 100644 files/ko/web/css/position_value/index.html create mode 100644 files/ko/web/css/pseudo-classes/index.html create mode 100644 files/ko/web/css/pseudo-elements/index.html create mode 100644 files/ko/web/css/reference/index.html create mode 100644 files/ko/web/css/reference/property_template/index.html create mode 100644 files/ko/web/css/replaced_element/index.html create mode 100644 files/ko/web/css/resolved_value/index.html create mode 100644 files/ko/web/css/revert/index.html create mode 100644 files/ko/web/css/selector_list/index.html create mode 100644 files/ko/web/css/shorthand_properties/index.html create mode 100644 files/ko/web/css/specificity/index.html create mode 100644 files/ko/web/css/specified_value/index.html create mode 100644 files/ko/web/css/syntax/index.html create mode 100644 files/ko/web/css/tab-size/index.html create mode 100644 files/ko/web/css/text-align/index.html create mode 100644 files/ko/web/css/text-decoration/index.html create mode 100644 files/ko/web/css/text-shadow/index.html create mode 100644 files/ko/web/css/time/index.html create mode 100644 files/ko/web/css/transform-function/index.html create mode 100644 files/ko/web/css/transform-function/matrix()/index.html create mode 100644 files/ko/web/css/transform-function/scalex()/index.html create mode 100644 files/ko/web/css/transform/index.html create mode 100644 files/ko/web/css/transition-delay/index.html create mode 100644 files/ko/web/css/transition/index.html create mode 100644 files/ko/web/css/type_selectors/index.html create mode 100644 files/ko/web/css/universal_selectors/index.html create mode 100644 files/ko/web/css/unset/index.html create mode 100644 files/ko/web/css/url/index.html create mode 100644 files/ko/web/css/used_value/index.html create mode 100644 files/ko/web/css/user-select/index.html create mode 100644 files/ko/web/css/using_css_custom_properties/index.html create mode 100644 files/ko/web/css/value_definition_syntax/index.html create mode 100644 files/ko/web/css/var()/index.html create mode 100644 files/ko/web/css/vertical-align/index.html create mode 100644 files/ko/web/css/visibility/index.html create mode 100644 files/ko/web/css/white-space/index.html create mode 100644 files/ko/web/css/width/index.html create mode 100644 files/ko/web/css/will-change/index.html create mode 100644 files/ko/web/css/word-break/index.html create mode 100644 files/ko/web/css/word-spacing/index.html create mode 100644 files/ko/web/css/z-index/index.html create mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\246\254\354\212\244\355\212\270/index.html" create mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\257\270\353\224\224\354\226\264/index.html" create mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\260\260\354\271\230/index.html" create mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\203\201\354\236\220/index.html" create mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\242\205\354\206\215\352\263\274_\354\203\201\354\206\215/index.html" create mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\355\205\214\354\235\264\353\270\224/index.html" create mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\355\205\215\354\212\244\355\212\270_\354\212\244\355\203\200\354\235\274/index.html" create mode 100644 "files/ko/web/css/\354\235\270\354\240\221_\355\230\225\354\240\234_\354\204\240\355\203\235\354\236\220/index.html" create mode 100644 files/ko/web/events/abort/index.html create mode 100644 files/ko/web/events/blur/index.html create mode 100644 files/ko/web/events/chargingchange/index.html create mode 100644 files/ko/web/events/domcontentloaded/index.html create mode 100644 files/ko/web/events/domsubtreemodified/index.html create mode 100644 files/ko/web/events/index.html create mode 100644 files/ko/web/events/load/index.html create mode 100644 files/ko/web/events/message/index.html create mode 100644 files/ko/web/exslt/index.html create mode 100644 files/ko/web/guide/ajax/community/index.html create mode 100644 files/ko/web/guide/ajax/getting_started/index.html create mode 100644 files/ko/web/guide/ajax/index.html create mode 100644 files/ko/web/guide/api/index.html create mode 100644 files/ko/web/guide/api/vibration/vibration/index.html create mode 100644 files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html create mode 100644 files/ko/web/guide/audio_and_video_delivery/index.html create mode 100644 files/ko/web/guide/css/block_formatting_context/index.html create mode 100644 files/ko/web/guide/css/media_queries/index.html create mode 100644 files/ko/web/guide/css/visual_formatting_model/index.html create mode 100644 files/ko/web/guide/dom/index.html create mode 100644 files/ko/web/guide/dom/using_full_screen_mode/index.html create mode 100644 files/ko/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/ko/web/guide/events/index.html create mode 100644 files/ko/web/guide/events/overview_of_events_and_handlers/index.html create mode 100644 files/ko/web/guide/html/content_categories/index.html create mode 100644 files/ko/web/guide/html/content_editable/index.html create mode 100644 files/ko/web/guide/index.html create mode 100644 files/ko/web/guide/index/index.html create mode 100644 files/ko/web/guide/mobile/index.html create mode 100644 files/ko/web/guide/mobile/separate_sites/index.html create mode 100644 "files/ko/web/guide/xml_\355\214\214\354\213\261_\353\260\217_\354\247\201\353\240\254\355\231\224/index.html" create mode 100644 "files/ko/web/guide/\352\267\270\353\236\230\355\224\275/index.html" create mode 100644 files/ko/web/html/applying_color/index.html create mode 100644 files/ko/web/html/attributes/autocomplete/index.html create mode 100644 files/ko/web/html/attributes/crossorigin/index.html create mode 100644 files/ko/web/html/attributes/index.html create mode 100644 files/ko/web/html/block-level_elements/index.html create mode 100644 files/ko/web/html/canvas/index.html create mode 100644 files/ko/web/html/canvas/manipulating_video_using_canvas/index.html create mode 100644 files/ko/web/html/canvas/tutorial/advanced_animations/index.html create mode 100644 files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html create mode 100644 files/ko/web/html/canvas/tutorial/basic_animations/index.html create mode 100644 files/ko/web/html/canvas/tutorial/basic_usage/index.html create mode 100644 files/ko/web/html/canvas/tutorial/compositing/example/index.html create mode 100644 files/ko/web/html/canvas/tutorial/compositing/index.html create mode 100644 files/ko/web/html/canvas/tutorial/drawing_shapes/index.html create mode 100644 files/ko/web/html/canvas/tutorial/finale/index.html create mode 100644 files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html create mode 100644 files/ko/web/html/canvas/tutorial/index.html create mode 100644 files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html create mode 100644 files/ko/web/html/canvas/tutorial/using_images/index.html create mode 100644 "files/ko/web/html/canvas/tutorial/\353\263\200\355\230\225/index.html" create mode 100644 files/ko/web/html/cors_enabled_image/index.html create mode 100644 files/ko/web/html/element/a/index.html create mode 100644 files/ko/web/html/element/abbr/index.html create mode 100644 files/ko/web/html/element/address/index.html create mode 100644 files/ko/web/html/element/applet/index.html create mode 100644 files/ko/web/html/element/area/index.html create mode 100644 files/ko/web/html/element/article/index.html create mode 100644 files/ko/web/html/element/aside/index.html create mode 100644 files/ko/web/html/element/audio/index.html create mode 100644 files/ko/web/html/element/b/index.html create mode 100644 files/ko/web/html/element/base/index.html create mode 100644 files/ko/web/html/element/bdo/index.html create mode 100644 files/ko/web/html/element/blockquote/index.html create mode 100644 files/ko/web/html/element/body/index.html create mode 100644 files/ko/web/html/element/br/index.html create mode 100644 files/ko/web/html/element/button/index.html create mode 100644 files/ko/web/html/element/canvas/index.html create mode 100644 files/ko/web/html/element/caption/index.html create mode 100644 files/ko/web/html/element/center/index.html create mode 100644 files/ko/web/html/element/cite/index.html create mode 100644 files/ko/web/html/element/code/index.html create mode 100644 files/ko/web/html/element/col/index.html create mode 100644 files/ko/web/html/element/colgroup/index.html create mode 100644 files/ko/web/html/element/command/index.html create mode 100644 files/ko/web/html/element/content/index.html create mode 100644 files/ko/web/html/element/data/index.html create mode 100644 files/ko/web/html/element/datalist/index.html create mode 100644 files/ko/web/html/element/dd/index.html create mode 100644 files/ko/web/html/element/del/index.html create mode 100644 files/ko/web/html/element/details/index.html create mode 100644 files/ko/web/html/element/dfn/index.html create mode 100644 files/ko/web/html/element/dialog/index.html create mode 100644 files/ko/web/html/element/div/index.html create mode 100644 files/ko/web/html/element/dl/index.html create mode 100644 files/ko/web/html/element/dt/index.html create mode 100644 files/ko/web/html/element/element/index.html create mode 100644 files/ko/web/html/element/em/index.html create mode 100644 files/ko/web/html/element/embed/index.html create mode 100644 files/ko/web/html/element/fieldset/index.html create mode 100644 files/ko/web/html/element/figcaption/index.html create mode 100644 files/ko/web/html/element/figure/index.html create mode 100644 files/ko/web/html/element/font/index.html create mode 100644 files/ko/web/html/element/footer/index.html create mode 100644 files/ko/web/html/element/form/index.html create mode 100644 files/ko/web/html/element/frame/index.html create mode 100644 files/ko/web/html/element/frameset/index.html create mode 100644 files/ko/web/html/element/head/index.html create mode 100644 files/ko/web/html/element/header/index.html create mode 100644 files/ko/web/html/element/heading_elements/index.html create mode 100644 files/ko/web/html/element/hgroup/index.html create mode 100644 files/ko/web/html/element/hr/index.html create mode 100644 files/ko/web/html/element/html/index.html create mode 100644 files/ko/web/html/element/i/index.html create mode 100644 files/ko/web/html/element/iframe/index.html create mode 100644 files/ko/web/html/element/img/index.html create mode 100644 files/ko/web/html/element/index.html create mode 100644 files/ko/web/html/element/input/button/index.html create mode 100644 files/ko/web/html/element/input/date/index.html create mode 100644 files/ko/web/html/element/input/file/index.html create mode 100644 files/ko/web/html/element/input/index.html create mode 100644 files/ko/web/html/element/input/radio/index.html create mode 100644 files/ko/web/html/element/ins/index.html create mode 100644 files/ko/web/html/element/kbd/index.html create mode 100644 files/ko/web/html/element/keygen/index.html create mode 100644 files/ko/web/html/element/label/index.html create mode 100644 files/ko/web/html/element/legend/index.html create mode 100644 files/ko/web/html/element/li/index.html create mode 100644 files/ko/web/html/element/link/index.html create mode 100644 files/ko/web/html/element/main/index.html create mode 100644 files/ko/web/html/element/map/index.html create mode 100644 files/ko/web/html/element/mark/index.html create mode 100644 files/ko/web/html/element/menu/index.html create mode 100644 files/ko/web/html/element/meta/index.html create mode 100644 files/ko/web/html/element/meta/name/index.html create mode 100644 files/ko/web/html/element/meter/index.html create mode 100644 files/ko/web/html/element/nav/index.html create mode 100644 files/ko/web/html/element/noscript/index.html create mode 100644 files/ko/web/html/element/object/index.html create mode 100644 files/ko/web/html/element/ol/index.html create mode 100644 files/ko/web/html/element/optgroup/index.html create mode 100644 files/ko/web/html/element/option/index.html create mode 100644 files/ko/web/html/element/output/index.html create mode 100644 files/ko/web/html/element/p/index.html create mode 100644 files/ko/web/html/element/param/index.html create mode 100644 files/ko/web/html/element/pre/index.html create mode 100644 files/ko/web/html/element/progress/index.html create mode 100644 files/ko/web/html/element/q/index.html create mode 100644 files/ko/web/html/element/rb/index.html create mode 100644 files/ko/web/html/element/rp/index.html create mode 100644 files/ko/web/html/element/rt/index.html create mode 100644 files/ko/web/html/element/rtc/index.html create mode 100644 files/ko/web/html/element/ruby/index.html create mode 100644 files/ko/web/html/element/s/index.html create mode 100644 files/ko/web/html/element/samp/index.html create mode 100644 files/ko/web/html/element/script/index.html create mode 100644 files/ko/web/html/element/section/index.html create mode 100644 files/ko/web/html/element/select/index.html create mode 100644 files/ko/web/html/element/slot/index.html create mode 100644 files/ko/web/html/element/small/index.html create mode 100644 files/ko/web/html/element/span/index.html create mode 100644 files/ko/web/html/element/strong/index.html create mode 100644 files/ko/web/html/element/style/index.html create mode 100644 files/ko/web/html/element/sub/index.html create mode 100644 files/ko/web/html/element/summary/index.html create mode 100644 files/ko/web/html/element/sup/index.html create mode 100644 files/ko/web/html/element/table/index.html create mode 100644 files/ko/web/html/element/tbody/index.html create mode 100644 files/ko/web/html/element/td/index.html create mode 100644 files/ko/web/html/element/template/index.html create mode 100644 files/ko/web/html/element/textarea/index.html create mode 100644 files/ko/web/html/element/th/index.html create mode 100644 files/ko/web/html/element/thead/index.html create mode 100644 files/ko/web/html/element/time/index.html create mode 100644 files/ko/web/html/element/title/index.html create mode 100644 files/ko/web/html/element/tr/index.html create mode 100644 files/ko/web/html/element/track/index.html create mode 100644 files/ko/web/html/element/u/index.html create mode 100644 files/ko/web/html/element/ul/index.html create mode 100644 files/ko/web/html/element/var/index.html create mode 100644 files/ko/web/html/element/video/index.html create mode 100644 files/ko/web/html/element/wbr/index.html create mode 100644 files/ko/web/html/global_attributes/accesskey/index.html create mode 100644 files/ko/web/html/global_attributes/autocapitalize/index.html create mode 100644 files/ko/web/html/global_attributes/contenteditable/index.html create mode 100644 files/ko/web/html/global_attributes/contextmenu/index.html create mode 100644 files/ko/web/html/global_attributes/data-_star_/index.html create mode 100644 files/ko/web/html/global_attributes/dir/index.html create mode 100644 files/ko/web/html/global_attributes/draggable/index.html create mode 100644 files/ko/web/html/global_attributes/dropzone/index.html create mode 100644 files/ko/web/html/global_attributes/hidden/index.html create mode 100644 files/ko/web/html/global_attributes/id/index.html create mode 100644 files/ko/web/html/global_attributes/index.html create mode 100644 files/ko/web/html/global_attributes/inputmode/index.html create mode 100644 files/ko/web/html/global_attributes/is/index.html create mode 100644 files/ko/web/html/global_attributes/itemid/index.html create mode 100644 files/ko/web/html/global_attributes/itemprop/index.html create mode 100644 files/ko/web/html/global_attributes/itemref/index.html create mode 100644 files/ko/web/html/global_attributes/itemscope/index.html create mode 100644 files/ko/web/html/global_attributes/lang/index.html create mode 100644 files/ko/web/html/global_attributes/part/index.html create mode 100644 files/ko/web/html/global_attributes/slot/index.html create mode 100644 files/ko/web/html/global_attributes/spellcheck/index.html create mode 100644 files/ko/web/html/global_attributes/style/index.html create mode 100644 files/ko/web/html/global_attributes/tabindex/index.html create mode 100644 files/ko/web/html/global_attributes/title/index.html create mode 100644 files/ko/web/html/global_attributes/translate/index.html create mode 100644 "files/ko/web/html/global_attributes/\355\201\264\353\236\230\354\212\244/index.html" create mode 100644 files/ko/web/html/html5/index.html create mode 100644 files/ko/web/html/html5/introduction_to_html5/index.html create mode 100644 "files/ko/web/html/html5_\353\254\270\354\204\234\354\235\230_\354\204\271\354\205\230\352\263\274_\354\234\244\352\263\275/index.html" create mode 100644 files/ko/web/html/index.html create mode 100644 files/ko/web/html/index/index.html create mode 100644 files/ko/web/html/inline_elements/index.html create mode 100644 files/ko/web/html/link_types/index.html create mode 100644 files/ko/web/html/preloading_content/index.html create mode 100644 files/ko/web/html/quirks_mode_and_standards_mode/index.html create mode 100644 files/ko/web/html/reference/index.html create mode 100644 files/ko/web/html/using_the_application_cache/index.html create mode 100644 files/ko/web/http/authentication/index.html create mode 100644 files/ko/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html create mode 100644 files/ko/web/http/basics_of_http/data_uris/index.html create mode 100644 files/ko/web/http/basics_of_http/evolution_of_http/index.html create mode 100644 files/ko/web/http/basics_of_http/identifying_resources_on_the_web/index.html create mode 100644 files/ko/web/http/basics_of_http/index.html create mode 100644 files/ko/web/http/basics_of_http/mime_types/common_types/index.html create mode 100644 files/ko/web/http/basics_of_http/mime_types/index.html create mode 100644 files/ko/web/http/caching/index.html create mode 100644 files/ko/web/http/compression/index.html create mode 100644 files/ko/web/http/conditional_requests/index.html create mode 100644 files/ko/web/http/connection_management_in_http_1.x/index.html create mode 100644 files/ko/web/http/content_negotiation/index.html create mode 100644 files/ko/web/http/cookies/index.html create mode 100644 files/ko/web/http/cors/errors/corsdidnotsucceed/index.html create mode 100644 files/ko/web/http/cors/errors/corsrequestnothttp/index.html create mode 100644 files/ko/web/http/cors/errors/index.html create mode 100644 files/ko/web/http/cors/index.html create mode 100644 files/ko/web/http/headers/accept-charset/index.html create mode 100644 files/ko/web/http/headers/accept-encoding/index.html create mode 100644 files/ko/web/http/headers/accept-language/index.html create mode 100644 files/ko/web/http/headers/accept-ranges/index.html create mode 100644 files/ko/web/http/headers/accept/index.html create mode 100644 files/ko/web/http/headers/access-control-allow-credentials/index.html create mode 100644 files/ko/web/http/headers/access-control-allow-headers/index.html create mode 100644 files/ko/web/http/headers/access-control-allow-origin/index.html create mode 100644 files/ko/web/http/headers/access-control-request-headers/index.html create mode 100644 files/ko/web/http/headers/access-control-request-method/index.html create mode 100644 files/ko/web/http/headers/age/index.html create mode 100644 files/ko/web/http/headers/allow/index.html create mode 100644 files/ko/web/http/headers/authorization/index.html create mode 100644 files/ko/web/http/headers/cache-control/index.html create mode 100644 files/ko/web/http/headers/connection/index.html create mode 100644 files/ko/web/http/headers/content-disposition/index.html create mode 100644 files/ko/web/http/headers/content-encoding/index.html create mode 100644 files/ko/web/http/headers/content-language/index.html create mode 100644 files/ko/web/http/headers/content-length/index.html create mode 100644 files/ko/web/http/headers/content-location/index.html create mode 100644 files/ko/web/http/headers/content-range/index.html create mode 100644 files/ko/web/http/headers/content-security-policy/default-src/index.html create mode 100644 files/ko/web/http/headers/content-security-policy/img-src/index.html create mode 100644 files/ko/web/http/headers/content-security-policy/index.html create mode 100644 files/ko/web/http/headers/content-security-policy/report-to/index.html create mode 100644 files/ko/web/http/headers/content-security-policy/script-src/index.html create mode 100644 files/ko/web/http/headers/content-type/index.html create mode 100644 files/ko/web/http/headers/cookie/index.html create mode 100644 files/ko/web/http/headers/date/index.html create mode 100644 files/ko/web/http/headers/dnt/index.html create mode 100644 files/ko/web/http/headers/etag/index.html create mode 100644 files/ko/web/http/headers/expect/index.html create mode 100644 files/ko/web/http/headers/expires/index.html create mode 100644 files/ko/web/http/headers/forwarded/index.html create mode 100644 files/ko/web/http/headers/from/index.html create mode 100644 files/ko/web/http/headers/host/index.html create mode 100644 files/ko/web/http/headers/if-modified-since/index.html create mode 100644 files/ko/web/http/headers/if-range/index.html create mode 100644 files/ko/web/http/headers/index.html create mode 100644 files/ko/web/http/headers/keep-alive/index.html create mode 100644 files/ko/web/http/headers/last-modified/index.html create mode 100644 files/ko/web/http/headers/origin/index.html create mode 100644 files/ko/web/http/headers/pragma/index.html create mode 100644 files/ko/web/http/headers/range/index.html create mode 100644 files/ko/web/http/headers/referer/index.html create mode 100644 files/ko/web/http/headers/retry-after/index.html create mode 100644 files/ko/web/http/headers/server/index.html create mode 100644 files/ko/web/http/headers/set-cookie/index.html create mode 100644 files/ko/web/http/headers/strict-transport-security/index.html create mode 100644 files/ko/web/http/headers/transfer-encoding/index.html create mode 100644 files/ko/web/http/headers/vary/index.html create mode 100644 files/ko/web/http/headers/via/index.html create mode 100644 files/ko/web/http/headers/x-forwarded-for/index.html create mode 100644 files/ko/web/http/headers/x-forwarded-host/index.html create mode 100644 files/ko/web/http/headers/x-forwarded-proto/index.html create mode 100644 files/ko/web/http/headers/x-frame-options/index.html create mode 100644 files/ko/web/http/headers/x-xss-protection/index.html create mode 100644 files/ko/web/http/index.html create mode 100644 files/ko/web/http/index/index.html create mode 100644 files/ko/web/http/messages/index.html create mode 100644 files/ko/web/http/methods/connect/index.html create mode 100644 files/ko/web/http/methods/delete/index.html create mode 100644 files/ko/web/http/methods/get/index.html create mode 100644 files/ko/web/http/methods/head/index.html create mode 100644 files/ko/web/http/methods/index.html create mode 100644 files/ko/web/http/methods/options/index.html create mode 100644 files/ko/web/http/methods/patch/index.html create mode 100644 files/ko/web/http/methods/post/index.html create mode 100644 files/ko/web/http/methods/put/index.html create mode 100644 files/ko/web/http/overview/index.html create mode 100644 files/ko/web/http/range_requests/index.html create mode 100644 files/ko/web/http/redirections/index.html create mode 100644 files/ko/web/http/resources_and_specifications/index.html create mode 100644 files/ko/web/http/resources_and_uris/index.html create mode 100644 files/ko/web/http/session/index.html create mode 100644 files/ko/web/http/status/100/index.html create mode 100644 files/ko/web/http/status/101/index.html create mode 100644 files/ko/web/http/status/103/index.html create mode 100644 files/ko/web/http/status/200/index.html create mode 100644 files/ko/web/http/status/201/index.html create mode 100644 files/ko/web/http/status/202/index.html create mode 100644 files/ko/web/http/status/204/index.html create mode 100644 files/ko/web/http/status/205/index.html create mode 100644 files/ko/web/http/status/206/index.html create mode 100644 files/ko/web/http/status/301/index.html create mode 100644 files/ko/web/http/status/302/index.html create mode 100644 files/ko/web/http/status/304/index.html create mode 100644 files/ko/web/http/status/307/index.html create mode 100644 files/ko/web/http/status/400/index.html create mode 100644 files/ko/web/http/status/401/index.html create mode 100644 files/ko/web/http/status/403/index.html create mode 100644 files/ko/web/http/status/404/index.html create mode 100644 files/ko/web/http/status/405/index.html create mode 100644 files/ko/web/http/status/408/index.html create mode 100644 files/ko/web/http/status/409/index.html create mode 100644 files/ko/web/http/status/411/index.html create mode 100644 files/ko/web/http/status/413/index.html create mode 100644 files/ko/web/http/status/416/index.html create mode 100644 files/ko/web/http/status/418/index.html create mode 100644 files/ko/web/http/status/422/index.html create mode 100644 files/ko/web/http/status/431/index.html create mode 100644 files/ko/web/http/status/500/index.html create mode 100644 files/ko/web/http/status/501/index.html create mode 100644 files/ko/web/http/status/502/index.html create mode 100644 files/ko/web/http/status/503/index.html create mode 100644 files/ko/web/http/status/504/index.html create mode 100644 files/ko/web/http/status/505/index.html create mode 100644 files/ko/web/http/status/index.html create mode 100644 "files/ko/web/http/user_agent\353\245\274_\354\235\264\354\232\251\355\225\234_\353\270\214\353\235\274\354\232\260\354\240\200_\352\260\220\354\247\200/index.html" create mode 100644 files/ko/web/index.html create mode 100644 files/ko/web/javascript/about/index.html create mode 100644 files/ko/web/javascript/data_structures/index.html create mode 100644 files/ko/web/javascript/differential_inheritance_in_javascript/index.html create mode 100644 files/ko/web/javascript/enumerability_and_ownership_of_properties/index.html create mode 100644 files/ko/web/javascript/equality_comparisons_and_sameness/index.html create mode 100644 files/ko/web/javascript/eventloop/index.html create mode 100644 files/ko/web/javascript/guide/closures/index.html create mode 100644 files/ko/web/javascript/guide/control_flow_and_error_handling/index.html create mode 100644 files/ko/web/javascript/guide/expressions_and_operators/index.html create mode 100644 files/ko/web/javascript/guide/index.html create mode 100644 files/ko/web/javascript/guide/indexed_collections/index.html create mode 100644 files/ko/web/javascript/guide/inheritance_and_the_prototype_chain/index.html create mode 100644 files/ko/web/javascript/guide/iterators_and_generators/index.html create mode 100644 files/ko/web/javascript/guide/keyed_collections/index.html create mode 100644 files/ko/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/ko/web/javascript/guide/modules/index.html create mode 100644 files/ko/web/javascript/guide/numbers_and_dates/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/constants/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/literals/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/arithmetic_operators/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/bitwise_operators/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/logical_operators/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/special_operators/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/string_operators/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/unicode/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/values/index.html create mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/variables/index.html create mode 100644 files/ko/web/javascript/guide/text_formatting/index.html create mode 100644 files/ko/web/javascript/guide/using_promises/index.html create mode 100644 files/ko/web/javascript/guide/values,_variables,_and_literals/index.html create mode 100644 files/ko/web/javascript/guide/working_with_objects/index.html create mode 100644 "files/ko/web/javascript/guide/\352\260\235\354\262\264_\353\252\250\353\215\270\354\235\230_\354\204\270\353\266\200\354\202\254\355\225\255/index.html" create mode 100644 "files/ko/web/javascript/guide/\353\251\224\355\203\200_\355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/index.html" create mode 100644 "files/ko/web/javascript/guide/\354\206\214\352\260\234/index.html" create mode 100644 "files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/assertions/index.html" create mode 100644 "files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/groups_and_ranges/index.html" create mode 100644 "files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/index.html" create mode 100644 "files/ko/web/javascript/guide/\355\225\250\354\210\230/index.html" create mode 100644 files/ko/web/javascript/index.html create mode 100644 files/ko/web/javascript/introduction_to_object-oriented_javascript/index.html create mode 100644 files/ko/web/javascript/javascript_technologies_overview/index.html create mode 100644 files/ko/web/javascript/memory_management/index.html create mode 100644 files/ko/web/javascript/new_in_javascript/1.5/index.html create mode 100644 files/ko/web/javascript/new_in_javascript/1.6/index.html create mode 100644 files/ko/web/javascript/new_in_javascript/1.8.1/index.html create mode 100644 files/ko/web/javascript/new_in_javascript/1.8.5/index.html create mode 100644 files/ko/web/javascript/new_in_javascript/1.8/index.html create mode 100644 files/ko/web/javascript/new_in_javascript/ecmascript_5_support_in_mozilla/index.html create mode 100644 files/ko/web/javascript/new_in_javascript/ecmascript_6_support_in_mozilla/index.html create mode 100644 files/ko/web/javascript/new_in_javascript/index.html create mode 100644 files/ko/web/javascript/reference/about/index.html create mode 100644 files/ko/web/javascript/reference/classes/class_fields/index.html create mode 100644 files/ko/web/javascript/reference/classes/constructor/index.html create mode 100644 files/ko/web/javascript/reference/classes/extends/index.html create mode 100644 files/ko/web/javascript/reference/classes/index.html create mode 100644 files/ko/web/javascript/reference/classes/private_class_fields/index.html create mode 100644 files/ko/web/javascript/reference/classes/static/index.html create mode 100644 files/ko/web/javascript/reference/deprecated_and_obsolete_features/index.html create mode 100644 files/ko/web/javascript/reference/errors/bad_octal/index.html create mode 100644 files/ko/web/javascript/reference/errors/bad_radix/index.html create mode 100644 files/ko/web/javascript/reference/errors/bad_regexp_flag/index.html create mode 100644 files/ko/web/javascript/reference/errors/bad_return_or_yield/index.html create mode 100644 files/ko/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html create mode 100644 files/ko/web/javascript/reference/errors/delete_in_strict_mode/index.html create mode 100644 files/ko/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html create mode 100644 files/ko/web/javascript/reference/errors/deprecated_octal/index.html create mode 100644 files/ko/web/javascript/reference/errors/identifier_after_number/index.html create mode 100644 files/ko/web/javascript/reference/errors/illegal_character/index.html create mode 100644 files/ko/web/javascript/reference/errors/index.html create mode 100644 files/ko/web/javascript/reference/errors/invalid_array_length/index.html create mode 100644 files/ko/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html create mode 100644 files/ko/web/javascript/reference/errors/invalid_date/index.html create mode 100644 files/ko/web/javascript/reference/errors/invalid_for-in_initializer/index.html create mode 100644 files/ko/web/javascript/reference/errors/invalid_for-of_initializer/index.html create mode 100644 files/ko/web/javascript/reference/errors/is_not_iterable/index.html create mode 100644 files/ko/web/javascript/reference/errors/json_bad_parse/index.html create mode 100644 files/ko/web/javascript/reference/errors/malformed_formal_parameter/index.html create mode 100644 files/ko/web/javascript/reference/errors/missing_bracket_after_list/index.html create mode 100644 files/ko/web/javascript/reference/errors/missing_colon_after_property_id/index.html create mode 100644 files/ko/web/javascript/reference/errors/missing_curly_after_property_list/index.html create mode 100644 files/ko/web/javascript/reference/errors/missing_initializer_in_const/index.html create mode 100644 files/ko/web/javascript/reference/errors/missing_name_after_dot_operator/index.html create mode 100644 files/ko/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html create mode 100644 files/ko/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html create mode 100644 files/ko/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/ko/web/javascript/reference/errors/more_arguments_needed/index.html create mode 100644 files/ko/web/javascript/reference/errors/negative_repetition_count/index.html create mode 100644 files/ko/web/javascript/reference/errors/no_variable_name/index.html create mode 100644 files/ko/web/javascript/reference/errors/not_a_codepoint/index.html create mode 100644 files/ko/web/javascript/reference/errors/not_a_constructor/index.html create mode 100644 files/ko/web/javascript/reference/errors/not_defined/index.html create mode 100644 files/ko/web/javascript/reference/errors/precision_range/index.html create mode 100644 files/ko/web/javascript/reference/errors/property_access_denied/index.html create mode 100644 files/ko/web/javascript/reference/errors/read-only/index.html create mode 100644 files/ko/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html create mode 100644 files/ko/web/javascript/reference/errors/reserved_identifier/index.html create mode 100644 files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html create mode 100644 files/ko/web/javascript/reference/errors/strict_non_simple_params/index.html create mode 100644 files/ko/web/javascript/reference/errors/too_much_recursion/index.html create mode 100644 files/ko/web/javascript/reference/errors/undeclared_var/index.html create mode 100644 files/ko/web/javascript/reference/errors/undefined_prop/index.html create mode 100644 files/ko/web/javascript/reference/errors/unexpected_token/index.html create mode 100644 files/ko/web/javascript/reference/errors/unexpected_type/index.html create mode 100644 files/ko/web/javascript/reference/errors/unnamed_function_statement/index.html create mode 100644 files/ko/web/javascript/reference/functions/arguments/@@iterator/index.html create mode 100644 files/ko/web/javascript/reference/functions/arguments/callee/index.html create mode 100644 files/ko/web/javascript/reference/functions/arguments/caller/index.html create mode 100644 files/ko/web/javascript/reference/functions/arguments/index.html create mode 100644 files/ko/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/ko/web/javascript/reference/functions/default_parameters/index.html create mode 100644 files/ko/web/javascript/reference/functions/get/index.html create mode 100644 files/ko/web/javascript/reference/functions/index.html create mode 100644 files/ko/web/javascript/reference/functions/method_definitions/index.html create mode 100644 files/ko/web/javascript/reference/functions/rest_parameters/index.html create mode 100644 files/ko/web/javascript/reference/functions/set/index.html create mode 100644 "files/ko/web/javascript/reference/functions/\354\225\240\353\241\234\354\232\260_\355\216\221\354\205\230/index.html" create mode 100644 files/ko/web/javascript/reference/global_objects/aggregateerror/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/@@iterator/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/@@species/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/array/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/observe/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/reduceright/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/tolocalestring/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/tosource/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/arraybuffer/slice/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/asyncfunction/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/atomics/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/bigint/bigint/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/bigint/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/boolean/boolean/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/boolean/tostring/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/boolean/valueof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/dataview/dataview/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/dataview/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getutcdate/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getutcday/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getutcfullyear/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getutchours/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getutcminutes/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getutcmonth/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/getutcseconds/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/parse/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setdate/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setfullyear/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/sethours/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setmilliseconds/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setminutes/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setmonth/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setseconds/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/settime/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setutcdate/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setutcfullyear/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setutchours/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setutcminutes/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setutcmonth/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/setutcseconds/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/todatestring/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/toisostring/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/tojson/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/tostring/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/date/valueof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/decodeuri/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/decodeuricomponent/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/encodeuri/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/encodeuricomponent/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/error/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/error/name/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/eval/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/function/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/function/name/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/function/tosource/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/generator/return/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/generator/throw/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/generatorfunction/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/globalthis/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/intl/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/intl/locale/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/intl/locale/language/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/intl/numberformat/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/json/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/@@tostringtag/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/entries/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/foreach/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/get/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/has/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/map/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/set/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/map/size/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/cbrt/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/exp/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/fround/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/imul/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/ln10/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/ln2/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/log/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/log10e/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/log2/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/log2e/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/pi/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/random/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/round/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/sign/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/sin/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/sinh/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/sqrt1_2/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/sqrt2/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/tan/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/tanh/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/math/trunc/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/null/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/epsilon/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/isfinite/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/isinteger/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/isnan/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/max_value/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/min_value/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/nan/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/negative_infinity/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/parsefloat/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/parseint/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/toexponential/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/tofixed/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/toprecision/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/tostring/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/number/valueof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/__definegetter__/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/constructor/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/defineproperties/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/entries/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/fromentries/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/isextensible/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/issealed/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/observe/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/preventextensions/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/propertyisenumerable/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/seal/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/setprototypeof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/tolocalestring/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/tostring/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/valueof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/object/values/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/promise/allsettled/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/promise/finally/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/promise/promise/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/promise/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/promise/race/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/promise/reject/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/promise/resolve/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/promise/then/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/proxy/handler/apply/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/proxy/handler/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/proxy/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/referenceerror/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/apply/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/construct/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/defineproperty/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/deleteproperty/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/get/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/getprototypeof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/has/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/isextensible/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/ownkeys/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/preventextensions/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/set/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/reflect/setprototypeof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/regexp/exec/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/regexp/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/regexp/n/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/regexp/regexp/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/regexp/test/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/set/add/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/set/clear/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/set/delete/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/set/foreach/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/set/has/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/set/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/set/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/set/size/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/set/values/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/sharedarraybuffer/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/charcodeat/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/concat/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/endswith/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/lastindexof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/localecompare/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/match/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/normalize/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/padend/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/padstart/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/repeat/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/replace/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/search/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/slice/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/split/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/startswith/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/substr/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/substring/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/tolowercase/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/tosource/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/tostring/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/touppercase/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/trim/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/string/valueof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/symbol/for/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/symbol/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/symbol/iterator/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/buffer/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/bytelength/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/byteoffset/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/fill/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/indexof/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/length/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/name/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/of/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/reverse/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/set/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/slice/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/some/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/sort/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/values/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/typeerror/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/uneval/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/weakmap/delete/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/weakset/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/global/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/module/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/table/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html create mode 100644 files/ko/web/javascript/reference/index.html create mode 100644 files/ko/web/javascript/reference/iteration_protocols/index.html create mode 100644 files/ko/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/ko/web/javascript/reference/liveconnect/index.html create mode 100644 files/ko/web/javascript/reference/operators/addition/index.html create mode 100644 files/ko/web/javascript/reference/operators/arithmetic_operators/index.html create mode 100644 files/ko/web/javascript/reference/operators/assignment_operators/index.html create mode 100644 files/ko/web/javascript/reference/operators/async_function/index.html create mode 100644 files/ko/web/javascript/reference/operators/await/index.html create mode 100644 files/ko/web/javascript/reference/operators/bitwise_operators/index.html create mode 100644 files/ko/web/javascript/reference/operators/class/index.html create mode 100644 files/ko/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/ko/web/javascript/reference/operators/comparison_operators/index.html create mode 100644 files/ko/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/ko/web/javascript/reference/operators/delete/index.html create mode 100644 files/ko/web/javascript/reference/operators/destructuring_assignment/index.html create mode 100644 files/ko/web/javascript/reference/operators/equality/index.html create mode 100644 files/ko/web/javascript/reference/operators/expression_closures/index.html create mode 100644 files/ko/web/javascript/reference/operators/function/index.html create mode 100644 files/ko/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/ko/web/javascript/reference/operators/generator_comprehensions/index.html create mode 100644 files/ko/web/javascript/reference/operators/grouping/index.html create mode 100644 files/ko/web/javascript/reference/operators/in/index.html create mode 100644 files/ko/web/javascript/reference/operators/index.html create mode 100644 files/ko/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/ko/web/javascript/reference/operators/new.target/index.html create mode 100644 files/ko/web/javascript/reference/operators/new/index.html create mode 100644 files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html create mode 100644 files/ko/web/javascript/reference/operators/object_initializer/index.html create mode 100644 files/ko/web/javascript/reference/operators/optional_chaining/index.html create mode 100644 files/ko/web/javascript/reference/operators/pipeline_operator/index.html create mode 100644 files/ko/web/javascript/reference/operators/property_accessors/index.html create mode 100644 files/ko/web/javascript/reference/operators/remainder/index.html create mode 100644 files/ko/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/ko/web/javascript/reference/operators/super/index.html create mode 100644 files/ko/web/javascript/reference/operators/this/index.html create mode 100644 files/ko/web/javascript/reference/operators/typeof/index.html create mode 100644 files/ko/web/javascript/reference/operators/void/index.html create mode 100644 files/ko/web/javascript/reference/operators/yield/index.html create mode 100644 files/ko/web/javascript/reference/operators/yield_star_/index.html create mode 100644 "files/ko/web/javascript/reference/operators/\353\205\274\353\246\254_\354\227\260\354\202\260\354\236\220(logical_operators)/index.html" create mode 100644 "files/ko/web/javascript/reference/operators/\353\260\260\354\227\264/index.html" create mode 100644 "files/ko/web/javascript/reference/operators/\354\227\260\354\202\260\354\236\220_\354\232\260\354\204\240\354\210\234\354\234\204/index.html" create mode 100644 files/ko/web/javascript/reference/statements/async_function/index.html create mode 100644 files/ko/web/javascript/reference/statements/block/index.html create mode 100644 files/ko/web/javascript/reference/statements/break/index.html create mode 100644 files/ko/web/javascript/reference/statements/class/index.html create mode 100644 files/ko/web/javascript/reference/statements/const/index.html create mode 100644 files/ko/web/javascript/reference/statements/continue/index.html create mode 100644 files/ko/web/javascript/reference/statements/debugger/index.html create mode 100644 files/ko/web/javascript/reference/statements/default/index.html create mode 100644 files/ko/web/javascript/reference/statements/do...while/index.html create mode 100644 files/ko/web/javascript/reference/statements/empty/index.html create mode 100644 files/ko/web/javascript/reference/statements/export/index.html create mode 100644 files/ko/web/javascript/reference/statements/for-await...of/index.html create mode 100644 files/ko/web/javascript/reference/statements/for...in/index.html create mode 100644 files/ko/web/javascript/reference/statements/for...of/index.html create mode 100644 files/ko/web/javascript/reference/statements/for/index.html create mode 100644 files/ko/web/javascript/reference/statements/for_each...in/index.html create mode 100644 files/ko/web/javascript/reference/statements/function/index.html create mode 100644 files/ko/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/ko/web/javascript/reference/statements/if...else/index.html create mode 100644 files/ko/web/javascript/reference/statements/import/index.html create mode 100644 files/ko/web/javascript/reference/statements/index.html create mode 100644 files/ko/web/javascript/reference/statements/label/index.html create mode 100644 files/ko/web/javascript/reference/statements/let/index.html create mode 100644 files/ko/web/javascript/reference/statements/return/index.html create mode 100644 files/ko/web/javascript/reference/statements/switch/index.html create mode 100644 files/ko/web/javascript/reference/statements/throw/index.html create mode 100644 files/ko/web/javascript/reference/statements/try...catch/index.html create mode 100644 files/ko/web/javascript/reference/statements/var/index.html create mode 100644 files/ko/web/javascript/reference/statements/while/index.html create mode 100644 files/ko/web/javascript/reference/statements/with/index.html create mode 100644 files/ko/web/javascript/reference/strict_mode/index.html create mode 100644 files/ko/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html create mode 100644 files/ko/web/javascript/reference/template_literals/index.html create mode 100644 files/ko/web/javascript/reference/trailing_commas/index.html create mode 100644 files/ko/web/javascript/typed_arrays/index.html create mode 100644 "files/ko/web/javascript/\354\211\230/index.html" create mode 100644 "files/ko/web/javascript/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" create mode 100644 "files/ko/web/javascript/\354\226\270\354\226\264_\353\246\254\354\206\214\354\212\244/index.html" create mode 100644 files/ko/web/manifest/index.html create mode 100644 files/ko/web/mathml/index.html create mode 100644 files/ko/web/media/autoplay_guide/index.html create mode 100644 files/ko/web/media/formats/index.html create mode 100644 "files/ko/web/media/formats/\353\271\204\353\224\224\354\230\244\354\275\224\353\215\261/index.html" create mode 100644 "files/ko/web/media/formats/\354\273\250\355\205\214\354\235\264\353\204\210/index.html" create mode 100644 "files/ko/web/media/formats/\354\275\224\353\215\261\355\214\214\353\235\274\353\257\270\355\204\260/index.html" create mode 100644 files/ko/web/media/index.html create mode 100644 files/ko/web/performance/index.html create mode 100644 "files/ko/web/performance/\353\270\214\353\235\274\354\232\260\354\240\200\353\212\224_\354\226\264\353\226\273\352\262\214_\353\217\231\354\236\221\355\225\230\353\212\224\352\260\200/index.html" create mode 100644 "files/ko/web/performance/\354\244\221\354\232\224_\353\240\214\353\215\224\353\247\201_\352\262\275\353\241\234/index.html" create mode 100644 files/ko/web/progressive_web_apps/add_to_home_screen/index.html create mode 100644 files/ko/web/progressive_web_apps/app_structure/index.html create mode 100644 files/ko/web/progressive_web_apps/index.html create mode 100644 files/ko/web/progressive_web_apps/installable_pwas/index.html create mode 100644 files/ko/web/progressive_web_apps/offline_service_workers/index.html create mode 100644 files/ko/web/progressive_web_apps/re-engageable_notifications_push/index.html create mode 100644 "files/ko/web/progressive_web_apps/\354\206\214\352\260\234/index.html" create mode 100644 files/ko/web/security/index.html create mode 100644 files/ko/web/security/insecure_passwords/index.html create mode 100644 files/ko/web/security/same-origin_policy/index.html create mode 100644 files/ko/web/security/transport_layer_security/index.html create mode 100644 "files/ko/web/security/\354\240\225\353\263\264_\353\263\264\354\225\210_\352\270\260\353\263\270/index.html" create mode 100644 "files/ko/web/security/\354\240\225\353\263\264_\353\263\264\354\225\210_\352\270\260\353\263\270/\354\267\250\354\225\275\354\240\220/index.html" create mode 100644 files/ko/web/svg/applying_svg_effects_to_html_content/index.html create mode 100644 files/ko/web/svg/attribute/calcmode/index.html create mode 100644 files/ko/web/svg/attribute/cx/index.html create mode 100644 files/ko/web/svg/attribute/d/index.html create mode 100644 files/ko/web/svg/attribute/index.html create mode 100644 files/ko/web/svg/attribute/keytimes/index.html create mode 100644 files/ko/web/svg/attribute/values/index.html create mode 100644 files/ko/web/svg/attribute/version/index.html create mode 100644 files/ko/web/svg/attribute/viewbox/index.html create mode 100644 files/ko/web/svg/element/a/index.html create mode 100644 files/ko/web/svg/element/altglyph/index.html create mode 100644 files/ko/web/svg/element/circle/index.html create mode 100644 files/ko/web/svg/element/ellipse/index.html create mode 100644 files/ko/web/svg/element/index.html create mode 100644 "files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" create mode 100644 files/ko/web/svg/index.html create mode 100644 files/ko/web/svg/tutorial/index.html create mode 100644 files/ko/web/svg/tutorial/introduction/index.html create mode 100644 files/ko/web/svg/tutorial/paths/index.html create mode 100644 files/ko/web/svg/tutorial/patterns/index.html create mode 100644 files/ko/web/svg/tutorial/svg_image_tag/index.html create mode 100644 files/ko/web/svg/tutorial/svg_in_html_introduction/index.html create mode 100644 "files/ko/web/svg/tutorial/\352\270\260\353\263\270_\353\217\204\355\230\225/index.html" create mode 100644 "files/ko/web/svg/tutorial/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" create mode 100644 "files/ko/web/svg/tutorial/\354\234\204\354\271\230/index.html" create mode 100644 files/ko/web/tutorials/index.html create mode 100644 files/ko/web/web_components/index.html create mode 100644 files/ko/web/web_components/using_custom_elements/index.html create mode 100644 files/ko/web/web_components/using_shadow_dom/index.html create mode 100644 files/ko/web/xml/index.html create mode 100644 files/ko/web/xml/xml_introduction/index.html create mode 100644 files/ko/web/xpath/axes/ancestor-or-self/index.html create mode 100644 files/ko/web/xpath/axes/ancestor/index.html create mode 100644 files/ko/web/xpath/axes/attribute/index.html create mode 100644 files/ko/web/xpath/axes/child/index.html create mode 100644 files/ko/web/xpath/axes/descendant-or-self/index.html create mode 100644 files/ko/web/xpath/axes/descendant/index.html create mode 100644 files/ko/web/xpath/axes/following-sibling/index.html create mode 100644 files/ko/web/xpath/axes/following/index.html create mode 100644 files/ko/web/xpath/axes/index.html create mode 100644 files/ko/web/xpath/axes/namespace/index.html create mode 100644 files/ko/web/xpath/axes/parent/index.html create mode 100644 files/ko/web/xpath/axes/preceding-sibling/index.html create mode 100644 files/ko/web/xpath/axes/preceding/index.html create mode 100644 files/ko/web/xpath/axes/self/index.html create mode 100644 files/ko/web/xpath/functions/boolean/index.html create mode 100644 files/ko/web/xpath/functions/ceiling/index.html create mode 100644 files/ko/web/xpath/functions/concat/index.html create mode 100644 files/ko/web/xpath/functions/contains/index.html create mode 100644 files/ko/web/xpath/functions/count/index.html create mode 100644 files/ko/web/xpath/functions/current/index.html create mode 100644 files/ko/web/xpath/functions/document/index.html create mode 100644 files/ko/web/xpath/functions/element-available/index.html create mode 100644 files/ko/web/xpath/functions/false/index.html create mode 100644 files/ko/web/xpath/functions/floor/index.html create mode 100644 files/ko/web/xpath/functions/format-number/index.html create mode 100644 files/ko/web/xpath/functions/function-available/index.html create mode 100644 files/ko/web/xpath/functions/generate-id/index.html create mode 100644 files/ko/web/xpath/functions/id/index.html create mode 100644 files/ko/web/xpath/functions/index.html create mode 100644 files/ko/web/xpath/functions/key/index.html create mode 100644 files/ko/web/xpath/functions/lang/index.html create mode 100644 files/ko/web/xpath/functions/last/index.html create mode 100644 files/ko/web/xpath/functions/local-name/index.html create mode 100644 files/ko/web/xpath/functions/name/index.html create mode 100644 files/ko/web/xpath/functions/namespace-uri/index.html create mode 100644 files/ko/web/xpath/functions/normalize-space/index.html create mode 100644 files/ko/web/xpath/functions/not/index.html create mode 100644 files/ko/web/xpath/functions/number/index.html create mode 100644 files/ko/web/xpath/functions/position/index.html create mode 100644 files/ko/web/xpath/functions/round/index.html create mode 100644 files/ko/web/xpath/functions/starts-with/index.html create mode 100644 files/ko/web/xpath/functions/string-length/index.html create mode 100644 files/ko/web/xpath/functions/string/index.html create mode 100644 files/ko/web/xpath/functions/substring-after/index.html create mode 100644 files/ko/web/xpath/functions/substring-before/index.html create mode 100644 files/ko/web/xpath/functions/substring/index.html create mode 100644 files/ko/web/xpath/functions/sum/index.html create mode 100644 files/ko/web/xpath/functions/system-property/index.html create mode 100644 files/ko/web/xpath/functions/translate/index.html create mode 100644 files/ko/web/xpath/functions/true/index.html create mode 100644 files/ko/web/xpath/functions/unparsed-entity-url/index.html create mode 100644 files/ko/web/xpath/index.html create mode 100644 files/ko/web/xslt/apply-imports/index.html create mode 100644 files/ko/web/xslt/apply-templates/index.html create mode 100644 files/ko/web/xslt/attribute-set/index.html create mode 100644 files/ko/web/xslt/attribute/index.html create mode 100644 files/ko/web/xslt/call-template/index.html create mode 100644 files/ko/web/xslt/choose/index.html create mode 100644 files/ko/web/xslt/comment/index.html create mode 100644 files/ko/web/xslt/copy-of/index.html create mode 100644 files/ko/web/xslt/copy/index.html create mode 100644 files/ko/web/xslt/decimal-format/index.html create mode 100644 files/ko/web/xslt/element/element/index.html create mode 100644 files/ko/web/xslt/element/index.html create mode 100644 files/ko/web/xslt/fallback/index.html create mode 100644 files/ko/web/xslt/for-each/index.html create mode 100644 files/ko/web/xslt/if/index.html create mode 100644 files/ko/web/xslt/import/index.html create mode 100644 files/ko/web/xslt/include/index.html create mode 100644 files/ko/web/xslt/index.html create mode 100644 files/ko/web/xslt/key/index.html create mode 100644 files/ko/web/xslt/message/index.html create mode 100644 files/ko/web/xslt/namespace-alias/index.html create mode 100644 files/ko/web/xslt/number/index.html create mode 100644 files/ko/web/xslt/otherwise/index.html create mode 100644 files/ko/web/xslt/output/index.html create mode 100644 files/ko/web/xslt/param/index.html create mode 100644 files/ko/web/xslt/preserve-space/index.html create mode 100644 files/ko/web/xslt/processing-instruction/index.html create mode 100644 files/ko/web/xslt/sort/index.html create mode 100644 files/ko/web/xslt/strip-space/index.html create mode 100644 files/ko/web/xslt/stylesheet/index.html create mode 100644 files/ko/web/xslt/template/index.html create mode 100644 files/ko/web/xslt/text/index.html create mode 100644 files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/index.html create mode 100644 files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/introduction/index.html create mode 100644 files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/setting_parameters/index.html create mode 100644 files/ko/web/xslt/transform/index.html create mode 100644 files/ko/web/xslt/transforming_xml_with_xslt/index.html create mode 100644 files/ko/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html create mode 100644 files/ko/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html create mode 100644 files/ko/web/xslt/value-of/index.html create mode 100644 files/ko/web/xslt/variable/index.html create mode 100644 files/ko/web/xslt/when/index.html create mode 100644 files/ko/web/xslt/with-param/index.html create mode 100644 "files/ko/web/\354\260\270\354\241\260/api/index.html" create mode 100644 "files/ko/web/\354\260\270\354\241\260/index.html" create mode 100644 files/ko/web_development/index.html create mode 100644 files/ko/webapi/alarm/index.html create mode 100644 files/ko/webapi/battery_status/index.html create mode 100644 files/ko/webapi/contacts/index.html create mode 100644 files/ko/webapi/detecting_device_orientation/index.html create mode 100644 files/ko/webapi/idle/index.html create mode 100644 files/ko/webapi/index.html create mode 100644 files/ko/webapi/managing_screen_orientation/index.html create mode 100644 files/ko/webapi/network_information/index.html create mode 100644 files/ko/webapi/power_management/index.html create mode 100644 files/ko/webapi/proximity/index.html create mode 100644 files/ko/webapi/simple_push/index.html create mode 100644 files/ko/webapi/time_and_clock/index.html create mode 100644 files/ko/webapi/using_geolocation/index.html create mode 100644 files/ko/webapi/using_light_events/index.html create mode 100644 files/ko/webapi/using_web_notifications/index.html create mode 100644 files/ko/webapi/webfm_api/index.html create mode 100644 files/ko/webapi/websms/index.html create mode 100644 files/ko/webapi/websms/introduction_to_mobile_message_api/introduction_to_websms/index.html create mode 100644 files/ko/webassembly/c_to_wasm/index.html create mode 100644 files/ko/webassembly/caching_modules/index.html create mode 100644 files/ko/webassembly/concepts/index.html create mode 100644 files/ko/webassembly/existing_c_to_wasm/index.html create mode 100644 files/ko/webassembly/exported_functions/index.html create mode 100644 files/ko/webassembly/index.html create mode 100644 files/ko/webassembly/loading_and_running/index.html create mode 100644 files/ko/webassembly/rust_to_wasm/index.html create mode 100644 files/ko/webassembly/text_format_to_wasm/index.html create mode 100644 files/ko/webassembly/understanding_the_text_format/index.html create mode 100644 files/ko/webassembly/using_the_javascript_api/index.html create mode 100644 files/ko/websockets/index.html create mode 100644 files/ko/websockets/writing_websocket_client_applications/index.html create mode 100644 files/ko/websockets/writing_websocket_servers/index.html create mode 100644 files/ko/windows_and_menus_in_xulrunner/index.html create mode 100644 files/ko/xforms/index.html create mode 100644 files/ko/xhtml/index.html create mode 100644 files/ko/xml_web_services/index.html create mode 100644 files/ko/xmlhttprequest_changes_for_gecko1.8/index.html create mode 100644 files/ko/xpcom/index.html create mode 100644 files/ko/xpcom/setting_http_request_headers/index.html create mode 100644 files/ko/xpcom/the_thread_manager/index.html create mode 100644 files/ko/xpcom_interface_reference/index.html create mode 100644 files/ko/xpconnect/index.html create mode 100644 files/ko/xpconnect/using_components/index.html create mode 100644 files/ko/xpi/index.html create mode 100644 files/ko/xpinstall/index.html create mode 100644 files/ko/xpinstall_api_reference/index.html create mode 100644 files/ko/xpinstall_api_reference/install_object/index.html create mode 100644 files/ko/xpinstall_api_reference/install_object/properties/index.html create mode 100644 files/ko/xpinstall_api_reference/return_codes/index.html create mode 100644 files/ko/xslt_in_gecko/basic_example/index.html create mode 100644 files/ko/xslt_in_gecko/browser_differences/index.html create mode 100644 files/ko/xslt_in_gecko/generating_html/index.html create mode 100644 files/ko/xslt_in_gecko/index.html create mode 100644 files/ko/xslt_in_gecko/introduction/index.html create mode 100644 files/ko/xslt_in_gecko/resources/index.html create mode 100644 files/ko/xtech_2005_presentations/directions_of_the_mozilla_rdf_engine/index.html create mode 100644 files/ko/xtech_2005_presentations/index.html create mode 100644 files/ko/xul_changes_for_firefox_1.5/index.html create mode 100644 files/ko/xul_improvements_in_firefox_3/index.html create mode 100644 files/ko/zones/index.html create mode 100644 "files/ko/\352\260\234\353\260\234\354\236\220\353\245\274_\354\234\204\355\225\234_firefox_3.6/index.html" create mode 100644 "files/ko/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" create mode 100644 "files/ko/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" create mode 100644 files/ms/_redirects.txt create mode 100644 files/ms/_wikihistory.json create mode 100644 files/ms/archive/add-ons/index.html create mode 100644 files/ms/archive/firefox_os/index.html create mode 100644 files/ms/archive/index.html create mode 100644 files/ms/archive/mozilla/firefox/index.html create mode 100644 files/ms/archive/mozilla/firefox/jss_build_instructions_for_mac_os_x_10.6/index.html create mode 100644 files/ms/archive/mozilla/index.html create mode 100644 files/ms/glossary/ajax/index.html create mode 100644 files/ms/glossary/index.html create mode 100644 files/ms/html/canvas/index.html create mode 100644 files/ms/html/canvas/melukis_grafik_dengan_canvas/index.html create mode 100644 files/ms/html/elemen/index.html create mode 100644 files/ms/html/index.html create mode 100644 files/ms/html/tip_menulis_lamanhtml_dengan_pemuatan_pantas/index.html create mode 100644 files/ms/learn/accessibility/index.html create mode 100644 files/ms/learn/html/forms/index.html create mode 100644 files/ms/learn/html/howto/add_responsive_image_to_a_webpage/index.html create mode 100644 files/ms/learn/html/howto/index.html create mode 100644 files/ms/learn/html/index.html create mode 100644 files/ms/learn/index.html create mode 100644 files/ms/learn/memulakan_pembelajaran_web/berurusan_dengan_fail/index.html create mode 100644 files/ms/learn/memulakan_pembelajaran_web/index.html create mode 100644 files/ms/learn/memulakan_pembelajaran_web/memasang_perisian_asas/index.html create mode 100644 files/ms/learn/server-side/express_nodejs/forms/index.html create mode 100644 files/ms/learn/server-side/express_nodejs/index.html create mode 100644 files/ms/learn/server-side/index.html create mode 100644 files/ms/learn/soalan_lazim/index.html create mode 100644 files/ms/mdn/about/index.html create mode 100644 files/ms/mdn/community/index.html create mode 100644 files/ms/mdn/contribute/getting_started/index.html create mode 100644 files/ms/mdn/contribute/howto/bagaimana_membuat_akaun_mdn/index.html create mode 100644 files/ms/mdn/contribute/howto/index.html create mode 100644 files/ms/mdn/contribute/index.html create mode 100644 files/ms/mdn/contribute/localize/index.html create mode 100644 files/ms/mdn/contribute/localize/translating_pages/index.html create mode 100644 files/ms/mdn/index.html create mode 100644 files/ms/mdn_at_ten/index.html create mode 100644 files/ms/web/index.html create mode 100644 files/ms/web_development/index.html create mode 100644 files/my/_redirects.txt create mode 100644 files/my/_wikihistory.json create mode 100644 files/my/archive/index.html create mode 100644 files/my/learn/css/css_layout/flexbox/index.html create mode 100644 files/my/learn/css/css_layout/index.html create mode 100644 files/my/learn/css/index.html create mode 100644 files/my/learn/html/forms/html5_input_types/index.html create mode 100644 files/my/learn/html/forms/index.html create mode 100644 files/my/learn/html/forms/your_first_form/index.html create mode 100644 files/my/learn/html/index.html create mode 100644 files/my/learn/index.html create mode 100644 files/my/learn/javascript/index.html create mode 100644 files/my/mozilla/index.html create mode 100644 files/my/mozilla/localization/index.html create mode 100644 files/my/mozilla/localization/l10n_style_guide/index.html create mode 100644 files/my/mozilla/performance/adding_a_new_telemetry_probe/index.html create mode 100644 files/my/mozilla/performance/index.html create mode 100644 files/my/web/css/@font-face/index.html create mode 100644 files/my/web/css/css_transitions/index.html create mode 100644 files/my/web/css/index.html create mode 100644 files/my/web/guide/index.html create mode 100644 files/my/web/http/connection_management_in_http_1.x/index.html create mode 100644 files/my/web/http/index.html create mode 100644 files/my/web/index.html create mode 100644 files/my/web/javascript/index.html create mode 100644 files/my/web/javascript/reference/index.html create mode 100644 files/my/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/my/web/javascript/reference/statements/index.html (limited to 'files') diff --git a/files/id/_redirects.txt b/files/id/_redirects.txt new file mode 100644 index 0000000000..809fc34c73 --- /dev/null +++ b/files/id/_redirects.txt @@ -0,0 +1,26 @@ +# FROM-URL TO-URL +/id/docs/HTML /id/docs/Web/HTML +/id/docs/JavaScript /id/docs/Web/JavaScript +/id/docs/JavaScript/Getting_Started /id/docs/Web/JavaScript/Getting_Started +/id/docs/JavaScript/Panduan /id/docs/Web/JavaScript/Panduan +/id/docs/JavaScript/Pengenalan_JS /id/docs/Web/JavaScript/Getting_Started +/id/docs/JavaScript/Reference /id/docs/Web/JavaScript/Reference +/id/docs/JavaScript/Reference/About /id/docs/Web/JavaScript/Reference/About +/id/docs/JavaScript/Reference/Global_Objects /id/docs/Web/JavaScript/Reference/Global_Objects +/id/docs/JavaScript/Reference/Global_Objects/Math /id/docs/Web/JavaScript/Reference/Global_Objects/Math +/id/docs/JavaScript/Reference/Global_Objects/Math/pow /id/docs/Web/JavaScript/Reference/Global_Objects/Math/pow +/id/docs/JavaScript/Reference/Statements /id/docs/Web/JavaScript/Reference/Statements +/id/docs/JavaScript/Reference/Statements/block /id/docs/Web/JavaScript/Reference/Statements/block +/id/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps +/id/docs/Learn/CSS/Introduction_to_CSS/Box_model /en-US/docs/Learn/CSS/Building_blocks/The_box_model +/id/docs/MDN/Contribute/Content /id/docs/MDN/Guidelines +/id/docs/MDN/Contribute/Content/Layout /id/docs/MDN/Guidelines/Layout +/id/docs/MDN/Contribute/Content/Writing_style_guide /id/docs/MDN/Guidelines/Writing_style_guide +/id/docs/MDN/Langkah_Awal /id/docs/MDN/Contribute/Getting_started +/id/docs/Web/Guide/CSS /id/docs/Learn/CSS +/id/docs/Web/Guide/HTML /id/docs/Learn/HTML +/id/docs/Web/Guide/HTML/Pengenalan /id/docs/Learn/HTML/Introduction_to_HTML +/id/docs/Web/JavaScript/Reference/Methods_Index /id/docs/Web/JavaScript/Reference +/id/docs/Web/JavaScript/Reference/Properties_Index /id/docs/Web/JavaScript/Reference +/id/docs/Web/WebGL /id/docs/Web/API/WebGL_API +/id/docs/en /en-US/ diff --git a/files/id/_wikihistory.json b/files/id/_wikihistory.json new file mode 100644 index 0000000000..c7e8317627 --- /dev/null +++ b/files/id/_wikihistory.json @@ -0,0 +1,2171 @@ +{ + "Developer_Guide": { + "modified": "2019-03-23T23:27:41.297Z", + "contributors": [ + "bskari" + ] + }, + "Developer_Guide/Virtual_ARM_di_Lingkungan_Linux": { + "modified": "2019-03-23T23:27:45.214Z", + "contributors": [ + "ariestiyansyah" + ] + }, + "Games": { + "modified": "2020-07-23T02:23:56.130Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "firmanwyd", + "Alivanza", + "Dataware" + ] + }, + "Games/Publishing_games": { + "modified": "2020-07-23T02:24:59.333Z", + "contributors": [ + "wbamberg" + ] + }, + "Games/Publishing_games/Game_promotion": { + "modified": "2020-07-23T02:28:02.464Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Games/Techniques": { + "modified": "2019-04-21T11:17:49.913Z", + "contributors": [ + "wbamberg" + ] + }, + "Glossary": { + "modified": "2020-10-07T11:10:52.018Z", + "contributors": [ + "peterbe", + "SphinxKnight", + "wbamberg", + "bekti", + "Jeremie" + ] + }, + "Glossary/404": { + "modified": "2019-03-23T22:32:14.780Z", + "contributors": [ + "bekti" + ] + }, + "Glossary/AJAX": { + "modified": "2019-03-23T22:19:41.769Z", + "contributors": [ + "galuhsahid", + "yahyaman", + "bekti" + ] + }, + "Glossary/API": { + "modified": "2019-03-23T22:32:10.841Z", + "contributors": [ + "bekti" + ] + }, + "Glossary/Algoritma": { + "modified": "2019-03-23T22:41:10.845Z", + "contributors": [ + "yayansupiana", + "astrominion", + "agungprasetyosakti" + ] + }, + "Glossary/Asynchronous": { + "modified": "2019-03-23T22:29:53.061Z", + "contributors": [ + "adoel90" + ] + }, + "Glossary/CSS": { + "modified": "2019-03-23T22:19:46.534Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/HTML": { + "modified": "2019-03-18T21:44:41.786Z", + "contributors": [ + "galuhsahid" + ] + }, + "Glossary/HTTP": { + "modified": "2019-03-23T22:19:40.425Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/Identifier": { + "modified": "2019-03-23T22:10:10.171Z", + "contributors": [ + "sori-goklas-hutagalung" + ] + }, + "Glossary/JSON": { + "modified": "2019-03-18T21:44:43.807Z", + "contributors": [ + "galuhsahid" + ] + }, + "Glossary/JavaScript": { + "modified": "2019-03-23T22:19:47.350Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/Method": { + "modified": "2019-03-23T22:32:21.055Z", + "contributors": [ + "bekti" + ] + }, + "Glossary/Null": { + "modified": "2019-03-23T22:18:02.352Z", + "contributors": [ + "dinugr" + ] + }, + "Glossary/Primitive": { + "modified": "2019-03-23T22:09:59.397Z", + "contributors": [ + "sori-goklas-hutagalung" + ] + }, + "Glossary/Python": { + "modified": "2019-03-18T21:42:33.944Z", + "contributors": [ + "adityaharist19" + ] + }, + "Glossary/SEO": { + "modified": "2019-09-22T13:59:47.933Z", + "contributors": [ + "duduindo", + "rizkysaskiaputra" + ] + }, + "Glossary/SVG": { + "modified": "2019-03-23T22:19:38.489Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/Statement": { + "modified": "2019-03-23T22:09:58.650Z", + "contributors": [ + "sori-goklas-hutagalung" + ] + }, + "Glossary/URL": { + "modified": "2019-03-23T22:19:45.495Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/Variable": { + "modified": "2019-03-23T22:09:46.873Z", + "contributors": [ + "bekti" + ] + }, + "Glossary/XML": { + "modified": "2019-03-23T22:19:46.777Z", + "contributors": [ + "galuhsahid", + "bekti" + ] + }, + "Glossary/property": { + "modified": "2019-03-23T22:32:18.314Z", + "contributors": [ + "bekti" + ] + }, + "Learn": { + "modified": "2020-08-08T15:57:34.011Z", + "contributors": [ + "excelrtuhin", + "lisa.angraini.la", + "setyadi", + "Transamunos", + "SphinxKnight", + "svarlamov", + "padila50", + "milhamj", + "bekti", + "miftahafina", + "bang_eko", + "Andrew_Pfeiffer" + ] + }, + "Learn/Accessibility": { + "modified": "2020-07-16T22:39:57.425Z", + "contributors": [ + "zahrulseptian295" + ] + }, + "Learn/CSS": { + "modified": "2020-07-16T22:25:34.322Z", + "contributors": [ + "sideshowbarker" + ] + }, + "Learn/Common_questions": { + "modified": "2020-07-16T22:35:24.163Z", + "contributors": [ + "ashymee", + "dennisblight", + "stephaniehobson" + ] + }, + "Learn/Common_questions/Bagaimana_cara_kerja_Internet": { + "modified": "2020-07-16T22:35:36.880Z", + "contributors": [ + "xenavrt", + "dennisblight" + ] + }, + "Learn/Common_questions/Berfikir_sebelum_membuat_kode": { + "modified": "2020-07-16T22:35:34.339Z", + "contributors": [ + "wahyuakbarwibowo" + ] + }, + "Learn/Common_questions/Pages_sites_servers_and_search_engines": { + "modified": "2020-07-16T22:35:39.876Z", + "contributors": [ + "ilhamm11194011" + ] + }, + "Learn/Common_questions/set_up_a_local_testing_server": { + "modified": "2020-07-16T22:35:52.964Z", + "contributors": [ + "dennisblight" + ] + }, + "Learn/Getting_started_with_the_web": { + "modified": "2020-07-16T22:33:53.018Z", + "contributors": [ + "Transamunos", + "thickkoezz", + "dennisblight", + "galuhsahid", + "bekti", + "miftahafina", + "adeyahya", + "chrisdavidmills" + ] + }, + "Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda": { + "modified": "2020-07-16T22:34:16.825Z", + "contributors": [ + "thickkoezz", + "bekti", + "dovjay", + "yayansupiana" + ] + }, + "Learn/Getting_started_with_the_web/CSS_basics": { + "modified": "2020-07-16T22:34:58.859Z", + "contributors": [ + "thickkoezz", + "galuhsahid" + ] + }, + "Learn/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-07-16T22:34:45.914Z", + "contributors": [ + "thickkoezz", + "adangwihanda", + "yasminzy", + "oktafh", + "bangyasri" + ] + }, + "Learn/Getting_started_with_the_web/How_the_Web_works": { + "modified": "2020-07-16T22:34:00.538Z", + "contributors": [ + "dennisblight", + "bekti" + ] + }, + "Learn/Getting_started_with_the_web/Installing_basic_software": { + "modified": "2020-07-16T22:34:08.020Z", + "contributors": [ + "Transamunos", + "thickkoezz", + "dennisblight", + "bekti", + "yayansupiana", + "agus_nurcholis" + ] + }, + "Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2020-07-16T22:35:10.743Z", + "contributors": [ + "willi-dev", + "MichaelSipayung", + "bekti", + "Fidelstu", + "miftahafina", + "adeyahya" + ] + }, + "Learn/Getting_started_with_the_web/Mengelola_file": { + "modified": "2020-07-16T22:34:33.806Z", + "contributors": [ + "thickkoezz", + "galuhsahid", + "BPiVcarD", + "vdanny" + ] + }, + "Learn/Getting_started_with_the_web/Publishing_your_website": { + "modified": "2020-07-16T22:34:25.723Z", + "contributors": [ + "bekti" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:18.743Z", + "contributors": [ + "bayuYudhaSaputra", + "fikrirazor" + ] + }, + "Learn/HTML/Howto": { + "modified": "2020-08-21T10:36:52.641Z", + "contributors": [ + "ikramwadudu99" + ] + }, + "Learn/HTML/Multimedia_dan_embedding": { + "modified": "2020-07-16T22:24:25.764Z", + "contributors": [ + "SphinxKnight", + "putrapuices", + "thickkoezz" + ] + }, + "Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web": { + "modified": "2020-07-16T22:24:40.529Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Multimedia_dan_embedding/Responsive_images": { + "modified": "2020-07-16T22:24:34.275Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Pengenalan_HTML": { + "modified": "2020-07-30T01:00:05.720Z", + "contributors": [ + "setyadi", + "Zen-Akira", + "thickkoezz", + "ariaenggar" + ] + }, + "Learn/HTML/Pengenalan_HTML/Document_and_website_structure": { + "modified": "2020-07-16T22:24:04.997Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals": { + "modified": "2020-07-16T22:23:32.925Z", + "contributors": [ + "Transamunos" + ] + }, + "Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content": { + "modified": "2020-07-16T22:24:19.411Z", + "contributors": [ + "mujahid-it" + ] + }, + "Learn/HTML/Tabel": { + "modified": "2020-07-16T22:25:12.167Z", + "contributors": [ + "jatmikaekachandra" + ] + }, + "Learn/How_to_contribute": { + "modified": "2020-07-16T22:33:44.062Z", + "contributors": [ + "SphinxKnight", + "bekti", + "ariestiyansyah" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:39.927Z", + "contributors": [ + "triashand", + "ariebrainware", + "bekti", + "miftahafina" + ] + }, + "Learn/JavaScript/Building_blocks": { + "modified": "2020-11-07T05:27:42.212Z", + "contributors": [ + "cxvq", + "Fidelstu" + ] + }, + "Learn/JavaScript/Client-side_web_APIs": { + "modified": "2020-07-16T22:32:39.540Z", + "contributors": [ + "awim" + ] + }, + "Learn/JavaScript/Client-side_web_APIs/Introduction": { + "modified": "2020-07-16T22:32:45.404Z", + "contributors": [ + "rizkypjt" + ] + }, + "Learn/JavaScript/First_steps": { + "modified": "2020-11-09T23:42:16.586Z", + "contributors": [ + "inbox.jen96", + "bekti" + ] + }, + "Learn/JavaScript/First_steps/What_is_JavaScript": { + "modified": "2020-07-16T22:30:08.653Z", + "contributors": [ + "ajiprio01", + "windykurniawan-windcode" + ] + }, + "Learn/JavaScript/Objects": { + "modified": "2020-07-16T22:31:50.305Z", + "contributors": [ + "thickkoezz", + "Fidelstu" + ] + }, + "Learn/JavaScript/Objects/Dasar-dasar": { + "modified": "2020-07-16T22:31:59.183Z", + "contributors": [ + "indrayoganata" + ] + }, + "Learn/Server-side": { + "modified": "2020-07-16T22:35:58.563Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/Server-side/Django": { + "modified": "2020-09-27T09:04:00.240Z", + "contributors": [ + "MuhamadAzizi", + "AgungWiyono", + "aps2201", + "fikrirazor" + ] + }, + "Learn/Server-side/Django/Tutorial_local_library_website": { + "modified": "2020-09-27T09:52:56.557Z", + "contributors": [ + "MuhamadAzizi" + ] + }, + "Learn/Server-side/Django/development_environment": { + "modified": "2020-09-27T09:24:51.296Z", + "contributors": [ + "MuhamadAzizi", + "mujahid-it" + ] + }, + "Learn/Server-side/First_steps": { + "modified": "2020-07-16T22:36:09.052Z", + "contributors": [ + "ferdian89" + ] + }, + "Learn/Web_Mechanics": { + "modified": "2020-07-16T22:22:13.418Z", + "contributors": [ + "miftahafina" + ] + }, + "MDN": { + "modified": "2020-08-29T05:39:32.291Z", + "contributors": [ + "excelrtuhin", + "jswisher", + "SphinxKnight", + "wbamberg", + "bekti", + "Sheppy" + ] + }, + "MDN/About": { + "modified": "2020-08-09T11:25:04.711Z", + "contributors": [ + "harikun" + ] + }, + "MDN/Contribute": { + "modified": "2019-01-16T19:12:55.469Z", + "contributors": [ + "wbamberg", + "bekti", + "ariestiyansyah", + "Sheppy" + ] + }, + "MDN/Contribute/Feedback": { + "modified": "2020-09-30T17:51:12.443Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "thickkoezz", + "wbamberg", + "chorie", + "viankakrisna", + "afishop", + "jswisher", + "pieteru_insekai" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:12:29.554Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "excelrtuhin", + "kangsantripaud", + "ISO", + "devmio", + "agenbaccaratnet", + "wbamberg", + "nsiregar", + "chorie", + "arifpedia", + "firmanwyd", + "bekti", + "bayuah", + "Mohdsalleh", + "Bobypurnomo", + "rio.putra", + "helloeny" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2019-01-16T19:12:51.064Z", + "contributors": [ + "wbamberg", + "bekti", + "Sheppy" + ] + }, + "MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-03-23T22:38:48.748Z", + "contributors": [ + "wbamberg", + "padila50", + "firmanwyd", + "taqiyyuki02", + "Lukman04" + ] + }, + "MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-03-23T22:32:05.940Z", + "contributors": [ + "wbamberg", + "heasanking" + ] + }, + "MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-03-23T22:31:28.587Z", + "contributors": [ + "wbamberg", + "ElangSBP", + "bekti", + "Pieteru" + ] + }, + "MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2019-01-16T19:13:18.495Z", + "contributors": [ + "wbamberg", + "zekaras" + ] + }, + "MDN/Contribute/Howto/Tag": { + "modified": "2019-03-23T23:04:03.858Z", + "contributors": [ + "wbamberg", + "yayasl" + ] + }, + "MDN/Contribute/Processes": { + "modified": "2019-03-23T22:33:46.372Z", + "contributors": [ + "ignchristian", + "wbamberg", + "jswisher" + ] + }, + "MDN/Contribute/Tugas": { + "modified": "2019-01-16T19:13:42.819Z", + "contributors": [ + "wbamberg", + "firmanwyd", + "Cr7Pramana" + ] + }, + "MDN/Guidelines": { + "modified": "2020-09-30T15:29:57.815Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "bekti", + "Sheppy" + ] + }, + "MDN/Guidelines/Writing_style_guide": { + "modified": "2020-09-30T15:29:58.831Z", + "contributors": [ + "chrisdavidmills", + "alvisolikah0507" + ] + }, + "MDN/Komunitas": { + "modified": "2019-05-29T21:20:10.743Z", + "contributors": [ + "alattalatta", + "KLIWONJagung", + "wbamberg", + "Makarim", + "firmanwyd", + "padila50", + "bekti", + "eriskatp" + ] + }, + "MDN/Komunitas/Conversations": { + "modified": "2019-03-23T22:41:40.315Z", + "contributors": [ + "wbamberg", + "jswisher", + "randiproska" + ] + }, + "MDN/User_guide": { + "modified": "2020-12-07T17:30:15.270Z", + "contributors": [ + "wbamberg", + "Sheppy" + ] + }, + "MDN/User_guide/Menghapus_halaman": { + "modified": "2019-01-16T18:55:32.659Z", + "contributors": [ + "wbamberg", + "helloeny" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:28:31.556Z", + "contributors": [ + "wim449", + "Sheppy" + ] + }, + "Mozilla/Add-ons": { + "modified": "2019-09-09T13:11:45.968Z", + "contributors": [ + "SphinxKnight", + "bekti", + "soulast", + "LukmanTambose", + "pieteru_insekai", + "novita" + ] + }, + "Mozilla/Add-ons/WebExtensions": { + "modified": "2019-07-03T08:48:34.929Z", + "contributors": [ + "SphinxKnight", + "herliansyah", + "fesuydev", + "wbamberg" + ] + }, + "Mozilla/Add-ons/WebExtensions/API": { + "modified": "2019-11-26T22:19:27.565Z", + "contributors": [ + "wbamberg" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/browserSettings": { + "modified": "2020-10-15T22:32:28.909Z", + "contributors": [ + "SphinxKnight", + "joelinformaticien01", + "didikpramono" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/notifikasi": { + "modified": "2020-10-15T22:05:36.197Z", + "contributors": [ + "asiongtobing", + "wbamberg", + "Azhe403" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/windows": { + "modified": "2020-10-15T21:51:41.708Z", + "contributors": [ + "wbamberg", + "abbycar" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/windows/CreateType": { + "modified": "2020-10-15T21:51:40.999Z", + "contributors": [ + "wbamberg", + "fesuydev" + ] + }, + "Mozilla/Add-ons/WebExtensions/Apa_Itu_WebExtensions": { + "modified": "2019-03-18T21:06:29.401Z", + "contributors": [ + "fesuydev" + ] + }, + "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": { + "modified": "2020-10-15T20:55:16.114Z", + "contributors": [ + "didikpramono" + ] + }, + "Mozilla/Add-ons/WebExtensions/Content_scripts": { + "modified": "2020-07-10T14:58:49.988Z", + "contributors": [ + "prajahutapea1980" + ] + }, + "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { + "modified": "2019-03-18T21:06:21.389Z", + "contributors": [ + "fesuydev" + ] + }, + "Mozilla/Firefox": { + "modified": "2019-09-10T14:58:31.117Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "chorie", + "bekti", + "haris_haki89", + "StarGible" + ] + }, + "Mozilla/Firefox/Releases": { + "modified": "2019-03-23T23:09:29.710Z", + "contributors": [ + "wbamberg", + "bekti", + "ziyunfei" + ] + }, + "Pengembangan_Web": { + "modified": "2019-03-23T22:51:52.244Z", + "contributors": [ + "rahmatsubekti" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:15.262Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "srwicak", + "bekti", + "paleutoh", + "Rawoyo", + "agungprasetyosakti", + "abdulrahmandwn@gmail.com", + "bg17me", + "romifzld@gmail.com", + "Rusli88", + "redkhila", + "Almizajuhazamjabila", + "Dera_kom", + "InyoezzRusty", + "dodo_tgrcity" + ] + }, + "Tools/Accessibility_inspector": { + "modified": "2020-07-16T22:36:39.804Z", + "contributors": [ + "BrilliantFikri" + ] + }, + "Tools/Debugger": { + "modified": "2020-07-16T22:35:04.572Z", + "contributors": [ + "wbamberg", + "fscholz", + "trevorh", + "aslam" + ] + }, + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:27.903Z", + "contributors": [ + "wbamberg", + "bekti" + ] + }, + "Tools/Page_Inspector/How_to": { + "modified": "2020-07-16T22:34:31.302Z" + }, + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.379Z", + "contributors": [ + "wbamberg", + "fahrizalsaler", + "Rizal712", + "zemaryal" + ] + }, + "Web": { + "modified": "2020-08-01T17:04:48.178Z", + "contributors": [ + "Transamunos", + "padila50", + "firmanwyd", + "TIYAN", + "Pieteru", + "bekti", + "nochis", + "srifqi", + "enda34", + "jefriebdn", + "groovecoder", + "Dhinicarnetta", + "pieteru_insekai", + "Jan.Ruzicka" + ] + }, + "Web/API": { + "modified": "2019-03-23T23:29:04.875Z", + "contributors": [ + "teoli", + "Rodin", + "ethertank", + "Sheppy", + "pieteru_insekai" + ] + }, + "Web/API/API_Push": { + "modified": "2019-03-23T22:39:12.627Z", + "contributors": [ + "bayuah" + ] + }, + "Web/API/AbstractWorker": { + "modified": "2019-03-23T22:32:36.681Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/CacheStorage": { + "modified": "2020-10-15T22:30:28.579Z", + "contributors": [ + "AprilSylph" + ] + }, + "Web/API/Canvas_API": { + "modified": "2020-04-30T13:42:37.733Z", + "contributors": [ + "Thor-x86", + "her82man" + ] + }, + "Web/API/Console": { + "modified": "2019-03-23T22:06:01.155Z", + "contributors": [ + "chaosrock" + ] + }, + "Web/API/Document": { + "modified": "2019-03-23T22:31:44.953Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/Document/createElement": { + "modified": "2019-03-18T21:40:57.940Z", + "contributors": [ + "srwicak" + ] + }, + "Web/API/Document/links": { + "modified": "2019-03-23T22:31:46.942Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/Document/write": { + "modified": "2019-03-23T22:31:16.420Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/Event": { + "modified": "2019-03-23T22:34:07.571Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/Event/currentTarget": { + "modified": "2019-03-23T22:02:04.056Z", + "contributors": [ + "agengdp" + ] + }, + "Web/API/Event/target": { + "modified": "2020-10-15T22:29:42.203Z", + "contributors": [ + "mujahid-it" + ] + }, + "Web/API/Fetch_API": { + "modified": "2020-10-15T22:15:10.618Z", + "contributors": [ + "arifirmansyah" + ] + }, + "Web/API/Navigator": { + "modified": "2019-03-23T22:33:55.930Z", + "contributors": [ + "bekti", + "jpmedley" + ] + }, + "Web/API/Navigator/mediaDevices": { + "modified": "2020-10-15T22:35:18.495Z", + "contributors": [ + "ajid2" + ] + }, + "Web/API/Navigator/serviceWorker": { + "modified": "2019-03-23T22:33:57.198Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/ServiceWorker": { + "modified": "2019-03-23T22:33:58.500Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/ServiceWorkerContainer": { + "modified": "2020-10-15T22:30:32.905Z", + "contributors": [ + "Wind1808" + ] + }, + "Web/API/ServiceWorkerRegistration": { + "modified": "2019-03-23T22:24:55.454Z", + "contributors": [ + "lostsource" + ] + }, + "Web/API/ServiceWorkerRegistration/pushManager": { + "modified": "2019-03-23T22:25:01.542Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/Service_Worker_API": { + "modified": "2019-03-23T22:34:03.819Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/API/Service_Worker_API/Using_Service_Workers": { + "modified": "2019-03-23T22:34:11.113Z", + "contributors": [ + "bekti" + ] + }, + "Web/API/SpeechSynthesis": { + "modified": "2020-10-15T22:26:55.754Z" + }, + "Web/API/SpeechSynthesis/onvoiceschanged": { + "modified": "2020-10-15T22:28:05.104Z", + "contributors": [ + "azaddogan0688" + ] + }, + "Web/API/Storage": { + "modified": "2020-10-15T22:14:31.365Z", + "contributors": [ + "daengbaco" + ] + }, + "Web/API/WebGL_API": { + "modified": "2020-04-29T19:32:33.970Z", + "contributors": [ + "bekti", + "fscholz", + "bassam", + "agungprasetyosakti" + ] + }, + "Web/API/WebRTC_API": { + "modified": "2019-03-23T22:16:11.428Z", + "contributors": [ + "fitra" + ] + }, + "Web/API/Window": { + "modified": "2019-03-23T22:04:16.389Z", + "contributors": [ + "jpmedley" + ] + }, + "Web/API/Window/getSelection": { + "modified": "2020-10-15T22:25:06.790Z", + "contributors": [ + "fsodic" + ] + }, + "Web/API/Window/window": { + "modified": "2019-03-23T22:04:14.512Z", + "contributors": [ + "Makarim" + ] + }, + "Web/API/XMLHttpRequest": { + "modified": "2020-10-15T22:29:42.073Z", + "contributors": [ + "mconley" + ] + }, + "Web/API/XMLHttpRequest/Using_XMLHttpRequest": { + "modified": "2020-10-15T22:29:44.031Z", + "contributors": [ + "cupsmaniak" + ] + }, + "Web/CSS": { + "modified": "2020-10-11T06:34:07.941Z", + "contributors": [ + "liimep", + "SphinxKnight", + "okabrionz", + "bekti", + "pieteru_insekai" + ] + }, + "Web/CSS/:active": { + "modified": "2019-03-23T22:39:29.350Z", + "contributors": [ + "fscholz", + "dedy_serang" + ] + }, + "Web/CSS/@font-face": { + "modified": "2020-10-15T22:29:43.073Z", + "contributors": [ + "Speich" + ] + }, + "Web/CSS/@font-face/font-display": { + "modified": "2020-10-15T22:29:40.410Z", + "contributors": [ + "yhogalampung" + ] + }, + "Web/CSS/CSS_Box_Model": { + "modified": "2019-11-12T01:36:35.726Z" + }, + "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": { + "modified": "2020-04-14T11:30:15.446Z", + "contributors": [ + "AndrEndru" + ] + }, + "Web/CSS/CSS_Selectors": { + "modified": "2019-03-23T22:39:36.340Z", + "contributors": [ + "dedy_serang", + "Sebastianz" + ] + }, + "Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors": { + "modified": "2019-03-23T22:39:39.136Z", + "contributors": [ + "dedy_serang" + ] + }, + "Web/CSS/Type_selectors": { + "modified": "2019-03-23T22:39:33.121Z", + "contributors": [ + "dedy_serang" + ] + }, + "Web/CSS/background-color": { + "modified": "2020-10-15T22:13:54.838Z", + "contributors": [ + "Fairsu" + ] + }, + "Web/CSS/flex-direction": { + "modified": "2020-10-15T22:33:04.876Z", + "contributors": [ + "tegar97" + ] + }, + "Web/CSS/mask-border-width": { + "modified": "2020-11-28T00:13:02.295Z", + "contributors": [ + "alifudinashfa7" + ] + }, + "Web/CSS/referensi": { + "modified": "2020-10-11T06:52:29.728Z", + "contributors": [ + "liimep" + ] + }, + "Web/CSS/text-transform": { + "modified": "2020-10-15T22:00:17.057Z", + "contributors": [ + "fowlplay" + ] + }, + "Web/Events": { + "modified": "2019-04-30T14:00:32.443Z", + "contributors": [ + "wbamberg", + "bep" + ] + }, + "Web/Events/error": { + "modified": "2019-03-23T22:33:54.573Z", + "contributors": [ + "fscholz", + "bekti" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T23:29:05.952Z", + "contributors": [ + "firmanwyd", + "bekti", + "rahmatsubekti", + "ethertank", + "Sheppy" + ] + }, + "Web/Guide/API": { + "modified": "2019-09-11T09:41:53.158Z", + "contributors": [ + "SphinxKnight", + "steffix.h2" + ] + }, + "Web/Guide/API/WebRTC": { + "modified": "2019-03-23T22:55:51.386Z", + "contributors": [ + "fitra", + "yuan8" + ] + }, + "Web/Guide/CSS/Getting_started": { + "modified": "2019-03-23T23:14:57.144Z", + "contributors": [ + "mahfudhi" + ] + }, + "Web/Guide/CSS/Media_queries": { + "modified": "2019-03-23T23:17:04.703Z", + "contributors": [ + "Sebastianz", + "mrstork", + "malayaleecoder", + "dpitaloka" + ] + }, + "Web/Guide/Grafis": { + "modified": "2019-03-23T23:29:12.829Z", + "contributors": [ + "firmanwyd", + "bekti", + "pieteru_insekai" + ] + }, + "Web/Guide/HTML/Forms": { + "modified": "2020-07-16T22:20:57.894Z", + "contributors": [ + "ariona_rian" + ] + }, + "Web/Guide/HTML/HTML5": { + "modified": "2019-04-27T02:10:19.507Z", + "contributors": [ + "eragone394", + "teoli", + "andi-sholihin", + "dac" + ] + }, + "Web/HTML": { + "modified": "2020-03-30T02:20:45.667Z", + "contributors": [ + "SphinxKnight", + "teriray23", + "Transamunos", + "GhalibPutra879", + "globalnet", + "Pieteru", + "bekti", + "pieteru_insekai", + "noorAddianna" + ] + }, + "Web/HTML/Element": { + "modified": "2020-05-04T02:43:50.266Z", + "contributors": [ + "SphinxKnight", + "ISO", + "Transamunos", + "bekti", + "kscarfone" + ] + }, + "Web/HTML/Element/base": { + "modified": "2019-09-22T14:03:48.366Z", + "contributors": [ + "duduindo", + "Ariansnirwana" + ] + }, + "Web/HTML/Element/dialog": { + "modified": "2020-10-15T22:00:58.630Z", + "contributors": [ + "jpmakangiras" + ] + }, + "Web/HTML/Element/image": { + "modified": "2019-03-23T22:11:52.537Z", + "contributors": [ + "Fidelstu" + ] + }, + "Web/HTTP": { + "modified": "2019-03-23T22:10:11.130Z", + "contributors": [ + "srwicak", + "Joe_Brown", + "Jasakontraktor", + "fscholz" + ] + }, + "Web/HTTP/Basics_of_HTTP": { + "modified": "2020-07-05T03:38:29.103Z", + "contributors": [ + "setyadi", + "mfuji09" + ] + }, + "Web/HTTP/Gambaran": { + "modified": "2020-11-29T00:41:21.794Z", + "contributors": [ + "mzgndrg", + "bcnight" + ] + }, + "Web/HTTP/Methods": { + "modified": "2020-10-15T21:55:31.625Z", + "contributors": [ + "bekti", + "fscholz" + ] + }, + "Web/HTTP/Methods/GET": { + "modified": "2020-10-15T21:55:31.974Z", + "contributors": [ + "bekti" + ] + }, + "Web/HTTP/Proxy_servers_and_tunneling": { + "modified": "2020-10-19T13:06:42.068Z", + "contributors": [ + "jwerre" + ] + }, + "Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file": { + "modified": "2020-10-20T02:03:59.798Z", + "contributors": [ + "SphinxKnight", + "worabaiyan" + ] + }, + "Web/HTTP/Status": { + "modified": "2020-07-11T00:04:04.381Z", + "contributors": [ + "tegar97", + "dyankastutara", + "M-Husein" + ] + }, + "Web/HTTP/Status/100": { + "modified": "2020-10-15T21:51:44.217Z", + "contributors": [ + "bekti" + ] + }, + "Web/HTTP/Status/200": { + "modified": "2020-10-15T21:55:30.356Z", + "contributors": [ + "bekti" + ] + }, + "Web/HTTP/Status/400": { + "modified": "2020-05-23T03:01:36.297Z", + "contributors": [ + "xenavrt" + ] + }, + "Web/HTTP/Status/403": { + "modified": "2020-10-15T22:30:03.647Z", + "contributors": [ + "xenavrt" + ] + }, + "Web/HTTP/Status/404": { + "modified": "2020-10-15T22:30:01.735Z", + "contributors": [ + "xenavrt" + ] + }, + "Web/HTTP/Status/405": { + "modified": "2020-05-23T02:57:36.571Z", + "contributors": [ + "xenavrt" + ] + }, + "Web/HTTP/Status/410": { + "modified": "2020-10-15T22:30:04.125Z", + "contributors": [ + "xenavrt" + ] + }, + "Web/HTTP/Status/500": { + "modified": "2020-10-15T21:57:54.889Z", + "contributors": [ + "dimyati_azhar", + "awanlamph" + ] + }, + "Web/JavaScript": { + "modified": "2020-03-12T19:37:54.103Z", + "contributors": [ + "SphinxKnight", + "Fidelstu", + "arifpedia", + "bekti", + "duriterlindung68", + "teoli", + "adeyahya", + "pieteru_insekai", + "keripix" + ] + }, + "Web/JavaScript/A_re-introduction_to_JavaScript": { + "modified": "2020-09-03T08:41:07.385Z", + "contributors": [ + "gifaeriyanto", + "irsyadharfiansyah", + "od2", + "kristoforusrp" + ] + }, + "Web/JavaScript/Data_structures": { + "modified": "2020-03-12T19:40:38.717Z", + "contributors": [ + "dinugr", + "Joe_Brown", + "fadlystwn", + "witart" + ] + }, + "Web/JavaScript/Inheritance_dan_prototype_chain": { + "modified": "2020-03-12T19:46:21.083Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Language_Resources": { + "modified": "2020-03-12T19:44:02.368Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Memory_Management": { + "modified": "2020-03-12T19:44:02.914Z", + "contributors": [ + "martinserafim93", + "agungprasetyosakti" + ] + }, + "Web/JavaScript/Panduan": { + "modified": "2020-03-12T19:38:02.146Z", + "contributors": [ + "bekti", + "teoli", + "kuntoaji" + ] + }, + "Web/JavaScript/Panduan/Closures": { + "modified": "2019-05-16T14:59:16.458Z", + "contributors": [ + "wbamberg", + "xlobin", + "sutikno" + ] + }, + "Web/JavaScript/Panduan/Loops_and_iteration": { + "modified": "2020-03-12T19:46:18.223Z", + "contributors": [ + "Fidelstu", + "jakarta" + ] + }, + "Web/JavaScript/Panduan/Numbers_and_dates": { + "modified": "2020-03-12T19:48:12.489Z", + "contributors": [ + "triashand" + ] + }, + "Web/JavaScript/Panduan/Tentang": { + "modified": "2019-05-16T15:03:14.492Z", + "contributors": [ + "wbamberg", + "adeyahya" + ] + }, + "Web/JavaScript/Panduan/Values,_variables,_and_literals": { + "modified": "2020-03-12T19:40:01.295Z", + "contributors": [ + "wbamberg", + "wawansumardi", + "sori-goklas-hutagalung", + "Fidelstu", + "bekti", + "kangfend", + "adeyahya" + ] + }, + "Web/JavaScript/Panduan/Working_with_Objects": { + "modified": "2020-03-12T19:48:10.821Z", + "contributors": [ + "thickkoezz", + "Fidelstu" + ] + }, + "Web/JavaScript/Panduan/pengenalan": { + "modified": "2020-03-12T19:41:22.637Z", + "contributors": [ + "snaztoz", + "thickkoezz", + "Fidelstu", + "ardhyui", + "bekti", + "adeyahya" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:38:01.752Z", + "contributors": [ + "opblang", + "bekti", + "srifqi", + "teoli", + "keripix", + "boyo" + ] + }, + "Web/JavaScript/Reference/About": { + "modified": "2019-03-23T23:32:37.338Z", + "contributors": [ + "srifqi", + "teoli", + "keripix" + ] + }, + "Web/JavaScript/Reference/Classes": { + "modified": "2020-11-05T03:06:39.925Z", + "contributors": [ + "septianayoyo", + "syaifulrmdhn", + "rifqieh", + "shilohchis", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Classes/constructor": { + "modified": "2020-03-12T19:45:06.809Z", + "contributors": [ + "bayuah", + "rafafauzi", + "MichaelSipayung", + "adfie" + ] + }, + "Web/JavaScript/Reference/Classes/extends": { + "modified": "2020-10-15T22:17:13.204Z", + "contributors": [ + "kbkesit" + ] + }, + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:44:10.832Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Errors/Called_on_incompatible_type": { + "modified": "2020-03-12T19:49:06.201Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_array_length": { + "modified": "2020-03-12T19:49:10.144Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { + "modified": "2020-03-12T19:48:15.949Z", + "contributors": [ + "SphinxKnight" + ] + }, + "Web/JavaScript/Reference/Errors/Negative_repetition_count": { + "modified": "2020-03-12T19:49:08.676Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Errors/Not_a_codepoint": { + "modified": "2020-03-12T19:49:02.574Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Errors/Not_defined": { + "modified": "2020-03-12T19:48:26.149Z", + "contributors": [ + "alattalatta", + "KLIWONJagung", + "ariefjava" + ] + }, + "Web/JavaScript/Reference/Errors/Property_access_denied": { + "modified": "2020-03-12T19:49:07.387Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Errors/Too_much_recursion": { + "modified": "2020-03-12T19:49:07.518Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Functions": { + "modified": "2020-10-15T22:08:23.542Z", + "contributors": [ + "snek" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:38:31.023Z", + "contributors": [ + "bekti", + "teoli", + "Norbert" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2020-04-13T23:45:16.177Z", + "contributors": [ + "jatmikaekachandra", + "hadyandev", + "triashand", + "arai" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/concat": { + "modified": "2019-03-23T22:34:10.740Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/filter": { + "modified": "2020-10-15T21:57:56.237Z", + "contributors": [ + "yahyaman" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/from": { + "modified": "2019-03-23T22:33:46.573Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/isArray": { + "modified": "2019-03-23T22:33:50.161Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/join": { + "modified": "2019-01-16T22:41:40.168Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/length": { + "modified": "2019-03-23T22:19:38.980Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/of": { + "modified": "2019-03-23T22:32:18.069Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/pop": { + "modified": "2019-03-23T22:32:08.604Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/reverse": { + "modified": "2019-03-23T22:33:45.481Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/shift": { + "modified": "2019-03-23T22:32:14.302Z", + "contributors": [ + "verdysaputra", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/slice": { + "modified": "2020-10-15T22:30:58.309Z", + "contributors": [ + "Mikeul", + "adisetiawan" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/splice": { + "modified": "2020-10-15T22:01:33.229Z", + "contributors": [ + "handipriyono" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/unshift": { + "modified": "2019-03-23T22:32:11.465Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/values": { + "modified": "2019-03-23T22:32:16.581Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2019-03-23T22:34:07.176Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { + "modified": "2020-10-15T22:19:08.648Z", + "contributors": [ + "thickkoezz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/now": { + "modified": "2019-03-23T22:32:46.175Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { + "modified": "2019-03-23T22:34:13.538Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/toTimeString": { + "modified": "2019-03-23T22:33:14.301Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error": { + "modified": "2019-03-23T22:31:47.242Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/name": { + "modified": "2019-03-23T22:31:47.638Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2019-03-18T20:47:58.533Z", + "contributors": [ + "syaifulrmdhn", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/displayName": { + "modified": "2019-03-23T22:32:21.293Z", + "contributors": [ + "teoli", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/length": { + "modified": "2019-03-23T22:33:40.528Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/name": { + "modified": "2019-03-23T22:32:16.445Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/prototype": { + "modified": "2019-03-23T22:32:00.489Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON": { + "modified": "2019-01-16T22:42:04.885Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON/parse": { + "modified": "2019-03-23T22:33:56.784Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2019-03-23T22:33:57.668Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/clear": { + "modified": "2019-03-23T22:33:58.119Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/delete": { + "modified": "2019-03-23T22:33:53.697Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math": { + "modified": "2019-03-23T23:31:07.263Z", + "contributors": [ + "bekti", + "teoli", + "trucy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/E": { + "modified": "2020-10-15T22:08:43.695Z", + "contributors": [ + "oktavianusmisro94" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LN10": { + "modified": "2020-10-15T22:08:43.804Z", + "contributors": [ + "oktavianusmisro94" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/abs": { + "modified": "2019-03-23T22:27:14.164Z", + "contributors": [ + "baponk" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/ceil": { + "modified": "2020-10-15T21:49:08.672Z", + "contributors": [ + "bayuah", + "baponk" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/floor": { + "modified": "2019-03-23T22:27:14.949Z", + "contributors": [ + "twahyono", + "baponk" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/max": { + "modified": "2019-03-23T22:31:59.160Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/min": { + "modified": "2019-03-23T22:32:03.547Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/pow": { + "modified": "2019-03-23T23:31:18.374Z", + "contributors": [ + "teoli", + "egiw" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2019-03-23T22:37:32.954Z", + "contributors": [ + "dinugr", + "bekti", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { + "modified": "2019-03-23T22:26:28.903Z", + "contributors": [ + "Ganesha" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/keys": { + "modified": "2019-03-23T22:26:35.536Z", + "contributors": [ + "haris" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/preventExtensions": { + "modified": "2019-07-08T04:20:18.084Z", + "contributors": [ + "Ganesha" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-10-15T21:46:00.705Z", + "contributors": [ + "fscholz", + "PeteDevoy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/catch": { + "modified": "2020-10-15T21:46:01.765Z", + "contributors": [ + "fscholz", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/reject": { + "modified": "2020-10-15T21:46:00.008Z", + "contributors": [ + "fscholz", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/resolve": { + "modified": "2020-10-15T21:46:28.393Z", + "contributors": [ + "fscholz", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/then": { + "modified": "2020-10-15T21:46:01.723Z", + "contributors": [ + "fscholz", + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/RegExp": { + "modified": "2020-10-15T22:32:16.409Z", + "contributors": [ + "SphinxKnight", + "mijoonpcyoutuube" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2019-03-23T22:54:51.028Z", + "contributors": [ + "wbamberg", + "srifqi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/concat": { + "modified": "2019-03-23T22:34:05.198Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { + "modified": "2020-08-08T03:30:34.821Z", + "contributors": [ + "whitehoodie", + "srifqi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/fromCodePoint": { + "modified": "2020-10-15T22:15:58.214Z", + "contributors": [ + "antonbudianto" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/indexOf": { + "modified": "2019-03-23T22:29:51.517Z", + "contributors": [ + "MuhammadFariMadyan", + "adoel90" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/length": { + "modified": "2019-03-23T22:34:08.649Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/link": { + "modified": "2019-03-23T22:31:46.275Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/purwarupa": { + "modified": "2019-03-23T22:54:49.067Z", + "contributors": [ + "bekti", + "srifqi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/split": { + "modified": "2019-03-23T22:31:50.185Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { + "modified": "2019-03-23T22:31:46.602Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/toString": { + "modified": "2019-03-23T22:32:42.001Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { + "modified": "2019-03-23T22:33:39.473Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray": { + "modified": "2019-03-23T22:31:58.327Z", + "contributors": [ + "arai" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray/join": { + "modified": "2019-03-23T22:32:07.353Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/isNaN": { + "modified": "2020-10-15T21:57:16.564Z", + "contributors": [ + "yusrilhs" + ] + }, + "Web/JavaScript/Reference/Lexical_grammar": { + "modified": "2020-03-12T19:46:20.884Z", + "contributors": [ + "nndwn", + "sori-goklas-hutagalung" + ] + }, + "Web/JavaScript/Reference/Operators": { + "modified": "2020-03-12T19:39:41.862Z", + "contributors": [ + "galih977", + "SphinxKnight", + "teoli" + ] + }, + "Web/JavaScript/Reference/Operators/Conditional_Operator": { + "modified": "2020-10-15T22:00:22.485Z", + "contributors": [ + "syuaib", + "zainalmustofa" + ] + }, + "Web/JavaScript/Reference/Operators/fungsi": { + "modified": "2020-03-12T19:45:02.306Z", + "contributors": [ + "opblang" + ] + }, + "Web/JavaScript/Reference/Operators/yield": { + "modified": "2020-10-15T21:58:01.116Z", + "contributors": [ + "PUYUP", + "j-blank", + "tangorboyz" + ] + }, + "Web/JavaScript/Reference/Statements": { + "modified": "2020-03-12T19:38:01.955Z", + "contributors": [ + "bekti", + "teoli", + "keripix" + ] + }, + "Web/JavaScript/Reference/Statements/Empty": { + "modified": "2020-03-12T19:45:20.591Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Statements/class": { + "modified": "2020-03-12T19:43:42.480Z", + "contributors": [ + "bekti" + ] + }, + "Web/JavaScript/Reference/Statements/do...while": { + "modified": "2020-10-15T21:46:22.842Z", + "contributors": [ + "bayuah", + "bekti" + ] + }, + "Web/JavaScript/Reference/Statements/export": { + "modified": "2020-03-12T19:44:15.912Z", + "contributors": [ + "fadlystwn", + "blubMe" + ] + }, + "Web/JavaScript/Reference/Statements/for...in": { + "modified": "2020-03-12T19:43:18.701Z", + "contributors": [ + "bekti", + "haris" + ] + }, + "Web/JavaScript/Reference/Statements/fungsi": { + "modified": "2020-03-12T19:46:13.838Z", + "contributors": [ + "irhamkim" + ] + }, + "Web/JavaScript/sekilas_teknologi_JavaScript": { + "modified": "2020-03-12T19:45:33.240Z", + "contributors": [ + "arifpedia" + ] + }, + "Web/MathML": { + "modified": "2020-10-15T22:09:52.119Z", + "contributors": [ + "AzizMuslim", + "ExE-Boss" + ] + }, + "Web/MathML/Element": { + "modified": "2019-03-18T21:24:31.292Z", + "contributors": [ + "okabrionz" + ] + }, + "Web/Reference": { + "modified": "2019-03-23T23:22:42.575Z", + "contributors": [ + "kscarfone" + ] + }, + "Web/Reference/API": { + "modified": "2019-03-23T23:22:41.127Z", + "contributors": [ + "bekti", + "Al_akbar", + "drihPee", + "bertzzie", + "teguhsetiyawan" + ] + }, + "Web/Security": { + "modified": "2019-09-10T16:35:29.682Z", + "contributors": [ + "SphinxKnight", + "cahbraling" + ] + }, + "Web/Web_Components": { + "modified": "2020-10-19T12:17:25.927Z", + "contributors": [ + "guciano" + ] + } +} \ No newline at end of file diff --git a/files/id/archive/add-ons/index.html b/files/id/archive/add-ons/index.html new file mode 100644 index 0000000000..acb2f057f2 --- /dev/null +++ b/files/id/archive/add-ons/index.html @@ -0,0 +1,11 @@ +--- +title: Add-ons +slug: Archive/Add-ons +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons +--- +

Archived add-ons documentation.

+ +

Add-on SDK
Using the Add-on SDK, you can create Firefox add-ons. You can use various standard Web technologies: JavaScript, HTML, and CSS, to create the add-ons. The SDK includes JavaScript APIs, which you can use to create add-ons and tools for creating, running, testing, and packaging add-ons.
bookmarks.export()
Exports bookmarks to an HTML bookmark file.
bookmarks.import()
Imports bookmarks from an HTML bookmark file.
Bootstrapped extensions
browser.bookmarks.export( function() {...} // optional function )
Code snippets
Creating custom Firefox extensions with the Mozilla build system
There is a wealth of material on creating extensions for Firefox. All of these documents currently assume, however, that you are developing your extension using XUL and JavaScript only. For complex extensions, it may be necessary to create components in C++ that provide additional functionality. Reasons why you might want to include C++ components in your extension include:
Extension Etiquette
This article describes best practices when making extensions, including how to be kind to your users. It assumes that you are already familiar with Building an Extension.
Extension Packaging
By the end of 2017 WebExtensions will be the only supported add-on type in Firefox. To learn how to install a WebExtension for testing purposes, see Temporary Installation in Firefox. To learn how to package a WebExtension for distribution, see Publishing your WebExtension.
Extensions support in SeaMonkey 2
Starting with SeaMonkey 2 Alpha 1 SeaMonkey supports toolkit/-style extensions. These type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions.
Firefox addons developer guide
The original document is in Japanese and distributed via the xuldev.org website. So there may be still some reference to the xuldev website (we want to host source code on MDC, not on xuldev), and to Japanese things (like some specific locales, which have been translated to French since non-latin characters are not well supported).
Hotfix Extension
This document has been moved to the Add-ons wiki.
How to convert an overlay extension to restartless
First off, what kind of add-on are we talking about here? Well, XUL overlays and windows, JSM files, chrome & resource mappings with localization, default preferences, but no XPCOM components of your own. Some of that will have to be replaced and the rest will need to be loaded differently.
Inline options
Firefox 7 supports a new syntax for defining extensions' preferences for both bootstrapped and traditional extensions. The user interface for the preferences defined with this new syntax appears in the extension's detail view in the Add-on Manager. This functionality originally appeared in Firefox mobile and is now available in Firefox on the desktop as well.
Install Manifests
An Install Manifest is the file an Add-on Manager-enabled XUL application (e.g. Firefox or Thunderbird) uses to determine information about an add-on as it is being installed. It contains metadata identifying the add-on, providing information about who created it, where more information can be found about it, which versions of what applications it is compatible with, how it should be updated, and so on.
Interaction between privileged and non-privileged pages
An easy way to send data from a web page to an extension is by using custom DOM events. In your extension's browser.xul overlay, write code which listens for a custom DOM event. Here we call the event MyExtensionEvent.
Legacy Add-ons
This section contains links to documentation for legacy technology for add-on development, including:
Legacy extensions for Firefox for Android
Add-ons that work with desktop Firefox do not automatically work in Firefox for Android:
Overlay extensions
This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:
Performance best practices in extensions
One of Firefox's great advantages is its extreme extensibility. Extensions can do almost anything. There is a down side to this: poorly written extensions can have a severe impact on the browsing experience, including on the overall performance of Firefox itself. This article offers some best practices and suggestions that can not only improve the performance and speed of your extension, but also of Firefox itself.
Security best practices in extensions
This document is intended as a guide for developers to promote best practices in securing your extension. Your goal is to keep your users safe. Some items mentioned are strict guidelines, meaning that if you don't follow them then your add-on will not be approved on Mozilla add-ons. Other items are recommendations. The difference will be clearly flagged.
Setting up an extension development environment
This article provides suggestions for how to set up your Mozilla application for extension development. These details apply to Firefox, Thunderbird, and SeaMonkey (version 2.0 and above).
Tabbed browser
Here you should find a set of useful code snippets to help you work with Firefox's tabbed browser. The comments normally mark where you should be inserting your own code.
Techniques
.
Working with multiprocess Firefox
In older versions of Firefox, chrome code (including code inserted by extensions) and content run in the same operating system process. So extensions can access content directly:

diff --git a/files/id/archive/b2g_os/developing_firefox_os/index.html b/files/id/archive/b2g_os/developing_firefox_os/index.html new file mode 100644 index 0000000000..d36360d6fa --- /dev/null +++ b/files/id/archive/b2g_os/developing_firefox_os/index.html @@ -0,0 +1,51 @@ +--- +title: Developing Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS +tags: + - B2G + - Developing + - Firefox OS + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Developing_Firefox_OS +--- +
+

Bagian ini memberikan dokumentasi yang berguna yang mencakup berbagai cara di mana OS Firefox (codename Boot2Gecko, atau B2G) dapat dimodifikasi / disesuaikan selama proses pembuatan, dan bagaimana Anda dapat membantu mengembangkan area platform tingkat rendah seperti Gecko dan Gonk.

+
+ +
+

Catatan: Jika Anda secara khusus tertarik untuk membantu mengembangkan Gaia, antarmuka pengguna Firefox OS, Anda harus berkonsultasi dengan halaman Mengembangkan Gaia kami.

+
+ +

Catatan Kontribusi Umum

+ +

Karena Gecko adalah bagian integral dari browser Firefox, berkontribusi pada komponen yang terkait dengan Firefox Gecko adalah proses yang mirip dengan Gecko pada umumnya; Menyumbang Gonk juga lumayan mirip. Pada dasarnya, Anda perlu mengenal komunitas, pelajari bagaimana basis kode bekerja, dan temukan bug untuk dikerjakan. Tempat yang baik untuk mulai mendapatkan penghasilan tentang proses kontribusi Kontribusi pada basis kode Mozilla.

+ +

Anda harus belajar tentang Gecko — cara kerjanya dan bagaimana strukturnya. Halaman awal MDN Gecko memiliki beberapa catatan yang berguna pada ini, seperti halnya Gecko: halaman Tinjauan pada Mozilla Wiki. Untuk informasi tentang API (Spesifik Mozilla OS), lihat halaman Wiki WebAPI untuk ringkasan pekerjaan, dan halaman MDN WebAPI untuk indeks semua API yang terdokumentasi.

+ +

Next, look at Gonk, the kernel that Firefox OS runs on top of. Gonk is basically another porting target for Gecko, just like Mac OS X, Windows and Linux are in the case of Desktop Firefox versions. Gonk itself is really just a stripped down version of the Android Open Source Project — we tend not to change much of Gonk itself since most of the source code isn't under our control, and the device partners we work with to create Firefox OS devices usually provide device-specific code to interface between the device and Gecko/Gonk.

+ +

There is still work to be done on APIs, however. Most Gonk-specific Gecko code either uses #ifdef MOZ_WIDGET_GONK to only enable it in Firefox OS, and/or are contained in gonk subdirectories, such as gecko-dev/hal/gonk. Try cloning the gecko-dev repo locally and having a look around. Our Mozilla Source Code Directory Structure article is also useful.

+ +

Next, you should learn more about Firefox OS architecture, how to Build Firefox OS (start with the Firefox OS build process summary), and how to Port Firefox OS to other devices.

+ +

Firefox OS is developed as a series of separate Modules: review the Firefox OS Modules page to get an idea of how the codebase is grouped, and learn who the main module owners are so you can get an idea of who to talk to if you need help.

+ +
+

Note: To find help, the best places to start are the dev-b2g mailing list, and the #b2g chatroom on Mozilla IRC.

+
+ +

Specific Firefox OS development topics

+ +
+
Filing bugs against Firefox OS
+
This article provides a guide to filing bugs against any aspect of Firefox OS.
+
Modifying the hosts file
+
A guide to what can be achieved by modifying the Firefox OS hosts file.
+
Customization with the .userconfig file
+
How to customize the build and execution of Firefox OS by changing the .userconfig file.
+
Customizing the b2g.sh script
+
An explanation of what can be achieved by customizing the b2g.sh script, which runs the b2g application and controls many aspects of the system.
+
Customizing DNS
+
This article outlines a procedure to change the DNS servers for all interfaces (wifi, cellular, etc.) on a Firefox OS device.
+
diff --git a/files/id/archive/b2g_os/developing_firefox_os/porting/index.html b/files/id/archive/b2g_os/developing_firefox_os/porting/index.html new file mode 100644 index 0000000000..33d147813a --- /dev/null +++ b/files/id/archive/b2g_os/developing_firefox_os/porting/index.html @@ -0,0 +1,123 @@ +--- +title: Porting Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS/Porting +translation_of: Archive/B2G_OS/Porting_B2G_OS/basics +--- +
+

Firefox OS (formerly Boot to Gecko) uses a kernel derived from Android, with a Gecko-based user interface on top of it. This article provides a basic guide to how to go about porting the operating system to new devices.

+
+

This guide assumes you're porting to a new device that already runs Android; if you're porting to another device, the job is going to be more involved.

+

Set up your build system

+

The first step is to configure your build system; you can follow the guide in Firefox OS build prerequisites.

+

Create a local backup of the original Android system

+

Next, you should back up your Android device before you start nuking it with your test builds of B2G. In addition, some of these bits will be needed by the build and install process.

+
mkdir my_device_backup
+cd my_device_backup
+adb pull /system system
+

Clone the B2G repositories

+

The first step is to clone the B2G repository as well as the repository with the manifests.

+
git clone https://github.com/mozilla-b2g/B2G.git
+git clone https://github.com/mozilla-b2g/b2g-manifest.git
+

Add a new device to config.sh

+

The next step is to add a new device to config.sh in the B2G repository;  you can use the existing ones as a template. This basically involves providing the instructions for fetching the correct files to do the build.

+

Create a manifest for the new device

+

Now you need to add a manifest file for the new device. Refer to one of the existing manifests for a template. You can use the hamachi manifest a reference. Once done, you should add and commit your new manifest to your local b2g-manifest repository:

+
git add my-new-device.xml
+git commit
+
+

Next, you will want the config.sh file to use your local b2g-manifest repository instead of the official one. To achieve this, change the values of the GITREPO and BRANCH variables in the config.sh file to the location of your local repository and desired branch, for example:

+
GITREPO=${GITREPO:-"file:///home/yourname/b2g-manifest"}
+BRANCH=${BRANCH:-master}
+

Create a configuration tree for the new device

+

Create a new configuration tree for the new device. This should be at device/<manufacturer>/<device_id>. This tree should include, at least:

+ +

The content here may differ a great deal from one device to another. In particular, BoardConfig.mk and extract-files.sh may differ significantly. This part requires a lot of hacking, testing, and debugging to figure out which binary blobs should be extracted. To get a better idea what is supposed to be contained there, take a look at the configuration for the hamachi device. Remember to correctly reference your own configuration tree from the manifest you created for your new device.

+
+

Note: If you can find an existing reference on CyanogenMod for your device, this information will speed up the porting process. the XDA Forum is another good place to discuss and check for resources.

+
+

Rebuild boot.img

+

Once you have all that done, you need to rebuild the boot image. This isn't usually needed for the kernel itself, but to pick up the changes to init.rc.

+

Changes to init.rc

+

The init.rc you use is not the one provided by B2G; instead, you need to pull it from the device.

+

The main things you'll need to modify are:

+

Import init.b2g.rc

+

Add the following lines to import init.b2g.rc:

+
on early-init
+    start ueventd
+    import /init.b2g.rc
+

Fix permissions

+

Correct the permissions on the files /system/b2g/b2g, /system/b2g/updater, /system/b2g/plugin-container; this should be done after the lines that mount the filesystem read/write:

+
chmod 0755 /system/b2g/b2g
+chmod 0755 /system/b2g/updater
+chmod 0755 /system/b2g/plugin-container
+

You might want to start by modifying the init.rc from the new device instead of using the init.rc provided by the build system; if so, you need to remember to set TARGET_PROVIDES_INIT_RC in BoardConfig.mk.

+

Prebuilt kernel vs. building the kernel from source

+

You can use a prebuilt kernel, or you may build the kernel from source. To build the kernel from source, add AndroidKernel.mk and the kernel config to the device configuration tree.

+

The maguro on the old build system is an example that builds the kernel from source.

+

Extracting and modifying an existing boot image

+

It is possible to recover the boot image of a phone by dumping the contents of the /dev/mtd/mtd1 or /dev/mtd/mtd2 devices, the resulting image file can then be easily recovered:

+
adb shell 'cat /dev/mtd/mtd1 > /sdcard/boot.img'
+adb pull /sdcard/boot.img
+
+

Once the boot image file has been obtained it can be unpacked via a helper tool such as unmkbootimg. The tool will extract both the kernel image (zImage) and the ramdisk (initramfs.cpio.gz) as well as printing out a command to rebuild the image with the same parameters of the original one, for example:

+
$ unmkbootimg boot.img
+Kernel size 3872576
+Kernel address 0x208000
+Ramdisk size 265102
+Ramdisk address 0x1500000
+Secondary size 0
+Secondary address 0x1100000
+Kernel tags address 0x200100
+Flash page size 2048
+Board name is ""
+Command line "androidboot.hardware=aphone"
+Extracting kernel to file zImage ...
+Extracting root filesystem to file initramfs.cpio.gz ...
+All done.
+---------------
+To recompile this image, use:
+  mkbootimg --kernel zImage --ramdisk initramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o new_boot.img
+---------------
+
+

To modify the ramdisk file create an output directory and extract it there:

+
mkdir initramfs_dir
+cd initramfs_dir
+gunzip -c ../initramfs.cpio.gz | cpio -i
+
+

Make all the required changes (such as modifying init.rc) and repack the ramdisk using mkbootfs, be sure to use the version that has been built with the B2G host tools:

+
/path/to/your/B2G/out/host/linux-x86/bin/mkbootfs . | gzip > ../newinitramfs.cpio.gz
+
+

Finally go back to the top-level directory and re-pack the boot image using the mkbootimg, also make sure you're using the version built with the other B2G host tools:

+
/path/to/your/B2G/out/host/linux-x86/bin/mkbootimg --kernel zImage --ramdisk newinitramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o newboot.img
+
+

If you now copy the new boot image under out/target/product/$DEVICE/boot.img (where $DEVICE is your device name) it will be automatically flashed when invoking flash.sh. Alternatively you can flash it by hand with the following commands:

+
adb reboot bootloader
+fastboot flash boot newboot.img
+fastboot reboot
+
+

Add the new device to flash.sh

+

Add the new device to flash.sh; the specifics of how to do this will depend on what tools need to be used to flash the new device.

+

Configure, build, and flash the new device

+

Now you can try building for and flashing to your new device:

+
ANDROIDFS_DIR=my_device_backup ./config.sh <device_id> '../b2g-manifest/default.xml'
+./build.sh
+./flash.sh
+

Test and debug

+

We need some details added here; indeed, this entire article could use some help.

+

FAQ

+

Forthcoming

+

See also

+ diff --git a/files/id/archive/b2g_os/firefox_os_apps/index.html b/files/id/archive/b2g_os/firefox_os_apps/index.html new file mode 100644 index 0000000000..370236dd14 --- /dev/null +++ b/files/id/archive/b2g_os/firefox_os_apps/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox OS apps +slug: Archive/B2G_OS/Firefox_OS_apps +tags: + - Apps + - Building + - Components + - Firefox OS + - Installing + - NeedsTranslation + - TopicStub + - device APIs +translation_of: Archive/B2G_OS/Firefox_OS_apps +--- +

This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.

+ +

Building Firefox OS apps

+ +
+
Building apps for Firefox OS
+
Firefox OS/Firefox platform app specifics, including App installation and management APIs, manifest files, packaged and hosted apps, handling API permissions.
+
Localization
+
This set of articles provides information for developers wishing to provide localized versions of their apps.
+
Performance
+
This page lists performance-related topics specific to Firefox OS.
+
Firefox Accounts on Firefox OS
+
This article provides an overview of using Firefox Accounts in Firefox OS.
+
Reference apps
+
This page lists a number of sample apps we've put together for you to download, install, play with and learn from. Have fun!
+
Screencast series: App Basics for Firefox OS
+
In this collection of short videos, developers from Mozilla and Telenor explain in a few steps how you can get started with building applications for Firefox OS.
+
+ +

Building blocks

+ +
+
Building Blocks
+
The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all Gaia default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.
+
+ +

Styleguides

+ +
+
Firefox OS Visual styleguide
+
Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.
+
Firefox OS Copy styleguide
+
This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.
+
Firefox OS in Arabic
+
A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)
+
+ +

Assets

+ +
+
Firefox OS design asset library
+
In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.
+
Firefox OS icon font
+
Firefox OS has its own icon font set available: this article explains how to use it in your own apps.
+
Firefox OS transitions
+
A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.
+
+ +

References

+ +
+
Firefox OS device APIs
+
This article provides a list of pages covering those APIs, as well as the app manifest permissions for each one.
+
Firefox OS app tools
+
This page provides a list of useful tools, libraries, examples, etc. that are useful for Firefox OS app developers, whether you want a code template to copy, or need help with adding a specific feature to your Firefox OS app.
+
+ +

Other app topics

+ +
+
Porting Chrome apps to Firefox OS Apps
+
This article discusses the differences between Chrome apps and Firefox OS Apps, and how you can convert between the two.
+
App development FAQ
+
This FAQ is a compilation of answers to common app development questions.
+
+ +

See also

+ + diff --git a/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html b/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html new file mode 100644 index 0000000000..acb5aeb487 --- /dev/null +++ b/files/id/archive/b2g_os/firefox_os_apps/pelokalan/index.html @@ -0,0 +1,92 @@ +--- +title: Pelokalan aplikasi +slug: Archive/B2G_OS/Firefox_OS_apps/Pelokalan +translation_of: Archive/B2G_OS/Firefox_OS_apps/Localization +--- +

+ +
+

This set of articles provides information for developers wishing to provide localized versions of their apps.

+
+ +

Tutorials

+ +
+
Getting started with app localization
+
This tutorial provides a detailed guide to app localization.
+
Connecting developers and translators with Transifex
+
This article explores the use of Transifex for managing translation work, both for app developers and localizers.
+
+ +

Reference

+ +
+
L10n.js reference
+
This article provides a reference for the l10n.js library, and its associated date helper, l10n_date.js.
+
Internationalization helpers: IntlHelper and mozIntl
+
This article looks at how Firefox OS handles localization of dates, times, numbers and collators from version 2.5 onwards, using the Internationalization API and Gaia's built in helpers, IntlHelper and mozIntl.
+
App localization code best practices
+
Localization best practices and advanced techniques for experienced Gaia/app developers.
+
Developing Bidi Apps
+
Best coding practices and guidelines for developing bi-directional (left-to-right and right-to-left, RTL) apps.
+
+ +

Tools

+ +
+
Translation tester
+
This app is for testing translations for Firefox OS apps and provides a blueprint for adding translation support to your own apps.
+
diff --git a/files/id/archive/b2g_os/index.html b/files/id/archive/b2g_os/index.html new file mode 100644 index 0000000000..5d4a5149dc --- /dev/null +++ b/files/id/archive/b2g_os/index.html @@ -0,0 +1,79 @@ +--- +title: Firefox OS +slug: Archive/B2G_OS +tags: + - Boot to Gecko + - Firefox OS + - Gaia +translation_of: Archive/B2G_OS +--- +

Firefox OS (kadang-kadang disingkat FxOS) adalah sistem operasi mobile baru yang dikembangkan oleh Mozilla. menggunakan kernel Linux dan mesin berbasis Gecko, yang memungkinkan pengguna menjalankan aplikasi yang dikembangkan seluruhnya menggunakan HTML, JavaScript, dan open web application APIs lainnya.

+ +

Firefox OS saat ini dalam pengembangan besar; kami terus bekerja untuk membuatnya lebih mudah digunakan dan hack pada Gaia (aplikasi standar) dan membuat sendiri. Namun, Anda perlu pengetahuan tentang sistem untuk melakukan hal-hal seperti membangun Firefox OS stack, atau memasang Firefox OS kedalam handphne Anda. Link dibawah ini adalah panduan untuk pengembang web yang tertarik menjalankan dan membuat peribahan untuk Gaia atau mengembangkan aplikasi untuk berjalan di perangkat Firefox OS.

+ + + + + + + + +
+

Dokumentasi tentang Firefox OS

+ +
+
Pengantar Firefox OS
+
Informasi pengantar tentang apa itu Firefox OS dan bagaimana cara kerjanya.
+
Tips dan trik Firefox OS
+
Beberapa artikel pendek tentang tips dan trik yang berguna untuk mengetahui Firefox OS disaat melakukan hacking.
+
Menulis aplikasi untuk Firefox OS
+
Dokumentasi tentang membuat aplikasi Firefox OS.
+
Pusat pengembang
+
Kumpulan peralatan, tutorial, dan layanan untuk pengembang aplikasi Firefox OS.
+
UX (Pengalaman pengguna)
+
Panduan untuk Gaya user experience desain, maupun pola kode dan template untuk membantu Anda membuat aplikasi Firefox OS yang menarik dan konsisten.
+
Platform Firefox OS
+
Dokumentasi tentang platform Firefox OS, termasuk Gonk, Gaia, dan lainnya. Ini termasuk dokumentasi untuk membangun dan memasang platform ke perangkat, serta membangun simulator dan emulator.
+
Keamanan
+
Dokumentasi tentang keamnan  di Firefox OS; ini termasuk topik tentang keamanan perangkat dari setiap perspektif: untuk pengembang aplikasi, perangkat integrator, dan sebagainya.
+
Performa
+
Artikel tentang mengoptimalisasi aplikasi Firefox OS.
+
Pemecahan Masalah
+
Panduan untuk mengatasi masalah umum pada Firefox OS.
+
Debugging pada Firefox OS
+
Panduan untuk debugging aplikasi mobile dan Firefox OS itu sendiri.
+
Panduan untuk  Firefox OS developer phone
+
Panduan untuk Firefox OS developer phones, Mozilla memberikan telepon ke beberapa pengembang. Panduan ini juga berlaku jika sesorang memasang Firefox OS ke teleponnya
+
+ +

Lihat Semua...

+ 		+

Dapatkan bantuan dari komunitas

+ +

Jika Anda bekerja dengan Firefox OS, atau mengembangkan aplikasi yang ingin dijalankan di perangkat Firefox OS, ada komunitas yang akan membantu Anda!

+ +
    +
  • Ajukan pertanyaan Anda ke Mozilla Boot to Gecko IRC channel: #b2g
    • +
+ +

Jangan lupa tentang netiquette...

+ + + + + + +

Sumber Lain

+ + +
diff --git a/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html b/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html new file mode 100644 index 0000000000..9ee7eb6251 --- /dev/null +++ b/files/id/archive/b2g_os/installing_on_a_mobile_device/index.html @@ -0,0 +1,100 @@ +--- +title: Installing Firefox OS on a mobile device +slug: Archive/B2G_OS/Installing_on_a_mobile_device +translation_of: Archive/B2G_OS/Installing_on_a_mobile_device +--- +
+

Once you've built Boot to Gecko for a supported mobile device, you can install it. This article will guide you through the process.

+
+
+ Note: The first time you flash your phone, it must have Android 4 (Ice Cream Sandwich) installed. The process will not work correctly otherwise. Once you've done your first install of B2G, however, you can simply update on top of it.
+

Installing ADB

+

On OSX

+

If you have homebrew on OSX:

+
brew install android-platform-tools
+

Otherwise, download the Android Developer Tools and add the binaries to your PATH.

+

On Ubuntu

+
sudo apt-get install android-tools-adb
+

Flashing your phone

+

To flash everything to your phone, simply connect your phone and type:

+
./flash.sh
+
+

That's it. The B2G you've currently got built will flash onto your device.

+

Note that If you are updating across revisions with significant Gaia changes, you might need also do:

+
cd gaia
+make reset-gaia
+

This will wipe all of your data stored in Gaia, but also clear out obsolete Gaia settings and prefs so that you'll boot into a "clean" Gaia. In theory ./flash.sh should do this already, but for some devices (e.g. hamachi) ./flash.sh only flashes a subset of modules (./flash.sh -f will force flash everything.)

+

Configuring the udev rule for your device

+

On Linux, if you get this,

+
< waiting for device >
+

that probably means that you haven't added a udev rule for the fastboot device, which is not the same as the one for adb. (Though it also might just mean you need to run ./flash.sh with sudo) You can get the USB vendor ID by running lsusb now, but typically it's Google's: 18d1, so adding this line in your /etc/udev/rules.d/51-android.rules would work:

+
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"
+
+ Note: If you get a very helpful libusb error "-3" on Linux, it means you need to be root to have the needed access to the USB device. Run the script again using sudo.
+
+ Note 2: If you have an Unagi or a Geeksphone Keon phone, you need two lines like this - one for the original phone vendor's ID, and one for Google's.
+

Special notes for Hamachi, Helix, and Leo devices

+

If your phone is a hamachi, helix or leo device, the ./flash.sh script will now default to flashing only gecko and gaia.  It is recommended that you flash with the OEM as a base build to get the firmware and the gonk layers and then flash the gecko and gaia on top.  If you want to flash using the images, there is an override flash where you can ./flash.sh -f and it will use the image files to flash your device.

+

Special notes for the Samsung Galaxy S2

+

If your phone is a Galaxy S2 and you are using heimdall 1.3.2 (the latest version; use heimdall version to check), you may see an alarming error "FACTORYFS upload failed!" followed by "Heimdall flashing failed" and some additional information. This is actually a success condition, and you can ignore the advice.

+

To get rid of this strange behavior, grab a source copy of heimdall, downgrading to the 1.3.1 release ("git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06"), then compile it  according to the README, then install that to make the error go away. However, this isn't strictly necessary.

+
+

Note: the image size may not a problem. see the next tip

+
+

All versions of heimdall are unable to flash a system.img larger than 100MB. Do:

+
ls -l ./out/target/product/galaxys2/system.img
+
+

to see how big yours is. If it's too large, ask in IRC for advice; there are ways to do it in two stages.

+

The argument of heimdall command may not work and result in fail when trying to flash. You'll need to change it in the ./flash.sh script, the argument must be in uppercase (l.185) :

+
case $project in
+        "system")
+                $HEIMDALL flash --FACTORYFS out/target/product/$DEVICE/$project.img
+                ;;
+
+        "kernel")
+                $HEIMDALL flash --KERNEL device/samsung/$DEVICE/kernel
+                ;;
+
+        "")
+                $HEIMDALL flash --FACTORYFS out/target/product/$DEVICE/system.img --KERNEL device/samsung/$DEVICE/kernel &&
+                update_time
+                ;;
+        esac
+

 

+

Added step for the Samsung Galaxy S2

+

If you're flashing onto the Galaxy S2, there is an additional step to follow. Gaia does not get flashed automatically by the flash.sh script; you'll need to also do:

+
./flash.sh gaia
+
+

Flashing specific partitions to fastboot phones

+

You can flash specific partitions to fastboot phones (that is, any phone other than the Samsung Galaxy S2). For example:

+
./flash.sh system
+./flash.sh boot
+./flash.sh user
+
+

WARNING: flashing user (at least) may delete your user-specific data (contacts, etc.).

+

Updating specific modules

+

You can update specific components of B2G by specifying their names when flashing. For example:

+
./flash.sh gaia
+./flash.sh gecko
+
+

In order to update only one application you can use BUILD_APP_NAME environment variable:

+
BUILD_APP_NAME=calendar ./flash.sh gaia
+

If your phone is not for developer (you aren't interested on test apps and/or require optimization), you can update gaia using:

+
VARIANT=user ./flash.sh gaia
+

Next steps

+

At this point, your phone should be running Boot to Gecko! It's time to experiment, write some code, test, or do some debugging!

+
+ Note: A helpful usage tip: if your build of B2G starts up with the lock screen requesting a pass code to unlock the phone, the default code is 0000.
+

Troubleshooting

+

Here are a some tips for what to do if your device doesn't work right after installing B2G, or updating it to a new version

+

If the UI doesn't start up

+

If you update your phone and the user interface doesn't start up, you can reset it to clear out out-of-date configuration and the like. This may bring it back to life, but note that it may also delete your user-specific data (contacts, etc.). Here's how:

+
cd gaia
+make reset-gaia
+
+

If you want change from developer to production mode

+
cd gaia
+make reset-gaia PRODUCTION=1
+

WARNING: reset-gaia may delete your user-specific data (contacts, etc.).

+

"image is too large" error message on ./flash.sh execution

+

It might mean that you phone needs to be rooted first before flashing it. As b2g needs to be written on root partition, your phone needs to be rooted in order to install it.

diff --git a/files/id/archive/b2g_os/introduction/index.html b/files/id/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..1c113d8712 --- /dev/null +++ b/files/id/archive/b2g_os/introduction/index.html @@ -0,0 +1,88 @@ +--- +title: Pengantar Firefox OS +slug: Archive/B2G_OS/Introduction +tags: + - B2G + - Firefox OS +translation_of: Archive/B2G_OS/Introduction +--- +

Firefox OS (juga disebut dengan codename "Boot to Gecko" atau "B2G") adalah sistem operasi open source Mozilla berbasis Linux dan teknologi Mozilla Gecko. Firefox OS adalah sistem operasi mobile yang bebas dari teknologi ekslusif saat ini menjadi platform yang kuat yang memberikan pengembang aplikasi kesempatan untuk menciptakan produk unggulan Selain itu, Firefox OS fleksibel dan cukup mampu membuat pengguna bahagia.

+

Untuk pengembang Web bagian yang paling penting untuk dipahami adalah bahwa seluruh antarmuka pengguna adalah aplikasi web, yang mampu menampilkan dan meluncurkan aplikasi Web lainnya. Modifikasi yang Anda buat ke antarmuka pengguna dan aplikasi yang Anda buat untuk berjalan di Firefox OS adalah halaman Web, meskipun dengan meningkatkan akses ke perangkat kerasa dan layanan mobile.

+

Anda dapat belajar bagaimana membangun dan memasang Firefox OS dengan mengikuti panduan praktis kami.

+

Persyaratan perangkat keras

+

Perangakat mobile berbasis ARM terbaru cukup kuat untuk mendukung proting Firefox OS. Bagian ini mencakup persyaratan perangkat  keras dasar serta fitur perangkat keras yang direkomendasikan.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KomponenMinimumRekomendasi
CPUARMv6Cortex A5 class atau lebih
+ ARMv7a dengan NEON
GPU—Adreno 200 class atau lebih
Connectivity—WiFi
+ 3G
Sensors—Accelerometer
+ Proximity
+ Ambient light
+ A-GPS
+

Untuk pengalaman pengguna yang baik, itu ide yang baik untuk memilih perangakat yang menawarkan profil warna seragam (Implementasi dengan graphics device driver) dan dukungan headphone untuk mematikan dan menyalakan dan untuk menghentikan dan memutar media. Fitur ini umumnya ada di kalangan smartphone modern.

+

Tips penggunaan

+

Bagian ini  memberikan beberapa tips yang akan membantu Anda menggunakan Firefox OS. Ini adalah penampung sampai kita memiliki dokumentasi penggunaan nyata.

+

Membuka Kunci telepone

+

Jika Anda membangun Firefox OS, pada saat dijalankan meminta kode pass untuk membuka kunci perangkat Anda, kode standar adalah 0000. Beberapa Firefox OS akan melakukan ini seraya kami mengembangkan dan menguki layar kunci.

+

Menangkap screenshot

+

Menangkap screenshot simpel dengan menekan tombol power dan home secara bersamaan. Gambar screenshot akan berada di /sdcard/screenshots pada perangkat Anda; Anda dapat mengaksesnya menggunakan aplikasi Galeri pada telepon Anda, juga.

+

Jika karena alasan tertentu tidak dapat bekerja, Anda juga dpaat melakukannya dari terminal Linux atau Mac OS X komputer yang memiliki sistem Firefox OS.

+
    +
  1. Pastikan Anda telah memasang aplikasi ffmpeg. +
      +
    1. Pada Mac, Jika Anda menggunakan, Anda dapat melakukan ini dengan sudo port install ffmpeg. untuk homebrew, jalankan brew install ffmpeg.
      2. +
    2. Pada Linux (Ubuntu/Debian), gunakan sudo apt-get install ffmpeg.
      3. +
    +
    2. +
  2. Sambungkan telepon ke komputer menggunakan kabel USB.
    3. +
  3. Arahkan telepon Anda kedalam situasi apapun yang ingin Anda screenshot.
    4. +
  4. cd ke direktori B2G/gaia
    5. +
  5. make screenshot
    6. +
  6. Anda sekarang memiliki screenshot bernama screenshot.png.
    7. +
+

Remote debugging dengan ADB

+

Untuk mengaktifkan USB Debugging via adb, buka aplikasi Pengaturan dan arahkan ke Informasi Pernagkat > Informasi Lebih Lanjut > Pengembang. Dari daftar, berikan tanda centang pada Remote Debugging. Terakhir, hubungkan perankat via USB dengan komputer Anda.

+

Tombol dan kontrol

+

sebuah perangkat Firefox OS memiliki sejumlah tombol fisik:

+
+
+ Tombol Home
+
+ Tombol ini umumnya berpusat dibawah layar. Menekannya akan mengembalikan Anda ke peluncur aplikasi. Menekannya secara lama membuka tampilan card switching; gesekan ke atas pada tampilan tersebut akan hilang.
+
+ Volume rocker kontrol
+
+ Pada sisi kiri adalah volume rocker; Menekan bagian atas dari rocker akan meningkatkan volume dan menekan bagian bawah akan menurunkan volume.
+
+ Tombol Power
+
+ Tombol power berada di pojok kanan atas perangkat.
+
diff --git a/files/id/archive/b2g_os/phone_guide/flame/index.html b/files/id/archive/b2g_os/phone_guide/flame/index.html new file mode 100644 index 0000000000..697980244f --- /dev/null +++ b/files/id/archive/b2g_os/phone_guide/flame/index.html @@ -0,0 +1,73 @@ +--- +title: Flame +slug: Archive/B2G_OS/Phone_guide/Flame +tags: + - B2G + - Firefox OS + - Flame + - NeedsTranslation + - TopicStub + - developer phone + - official reference device +translation_of: Archive/B2G_OS/Phone_guide/Flame +--- +

A picture of the Flame device, showing the Firefox OS homescreen containing several app icons.

+ +

The Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps. This guide provides basic information about its hardware specifications as well as practical documentation specific to experimenting with, developing for, and testing of software compatible with this phone.

+ +

The Flame hardware offers a representative set of specs — including FWVGA display and dual-core processor — to help developers build great content and experiences. A stable hardware platform is also good for testers, making it easier to test and address specific software issues without having to worry about device model-specific bugs, etc.

+ +

If you have your phone in hand and want to start playing with it, developing and distributing apps, or contributing to the Firefox platform, the following links will also get you where you need to go:

+ + + +

If you’d like to find out more about updating the operating system, recovering it, pushing apps to it, or phone specs, you’ll find the information you need at the following two articles :

+ + + +

Get a device

+ +

Flame sales have come to an end. There are still opportunities left for Mozilla contributors to get free Flames, including the upcoming Foxtrot program. If you have questions about getting a device for development or testing, please reach out to Asa Dotzler on the #fxos channel on IRC.

+ +

Device specifications

+ +

You can find more of the device specifications listed on our Phone and device specs page.

+ +

Network

+ + + +

Hardware

+ + + +

See also

+ + diff --git a/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html b/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html new file mode 100644 index 0000000000..f3ca1ae59c --- /dev/null +++ b/files/id/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html @@ -0,0 +1,411 @@ +--- +title: Updating your Flame +slug: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame +translation_of: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame +--- +
+

This article covers how to update the software on your Flame — including updating Firefox OS and pushing new apps to your phone — along with backing up your data, and other useful troubleshooting and testing information. Before starting to do any of this, you should make sure you have run through the Initial setup information.

+
+ +

Quick guide to updating your device

+ +

There is a lot of information in this article, so here we've included a quick start guide that takes you through the steps you need quickly to get your device updated. You can refer to the below sections for more detail if it is needed.

+ +

Full flash to the latest base image

+ +

This set of steps needs to be done before you do anything else to your phone (see {{anch("Base image")}} and {{anch("Base image installation")}} if you require more details.)

+ +
Prerequisites: Make sure you have adb and fastboot installed and available in your system's PATH (see Installing ADB and Fastboot.)
+ 
+ +
    +
  1. Download the latest base image —Base image v18D_nightly_v4 — to your computer.
    2. +
  2. On your Flame device, enable remote debugging by navigating to Settings > Developer and enabling the Debugging via USB option.
    3. +
  3. Connect your Flame to your computer via a USB cable.
    4. +
  4. Verify that the computer is connected to the device by typing this command: + 
    adb devices  
+
    + You should see something like the following: + + 
    List of devices attached
+94f7ce4c    device
    + If you don't see your device attached (no second line), then try unplugging and replugging the USB cable and trying again; also check that Debugging via USB is enabled on the phone as mentioned in step 2. If you get a message saying that adb could not be found, you probably haven't set your path correctly (see prerequisites.)
    5. +
  5. Extract the base image zip file and navigate to the new directory, using for example: + 
    cd v18D_nightly_v4
    +
    6. +
  6. Run the flashing script by running the correct below command for your system + 
    # Windows
+flash.bat
+
+# Linux / OSX
+./flash.sh
    +
    7. +
+ +
+

Note: if you don't see the right filename for your system, you can rename flash.bat or flash.sh back and forth as needed. The contents are the same.

+
+ +
+

Note: Verify the contents of the base image using the checksum below:

+ +
Checksum: SHA512(v18D_nightly_v4.zip)= 9105e29fd39da1ae487b01da4431a803d619d31482147b4383002b8a10268905fd444b108a438395a78d289cfe4e8fba10c3fb6b0d187f3535f027bf90c2391a Build id: 20150527010201
+
+ +

At this point you should be on the latest 2.5 base image, and be able to receive OTA updates.

+ +
+

Note: if you want to be on the very latest builds of flame (that have not been smoke tested), go to settings -> developer, scroll down to the bottom, and change the channel to nightly-latest.  Reboot the device, then go back to settings -> device info and check for updates.  You can update to the latest version without having to shallow flash.  For shallow flashing see the next section.

+
+ +

Update channel reset bug

+ +

As mentioned in {{bug(1217490)}}, some Firefox OS testers testing Firefox OS 2.5 latest OTA updates (on Flame, but also on other dogfooding devices) may find that when they install an OTA update, their update channel is reset to nightly, meaning that they won’t receive subsequent OTA updates coming through other channels. To avoid this, it is recommended that you set your  update channel to nightly-latest in the Firefox OS settings via WebIDE. To do this:

+ +
    +
  1. Plug your phone into your computer via USB (make sure Debugging via USB is set to ADB and DevTools in the Phone's Developer Settings)
    2. +
  2. Go to Firefox Desktop and open WebIDE.
    3. +
  3. Connect WebIDE to your phone by selecting it under USB Devices. Accept the connection prompt that appears on your phone.
    4. +
  4. Under Other on the right hand side of the WebIDE UI, select Device Settings.
    5. +
  5. Find app.update.channel in the list, and change the setting value in the corresponding textbox to nightly-latest.
    6. +
  6. Find app.update.channel.backup and change the setting value to nightly-latest if you want it to persist after further updates.
    7. +
+ +

Shallow Flash to the latest Firefox OS nightly (Gaia and Gecko)

+ +

This set of steps only needs to be done if you want to update to the VERY latest builds (see {{anch("Updating your Flame to a nightly build")}} if you require more details.)

+ +
Prerequisites: Windows users will need to install Cygwin, which provides a Linux-like environment on Windows. The instructions below include steps for how to automatically install the appropriate packages if you don't already have it installed.
+ +
 
+ +
    +
  1. Download the latest build from Mozilla Central.  Download both the b2g-XX.XX.en-US.android-arm.tar.gz and gaia.zip files.
    2. +
  2. All platforms: Download the shallow flash script in the same directory as the build files.
    3. +
  3. Windows users: Also download the shallow_flash.bat Windows script in the same directory. If you don't already have Cygwin installed, also download the installation file (you don't have to run it, the shallow_flash.bat script will use the installer to automatically configure the necessary packages).
    4. +
  4. In your terminal, cd into the directory you saved the files in and flash the builds to your phone using the following: + 
    # Linux
+./shallow_flash.sh --gaia=gaia.zip --gecko=b2g-XX.XX.en-US.android-arm.tar.gz
+
+# Mac
+./shallow_flash.sh --gaia gaia.zip --gecko b2g-XX.XX.en-US.android-arm.tar.gz
+
+# Windows
+# You could also double click the shallow_flash.bat icon (with the cogs) from Windows Explorer.
+shallow_flash.bat
    +
    5. +
+ +

This process will flash gaia.zip and a single b2g-XX.XX.en-US.android-arm.tar.gz file onto your phone. The files will be sent to the device and it will reboot after the process completes.

+ +
+

Note : On Linux, if the script fails during flashing Gaia, you can try replacing full options by their shortened version to see if that helps. Replace --gaia=gaia.zip by -g gaia.zip and --gecko=b2g-XX.XX.en-US.android-arm.tar.gz by -G b2g-XX.XX.en-US.android-arm.tar.gz.

+
+ +

Updating & upgrading the Flame's software

+ +

We have two main "channels" of Firefox OS software version releases for the Flame phone:

+ + + +

Base Image

+ +

You can get recovery files and tools at the following storage locations:

+ +

Up-to-date (use these unless you have a good reason not to)

+ + + +
+

Note: You can find out what base image your device is running using the command adb shell getprop ro.bootloader. The version is the last four characters, with the last one then removed, prefixed by 'v' (e.g. L1TC000118D0 > v18D).

+
+ +
+

Important: When running a shallow or full flash, your phone data will be overwritten: you should therefore back up your data before updating! See the {{anch("Backing up and restoring your Flame data")}} section for more details.

+
+ +

Outdated

+ +

These base images are stable & production only.

+ + + +
+

Note: Using a locale with base image v188 produces a mixed UI with locale and English languages.

+
+ +
+

Note: Firefox OS images v180 and above are based on Android KK (Kitkat, 4.4); JB (Jellybean, 4.1–4.3) builds have now been discontinued and are no longer supported, so don't use anything older than v180.

+
+ +

Base Image installation

+ +

To install the base image on your device:

+ +
    +
  1. Make sure remote debugging is enabled on your Flame, using the Remote debugging/Debugging via USB option in the device's Developer settings (the option is different, depending on whether you have Firefox 1.3 and under, or Firefox 1.4+ installed).
    2. +
  2. Connect your Flame to your computer via a USB cable if it isn't already. Verify that the computer is connected to the device by running the adb devices command in a terminal.
    3. +
  3. Download the base image .zip file referenced above. Unzip it onto your Desktop.
    4. +
  4. Go into the directory you extracted the software into and run it: +
      +
    • On Windows, enter the directory in your command prompt, then run the flash.bat script using flash.bat (or double click the file in explorer).
      + Note: If flash.bat is missing, simply rename the flash.sh file to flash.bat, then run that. Make sure you have adb and fastboot installed and available on PATH.
      • +
    • On Linux / OSX, enter the directory in your terminal, then run the flash.sh script using ./flash.sh (previous instructions encouraged you to use sudo. Don't. It is really dangerous to use sudo with things you download from the Internet. If the flash script fails to see your device, please double-check that your udev rules are correct). If you do not see a flash.sh file, simply rename flash.bat to flash.sh first and then use the above command.
      • +
    +
    5. +
+ +
+

Note: If you get a "permission denied" error when running the above commands, your shell script probably doesn't have the right permissions. Running chmod +x flash.sh on it should solve this problem.

+
+ +
+

Note: If the flash script gets stuck at "< waiting for device >" while the display shows "ThunderSoft(R)", the script doesn't have permission to access the device while in fastboot mode. You need to setup the udev rules to give it access. Also USB 3 ports may not work well with fastboot and can be the cause of this problem.

+
+ +
+

Note: You are also welcome to build your own builds to install on the Flame: see Building and installing Firefox OS.

+
+ +

Font fix

+ +
+

Important: This step is only needed for base image v180.

+
+ +

After updating Gecko and Gaia to nightly with the v180 base image, there will be a mismatch between the fonts that Gecko and Gaia expects and what the base image provides (this has been fixed as of v188). To fix this, you have two choices:

+ + + +

Updating your Flame to a nightly build

+ +
+

Note: For the current build, Nightly development builds of Firefox OS do not support A-GPS, which may lead to slow performance of GPS functionality. We plan to resolve this in an updated future Nightly channel.

+
+ +
+

Important: When running a shallow or full flash, your phone data will be overwritten: you should therefore back up your data before updating! See the {{anch("Backing up and restoring your Flame data")}} section for more details.

+
+ +
    +
  1. Before updating your phone to a Nightly build you should flash the latest base image to make sure the underlying systems are up to date. Download a base image with the same or a higher version of Firefox OS than the version you intend to use in step 3 below and use it to update your device's software, as explained above.
    2. +
  2. Because the above step installs a fresh operating system on your device, you'll need to enable remote debugging on your Flame again, using the Remote debugging option in the device's Developer settings.
    3. +
  3. Next, choose a build to install (found on https://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/). You'll want one of the following: + +
    4. +
  4. Pick a version and download both the b2g-XX.XX.en-US.android-arm.tar.gz and gaia.zip files. Save them inside a directory on your Desktop called something like fxos.
    5. +
  5. Download the shallow flash script and save it in the same directory as the above two files.
    6. +
  6. For Windows users: Also download the shallow_flash.bat windows script and install Cygwin, which provides a Linux-like command environment on Windows. You will need to install the default Cygwin base category plus the unzip package but shallow_flash.bat will do this for you if you download and copy the Cygwin setup*.exe to the same folder as the script.
    7. +
  7. +

    In your Terminal, cd into the directory you saved the files in and Flash the builds to your phone using the following:

    + +

    Linux:

    + + 
    ./shallow_flash.sh --gaia=gaia.zip --gecko=b2g-XX.XX.en-US.android-arm.tar.gz
+
    + +

    Mac:

    + + 
    ./shallow_flash.sh --gaia gaia.zip --gecko b2g-XX.XX.en-US.android-arm.tar.gz
    + +

    Windows:

    + +

    Double click shallow_flash.bat (with the cogs icon) or run it from a command shell. It will flash gaia.zip and a single b2g-XX.XX.en-US.android-arm.tar.gz file.

    +
    8. +
+ +
+

Note: If your update fails with an error "Flashing out/target/product/flame/system.img failed because the image was too large.", you will need to update to the newest {{anch("Base Image","base image")}}, then try applying the nightly build again. This is because the system partition size has been updated (see {{Bug("1184980")}}.)

+
+ +
+

Note: If you get a "permission denied" error when running the above commands, your shell script probably doesn't have the right permissions. Running chmod +x shallow_flash.sh on it should solve this problem.

+
+ +
+

Note: A "shallow flash" updates Gecko and Gaia plus data directories, as opposed to a full flash, which updates Gecko/Gaia, but also the underlying Gonk layer and associated binaries particular to that device type. This is why it is a good idea to update to the official base image first, as suggested above, then shallow flash over the top of that, once you've got the Gonk/binary layer right.

+
+ +
+

Note: You can check the update status of each build on the Flame OTA status page.

+
+ +

Once the install procedure finishes the phone should reboot into the updated build and display the first time user workflow.

+ +

Switch to nightly update channel

+ +

In v2.2 you can change the Update channel from default to nightly under Developer settings.

+ +

Below is the older method, if you don't find that setting in your device.

+ +
    +
  1. Make sure remote debugging is enabled on your Flame, using the Remote debugging/Debugging via USB option in the device's Developer settings.
    2. +
  2. Download the change channel script: follow the link, press the Raw button, then use your browser's save functionality to save the page directly as change_channel.sh.
    3. +
  3. In your Terminal, cd into the directory you saved the script in and change the update channel on your phone using the following command:
    + + 
    ./change_channel.sh -v nightly
    +
    4. +
  4. Once the phone reboots, check for updates by going into Settings > Device information > Check now.
    5. +
+ +
+

Note: This step isn't needed in newer versions of the Firefox OS software — you should just get OTA updates automatically.

+
+ +
+

Note: You can choose between several different update channels. Run "./change_channel.sh -h" to see the other channel options.

+
+ +

Fastboot mode

+ +

If flashing a new build to your phone fails to work, your phone may become unresponsive, leading to the phone rebooting in recovery mode. The recovery mode provides few options (Reboot, Update from adb, Wipe data, Wipe cache, and Update from sdcard). Unfortunately, selecting Update from adb triggers a sideload mode in which you cannot use the other adb commands. The adb sideload command would work but the various flash scripts rely on other adb commands.

+ +

You can force fastboot mode as follows:

+ +
    +
  1. Power off the phone (which may involve removing the battery in extreme cases...).
    2. +
  2. Plug in the USB cable.
    3. +
  3. Power the phone up again by pressing the Volume Down and Power buttons together.
    4. +
+ +

The phone should now display the text "FASTBOOT": it is in fastboot mode and is waiting for a USB connection. At this point, a USB-connected, computer with adb installed should see the phone listed when the fastboot devices command is run. Note that regular adb would not see the device — only fastboot sees it. In this mode, you can use the flash script to install the last base image as explained above. As the script does use both adb and fastboot commands, you may see some initial error and warnings from adb, but the device should be flashed properly at the end of the procedure.

+ +

Emergency download mode

+ +

If flashing a new build to your phone fails to work, your phone becomes unresponsive, and the phone cannot enter fastboot mode, you can use emergency mode for recovery. You'll need the provided emergency USB cable with the “Recovery Cable” red label on it and the Emergency Download Tool to enter this mode. For full instructions, see the Flame emergency rescue tool tutorial included in the download tool's files. Contact the device maker (flameservice [at] thundersoft.com) if you need any more technical support.

+ +

Emergency download tool dialog box as it is when it start.

+ +
+

Note: The tool provided is Windows-only.

+
+ +

Recovery mode

+ +

You can enter recovery mode to clear your phone data or manually update the firmware. There are two ways to enter this mode:

+ + + +

When in recovery mode, press the Volume up/down keys to move the selection highlight, and the Power key to select. Make sure you have your phone data (Contacts, SMS, etc.) backed up before clearing data, and your upgrade packages downloaded before updating.

+ +

Backing up and restoring your Flame data

+ +

When using a Flame, you won't want to lose your phone's contacts and other data while upgrading to a new build (as explained earlier in this article). To backup and restore data you can use our Backup and restore profile tool, which is contained in the B2G-flash-tool Git repo.

+ +
    +
  1. To use this, first open up your terminal/command line.
    2. +
  2. Clone the above repo (you'll need Git installed) using + 
    git clone https://github.com/Mozilla-TWQA/B2G-flash-tool
    +
    3. +
  3. The tool is a Python file: backup_restore_profile.py. Make sure you have Python installed (2.7.x is probably best.) Linux and Mac systems should have this out of the box.
    4. +
  4. Enter the directory you just cloned using cd B2G-flash-tool.
    5. +
+ +
+

Note: When using this tool, you'll also need to make sure that your phone is connected via USB to your computer, and that ADB (see {{anch("Important steps to follow first")}} above) and Debugging via USB (in your device's Developer settings) are enabled.

+
+ +
+

Note: If you get a message complaining about lack of permissions to execute this file, cd into the directory where you saved the file, and run the following command:

+ +
chmod +x backup_restore_profile.py
+
+ +

Backing up data from your phone

+ +

Before backing up you should make sure your device is updated with the most recent OTA update. To do this, on your phone go to Settings app > Device Information > Check for updates > click Check Now. If there is an update available, you should shortly get a notification of an available update. Choose to install the update.

+ +

Now, in the directory where you saved the backup_restore_profile.py file, run the following:

+ +
python backup_restore_profile.py -b
+ +

This should save your device profile to a directory called mozilla-profile, in the same directory as the script is located.

+ +
+

Warning: by default, it does not save the internal sd card content. So files like photos or videos from the gallery app will not be saved. If you want to backup the sd card content, add the --sdcard option

+ +
python backup_restore_profile.py -b --sdcard
+
+ +

Restoring data to your phone

+ +

Before restoring you should again make sure your device is updated with the most recent OTA update. Go to Settings app > Device Information > Check for updates > click Check Now. If there is an update available, you should shortly get a notification of an available update. Choose to install the update.

+ +

In the directory where your mozilla-profile directory is located (see above section), run the following:

+ +
python backup_restore_profile.py -r
+ +
+

Note: You can get a list of all the options the tool supports by running python backup_restore_profile.py -h.

+
+ +

Pushing apps to your Flame

+ +

The App Manager and WebIDE tools make it easy to push apps to your phone, for testing, etc.

+ +

RAM adjustment

+ +

You can adjust the available RAM capacity to see how apps perform on Firefox OS phones with lower memory footprints.

+ +

This is accomplished by entering fastboot mode (install fastboot first, which is available on the same SDK page as ADB) and typing:

+ +
adb reboot bootloader
+fastboot oem mem [0|256-1024]
+ +

“0” is the memory automatically detected and “256-1024” is the number of megabytes. For example, if you want to adjust device RAM capacity to 512M, enter fastboot oem mem 512.

+ +

You'll need to then reboot your device for the settings to take effect. This can be done using:

+ +
fastboot reboot
+ +

The current memory size can be returned by entering fastboot mode and typing:

+ +
fastboot getvar mem
+
diff --git a/files/id/archive/b2g_os/phone_guide/index.html b/files/id/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..bbfc5ecee3 --- /dev/null +++ b/files/id/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox OS phone guide +slug: Archive/B2G_OS/Phone_guide +tags: + - Firefox OS + - Landing + - NeedsTranslation + - Phones + - TopicStub +translation_of: Archive/B2G_OS/Phone_guide +--- +
+

This section contains developer information relevant to specific phones that run Firefox OS — both developer and consumer devices. We have general information available on Building and installing Firefox OS and Hacking Firefox OS, so please go there for information about building and installing the platform from scratch. Developers with specific phones in their possession may however find the following articles useful.

+
+ +

Developer phone information

+ +

The phones listed here are specifically geared towards developers wanting to experiment with Firefox OS, including developing apps and contributing to the operating system itself. As such, they typically have unlocked SIMs, system files, etc.

+ +
+
Flame
+
The Flame device is the official reference device for developing, testing, and debugging Firefox OS and open web apps, produced in partnership with T2Mobile.
+
Geeksphone
+
In this article we cover some basic tips on how to keep your Geeksphone up-to-date and how to tweak the system Gaia applications.
+
Nexus 5
+
This article provides information about using Firefox OS on a Nexus 5, including Flashing Firefox OS onto your device.
+
Nexus 4
+
This article provides information about using Firefox OS on a Nexus 4, including Flashing Firefox OS onto your device.
+
ZTE OPEN
+
This article contains information on the ZTE OPEN Firefox OS device.
+
ZTE OPEN C
+
The ZTE Open C is an updated ZTE-produced Firefox OS device, with higher end hardware and newer software.
+
+ +

Consumer phone information

+ +

The phones listed here are consumer models, so not ideal for developers wanting to hack on devices. However, might be still useful for developers looking for more technical information on these consumer models. For a more complete list of devices, see our Find Firefox OS near you page.

+ +
+
Alcatel One Touch Fire
+
Based on Firefox OS 1.3 and available in more than 5 countries.
+
Alcatel One Touch Pixi 3 (3.5)
+
High-end consumer smartphone, powered by Firefox OS 2.0, with a 2 megapixel camera.
+
Alcatel Onetouch Fire 2C 4020D
+
Based on Tarako Firefox OS (1.3T) and released in India.
+
Alcatel Onetouch Fire C
+
Based on Tarako Firefox OS (1.3T) and released in India.
+
Alcatel Onetouch Fire E
+
Available in 5 countries.
+
Cherry Mobile Ace
+
Based on Firefox OS 1.3T and available in the Philippines.
+
Fx0
+
First Firefox OS phone released in Japan, by KDDI.
+
Huawei Y300 II
+
Based on Firefox OS 1.1 and available in the Philippines and Mexico.
+
Intex Cloud FX
+
First Firefox OS Tarako phone released in India and based on Firefox OS 1.3T.
+
LG Fireweb
+
Based on Firefox OS 1.1 and available in Uruguay and Brasil.
+
Spice Firefox MI FX1
+
Based on Tarako Firefox OS (1.3T) and released in India.
+
Spice Firefox MI FX2
+
High-end consumer 3G smartphone powered by FirefoxOS 1.4 with a 2 megapixel camera, released in India.
+
Symphony GoFox F15
+
First Firefox OS Device to come with 3G video calling capability, launched in Bangladesh.
+
Zen U105 Fire
+
Based on Firefox OS Tarako, available in India.
+
ZTE Open II
+
Has a1.2 GHz dual core processor and a 2.0 MP Rear Camera, available in 7 countries.
+
Orange Klif
+
The Orange Klif is a 3G Smartphone, powered by Firefox OS 2.0, with a 2 megapixel camera. It is available in a number of African countries.
+
+ +

General Firefox OS information

+ +
+
Firefox OS phone data
+
In this article we list the various available Firefox OS phones along with information such as their code names, availability, and specific hardware features.
+
General device features
+
This page lists typical Firefox OS hardware features and minimum hardware requirements.
+
Troubleshooting
+
This article provides tips for resolving common problems you may have while using Firefox OS.
+
Best practices for open reference devices
+
A set of best practices that we believe should come highly recommended for any widely available open reference devices. All of the recent Firefox OS reference devices have followed these practices.
+
diff --git a/files/id/archive/b2g_os/platform/index.html b/files/id/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..ec17b4cd1d --- /dev/null +++ b/files/id/archive/b2g_os/platform/index.html @@ -0,0 +1,82 @@ +--- +title: The Firefox OS platform +slug: Archive/B2G_OS/Platform +translation_of: Archive/B2G_OS/Platform +--- +
+

The Firefox OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on Firefox OS, if you're working on developing or porting the platform — or are simply curious — the following documentation may be of interest to you.

+
+ + + + + + + +
+

Documentation about the Firefox OS platform

+
+
+ Firefox OS architecture overview
+
+ An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.
+
+ Firefox OS apps architecture
+
+ An overview of the application model on Firefox OS.
+
+ Gaia
+
+ Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.
+
+ Gonk
+
+ Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.
+
+ Gecko
+
+ Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.
+
+  Security
+
+ Documentation about security in Firefox OS; this includes topics about security devices from every perspective: for app developers, device integrators, and so forth.
+
+ Out of memory management on Firefox OS
+
+ This article explains how low memory situations are managed on Firefox OS, using the low memory killer and low memory notifications.
+
+ Feature support chart
+
+ A chart of which features are available in which types of Firefox OS builds.
+
+ Firefox OS settings list
+
+ A list of common setting names that can be used with the Settings API.
+
+

View All...

+ 		+

Getting help from the community

+

If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!

+
    +
  • Consult the Boot to Gecko project forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}
    • +
+
    +
  • Ask your question on Mozilla's Boot to Gecko IRC channel: #b2g
    • +
+

Don't forget about the netiquette...

+
+ + +

Resources

+ +
+

 

diff --git a/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html b/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html new file mode 100644 index 0000000000..ecc95018a2 --- /dev/null +++ b/files/id/archive/b2g_os/quickstart/aplikasi_pertama_kamu/index.html @@ -0,0 +1,210 @@ +--- +title: Aplikasi Pertama Kamu +slug: Archive/B2G_OS/Quickstart/aplikasi_pertama_kamu +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +
+
+

Aplikasi Open web memberikan kemudahan kepada Pengembang web persis seperti apa yang mereka inginkan selama ini: lingkungan cross-platform yang didedikasikan untuk aplikasi yang diinstal dan dibuat hanya dengan menggunakan HTML, CSS, dan JavaScript saja - dengan Firefox OS sebagai yang pertama yang mendedikasikan platform Aplikasi Open web ini. Panduan ini bertujuan untuk membuat Anda belajar dan membangun aplikasi, dengan petunjuk arsitektur dasar dan petunjuk membangun Aplikasi sehingga Anda dapat membuat aplikasi besar berikutnya!

+
+

Jika Anda tidak ingin mengikuti panduan ini, Anda dapat men-download template aplikasi quick start kami. Cari tahu lebih banyak tentang apa ini, dengan membaca panduan Template aplikasi kami.

+

Struktur Aplikasi

+

Paket vs. Aplikasi yang dihost

+

Ada dua jenis aplikasi Open web yaitu: dikemas dan dihosting.

+ +

Kedua jenis aplikasi ini memerlukan file manifest yang valid. Ketika tiba saatnya Anda ingin untuk mendaftarkan aplikasi Anda di Firefox Marketplace, Anda akan meng-upload aplikasi Anda sebagai file .zip atau memberikan URL di mana aplikasi anda dihosting.

+
+

+
+

Dibuat dalam kemitraan dengan Treehouse: Periksa mereka!

+
+
+

Untuk tujuan panduan ini, Anda akan membuat aplikasi host yang akan tinggal di alamat localhost Anda. Setelah aplikasi Anda sudah siap untuk daftar di Firefox Marketplace, Anda dapat membuat keputusan untuk bundel sebagai aplikasi dikemas atau meluncurkannya sebagai aplikasi host.

+

Manifests Aplikasi

+

Every Firefox app requires a manifest.webapp file at the app root. The manifest.webapp file provides important information about the app, such as version, name, description, icon location, locale strings, domains the app can be installed from, and much more. Only the name and description are required. The simple manifest included within the app template is similar to the following:

+ 
{
+  "version": "0.1",
+  "name": "Open Web App",
+  "description": "Your new awesome Open Web App",
+  "launch_path": "/app-template/index.html",
+  "icons": {
+    "16": "/app-template/app-icons/icon-16.png",
+    "48": "/app-template/app-icons/icon-48.png",
+    "128": "/app-template/app-icons/icon-128.png"
+  },
+  "developer": {
+    "name": "Your Name",
+    "url": "http://yourawesomeapp.com"
+  },
+  "locales": {
+    "es": {
+      "description": "Su nueva aplicación impresionante Open Web",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    },
+    "it": {
+      "description": "La tua nuova fantastica Open Web App",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    }
+  },
+  "default_locale": "en"
+}
+
+

+
+

Made in partnership with Treehouse: Check them out!

+
+
+

 

+

A basic manifest is all you need to get started. For more details about manifests, read App Manifest.

+

App Layout & Design

+

Responsive design has become increasingly important as more screen resolutions become standard on different devices. Even if the main target of your app is mobile platforms such as Firefox OS, other devices will likely have access to it as well. CSS media queries allow you to adapt layout to device, as shown in this skeleton CSS example:

+ 
/* The following are examples of different CSS media queries */
+
+/* Basic desktop/screen width sniff */
+@media only screen and (min-width : 1224px) {
+  /* styles */
+}
+
+/* Traditional iPhone width */
+@media
+  only screen and (-webkit-min-device-pixel-ratio : 1.5),
+  only screen and (min-device-pixel-ratio : 1.5) {
+  /* styles */
+}
+
+/* Device settings at different orientations */
+@media screen and (orientation:portrait) {
+  /* styles */
+}
+@media screen and (orientation:landscape) {
+  /* styles */
+}
+

There are many JavaScript and CSS frameworks available to aid in responsive design and mobile app development (Bootstrap, etc.) Choose the framework(s) that best fit your app and development style.

+

Web APIs

+

JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's WebAPI effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the WebAPI page. JavaScript feature detection is still the best practice, as shown in the following example:

+ 
// If this device supports the vibrate API...
+if('vibrate' in navigator) {
+    // ... vibrate for a second
+    navigator.vibrate(1000);
+}
+

In the following example, the display style of a <div> is modified based on changes in the battery state of the device:

+ 
// Create the battery indicator listeners
+(function() {
+  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
+      indicator, indicatorPercentage;
+
+  if(battery) {
+    indicator = document.getElementById('indicator'),
+    indicatorPercentage = document.getElementById('indicator-percentage');
+
+    // Set listeners for changes
+    battery.addEventListener('chargingchange', updateBattery);
+    battery.addEventListener('levelchange', updateBattery);
+
+    // Update immediately
+    updateBattery();
+  }
+
+  function updateBattery() {
+    // Update percentage width and text
+    var level = (battery.level * 100) + '%';
+    indicatorPercentage.style.width = level;
+    indicatorPercentage.innerHTML = 'Battery: ' + level;
+    // Update charging status
+    indicator.className = battery.charging ? 'charging' : '';
+  }
+})();
+

In the code sample above, once you confirm that the Battery API is supported, you can add event listeners for chargingchange and levelchange to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.

+

Check the WebAPI page frequently to keep up to date with device API statuses.

+

Install API functionality

+

In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:

+ 
<button id="install-btn">Install app</button>
+

This button's functionality is implemented using the Install API (see install.js):

+ 
var manifest_url = location.href + 'manifest.webapp';
+
+function install(ev) {
+  ev.preventDefault();
+  // define the manifest URL
+  // install the app
+  var installLocFind = navigator.mozApps.install(manifest_url);
+  installLocFind.onsuccess = function(data) {
+    // App is installed, do something
+  };
+  installLocFind.onerror = function() {
+    // App wasn't installed, info is in
+    // installapp.error.name
+    alert(installLocFind.error.name);
+  };
+};
+
+// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
+var button = document.getElementById('install-btn');
+
+var installCheck = navigator.mozApps.checkInstalled(manifest_url);
+
+installCheck.onsuccess = function() {
+  if(installCheck.result) {
+    button.style.display = "none";
+  } else {
+    button.addEventListener('click', install, false);
+  };
+};
+
+

Let's run through briefly what is going on:

+
    +
  1. We get a reference to the install button and store it in the variable button.
    2. +
  2. We use navigator.mozApps.checkInstalled to check whether the app defined by the manifest at http://people.mozilla.com/~cmills/location-finder/manifest.webapp is already installed on the device. This test is stored in the variable installCheck.
    3. +
  3. When the test is successfully carried out, its success event is fired, therefore installCheck.onsuccess = function() { ... } is run.
    4. +
  4. We then test for the existence of installCheck.result using an if statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.
    5. +
  5. If the app isn't installed, we add a click event listener to the button, so the install() function is run when the button is clicked.
    6. +
  6. When the button is clicked and the install() function is run, we store the manifest file location in a variable called manifest_url, and then install the app using navigator.mozApps.install(manifest_url), storing a reference to that installation in the installLocFind variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.
    7. +
+

You may want to verify the implementation state of the API when first coming to Installable web apps.

+
+

Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allows you to install installable web apps on the desktop. See FAQs about apps manifests for more information on origins.

+
+

WebRT APIs (Permissions-based APIs)

+

There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the manifest.webapp file like so:

+ 
// New key in the manifest: "permissions"
+// Request access to any number of APIs
+// Here we request permissions to the systemXHR API
+"permissions": {
+    "systemXHR": {}
+}
+

The three levels of permission are as follows:

+ +

For more information on app permission levels, read Types of packaged apps. You can find out more information about what APIs require permissions, and what permissions are required, at App permissions.

+
+

It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.

+
+

Tools & Testing

+

Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.

+

Firefox OS Simulator

+

Installing and using the Firefox OS Simulator is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.

+

App Manager

+

The new kid on the block with regards to testing tools is called the App Manager. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.

+

Unit Testing

+

Unit tests are extremely valuable when testing on different devices and builds. jQuery's QUnit is a popular client-side testing utility, but you can use any set of testing tools you'd like.

+

Installing Firefox OS on a Device

+

Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on MDN.

+

Dedicated Firefox OS developer preview devices are also available: read our Developer preview phone page for more information.

+

App Submission and Distribution

+

Once your app is complete, you can host it yourself like a standard web site or app (read Self-publishing apps for more information), or it can be submitted to the Firefox Marketplace. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.

+

More Marketplace & Listing Information

+
    +
  1. Submitting an App to the Firefox OS Marketplace
    2. +
  2. Marketplace Review Criteria
    3. +
  3. App Submission Video Walkthrough
    4. +
+
diff --git a/files/id/archive/b2g_os/quickstart/index.html b/files/id/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..ebe1f7c220 --- /dev/null +++ b/files/id/archive/b2g_os/quickstart/index.html @@ -0,0 +1,49 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +
+

Quickstart information on coding open web apps.

+
+
+
+ Introduction to open web apps
+
+ What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.
+
+ Your first app
+
+ This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.
+
+ Introduction to Firefox OS
+
+ An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.
+
+ Introduction to manifests
+
+ An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.
+
+ App development for web developers
+
+ If you're a web developer, how do open web apps differ from what you're used to? This article explains all.
+
+ App development for mobile developers
+
+ If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.
+
+ Developing app functionality
+
+ This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.
+
+ Payments
+
+ How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.
+
+ App tools
+
+ Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.
+
diff --git a/files/id/archive/b2g_os/simulator/index.html b/files/id/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..6bc32a3c38 --- /dev/null +++ b/files/id/archive/b2g_os/simulator/index.html @@ -0,0 +1,120 @@ +--- +title: Firefox OS Simulator +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +
+

Halaman ini menjelaskan Firefox OS Simulator untuk pengembang menargetkan Firefox OS 1.2 atau yang lebih baru. Jika Anda sedang mengembangkan aplikasi untuk Firefox OS 1.1, maka Anda harus memeriksa dokumentasi untuk Firefox OS 1.1 Simulator gantinya.

+
+ +

Firefox OS Simulator adalah versi dari lapisan yang lebih tinggi dari Firefox OS yang mensimulasikan perangkat Firefox OS, tapi berjalan pada desktop. Ini berarti bahwa dalam banyak kasus, Anda tidak perlu perangkat nyata untuk menguji dan men-debug aplikasi Anda. Ini berjalan di jendela ukuran yang sama sebagai perangkat Firefox OS, termasuk antarmuka pengguna Firefox OS dan built-in aplikasi, dan mensimulasikan banyak dari Firefox OS perangkat API.

+ +

 

+ +

Simulator ini dikemas dan didistribusikan sebagai Firefox add-on. Setelah Anda download dan diinstal di Firefox, Anda dapat menjalankannya, mendorong aplikasi untuk itu, dan melampirkan alat pengembang untuk itu menggunakan App Manajer alat atau WebIDE.

+ +

Instalasi

+ +

Untuk menginstal simulator, menggunakan WebIDE ini Mengelola penambahan Komponen panel (tersedia sebagai bagian dari Firefox 34 dan seterusnya). Beberapa versi yang tersedia, dan Anda disarankan untuk menginstal mereka semua, untuk fleksibilitas maksimum.

+ +
+

Dimulai dengan Firefox 43, tentang: halaman addons mungkin menampilkan peringatan tentang addon Anda menjadi unsigned. Simulator yang benar ditandatangani pada waktu menginstal, namun mereka kemudian dimodifikasi sehingga muncul "rusak". Mereka akan terus berjalan dengan sukses meskipun pesan peringatan ini. Rinciannya di bug 1.197.262.

+
+ +

Untuk memulai Simulator, Anda memilih dari daftar runtime WebIDE ini. Untuk lebih jelasnya, lihat petunjuk pada dokumentasi WebIDE. Setelah menjalankan Simulator, Anda dapat mendorong aplikasi untuk itu dan debug mereka menggunakan WebIDE, seperti yang Anda bisa dengan perangkat nyata.

+ +

Jika Anda menggunakan Manajer App (alat tua tersedia sebelum WebIDE), Anda dapat menginstal simulator melalui tombol berikut:

+ +

Install Simulator

+ +

Simulator UI

+ +

Simulator muncul sebagai jendela terpisah, berukuran sehingga area layar simulasi adalah 320x480 piksel. Untuk mensimulasikan peristiwa sentuhan Anda dapat mengklik tombol mouse dan tarik sambil memegang tombol ke bawah. Jadi dengan mengklik dan menyeret kanan-ke-kiri dari Home Screen, Anda akan melihat aplikasi built-in, serta setiap aplikasi yang telah ditambahkan:

+ +

+ +

Simulator ini memiliki dua tombol di toolbar di bagian bawah:

+ + + +

Emulasi kartu SD

+ +

Dalam Simulator kartu SD perangkat dipetakan ke "fake-sdcard" direktori di profil Simulator ini, yang itu sendiri terletak di dalam "ekstensi" direktori di bawah profil Firefox yang Simulator diinstal. Sebagai contoh:

+ +
/path/to/Firefox/Profiles/Firefox-profile-name/extensions/fxos_2_2_simulator@mozilla.org/profile/fake-sdcard
+ +

File membaca atau menulis menggunakan getDeviceStorage API akan muncul di sini.

+ +

Sebelum versi 2.2 dari Simulator, Anda harus menciptakan "palsu-sdcard" direktori secara manual untuk bekerja. Dari 2,2 dan seterusnya, "palsu-sdcard" direktori dibuat untuk Anda secara otomatis.

+ +

Juga dari versi 2.2 dan seterusnya, jika Anda menjalankan Simulator dari baris perintah Anda dapat menentukan direktori yang berbeda dengan melewati --storage-path option.

+ +

.

+ +
Catatan: ini sebagian besar dimaksudkan untuk pengujian API. Musik akan dibaca tidak dari "palsu-sdcard" direktori, tapi dari sistem anda ~/Music gambar dari ~/Pictures video dari ~/Videos Download pergi ke ~/Downloads user-dirs.dirs redefinitions didukung.
+ +

Keterbatasan Simulator

+ +

Perhatikan bahwa Firefox OS Simulator bukan simulasi sempurna.

+ +

Keterbatasan hardware

+ +

Terlepas dari ukuran layar, Simulator tidak mensimulasikan keterbatasan perangkat keras dari perangkat Firefox OS seperti memori yang tersedia atau kecepatan CPU.

+ +

Codec audio / video

+ +

Codec berikut tergantung pada decoding hardware-accelerated dan karena itu belum didukung:

+ + + +

Ini berarti tidak mungkin untuk menggunakan Simulator untuk pemutaran video tes di aplikasi dan di website seperti Youtube yang mengandalkan codec ini.

+ +

API yang tidak didukung

+ +

API tertentu yang bekerja pada perangkat tidak akan bekerja pada Simulator, umumnya karena hardware pendukung tidak tersedia pada desktop. Kami telah menerapkan simulasi untuk beberapa API seperti geolocation, dan berharap untuk menambahkan lebih banyak dalam rilis mendatang. Namun, saat ini API tidak didukung. Menggunakan mereka mungkin melemparkan kesalahan atau hanya mengembalikan hasil yang salah:

+ + + +

 

+ +

Mendapatkan bantuan

+ +

Jika Anda memiliki pertanyaan, mencoba meminta kami pada daftar dev-pengembang-alat mailing atau #devtools pada irc.mozilla.org.

+ +

Cara mengaktifkan verbose logging

+ +

Anda dapat melihat pesan login dari aplikasi Anda di Web Console, yang dapat Anda melampirkan ke aplikasi Anda menggunakan WebIDE. Jika Anda ingin menangkap pesan awal terjadi selama startup aplikasi, sebelum konsol akan terhubung dan bekerja, Anda dapat mengaktifkan verbose logging di Simulator.

+ +

Kunjungi about: config dan menciptakan preferensi baru. Nama preferensi yang berbeda untuk setiap versi Simulator:

+ + + +

Set ke nilai string "semua", dan menonaktifkan, kemudian mengaktifkan kembali, add-on di Add-on manajer. Sekarang pesan tambahan tentang operasi Simulator akan muncul di Browser Console.

+ +

Membangun Simulator

+ +

Jika Anda ingin menguji patch ke Gecko atau Gaia kode yang Simulator mengandung, Anda mungkin tertarik dalam memodifikasi simulator untuk menggunakan kustom Gecko membangun atau profil Gaia. Atau, Anda dapat membangun Simulator baru dari checkout Gecko Anda.

+ +

Alternatif

+ +

Berbagai cara untuk menjalankan Gaia - termasuk daftar mereka dalam rangka kemudahan untuk menjalankan dan ketertiban kedekatan membalikkan untuk produk dikirim (sesuai dengan itu, Firefox OS Simulator paling mudah tapi terjauh.

diff --git a/files/id/archive/b2g_os/using_the_app_manager/index.html b/files/id/archive/b2g_os/using_the_app_manager/index.html new file mode 100644 index 0000000000..39a43a9762 --- /dev/null +++ b/files/id/archive/b2g_os/using_the_app_manager/index.html @@ -0,0 +1,233 @@ +--- +title: Using the App Manager +slug: Archive/B2G_OS/Using_the_App_Manager +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +
+

The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.

+
+ +

{{EmbedYouTube("z1Bxg1UJVf0")}}

+ +

The App Manager is composed of:

+ + + +

Quick setup:

+ +

This section is designed to get you up and running as soon as possible; if you need some more detail please skip forward to the {{ anch("Device and system configuration") }} section and start reading from there.  Also see the {{ anch("Troubleshooting") }} section for help if you are having trouble.

+ +
    +
  1. Make sure you have Firefox Desktop 26+ installed
    2. +
  2. Open the App Manager (in the URL bar, type about:app-manager)
    3. +
  3. If you don't have a real device: +
      +
    1. Install the Firefox OS Simulator
      2. +
    2. In App Manager's bottom toolbar, click on Start Simulator, then click on the name of the installed simulator, which should appear there.
      3. +
    +
    4. +
  4. If you have a real device: +
      +
    1. Make sure your device is running Firefox OS 1.2+
      2. +
    2. In the Settings of your device, disable Screen Lock (Settings > Screen Lock) and enable Remote Debugging (Settings > Device information > More information > Developer)
      3. +
    3. Install the ADB Helper add-on in Firefox Desktop
      4. +
    4. Connect your device to your machine via a USB cable
      5. +
    5. You should see the name of your device in the App Manager's bottom bar. Click on it.
      6. +
    +
    5. +
  5. The bottom bar should show "Connected to: xxx"
    6. +
  6. Click on the Apps panel and add an app (packaged or hosted)
    7. +
  7. The Refresh button validates your app and installs it on the Simulator/Device
    8. +
  8. The Debug button connects the developer tools to the running app
    9. +
+ +

Device and system configuration

+ +

The first thing you'll need to do when using the App Manager is make sure your system and phone are set up correctly. This section will run thrugh all the steps required.

+ +

Firefox 1.2+ required

+ +

Make sure your device is running Firefox OS 1.2/Boot2Gecko 1.2 or higher. To check which version of Firefox OS the device is runing, go to Settings > Device Information > Software.

+ +

If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.

+ +

Builds available:

+ + + +

To build your own Firefox OS 1.2+ distribution, follow the instructions located at Building and installing Firefox OS, starting with Firefox OS build prerequisites.

+ +

Remote debugging

+ +

Next, you need to enable remote debugging in Firefox OS. To do so, go to Settings > Device information > More information > Developer and check the Remote Debugging checkbox.

+ +

ADB or ADB helper

+ +

The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:

+ + + +
+

Note: There's no need to run this command if you installed the ADB Helper Add-on.

+
+ +

Connecting your device to the App Manager

+ +

With all your configuration done, it's now time to plug your device into your computer and start the App Manager:

+ +
    +
  1. Plug the device into your computer via USB.
    2. +
  2. Disable Screen lock on your device by going to Settings > Screen Lock and unchecking the Lock Screen checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.
    3. +
  3. Start the App Manager — In Firefox Desktop select the Tools > Web Developer > App Manager menu option, or type about:app-manager in the URL bar.
    4. +
  4. At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.
    5. +
  5. If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.
    6. +
+ +

+ +
+

Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.

+
+ +

Using a Firefox OS Simulator Add-on

+ +

If you haven't got a real device available to use with App Manager, you can still try it out using a Firefox OS Simulator Add-on. To start off, install the appropriate simulator for your operating system:

+ +

Install Simulator

+ +
+

Note that currently there is only a Firefox OS 1.2 simulator available, although more may appear in the future.

+
+ +

Once you've installed the simulator, you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. Three buttons will appear:

+ + + +

Apps panel

+ +

Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps Panel. From here, you can import an existing app to push onto your device and debug:

+ + + +

Information about your app should appear on the right hand side of the window, as seen below:

+ +

+ +

Clicking on "Update" will update (install) the app on the device. Clicking on "debug" will connect a toolbox to the app, allowing you to debug its code directly:

+ +

+ +
+

Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.

+
+ +

If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.

+ +

+ +

You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.

+ +

Device panel

+ +

The Device tab displays information about the connected device. From the "Installed Apps" window, apps on the device can be started and debugged.

+ +

+ +
+

Note: Certified Apps are not listed by default. See how to debug certified apps.

+
+ +

The "Permissions" window shows the required priviledges for different Web APIs on the current device:

+ +

+ +

Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.

+ +

Debugging Certified Apps

+ +

Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref devtools.debugger.forbid-certified-apps to false in your profile. To do this, follow the steps below:

+ +
    +
  1. +

    On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:

    + + 
    adb shell
    + +

    Your prompt should change to root@android.

    +
    2. +
  2. +

    Next, stop B2G running using the following command:

    + + 
    stop b2g
    +
    3. +
  3. +

    Navigate to the following directory:

    + + 
    cd /data/b2g/mozilla/*.default/
    +
    4. +
  4. +

    Here, update the prefs.js file with the following line:

    + + 
    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    +
    5. +
  5. +

    After you've finished editing and saving the file, start B2G again using the following command:

    + + 
    start b2g
    +
    6. +
  6. +

    Exit the android filesystem using the exit command; this will return you to your normal terminal prompt.

    +
    7. +
  7. +

    Next, reconnect to the App Manager and you should see certified apps appear for debugging.

    +
    8. +
+ +
+

Note: If you want to add this preference to your Gaia build you can run make DEVICE_DEBUG=1 reset-gaia.

+
+ +

Troubleshooting

+ +

If the device is not recognized:

+ + + +

Can't connect your device to the App Manager or start the simulator? Let us know or file a bug.

diff --git a/files/id/archive/css3/index.html b/files/id/archive/css3/index.html new file mode 100644 index 0000000000..0c5eae08d5 --- /dev/null +++ b/files/id/archive/css3/index.html @@ -0,0 +1,972 @@ +--- +title: CSS3 +slug: Archive/CSS3 +translation_of: Archive/CSS3 +--- +

CSS3 merupakan perubahan terakhir dari bahasa Cascading Style Sheets dan bertujuan untuk perpanjangan dari CSS2.1. Menghadirkan banyak  catatan yang lama dinantikan, seperti di seputar lingkaran sudut, bayangan, gradients, transitions or animations, sama halnya pada layout baru multi-columns (beberapa kolom), flexible box (kemudahan tampilan) atau grid layouts. Bagian bagian pengalaman vendor-prefixed (penyedia-memperbaharui) dan kemungkinan yang lainnya dihilangkan dalam lingkungan pembuatan, atau digunakan dengan berlebihan menyebabkan keduanya syntax (penulisan) and semantics (bentuk penulisan) dapat berubah kemudian.

+ +

Modul and Proses Standarisasi

+ +

CSS Tingkat 2 diperlukan 9 tahun, dari Agustus 2002 sampai Juni 2011 yang kaya status rekomendasi. Ini merupakan tindakan nyata bahwa featur bagian kedua kembali didasarkan pada spesifikasi yang menyeluruh. Dalam melengkapi percepatan featur standarisasi tanpa gangguan, the CSS Working Group of the W3C (Pekerjaan Group CSS W3C), dalam sebuah bagian mereferensi pada Beijing doctrine, CSS dibagi dalam komponen komponen lebih kecil disebut modules . Masing masing modul sekarang ini merupakan sebuah bagian yang berdiri sendiri dari bahasa dan bergerak pada standarisasi percepatannya sendiri. Selagi beberapa modul telah menjadi rekomendasi W3C, yang lainnya masih merupakan bagian yang baru dalam rancangan atau draft pekerjaan. Modul modul baru juga ditambahkan ketika dibutuhkan pengidentifikasin baru.

+ +

CSS Modules and Snapshots as defined since CSS3 Secara bentukan, tidak ada uraian standar CSS. Masing masing modul dijadikan standar secara independen. Standar CSS terdiri dari CSS2.1 perubahan and diperpanjang dengan modul yang lengkap. Seluruhnya tidak diperlukan pada angka yang sama. Di tiap tiap titik waktu, sebuah snapshot (tampilan) dari standar CSS dapat digambarkan, daftar CSS2.1 dan modul saat ini.

+ +

Konsorsium W3C secara priode dipublikasikan yang menampilkan, seperti dalam tahun 2007 atau 2010.

+ +

Meski hari ini tanpa modul dengan tingkat yang lebih tinggi dari standarisasi CSS3, ini dapat berubah ke depannya. Beberapa modul, seperti Selectors 4 or CSS Borders and Backgrounds Level 4 telah mempunyai sebuah rancangan atau draft editor, meski mereka belum diperkaya dengan publikasi awal status Draft atau Rancangan Pekerjaan.

+ +

Status Modul CSS

+ +

Stabilitas Modul

+ +

Sedikitnya modul CSS telah stabil secara bersamaan dan telah kaya dari satu atau tiga tingkatan rekomensasi dari CSSWG: Rekomendasi Kandidat, Proposal Rekomendasi atau Rekomendasi. Ini dapat digunakan tanpa sebelum perbaikan dan merupakan kestabilan yang baik, meski sedikitnya featur dapat dihilangkan pada Tingkat Kandidat Rekomendasi.

+ +

Perpanjangan modul modul ini dan perubahan CSS2.1 spesifikasi yang mana membangun inti dari spesifikasi. Bersamaan dengan itu, mereka adalah tampilan sekarang dari spesifikasi CSS.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Colors", "", "") }}{{ Spec2("CSS3 Colors") }} since June 7th, 2011
+

Adds the {{ cssxref("opacity") }} property, and the hsl(), hsla(), rgba() and rgb() functions to create {{cssxref("<color>")}} values. It also defines the currentColor keyword as a valid color.

+ +

The transparent color is now a real color (thanks to the support for the alpha channel) and is a now an alias for rgba(0,0,0,0.0) .

+ +

It deprecates the system-color keywords that shouldn't be used in a production environment anymore.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Selectors", "", "") }}{{ Spec2("CSS3 Selectors") }} since September 29th, 2011
+

Adds:

+ +
    +
  • Substring matching attribute selectors, E[attribute^="value"], E[attribute$="value"], E[attribute*="value"] .
    • +
  • New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.
    • +
  • Pseudo-elements are now characterized by two colons rather than one: :after becomes {{ cssxref("::after") }}, :before becomes {{ cssxref("::before") }}, :first-letter becomes {{ cssxref("::first-letter") }}, and :first-line becomes {{ cssxref("::first-line") }}.
    • +
  • The new general sibling combinator ( h1~pre ).
    • +
+
+ +

The next iteration of the Selectors specification is already in progress, though it still hasn't reached the First Public Working Draft stage.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Namespaces", "", "") }}{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011
+

Adds the support for the XML Namespaces by defining the notion of CSS qualified name, using the ' | ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Media Queries", "", "") }}{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012
+

Extends the former media type ( print, screen, … ) to a full language allowing queries on the device media capabilities like only screen and (color) .

+ +

Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.

+
+ +

The next iteration of this specification is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like hover or pointer. Detection of EcmaScript support, using the script media features is also proposed.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Style", "", "") }}{{ Spec2("CSS3 Style") }} since November 7th, 2013
Formally defines the syntax of the content of the HTML style global attribute.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Backgrounds", "", "") }}{{ Spec2("CSS3 Backgrounds") }}
+

Adds:

+ +
    +
  • Support, on backgrounds, for any type of {{cssxref("<image>")}}, and not only for uri() defined ones.
    • +
  • Support for multiple background images.
    • +
  • The {{ cssxref("background-repeat") }} space and round values, and for the 2-value syntax of this CSS property.
    • +
  • The {{ cssxref("background-attachment") }} local value.
    • +
  • The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.
    • +
  • Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.
    • +
  • Support for the use of an {{cssxref("<image>")}} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.
    • +
  • Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.
    • +
+
+ +

The CSS4 iteration of the Backgrounds and Borders specification is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).

+ + + + + + + + + + + +
{{ SpecName("CSS3 Multicol", "", "") }}{{ Spec2("CSS3 Multicol") }}
Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Speech", "", "") }}{{ Spec2("CSS3 Speech") }}
Defines the speech media type, an aural formatting model and numerous properties specific for speech-rendering user agents.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Images", "", "") }}{{ Spec2("CSS3 Images") }}
+

Defines the {{cssxref("<image>")}} data type.

+ +

Extends the url() syntax to support image slices using media fragments.

+ +

Adds:

+ +
    +
  • The dppx unit to the {{cssxref("<resolution>")}} data type.
    • +
  • The image() function as a more flexible alternative to url() to define an image from an url.
    + At risk : due to insufficient browser support, standardization of the image() function may be postponed to the next iteration of this module .
    • +
  • Support for linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient().
    • +
  • The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.
    + At risk : due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to the next iteration of this module .
    • +
  • The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.
    + At risk : due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to the next iteration of this module .
    • +
+
+ +

The CSS Image Values and Replaced Content Level 4 which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Values", "", "") }}{{ Spec2("CSS3 Values") }}
+

Makes initial and inherit keywords usable on any CSS property.

+ +

Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.

+ +

Adds:

+ +
    +
  • Definition for new font-relative length units: rem and ch .
    • +
  • Definition for viewport-relative length units: vw, vh, vmax, and vmin .
    • +
  • Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the reference pixel .
    • +
  • Definition for {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}.
    • +
  • Normative value to the definition of {{cssxref("<color>")}}, {{cssxref("<image>")}}, and {{ cssxref("<position>") }}.
    • +
  • Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and toggle() functional notations.
    + At risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module.
    • +
+
+ +

Several types definition, like <ident> and <custom-ident>, have been deferred to CSS Values and Units Module Level 4.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Flexbox", "", "") }}{{ Spec2("CSS3 Flexbox") }}
Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Conditional", "", "") }}{{ Spec2("CSS3 Conditional") }}
Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text Decoration", "", "") }}{{ Spec2("CSS3 Text Decoration") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.
    • +
+ +

Adds:

+ +
    +
  • Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.
    • +
  • Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.
    • +
+ +

Clarifies:

+ +
    +
  • The paint order of the decorations.
    • +
+ +

At risk: due to insufficient browser support, standardization of the text-decoration-skip, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to the next iteration of this module.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fonts", "", "") }}{{ Spec2("CSS3 Fonts") }}
+

Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.

+ +

Adds:

+ +
    +
  • Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.
    • +
  • The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.
    • +
  • The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.
    • +
  • The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.
    • +
  • The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.
    • +
  • The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-feature-values") }} at-rule.
    • +
  • The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Cascade", "", "") }}{{ Spec2("CSS3 Cascade") }}
+

Adds:

+ +
    +
  • The initial, unset values for properties.
    • +
  • The CSS {{ cssxref("all") }} property.
    • +
  • The scoping mechanism.
    • +
+ +

Clarifies:

+ +
    +
  • Interaction of media-dependent @import statements and style sheet loading requirements.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Writing Modes", "", "") }}{{ Spec2("CSS3 Writing Modes") }}
Defines the writing modes of both horizontal and vertical scripts and clarifies how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.
+ + + + + + + + + + + +
{{ SpecName("CSS Shapes", "", "") }}{{ Spec2("CSS Shapes") }}
Defines geometric shapes, which can be applied to floats. These shapes describe areas, around which inline content wraps instead of wrapping around the bounding box.
+ + + + + + + + + + + +
{{ SpecName("CSS Masks", "", "") }}{{ Spec2("CSS Masks") }}
Defines a way for partially or fully hiding portions of visual elements. It describes how to use another graphical element or image as a luminance or alpha mask.
+ +

Modules in the refining phase

+ +

Specifications that are deemed to be in the refining phase are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.

+ + + + + + + + + + + +
{{ SpecName("Web Animations", "", "") }}{{ Spec2("Web Animations") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Counter Styles", "", "") }}{{ Spec2("CSS3 Counter Styles") }}
 
+ + + + + + + + + + + +
{{ SpecName("Compositing", "", "") }}{{ Spec2("Compositing") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Syntax", "", "") }}{{ Spec2("CSS3 Syntax") }}
Clarifies how charsets are determined; minor changes in parsing and tokenization algorithms.
+ + + + + + + + + + + +
{{ SpecName("CSS Will Change", "", "") }}{{ Spec2("CSS Will Change") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Transitions", "", "") }}{{ Spec2("CSS3 Transitions") }}
Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Animations", "", "") }}{{ Spec2("CSS3 Animations") }}
Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Transforms", "", "") }}{{ Spec2("CSS3 Transforms") }}
+

Adds:

+ +
    +
  • the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: matrix(), translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skewX(), and skewY().
    • +
  • the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: matrix 3d(), translate3d(), translateZ(),  scale3d(), scaleZ(), rotate3d(), rotateX(), rotateY(), rotateZ(), and perspective().
    • +
+ +

Note: this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fragmentation", "", "") }}{{ Spec2("CSS3 Fragmentation") }}
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling. +

Adds:

+ +
    +
  • Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text", "", "") }}{{ Spec2("CSS3 Text") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-transform") }} property with the value full-width.
    • +
  • the CSS {{ cssxref("text-align") }} property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text.
    • +
  • the CSS {{ cssxref("text-align") }} property with a {{cssxref("<string>")}} value to align on that character. This is useful to align number on the decimal point.
    • +
  • the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.
    • +
+ +

Adds:

+ +
    +
  • Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.
    • +
  • Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.
    • +
  • Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.
    • +
  • Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.
    • +
+
+ +

A few features present in early CSS Text Level 3 draft have being postponed to the next iteration of this module .

+ + + + + + + + + + + +
{{ SpecName("CSS3 Variables", "", "") }}{{ Spec2("CSS3 Variables") }}
Defines a mechanism allowing to define variables in CSS.
+ + + + + + + + + + + +
{{ SpecName("Compositing", "", "") }}{{ Spec2("Compositing") }}
 
+ +

Modules in the revising phase

+ +

Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Basic UI", "", "") }}{{ Spec2("CSS3 Basic UI") }}
+

Adds:

+ +
    +
  • The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.
    + At risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module .
    • +
  • Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.
    + At risk: due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to the next iteration of this module .
    • +
  • Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new icon value of the CSS {{ cssxref("content") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the icon value may be postponed to CSS4.
    • +
  • Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.
    • +
  • Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.
    • +
  • Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.
    + At risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("<string>")}} values may be postponed to the next iteration of this module .
    • +
  • The ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the {{ cssxref("cursor") }} property.
    • +
  • The ability to specify the sequential navigation order (that is the tabbing order ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.
    + At risk: due to insufficient browser support, standardization of the navigation properties may be postponed to the next iteration of this module .
    • +
  • The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to the next iteration of this module .
    • +
+
+ +

An early list of what could be in the next iteration of the CSS Basic User Interface Module is available.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Grid", "", "") }}{{ Spec2("CSS3 Grid") }}
Add a grid layout to the CSS display property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Box Alignment", "", "") }}{{ Spec2("CSS3 Box Alignment") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Paged Media", "", "") }}{{ Spec2("CSS3 Paged Media") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSSOM View", "", "") }}{{ Spec2("CSSOM View") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS4 Selectors", "", "") }}{{ Spec2("CSS4 Selectors") }}
 
+ +

Modules in the exploring phase

+ + + + + + + + + + + +
{{ SpecName("CSS4 Images", "", "") }}{{ Spec2("CSS4 Images") }}
+

Extends:

+ +
    +
  • the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images.
    • +
  • the {{ cssxref("image-orientation") }} property by adding the keyword from-image, allowing to follow EXIF data stored into images to be considered.
    • +
+ +

Adds:

+ +
    +
  • the image-set() functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.
    • +
  • the element() functional notation allowing the use of part of the page as image.
    • +
  • the cross-fade() functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.
    • +
  • the conic-gradient() and repeating-conic-gradient() functional notation describing a new type of gradient.
    • +
  • the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Device", "", "") }}{{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
+ + + + + + + + + + + +
{{ SpecName("CSS3 GCPM", "", "") }}{{ Spec2("CSS3 GCPM") }}
Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.
+ + + + + + + + + + + +
{{ SpecName("CSS Exclusions", "", "") }}{{ Spec2("CSS Exclusions") }}
Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Lists", "", "") }}{{ Spec2("CSS3 Lists") }}
Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Regions", "", "") }}{{ Spec2("CSS3 Regions") }}
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Device", "", "") }}{{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
+ + + + + + + + + + + +
{{ SpecName("Filters 1.0", "", "") }}{{ Spec2("Filters 1.0") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Template", "", "") }}{{ Spec2("CSS3 Template") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Sizing", "", "") }}{{ Spec2("CSS3 Sizing") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS Line Grid", "", "") }}{{ Spec2("CSS Line Grid") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Positioning", "", "") }}{{ Spec2("CSS3 Positioning") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Ruby", "", "") }}{{ Spec2("CSS3 Ruby") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSSOM", "", "") }}{{ Spec2("CSSOM") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Overflow", "", "") }}{{ Spec2("CSS3 Overflow") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Font Loading", "", "") }}{{ Spec2("CSS3 Font Loading") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Display", "", "") }}{{ Spec2("CSS3 Display") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS Scope", "", "") }}{{ Spec2("CSS Scope") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS4 Media Queries", "", "") }}{{ Spec2("CSS4 Media Queries") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS Non-element Selectors", "", "") }}{{ Spec2("CSS Non-element Selectors") }}
 
+ + + + + + + + + + + +
{{ SpecName("Geometry Interfaces", "", "") }}{{ Spec2("Geometry Interfaces") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Inline", "", "") }}{{ Spec2("CSS3 Inline") }}
 
+ +

Modules in the rewriting phase

+ +

Modules that are in the rewriting phase are outdated and require to be rewritten. The syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Box", "", "") }}{{ Spec2("CSS3 Box") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Content", "", "") }}{{ Spec2("CSS3 Content") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Inline Layout", "", "") }}{{ Spec2("CSS3 Inline Layout") }}
 
+ +

 

diff --git a/files/id/archive/index.html b/files/id/archive/index.html new file mode 100644 index 0000000000..6361867424 --- /dev/null +++ b/files/id/archive/index.html @@ -0,0 +1,18 @@ +--- +title: Arsipkan konten usang +slug: Archive +translation_of: Archive +--- +

Di sini, di MDN, kami mencoba untuk menghindari penghapusan konten secara langsung yang mungkin berguna bagi orang-orang yang menargetkan platform, sistem operasi, dan browser lawas. Mungkin target pemirsa Anda adalah orang-orang yang menggunakan perangkat keras lama, misalnya, dan tidak dapat melakukan upgrade ke browser terbaru dan terbaik. Atau untuk "alasan", perusahaan Anda diharuskan menggunakan perangkat lunak yang sangat tua dan Anda perlu membangun konten Web yang berjalan pada perangkat lunak itu. Atau mungkin Anda hanya ingin tahu tentang sejarah fitur usang atau API, dan bagaimana cara kerjanya.

+ +

Ada banyak alasan dokumentasi yang lebih tua bisa bermanfaat. Jadi, kami telah menetapkan area ini untuk mengarsipkan dokumentasi yang lebih tua. Materi di zona Konten yang Diarsipkan ini seharusnya tidak digunakan untuk membuat situs Web baru atau aplikasi untuk peramban modern. Itu hanya untuk referensi sejarah saja.

+ +
+

Catatan untuk penulis: Kita perlu mencoba untuk menjaga bagian halaman di sini diatur bukan semua dibuang ke dalam satu folder besar. Cobalah untuk membuat bagan pohon  untuk kategori materi. Selain itu, hanya memindahkan halaman di sini yang sangat usang. Jika ada orang yang secara realistis memerlukan informasi dalam produk yang hidup, mungkin tidak tepat untuk memindahkannya ke sini. Secara umum, sebaiknya Anda mendiskusikannya di saluran MDN Web Docs sebelum memindahkan konten di sini.

+
+ +

{{SubpagesWithSummaries}}

+ + + +

{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}

diff --git a/files/id/archive/meta_docs/index.html b/files/id/archive/meta_docs/index.html new file mode 100644 index 0000000000..55e2f91374 --- /dev/null +++ b/files/id/archive/meta_docs/index.html @@ -0,0 +1,11 @@ +--- +title: Arsip MDN "meta-documentation" +slug: Archive/Meta_docs +tags: + - Archive + - MDN +translation_of: Archive/Meta_docs +--- +

Di sini Anda akan menemukan arsip "meta-documentation"; Yaitu dokumentasi tentang bagaimana menulis dokumentasi tentang MDN. Artikel di sini sudah usang dan seharusnya tidak lagi direferensikan; Kami mempertahankannya di sini untuk referensi sementara kami memigrasikan beberapa konten ke tempat baru, namun sangat sedikit hal ini berguna.

+ +

{{LandingPageListSubpages}}

diff --git a/files/id/archive/mozilla/index.html b/files/id/archive/mozilla/index.html new file mode 100644 index 0000000000..132253aacf --- /dev/null +++ b/files/id/archive/mozilla/index.html @@ -0,0 +1,8 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +translation_of: Archive/Mozilla +--- +

In progress. These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.

+ +

{{SubpagesWithSummaries}}

diff --git a/files/id/archive/mozilla/xul/index.html b/files/id/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..17aa6ed66c --- /dev/null +++ b/files/id/archive/mozilla/xul/index.html @@ -0,0 +1,84 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - NeedsTranslation + - TopicStub + - XUL +translation_of: Archive/Mozilla/XUL +--- +
XUL Tutorial
+A guided tutorial that will help you get started with XUL, originally from XULPlanet.
+ +
+

XUL (XML User Interface Language) is Mozilla's XML-based language for building user interfaces of applications like Firefox. The term XUL is sometimes used to refer to the whole Mozilla platform (e.g. XUL applications are applications using XUL and other components of the platform).

+ +

XUL Controls lists some of the common controls provided by XUL.

+
+ + + + + + + + +
+

Documentation

+ +
+
XUL Tutorial
+
A guided tutorial that will help you get started with XUL, originally from XULPlanet.
+
XUL Reference
+
XUL elements, attributes, properties, methods, and event handlers.
+
XUL Controls
+
A quick list of all of the available XUL controls.
+
The Joy of XUL
+
Describes the key features and components of XUL.
+
Menus and Popups Guide
+
A guide on using menus and popup panels.
+
Template Guide
+
A detailed guide on XUL templates, which is a means of generating content from a datasource.
+
Drag and Drop
+
How to perform drag and drop operations.
+
+ +
+
XUL Periodic Table
+
This collection of XUL demos was available as a web page, but can no longer be viwed in Firefox since support for Remote XUL was disabled.  There is a XULRunner application containing the XUL Periodic Table which can be opened with Gecko based browsers. You can get it here. See: XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications for instructions on running XULRunner apps in Firefox.
+
Changes to XUL
+
New XUL features and changes to existing features are included in the Firefox developer release notes.
+
+ +

View All...

+ 		+

Community

+ + + +

Tools

+ + + +

View All...

+ + + + +
+ +

 

diff --git a/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html b/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html new file mode 100644 index 0000000000..d3ddd60359 --- /dev/null +++ b/files/id/archive/mozilla/xul/international_characters_in_xul_javascript/index.html @@ -0,0 +1,23 @@ +--- +title: International characters in XUL JavaScript +slug: Archive/Mozilla/XUL/International_characters_in_XUL_JavaScript +translation_of: Archive/Mozilla/XUL/International_characters_in_XUL_JavaScript +--- +

Introduction

+

Gecko 1.8, as used in Firefox 1.5 and other applications, added support for non-ASCII characters in JavaScript files loaded from XUL files.

+

This means that such script files can use any character from virtually any language of the world. For example, they can contain a line:

+
var text = "Ein schönes Beispiel eines mehrsprachigen Textes: 日本語";
+
+

This mixes German and Japanese characters.

+

Earlier versions always interpreted JS files loaded from XUL as ISO-8859-1 (Latin-1), in both local and remote cases. Unicode escapes, as discussed below, have always worked.

+

How the character encoding is determined in Gecko 1.8 and later

+

When the JavaScript file is loaded from a chrome:// URL, a Byte Order Mark ({{todo}})({{ interwiki('wikipedia', 'Byte_Order_Mark', 'BOM') }}) is used to determine the character encoding of the script. Otherwise, the character encoding will be the same as the one used by the XUL file (which can be specified using an encoding attribute in the <?xml?> tag). By default this will use UTF-8, which can represent virtually all characters in the world.

+

If the script file is loaded via HTTP, the HTTP header can contain a character encoding declaration as part of the Content-Type header, for example:

+
Content-Type: application/javascript; charset=UTF-8
+
+

If no charset parameter is specified, the same rules as above apply.

+

Cross-version compatibility

+

If you want the same code to work in both Gecko 1.8 and earlier versions, you must limit yourself to ASCII. However, you can use unicode escapes – the earlier example rewritten using them would be:

+
var text = "Ein sch\u00F6nes Beispiel eines mehrsprachigen Textes: \u65E5\u672C\u8A9E";
+
+

An alternative might be to use property files via {{interface("nsIStringBundle")}} or the XUL <stringbundle> element; this would allow for localization of the XUL. This can not be done in XUL files loaded from the web, only in privileged code, e.g. in extensions.

diff --git a/files/id/archive/mozilla/xul/school_tutorial/index.html b/files/id/archive/mozilla/xul/school_tutorial/index.html new file mode 100644 index 0000000000..4ae723e85a --- /dev/null +++ b/files/id/archive/mozilla/xul/school_tutorial/index.html @@ -0,0 +1,59 @@ +--- +title: XUL School Tutorial +slug: Archive/Mozilla/XUL/School_tutorial +tags: + - Add-ons + - Extensions + - NeedsTranslation + - References + - TopicStub + - Tutorials + - XUL +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School +--- +

XUL School is a comprehensive add-on development tutorial, focusing on Firefox extension development. It is recommended that you read through all of it at least once. While Firefox changes rapidly, the content in this tutorial should be up to date and valid.

+
+
Introduction
+
+
Basic functionality
+
+
Intermediate functionality
+
+
Advanced topics
+
+
Appendices
+
+
+

The XUL School project was developed by Appcoast (formerly Glaxstar). The project is now published here following its sharing licenses. Its contents have been modified from the original source as necessary.

diff --git a/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html b/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html new file mode 100644 index 0000000000..5ce760d1be --- /dev/null +++ b/files/id/archive/mozilla/xul/school_tutorial/perkenalan/index.html @@ -0,0 +1,32 @@ +--- +title: Perkenalan +slug: Archive/Mozilla/XUL/School_tutorial/Perkenalan +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction +--- +
+ {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}
+

Selamat datang di Tutorial Sekolah XUL !

+

Tutorial ini dimaksudkan untuk menjadi batu loncatan yang akan mengubah Anda menjadi seorang pengembang ekstensi Firefox profesional dalam waktu singkat . Kami telah dituangkan tahun pengalaman XUL ke dalamnya , menyediakan banyak solusi untuk masalah pengembang ekstensi pada umumnya.

+

XUL School was created by Appcoast (formerly Glaxstar), one of the few companies dedicated to building high-quality Firefox extensions. A team of over a dozen XUL developers conformed Glaxstar at the time this tutorial was created, and the combined experiences of years creating Firefox extensions are reflected here.

+

With this tutorial you'll learn how to develop Firefox extensions. You'll learn how to quickly do the most common tasks in extension development, comparing several different approaches to solve them. In most cases we'll provide code samples that you can easily copy and adapt to your needs, as well as some working example extensions. The tutorial aims to be as brief as possible, often falling back on Mozilla documentation for more detailed information. You can think of it as a quick guide to the expansive world that is the Mozilla platform. Most links in this documentation are meant to be clicked and read.

+

We'll start with a brief introduction to some key concepts, in case you're not familiar with Mozilla and Firefox.

+

Mozilla and Firefox

+

The term Mozilla can be used to refer to several concepts: the Mozilla project, the Mozilla Foundation, the Mozilla Corporation and the old Mozilla browser. Even Firefox is sometimes referred to as "Mozilla". If you're unfamiliar with these terms, it's good that you take some time and learn a little about Mozilla. This will help you understand the culture that surrounds the Mozilla community.

+

Mozilla has spawned several products and projects, the most notable being the Mozilla Firefox web browser. Firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.

+

Version 1.0 of Firefox was released in November 2004, version 2.0 in October 2006, and version 3.0 in June 2008. This tutorial was written after Firefox 3 was released, and has been updated with time. While most of it should still work for creating extensions Firefox 3 (and even Firefox 2), it is strongly recommended that you aim to support modern Firefox versions, to encourage users to stay up to date with security fixes. A release that is more than 6 months old is likely vulnerable to published security bugs.

+

Firefox and other Mozilla applications can be seen as composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built. The user interface is built with technology known as XUL, and the platform is known as XULRunner.

+

XUL

+

XUL (pronounced "zool") is one of many technologies used for creating Mozilla-based products and extensions. It is only one part of the development landscape, but given that it's practically exclusive to Mozilla, it tends to be used to identify all Mozilla-related development. You'll sometimes read terms like "XUL applications" and "XUL extensions", but rarely will they refer to projects that are exclusively built with XUL. It usually means that the projects were built using Mozilla technologies. Even this project, called XUL School, covers several other technologies such as JavaScript, CSS, XBL and XPCOM.

+

XULRunner

+

XULRunner includes the Gecko rendering engine, the Necko networking library, and several other components that provide OS-independent file management, accessibility, and localization, among others. It is this very powerful platform that has allowed such a fast growth of the development community surrounding Mozilla and Firefox.

+

XULRunner is available in binary form at the XULRunner page, and it is the base for several projects, such as Songbird, Miro and Eudora. There's a very comprehensive list of XULRunner applications in the XULRunner Hall of Fame.

+

Gecko

+

The Gecko engine is the part of Firefox used to render web pages and its own user interface. You can identify the level of compatibility of web standards in Gecko-based browsers looking at their User Agent string, which should include the Gecko version. Gecko versions are somewhat independent from Firefox versions, and you can see a mapping of Firefox versions and Gecko versions at the Gecko page. The User Agent String for Firefox at the time of this writing (in US English, Mac OS X) is:

+

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:7.0.1) Gecko/20100101 Firefox/7.0.1

+

The highlighted section is the Gecko version: 7.0.1. You can read and copy the user agent string of any Firefox window, choosing "Help > Troubleshooting Information" from the main menu.

+

On to the Tutorial

+

With the basic concepts out of the way, we can now get right into extension development. You are probably still wondering what exactly is an extension, what can it do, and how can you make them. Well, this whole tutorial is devoted to explaining that to you.

+

Welcome to the world of extension development. Now let's get to it.

+
+ {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}
+

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html b/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html new file mode 100644 index 0000000000..9fa34889f3 --- /dev/null +++ b/files/id/archive/mozilla/xul/school_tutorial/the_essentials_of_an_extension/index.html @@ -0,0 +1,344 @@ +--- +title: The Essentials of an Extension +slug: Archive/Mozilla/XUL/School_tutorial/The_Essentials_of_an_Extension +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension +--- +

{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}

+

The install.rdf File

+

In the last section we looked at the contents of the Hello World extension. Now we'll look into its files and code, starting with the install.rdf file. You can open it with any text editor.

+

The file is formatted in a special flavor of XML called RDF. RDF used to be the central storage mechanism for Firefox, but it is now being replaced for a simpler database system. We'll discuss both of these storage systems further ahead in the tutorial.

+

Now let's look at the important parts of the file.

+
+
+ 
<em:id>helloworld@xulschool.com</em:id>
+
+
+

This is the unique identifier for the extension. Firefox needs this to distinguish your extension from other extensions, so it is required that you have an ID that is unique.

+

There are two accepted standards for add-on ids. One is the email-like format in the Hello World example, which should be something like <project-name>@<yourdomain>. The other standard practice is to use a generated UUID string, which is extremely unlikely to be duplicated. Unix-based systems have a command line tool called uuidgen that generates UUIDs. There are also downloadable tools for all platforms that generate them. The enclosing brackets are just notation, and they're just common practice. As long as your id has some uniqueness to it, it's OK to use either form.

+
+
+ 
<em:name>XUL School Hello World</em:name>
+<em:description>Welcome to XUL School!</em:description>
+<em:version>0.1</em:version>
+<em:creator>Appcoast</em:creator>
+<em:homepageURL>https://developer.mozilla.org/en/XUL_School</em:homepageURL>
+
+
+

This is the data that is displayed before and after the extension is installed, that you can see in the Add-ons Manager. There are many other tags that can be added, for contributors and translators. The full specification of the install.rdf file has all the details.

+

Since extensions can be translated to multiple languages, it is often necessary to translate the extension's description, or even its name. A localized description and name can be added with the following code:

+
+
+ 
<em:localized>
+  <Description>
+    <em:locale>es-ES</em:locale>
+    <em:name>XUL School Hola Mundo</em:name>
+    <em:description>Bienvenido a XUL School!</em:description>
+  </Description>
+</em:localized>
+
+
+

The es-ES locale string indicates that this is the Spanish (es) localization for Spain (ES). You can add as many <em:localized> sections as you need. For Firefox 2, localizing this file is a little more complicated. We'll discuss localization further ahead in this section.

+
+
+ 
<em:type>2</em:type>
+
+
+

This specifies that the add-on being installed is an extension. You can read about different possible types in the install.rdf specification.

+
+
+ 
<em:targetApplication>
+  <Description>
+    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+    <em:minVersion>4.0</em:minVersion>
+    <em:maxVersion>10.*</em:maxVersion>
+  </Description>
+</em:targetApplication>
+
+
+
+

This node specifies the target application and target versions for the extension, specifically Firefox, from version 4 up to version 10. The UUID is Firefox's unique ID. Other Mozilla and Mozilla-based applications such as Thunderbird and Seamonkey have their own. You can have an extension that works on multiple applications and versions. For example, if you create a Firefox extension, it would normally take little effort to port it to SeaMonkey, which has very similar features and UI.

+

The min and max version specify the version range in which the extension can be installed. Here's more about the version format. If the application or version range don't match, you won't be allowed to install the extension, or the extension will be installed in a disabled state. Users can disable version checks through preferences or installing add-ons like the Add-on Compatibility Reporter. Beginning with Firefox 11, add-ons will default to compatible and Firefox will mostly ignore the version range. Testing your add-ons with every Firefox version is always recommended, though.

+

This is the information Firefox and other Mozilla applications need to install an add-on. Any errors or missing information will cause the installation process to fail, or the extension to be installed in a disabled state.

+

The chrome.manifest File

+
+

Chrome is the set of user interface elements of the application window that are outside of a window's content area. Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.

+
+

Taken from Chrome Registration.

+

In other words, the chrome is everything you see in Firefox. All Firefox windows can be seen as having two parts: (1) the chrome and (2) possibly a content area, like the one that displays web pages in a Firefox tab. Windows like the Downloads window are pure chrome. Most of the code for an extension resides in the chrome folder, just like in the Hello World example.

+

As we saw in the directory structure of the unpacked extension, the chrome is composed of 3 sections: content, locale and skin. The 3 are necessary for most extensions. If we open the chrome.manifest file (again, any text editor will do), we see that the same 3 sections are mentioned:

+
+
+ 
content   xulschoolhello              content/
+skin      xulschoolhello  classic/1.0 skin/
+locale    xulschoolhello  en-US       locale/en-US/
+
+
+
+

The chrome.manifest file tells Firefox where to look for chrome files. The text is spaced to look like a table, but that is not necessary. The parser ignores repeated spaces.

+

The first word in a line tells Firefox what it is that is being declared (content, skin, locale, or others mentioned later on). The second is the package name, which we will explain shortly.

+

Skin and locale packages have a third value to specify what locale or what skin they are extending. There can be multiple skin and locale entries relating to different skins and locales. The most common case is having one skin entry for the global skin, classic/1.0, and multiple locale entries, one for each translation. Finally, the location is specified.

+

There are some additional options that can be included in the entries of a chrome.manifest file. They are documented in the Chrome Registration page. Notably, we can have entries that are OS-specific. This is important because the appearance of the browser is very different for each operating system. If our extension needed to look differently on different systems, we could change the manifest file so that it looks like this:

+
+
+ 
content   xulschoolhello              content/
+skin      xulschoolhello  classic/1.0 skin/unix/
+skin      xulschoolhello  classic/1.0 skin/mac/ os=Darwin
+skin      xulschoolhello  classic/1.0 skin/win/ os=WinNT
+locale    xulschoolhello  en-US       locale/en-US/
+
+
+
+

This way we can have separate skins for Windows, Mac OS X, and Linux (plus other unix-like systems), each defined in a separate directory. Since most other systems are Unix-based, the "unix" skin is the default, with no flags.

+

The Chrome

+

As mentioned earlier, the chrome is composed of 3 sections: content, locale and skin. The content is the most important section, holding user interface (XUL) and script (JS) files. The skin section has the files that define most of the look and feel of the UI (using CSS and images, just like web pages). Finally, the locale section holds all text used in the extension, in DTD and properties files. This division allows other developers to create themes that replace skins, and translators to create localizations in different languages, all of this without having to change your extension or your code. This gives Firefox extensions a great deal of flexibility.

+

Chrome files are accessed through the chrome protocol. This is what a chrome URI looks like:

+
+
+ 
chrome://packagename/section/path/to/file
+
+
+

So, for instance, if I want to access the file browserOverlay.xul in the extension, the chrome URI would be chrome://xulschoolhello/content/browserOverlay.xul.

+

If you have too many files in the content and you want to organize them in subdirectories, there's nothing you need to change in chrome.manifest, all you need is to add the right path after content in the URI.

+

Skin and locale files work in the same way, and you don't need to specify skin names or locale names. So, to access the DTD file in the Hello World extension, the chrome path is chrome://xulschoolhello/locale/browserOverlay.dtd. Firefox knows what locale to look for.

+

Here's an interesting experiment. Open a new Firefox tab, type chrome://mozapps/content/downloads/downloads.xul on your location bar and press ENTER. Surprised? You just opened the Downloads window in a Firefox tab! You can access any chrome file by just typing its URI in the location bar. This can come in handy if you want to inspect script files that are part of Firefox, other extensions, or your own. Most of these files are opened as text files, with the exception of XUL files, which are executed and displayed like you would normally see them on a window.

+

Content

+

There are 2 files in the content directory. Let's look at the XUL file first.

+

XUL files are XML files that define the user interface elements in Firefox and Firefox extensions. XUL was inspired by HTML, so you'll see many similarities between the two. However, XUL is also an improvement over HTML, having learned from many of the mistakes made during the evolution of HTML. XUL allows you to create richer and more interactive interfaces than the ones you can create with HTML, or at least XUL makes it easier.

+

XUL files usually define one of two things: windows or overlays. The file you opened before, downloads.xul, has the code that defines the Downloads window. The XUL file included in the Hello World extension is an overlay. An overlay extends an existing window, adding new elements to it or replacing some of the elements in it. The line that we skipped in the chrome.manifest file states that this XUL file is an overlay for the main browser window:

+
+
+ 
overlay chrome://browser/content/browser.xul  chrome://xulschoolhello/content/browserOverlay.xul
+
+
+

With this line, Firefox knows that it needs to take the contents of browserOverlay.xul and overlay it on the main browser window, browser.xul. You can declare overlays for any window or dialog in Firefox, but overlaying the main browser window is the most common case by far.

+

Now let's look at the contents of our XUL file. We'll skip the first few lines because they relate to skin and locale, and we'll cover them later.

+
+
+ 
<overlay id="xulschoolhello-browser-overlay"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+
+

The root element in the file is an overlay. Other XUL documents use the window or dialog tag. The element has a unique id, which you should have on most elements in your XUL. The second attribute is the namespace, which is something you should always define in your XUL root element. It says that this node and all child nodes are XUL. You only need to change namespace declarations when you mix different types of content in the same document, such as XUL with HTML or SVG.

+
+
+
+ You may have noticed the naming we use on several places, such as the id xulschoolhello-browser-overlay. This is the namespacing standard that we use to avoid conflicts with Firefox and other extensions, as well as making some development tasks easier. We namespace all ids and style classes in overlay elements because they will be mixed with other elements in the main browser window. If we used generic ids like container or input, they will likely conflict with ids used within Firefox, or with ids from other extension overlays. Using namespaces minimizes compatibility problems with other extensions. We use camel casing for file names, and all lower case with dashes for element ids and CSS style class names, but you're free to use your own system.
+
+
+
+
+ 
<script type="application/x-javascript"
+  src="chrome://xulschoolhello/content/browserOverlay.js" />
+
+
+

Just like in HTML, this includes a JavaScript script file. You can have as many script elements in a XUL document as you need. We'll look into its code later.

+
+
+
+ You also probably noticed how we format our code, and wonder about the rules we follow. Our general rule on line length is not having lines longer than 80 characters. This feels very restrictive, specially with XML files, but the number was chosen to allow pretty much any text editor to handle these files easily. Even old command line editors work well with files that cut their lines at 80 characters. The tabulation is very straightforward: 2 blank space indents. We never use actual tab characters, with the exception of Makefiles, which will be covered later on. Most of our coding standards are based on Mozilla's or other known and used standards.
+
+
+

 We'll skip some code that is covered in the locale section, moving on to the most important part of the content:

+
+
+ 
<menubar id="main-menubar">
+  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu">
+    <menupopup>
+      <menuitem id="xulschoolhello-hello-menu-item"
+        label="&xulschoolhello.hello.label;"
+        accesskey="&xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+    </menupopup>
+  </menu>
+</menubar>
+
+<vbox id="appmenuSecondaryPane">
+  <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;"
+    insertafter="appmenu_addons">
+    <menupopup>
+      <menuitem id="xulschoolhello-hello-menu-item-2"
+        label="&xulschoolhello.hello.label;"
+        accesskey="&xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+    </menupopup>
+  </menu>
+</vbox>
+
+
+
+

This is the code that adds the Hello World menu to the browser window.

+

There are two similar code blocks, because in modern versions of Firefox, particularly on Windows, a single Firefox menu button is presented, with simplified menu options, rather than an extensive menu bar. The second code block covers the common menu button case; the first code block covers all other cases. Check Menu Bar under the Options menu of the menu button to toggle display of the classic menu on Windows and some Linux distributions.

+

In order to write this code, we needed some knowledge of the XUL code in browser.xul. We needed to know that the id of the right pane in the unified menu is appmenuSecondaryPane. We're adding a menu of our own, and telling Firefox to add it in that pane, right after the Add-ons item. That's the purpose of the attribute:

+
+
+ 
insertafter="appmenu_addons"
+
+
+
+

appmenu_addons is the id of the menu element that corresponds to the Add-ons menu item in the main menu. We'll see later how we can find out things like the ids of browser elements, but for now let's look at the elements that compose the Hello World menu.

+

For the classic menu, we added the Hello World menu right in the "root" of the menu so that it would be very easy for you to spot it, but this is not a recommended practice. Imagine if all extensions added menus to the top menu; having a few extensions would make it look like an airplane dashboard, full of knobs and switches. In the case of the unified menu, things are a little more difficult due to lack of options. If your menu item fits in the Web Developer section, it is recommended that you add it there. Otherwise, the root menu might be your only recourse.

+

One recommended location for menus in the classic menu vase is under the Tools menu, so the code should really look like this:

+
+
+ 
<menupopup id="menu_ToolsPopup">
+  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;"
+    insertbefore="devToolsEndSeparator">
+    <menupopup>
+      <menuitem id="xulschoolhello-hello-menu-item"
+        label="&xulschoolhello.hello.label;"
+        accesskey="&xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+    </menupopup>
+  </menu>
+</menupopup>
+
+
+
+

We're overlaying the menu that is deeper into the XUL tree, but it doesn't matter because all we need is the id of the element we want to overlay. In this case it is the menupopup element that's inside of the Tools menu element. The insertbefore attribute tells Firefox to add the menu at the bottom of the dev tools section, above its end separator. We'll discuss more about menus later on in the tutorial.

+

Now let's look at the actual code:

+
+
+ 
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);"
+
+
+
+

This attribute defines an event handler. The command event is the most frequently used in Firefox, since it corresponds to the main action for most UI elements. The value of the attribute is JavaScript code that invokes a function. This function is defined in the JS file that was included with the script tag. The JS function will be called once the user clicks on the menu item in the Hello World menu. All event handlers define a special object named event, which is usually good to pass as an argument to the function. Event handlers are explained in greater depth further ahead.

+

Now let's look at the JavaScript file and see what's going on when the event is fired.

+
+
+ 
/**
+ * XULSchoolChrome namespace.
+ */
+if ("undefined" == typeof(XULSchoolChrome)) {
+  var XULSchoolChrome = {};
+};
+
+
+

The XULSchoolChrome namespace is defined. All objects and variables we define in this JavaScript are global, meaning that scripts in Firefox and other extensions can see them and interact with them. This also means that if we define an object called MenuHandler or some other generic name, it's likely going to conflict with an existing object. What we do here is define a single global object: XULSchoolChrome. Now we know that all of our objects are inside this object, which is unlikely to be duplicated or overwritten by other extensions.

+

You can read more about the typeof operator. If you're unfamiliar with JavaScript or this particular syntax, initializing an object as {} is the equivalent of initializing it to new Object().

+
+
+ 
/**
+ * Controls the browser overlay for the Hello World extension.
+ */
+XULSchoolChrome.BrowserOverlay = {
+
+
+

Finally, BrowserOverlay is our object. Naming and referencing  objects in such a long and verbose manner can feel uncomfortable at first, but it's worth the cost.

+
+
+
+ We use Javadoc style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.
+
+
+
+
+ 
sayHello : function(aEvent) {
+  let stringBundle = document.getElementById("xulschoolhello-string-bundle");
+  let message = stringBundle.getString("xulschoolhello.greeting.label");
+
+  window.alert(message);
+}
+
+
+

And, finally, this is our function declaration. Three lines of code are all we need for it to work. The first line in the body of the function declares a variable that will hold the stringbundle element defined in the overlay. The variable is declared using let, which is similar to var but with more restricted scope. Here you can read more about let declarations.

+

Just like in regular JS, we can use the DOM (Document Object Model) in order to manipulate the XUL document. First we get a reference of the stringbundle element in the document. This is a special element that allows us to obtain localized strings dynamically, by only providing a "key" that identifies the string. This is what we do on the second line. We call the getString method of the bundle element and get the localized message to be displayed. We then call the window.alert function with the message, just like we would do in an HTML document.

+

Locale

+

There are two types of locale files: DTD and properties, and in this example we use them both. DTD is the most efficient way of showing text in XUL, so you should use it whenever possible. It is somewhat inflexible so it can't be used for dynamically generated text, hence the need for an alternate way of getting localized strings.

+

Looking back at the menu code, you probably noticed some attributes such as this:

+
+
+ 
label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloItem.accesskey;"
+
+
+

These attributes define the text that you see on the menus, and they are string keys that are defined in our DTD file, browserOverlay.dtd. The DTD file was included in the XUL file with the following code:

+
+
+ 
<!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" >
+
+
+

And in the DTD file you can see the association between keys and localized strings:

+
+
+ 
<!ENTITY xulschoolhello.hello.label            "Hello World!">
+<!ENTITY xulschoolhello.helloMenu.accesskey    "l">
+<!ENTITY xulschoolhello.helloItem.accesskey    "H">
+
+
+

Notice that on the XUL file you enclose the string key with & and ; while on the DTD file you only specify the key. You may get weird parsing errors or incorrect localization if you don't get this right.

+

Access keys are the shortcuts that allow you to quickly navigate a menu using only the keyboard. They are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible. You can easily recognize the access keys on Windows because the letter that corresponds to the access key is underlined, as in the following image:

+
+

+
+

Most user interface controls have the accesskey attribute, and you should use it. The value of the access key is localized because it should match a letter in the label text. You should also be careful to avoid access key repetition. For example, within a menu or submenu, access keys should not be repeated. In a window you have to be more careful picking access keys because there are usually more controls there. You have to be specially careful when picking access keys on an overlay. In our case, we can't use the letter "H" as an accesskey in the Main menu item, because it would be the same as the access key in the Help menu. Same goes with "W" and the Window menu on Mac OS. So we settled on the letter "l".

+

DTD strings are resolved and set when the document is being loaded. If you request the label attribute value for the Hello World menu using DOM, you get the localized string, not the string key. You cannot dynamically change an attribute value with a new DTD key, you have to set the new value directly:

+
+
+ 
let helloItem = document.getElementById("xulschoolhello-hello-menu-item");
+
+// The alert will say "Hello World!"
+alert(helloItem.getAttribute("label"));
+// Wrong
+helloItem.setAttribute("label", "&xulschoolhello.hello2.label;");
+// Better
+helloItem.setAttribute("label", "Alternate message");
+// Right!
+helloItem.setAttribute("label", someStringBundle.getString("xulschoolhello.hello2.label"));
+
+
+

This is the reason DTD strings are not a solution for all localization cases, and the reason we often need to include string bundles in XUL files:

+
+
+ 
<stringbundleset id="stringbundleset">
+  <stringbundle id="xulschoolhello-string-bundle"
+    src="chrome://xulschoolhello/locale/browserOverlay.properties" />
+</stringbundleset>
+
+
+

The stringbundleset element is just a container for stringbundle elements. There should only be one per document, which is the reason why we overlay the stringbundleset that is in browser.xul, hence the very generic id. We don't include the insertbefore or insertafter attributes because the ordering of string bundles doesn't make a difference. The element is completely invisible. If you don't include any of those ordering attributes in an overlay element, Firefox will just append your element as the last child of the parent element.

+

All you need for the string bundle is an id (to be able to fetch the element later) and the chrome path to the properties file. And, of course, you need the properties file:

+
+
+ 
xulshoolhello.greeting.label = Hi! How are you?
+
+
+

The whitespace around the equals sign is ignored. Just like in install.rdf, comments can be added using the # character at the beginning of the line. Empty lines are ignored as well.

+

You will often want to include dynamic content as part of localized strings, like when you want to inform the user about some stat related to the extension. For example: "Found 5 words matching the search query". Your first idea would probably be to simply concatenate strings, and have one "Found" property and another "words matching..." property. This is not a good idea. It greatly complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence entirely. For this reason it's better to use parameters in the properties:

+
+
+ 
xulshoolhello.search.label = Found %S words matching the search query!
+
+
+

Then you use getFormattedString instead of getString in order to get the localized string. Thanks to this we don't need to have multiple properties, and life is easier for translators. You can read more about it on the Text Formatting section of the XUL Tutorial. Also have a look at the Plurals and Localization article, that covers a localization feature in Firefox that allows you to further refine this last example to handle different types of plural forms that are also language-dependent.

+

Skin

+

Styling XUL is very similar to styling HTML. We'll look into some of the differences when we cover the XUL Box Model, and other more advanced topics. There isn't much styling you can do to a minimal menu and a very simple alert message, so the Hello World extension only includes an empty CSS file and the compulsory global skin file:

+
+
+ 
<?xml-stylesheet type="text/css" href="chrome://global/skin/"  ?>
+<?xml-stylesheet type="text/css"
+  href="chrome://xulschoolhello/skin/browserOverlay.css"  ?>
+
+
+

The global skin CSS file holds the default styles for all XUL elements and windows. Forgetting to include this file in a XUL window usually leads to interesting and often unwanted results. In our case we don't really need to include it, since we're overlaying the main browser XUL file, and that file already includes this global CSS. At any rate it's better to always include it. This way it's harder to make the mistake of not including it. You can enter the chrome path in the location bar and inspect the file if you're curious.

+

This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.

+

Exercise

+

Make the following changes to the example extension:

+ +

Repackage the XPI. Issue the following command from within the extension root directory on Linux or Mac OS X:

+
zip ../xulschoolhello2.xpi **/*
+
+

On Windows, use a ZIP tool to compress all files and subdirectories within the extension root directory. Name the file with extension .xpi

+

Re-install the XPI. You can just drag the XPI file to the browser and it will be installed locally.

+

Test it and verify your changes worked. If you run into problems at installation, it's likely that you didn't reproduce the XPI structure correctly, maybe adding unnecessary folders.

+
+ Note: Packaging an extension is really just creating a ZIP archive of the contents of the main folder, then changing the filename extension to .XPI. Do not zip the containing folder, just its contents. The content folder, chrome.manifest, install.rdf, and other files and directories should be at the root level of your archive. If you zip the containing folder, your extension will not load.
+

Note that the Tools menu is hidden by default on Firefox 4 and above, on Windows and some Linux distributions. Check Menu Bar under the Options menu of the Firefox menu button to enable it.

+

Once you're done, you can look at this reference solution: Hello World 2.

+

{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}

+

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/id/archive/mozilla/xulrunner/index.html b/files/id/archive/mozilla/xulrunner/index.html new file mode 100644 index 0000000000..2bc8fd2c15 --- /dev/null +++ b/files/id/archive/mozilla/xulrunner/index.html @@ -0,0 +1,84 @@ +--- +title: XULRunner +slug: Archive/Mozilla/XULRunner +translation_of: Archive/Mozilla/XULRunner +--- +
+ Getting Started with XULRunner
+ A short introduction to XULRunner.
+
+ XULRunner is a Mozilla runtime package that can be used to bootstrap XUL+XPCOM applications that are as rich as Firefox and Thunderbird. It provides mechanisms for installing, upgrading, and uninstalling these applications. XULRunner also provides libxul, a solution which allows the embedding of Mozilla technologies in other projects and products.
+ + + + + + + +
+

Releases

+
+

XULRunner can be downloaded from ftp.mozilla.org. Please read the release notes for installation, uninstallation, and other information.

+

Firefox 3 and later ships with a private XULRunner package, which can run any compatible XULRunner application using the -app switch.

+

Older builds are also available.

+
+

Overview

+ +

Documentation

+
+
+ Getting Started with XULRunner
+
+ Short tutorial on building desktop applications with XULRunner.
+
+ XUL Tutorial
+
+ Once you have a working XULRunner application, use the XUL tutorial to expand it into a fantastic XUL application.
+
+ XULRunner tips
+
+ A collection of tips for working with XULRunner.
+
+ Deploying XULRunner
+
+ An introduction on how to package your application with XULRunner.
+
+ XULRunner Hall of Fame
+
+ Tracks all available applications based on XULRunner.
+
+ Build Documentation
+
+ Learn how to get the source and build it.
+
+ Debug Documentation
+
+ Steps to configure Venkman to debug your App
+
+ XULRunner Guide
+
+ A fairly complete, but outdated, introduction and tutorial for XULRunner which collates much of the documentation found here.
+
+

View all...

+ 		+

Community

+ + + +

See also

+ +
+

 

diff --git a/files/id/archive/web/index.html b/files/id/archive/web/index.html new file mode 100644 index 0000000000..1784816dc4 --- /dev/null +++ b/files/id/archive/web/index.html @@ -0,0 +1,15 @@ +--- +title: Arsip dokumentasi Web terbuka +slug: Archive/Web +tags: + - Archived + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Web +--- +

{{obsolete_header}}

+ +

Dokumentasi yang tercantum di bawah ini adalah arsip, materi usang tentang topik Web terbuka.

+ +

{{LandingPageListSubpages}}

diff --git a/files/id/archive/web/standards-compliant_authoring_tools/index.html b/files/id/archive/web/standards-compliant_authoring_tools/index.html new file mode 100644 index 0000000000..2126ebd25c --- /dev/null +++ b/files/id/archive/web/standards-compliant_authoring_tools/index.html @@ -0,0 +1,25 @@ +--- +title: Standards-Compliant Authoring Tools +slug: Archive/Web/Standards-Compliant_Authoring_Tools +translation_of: Archive/Web/Standards-Compliant_Authoring_Tools +--- +

Creating cross-browser code upfront will save you lots of time quality testing your web content. The following authoring tools adhere to the W3 standards. If you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to upgrade:

+ +

Some caveats: It appears that tools currently available from Namo generate IE-specific or Netscape 4-specific code that may require extra debugging for compatibility with standards-based browsers. Newer versions of Microsoft FrontPage™ have improved, however be sure not to rely on FrontPage-specific extensions for critical website content or functionality. Some versions of Microsoft Word create invalid HTML code that only works with Internet Explorer. Always be sure to validate your web pages.

+
+

Original Document Information

+ +
+ + diff --git a/files/id/developer_guide/index.html b/files/id/developer_guide/index.html new file mode 100644 index 0000000000..f1a8f48168 --- /dev/null +++ b/files/id/developer_guide/index.html @@ -0,0 +1,145 @@ +--- +title: Developer Guide +slug: Developer_Guide +tags: + - Developing Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide +--- +

Whether you're an old hand or just getting started, articles you can find starting from this page will help you while you're working on Mozilla development.

+ + + + + + + +
+

Documentation topics

+
+
+ Getting Started
+
+ A step-by-step beginner's guide to getting involved with Mozilla.
+
+
+
+ Working with Mozilla Source Code
+
+ A code overview, how to get the code, and the coding style guide.
+
+ Build Instructions
+
+ How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.
+
+ Development process overview
+
+ An overview of the entire Mozilla development process.
+
+ Managing multiple profiles
+
+ When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.
+
+ Automated Testing
+
+ How to run Mozilla's automated tests, and how to write new tests.
+
+ How to submit a patch
+
+ After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.
+
+ Getting documentation updated
+
+ How to ensure that documentation is kept up to date as you develop.
+
+ Mozilla modules and module ownership
+
+ This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.
+
+ Code snippets
+
+ Useful code samples for a wide variety of things you might need to figure out how to do.
+
+ Mozilla development strategies
+
+ Tips for how to make the most of your time working on the Mozilla project.
+
+ Debugging
+
+ Find helpful tips and guides for debugging Mozilla code.
+
+ Performance
+
+ Performance guides and utilities to help you make your code perform well (and to play nicely with others).
+
+ The Mozilla platform
+
+ Information about the workings of the Mozilla platform.
+
+ Adding APIs to the navigator object {{ gecko_minversion_inline("9.0") }}
+
+ How to augment the {{ domxref("window.navigator") }} object with additional APIs.
+
+ Interface Compatibility
+
+ Guidelines for modifying scriptable and binary APIs in Mozilla.
+
+ Customizing Firefox
+
+ Information about creating customized versions of Firefox.
+
+ Virtual ARM Linux environment
+
+ How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.
+
+ Obsolete Build Caveats and Tips
+
+ A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.
+
+ 		+

Tools

+
+
+ Bugzilla
+
+ The Bugzilla database used to track issues for Mozilla projects.
+
+ MXR
+
+ Browse and search the Mozilla source code repository on the Web.
+
+ Bonsai
+
+ The Bonsai tool lets you find out who changed what file in the repository, and when they did it.
+
+ Mercurial
+
+ The distributed version-control system used to manage Mozilla's source code.
+
+ Tinderbox
+
+ Tinderbox shows the status of the tree (whether or not it currently builds successfully).  Check this before checking in and out, to be sure you're working with a working tree.
+
+ Crash tracking
+
+ Information about the Socorro and Talkback crash reporting systems.
+
+ Performance tracking
+
+ See performance information for Mozilla projects.
+
+ Callgraph
+
+ A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.
+
+ Developer forums
+
+ A topic-specific list of discussion forums where you can talk about Mozilla development issues.
+
+ Mozilla Platform Development Cheat Sheet
+
+ Brian Bondy's list of frequently referenced information for platform developers.
+
+
+

 

diff --git a/files/id/developer_guide/virtual_arm_di_lingkungan_linux/index.html b/files/id/developer_guide/virtual_arm_di_lingkungan_linux/index.html new file mode 100644 index 0000000000..8465f45f06 --- /dev/null +++ b/files/id/developer_guide/virtual_arm_di_lingkungan_linux/index.html @@ -0,0 +1,77 @@ +--- +title: Virtual ARM di Lingkungan Linux +slug: Developer_Guide/Virtual_ARM_di_Lingkungan_Linux +tags: + - ARM Linux + - Mengembangkan Mozilla + - Mobile + - Pengujian + - SSH + - Virtual ARM +translation_of: Mozilla/Developer_guide/Virtual_ARM_Linux_environment +--- +

Pengujian dengan Linux di arsitektur ARM menggunakan QEMU

+

Halaman ini menejelaskan bagaimana cara untuk mendapatkan lingkungan virtual ARM dengan QEMU yang berjalan di (Ubuntu) Linux. Ini berguna untuk siapapun yang ingin mencoba kode ARM-specific dan tidak memiliki (atau membutuhkan) perangkat keras ARM untuk pengujian.

+

Prasyarat

+

Petunjuk ini mengasumsikan sistem host yang Anda gunakan adalah Ubuntu Linux juga karena memudahkan kita untuk memasang  perangkat lunak yang diperlukan dari repositori luar.

+

Target board/CPU

+

QEMU mendukung beberapa board dan CPU. Dari semua yang Saya uji, saya hanya bisa mendapatkan Versatile Express board untuk bekerja dengan lebih dari 256 MB RAM, itulah kenapa kita akan menggunakan board ini. Untuk target CPU, Saya menguji dengan Cortex A9 saja (ARMv7).

+

Instalasai perangkat lunak yang dibutuhkan

+
# Tambahkan repositori Linaro, termasuk peralatan mereka dan yang lebih baru
+# versi dari qemu (Anda memerlukan setidaknya qemu 0.15*).
+sudo add-apt-repository ppa:linaro-maintainers/tools
+# Memasang peralatan linaro dan qemu
+sudo apt-get install linaro-image-tools qemu-user-static qemu-system
+
+# Jika Anda ingin mendapatkan cross-compile pada host, pasang juga perangkat ini
+sudo apt-get install gcc-arm-linux-gnueabi g++-arm-linux-gnueab
+

Mengunduh rilis Linaro dan paket perangkat keras

+

Anda dapat menemukan rilis yang cocok dan paket perangkat lunak tarball pada halaman rilis linaro. Beberapa dari itu mungkin bekerja, atau mungkin tidak. Saya menggunakan dua link dibawah ini yang bekerja dengan baik untuk Saua I used the two links below that worked fine for me.

+
wget http://releases.linaro.org/platform/linaro-n/nano/alpha-3/linaro-natty-nano-tar-20110302-0.tar.gz
+wget http://releases.linaro.org/platform/linaro-n/hwpacks/alpha-3/hwpack_linaro-vexpress_20110302-0_armel_supported.tar.gz
+
+

Membuat image

+

''(Langkah-langkah berikut kita pinjam dari https://wiki.linaro.org/PeterMaydell...rsatileExpress dan sedikit dimodifikasi).'' Menggunakan peralatan linaro, Anda dapat dengan mudah membuat SD card image dari paket unduhan (ini akan memakan waktu cukup lama):

+
linaro-media-create --image_file vexpress.img --dev vexpress \
+  --binary linaro-natty-nano-tar-20110302-0.tar.gz \
+  --hwpack hwpack_linaro-vexpress_20110302-0_armel_supported.tar.gz
+
+

Mengekstart kernel dan initrd

+

Image yang dubuat juga berisi kernel dan initrd dari mesin kita. Kita memerlukan kedua file meskipun itu diluar image. Perintah berikut untuk mount image ke "/mnt/tmp":

+
sudo mount -o loop,offset="$(file vexpress.img | awk 'BEGIN { RS=";"; } /partition 2/ { print $7*512; }')" \
+  -t auto vexpress.img /mnt/tmp
+
+

Sekarang salin kernel dan initrd file ke direktori saat ini (CATATAN: Nama file dapat berbeda disetiap pembuatan!):

+
cp /mnt/tmp/vmlinuz-2.6.38-1000-linaro-vexpress .
+cp /mnt/tmp/initrd.img-2.6.38-1000-linaro-vexpress .
+# Buat beberapa symlink untuk memudahkan
+ln -s vmlinuz-2.6.38-1000-linaro-vexpress vmlinuz
+ln -s initrd.img-2.6.38-1000-linaro-vexpress initrd.img
+
+

Memulai QEMU

+

Anda dapat memulai QEMU sekarang dengan perintah berikut:

+
qemu-system-arm -M vexpress-a9 -cpu cortex-a9 -kernel ./vmlinuz \
+  -initrd ./initrd.img -redir tcp:2200::22 -m 512 \
+  -append "root=/dev/mmcblk0p2 vga=normal mem=512M devtmpfs.mount=0 rw" \
+  -drive file=vexpress.img,if=sd,cache=writeback
+
+

Bebrapa penjelasan dari opsi yang tidak jelas pada perintah diatas:

+ +

Setelah memulai mesin, Anda akan bertemu dengan Linux shell dalam layar QEMU setelah beberapa waktu startup

+

Menggunakan SSH

+

Untuk menggunakan SSH, Anda harus terlebih dahulu mengaktifkan jaringan dan memasang paket SSH servere. Mengaktifkan jaringan untuk sementara menggunakan perintah berikut:

+
ifconfig eth0 up
+dhclient eth0
+
+

Sekarang coba pasang SSH:

+
apt-get install openssh-server
+
+

Untuk membuat jaringan berubah menjadi permanen, edit file ''/etc/network/interfaces'' (e.g. dengan ''vi'') dan tambahkan baris berikut:

+
auto eth0
+iface eth0 inet dhcp
+
+

Terakhir, tentukan password untuk root menggunakan perintah ''passwd''. Sekarang jalankan ulang mesin dan lihat apakah Anda bisa melakukan SSH menggunakan ''ssh -p2200 root@localhost'' pada mesin host.

diff --git a/files/id/games/index.html b/files/id/games/index.html new file mode 100644 index 0000000000..fd78f805b8 --- /dev/null +++ b/files/id/games/index.html @@ -0,0 +1,95 @@ +--- +title: Pengembangan games +slug: Games +translation_of: Games +--- +
{{GamesSidebar}}
+ +
+

Memainkan games adalah salah satu aktivitas terpopuler yang dilakukan di komputer. Teknologi baru berkembang secara konstan untuk memungkinkan pengembangan games yang lebih baik sekaligus lebih bertenaga sehingga dapat dijalankan di peramban standar manapun.

+
+ +
+
+

Kembangkan web-games

+ +

Selamat datang di Pusat Pengembangan Game MDN! Disini kami menyediakan sarana-prasarana bagi para pengembang web yang ingin mengembangkan games. Anda akan menemui sejumlah artikel bermanfaat mengenai tutorial dan teknik yang dapat Anda temui di bagian kiri Menu Utama.

+ +

Kami juga menyediakan bagian referensi, sehingga Anda dapat menemukan informasi mengenai semua API yang umum digunakan dalam pengembangan games dengan mudah, ditambah daftar engine dan tools, serta contoh games yang kami sediakan.

+ +
+

Catatan: Anda sebaiknya telah menguasai setidaknya teknologi web dasar — seperti HTML, CSS dan JavaScript — sebelum mencoba untuk membuat webgames. Area Belajar adalah tempat yang bagus untuk belajar dan melatih diri jika Anda benar-benar seorang pemula.

+
+ +
+
+
+ +
+

Port native game to the Web

+ +

Jika Anda seorang pengembang asli (misalnya menulis game di C ++), dan kamu are interested in how you can port your games over to the Web, you should learn more about our Emscripten tool — this is An LLVM to JavaScript compiler, which takes LLVM bytecode (e.g. generated from C/C++ using Clang, or from another language) and compiles that into asm.js, which can be run on the Web.

+ +

Untuk memulai, lihat:

+ + +
+
+ +
+
+

Contoh

+ +

For a list of web game examples, see our examples page. Also check out openwebgames.com for more useful resources and examples!

+
+
+ +

+ +

See also

+ +
+
+
+
Build New Games
+
A collaborative site featuring a large number of open web game development tutorials. Hasn't been very active recently, but still holds some nice resources.
+
Creative JS
+
A collection of impressive JavaScript techniques and experiments, not specific to games, but helpful nonetheless. Hasn't been very active recently, but still holds some nice resources.
+
Game programming patterns
+
An online book, written by Bob Nystrom, which discusses programming patterns in the context of game development with the aim of helping game developers produce more effective, efficient code.
+
Artillery blog
+
HTML5 games company Artillery have some useful articles on their blog.
+
Building games for Firefox OS
+
A quick guide to creating 2D games with HTML5, for distribution on Firefox OS and other mobile platforms.
+
Gamedev.js Weekly
+
Weekly newsletter about HTML5 game development, sent every Friday. Contains the latest articles, tutorials, tools, and resources.
+
HTML5 Game Devs Forum
+
Forums for developers, framework creators and publishers. Ask questions, get feedback, help others.
+
+
+ +
+
+
HTML5 Game Engine
+
List of the most popular HTML5 game frameworks along with their rating, features and samples.
+
JSBreakouts
+
Compare JavaScript Breakout clones in different frameworks to help you choose the right one for you.
+
Tuts+ Game Development
+
Tutorials and articles about game development in general.
+
#BBG IRC chat
+
Talk with the developers directly in real time.
+
HTML5 Gamedev Starter
+
Starter for the new game developers, a curated list of links to various, useful resources around the web.
+
js13kGames
+
JavaScript coding competition for HTML5 game developers with the file size limit set to 13 kilobytes. All the submitted games are available in a readable form on GitHub.
+
Mozilla Hacks blog
+
Games category on the Mozilla Hacks blog containing interesting gamedev related articles.
+
Visual-js game engine
+
2d/3d/webSocket orientend game engine. Comes with tools for windows only. Hosted on bitbucket projects site.  
+
+
+
diff --git a/files/id/games/publishing_games/game_promotion/index.html b/files/id/games/publishing_games/game_promotion/index.html new file mode 100644 index 0000000000..50cd711e48 --- /dev/null +++ b/files/id/games/publishing_games/game_promotion/index.html @@ -0,0 +1,86 @@ +--- +title: Game promotion +slug: Games/Publishing_games/Game_promotion +translation_of: Games/Publishing_games/Game_promotion +--- +
{{GamesSidebar}}
+ +

Mengembangkan dan menerbitkan game Anda tidak cukup. Anda harus memberi tahu dunia bahwa Anda memiliki sesuatu yang menarik yang dapat dinikmati orang-orang. Ada banyak cara untuk mempromosikan game Anda - kebanyakan dari mereka gratis, jadi meskipun Anda berjuang untuk mencari nafkah sebagai seorang indie dev dengan anggaran nol, Anda masih dapat melakukan banyak hal untuk membuat orang tahu tentang permainan baru Anda yang hebat. Mempromosikan permainan membantu banyak ketika mendapatkan penghasilan nanti juga, jadi penting untuk melakukannya dengan benar.

+ +

Kompetisi

+ +

Mengambil bagian dalam kompetisi tidak hanya akan meningkatkan keterampilan gamedev Anda dan membiarkan Anda bertemu pengembang baru untuk berteman dan belajar dari - dan itu juga akan membuat Anda terlibat dalam komunitas. Jika Anda membuat gim yang bagus untuk kompetisi dan memenangkan beberapa hadiah dalam proses gim Anda secara otomatis akan dipromosikan oleh penyelenggara dan peserta lainnya. Anda akan kaya dan terkenal, atau begitulah kata mereka.

+ +

Banyak permainan hebat dimulai sebagai demo yang cepat dan ceroboh yang dikirimkan ke suatu kompetisi. Jika ide dan eksekusi cukup baik, Anda akan berhasil. Kompetisi Plus umumnya membutuhkan permainan untuk mengikuti tema wajib, sehingga Anda bisa berkreasi di sekitar tema jika Anda terjebak untuk ide.

+ +

Situs web dan blog

+ +

Anda harus membuat situs web sendiri yang berisi semua informasi tentang permainan Anda, sehingga orang dapat melihat apa yang telah Anda kerjakan. Semakin banyak informasi yang dapat Anda sertakan dengan lebih baik - Anda harus menyertakan tangkapan layar, deskripsi, trailer, paket pers, persyaratan, platform yang tersedia, detail dukungan, dan banyak lagi. Anda akan mendapatkan poin bonus karena memungkinkan pengguna Anda untuk langsung memainkan game Anda secara online - setidaknya dalam bentuk demo. Juga, Anda harus melakukan beberapa pekerjaan pada SEO untuk memungkinkan orang menemukan game Anda lebih mudah.

+ +

You should also blog about everything related to your gamedev activities. Write about your development process, nasty bugs you encounter, funny stories, lessons learned, and the ups and downs of being a game developer. Continually publishing information about your games will help educate others, increase your reputation in the community, and further improve SEO. A further option is to publish monthly reports that summarize all your progress — it helps you see what you've accomplished throughout the month and what's still left to do, and it keeps reminding people that your game is coming out soon — building buzz is always good.

+ +

While you can create your website from scratch, there are also tools that can help make the process easier.  ManaKeep is a website builder made for indie game developers and provides a great starting point to create your website.  Presskit() is a press kit builder that helps you create a press page to share with the media.

+ +

Social media

+ +

Your social media presence is very important — follow the right hashtags, make friends, engage in conversations, help other devs in need. Honesty is key and you should be authentic, because nobody likes boring press releases or pushy advertisements. When the time comes your community will help you spread the word about your shiny little game.

+ +

You should use at least Twitter and Facebook and be active on appropriate forums — the most popular one is HTML5GameDevs.com. Share your gamedev news and answer questions, so people will value what you're doing and will know that you're ok. Remember to not be too pushy on telling everyone about your games — you're not a walking advertisement.

+ +

Grow your fanbase by talking to them, sharing tips, offering discounts, giving away prizes in competitions, or just complaining at the weather or buggy browser you have to deal with. Act cool, be generous, be yourself and be there for others, and you'll get treated with respect.

+ +

Game portals

+ +

Using game portals is mostly concerned with monetization, but if you're not planning to sell licenses to allow people to purchase your game and are intending to implement adverts or in-app purchases instead, promoting your game across free portals can be effective.

+ +

You can send your games for publication on portals like CrazyGames.com, GameDistribution.com, Lagged.com, PacoGames.com ,games4html5.com or HTML5Games.com, and there are about 20-30 other notable game portals with and without API. 

+ +

Those portals that have their own API will allow you to authorize users, save their progress and process in-app purchases. You can also sell a full version of the game from inside your browser demo version, which will be a great move considering high competition, some developers even manage to make full browser versions. Most portals offer revenue share deals or will buy non exclusive license.

+ +

Free portals offer traffic, but only the best ones are popular enough to generate revenues from advertisements on in-app purchases. On the other hand they are a perfect tool to make games visible to a broader audience if you have no budget and limited time.

+ +

Press

+ +

You can try and reach the press about your game, but bear in mind that they get a tonne of requests like this every single day, so be humble and patient if they don't answer right away, and be polite when talking to them. Be sure to check first if they are dealing with specific genres of games or platforms, so you don't send them something that is not relevant to them in the first place. If you're honest with your approach and your game is good, then you've got more of a chance of success.

+ +

If you want to learn more about the etiquette of contacting the press you should definitely check out How To Contact Press - a great guide from Pixel Prospector, and the Video Game Journaliser site curated by them for the list of sites to contact.

+ +

Tutorials

+ +

It's good to share your knowledge with other devs — after all you probably learned a thing or two from online articles, so you take the time to pay that knowledge forward. Talking or writing about something you achieved or problems you overcame is something people would be interested it. And you can use your own game as an example, especially in a tutorial when you're showing how to do something you've implemented already. That way everyone benefits — people learn new skills, your game gets promoted, and if you're lucky you can even get paid for writing a tutorial if it's good enough.

+ +

There are portals like Tuts+ Game Development which will be more than happy if you write for them - they pay for the content, but not all topic ideas will be accepted. When writing a tutorial remember to focus on delivering something valuable to the reader. They want to learn something - offer your expertise and use your game as a case study. Focus on one aspect and try to explain it throughout and in detail. Also remember to follow up discussion in comments if people have any questions.

+ +

If portals you contact are not interested in your content because you don't have any experience yet, try writing tutorials and publish them on your own blog first. It's the easiest way to train your writing skills on your own.

+ +

YouTubers

+ +

It's a rising trend — don't underestimate the power of YouTubers playing your game, talking about it and streaming their experience to give you lots of promotion. You should also be realistic however — don't think this alone will skyrocket your downloads or visits, and be prepared to deal with bad reviews as well as good ones.

+ +

There are two options to get coverage from the YouTubers: first is you contact them directly and send a link to your game via email or private message. The second is earned in time - if you're known enough the YouTubers will contact you and ask for the link or build of your game. This Big List of YouTubers is a great place to start. You can find YouTube and Twitch.tv influencers at gameInfluencer.com to help promote your game.

+ +

Events

+ +

If you've gone through all the options listed above you can still find new, creative ways to promote your game — events are another good example. Attending events, both local and global, gives you the ability to meet your fans face to face, as well as other members of the development community. Value the fact that they spent their time seeing you.

+ +

Conferences

+ +

There are many conferences where you can give a talk explaining some technical difficulties you overcame, or how you implemented specific APIs; again — use your games as examples for that. It's important to focus on the knowledge part and tone down the marketing — devs are sensitive on this matter and you may end up with an angry crowd if you just try to sell them something.

+ +

Fairs

+ +

The other event-related option is fairs (or expos) — at such an event you can get a booth among other devs and promote your game to all the attendees passing by. If you do so, try to be unique and original, so you easily stand from the crowd. Do it the right way and everybody will be talking about you and your game. Having a booth gives you the possibility to interact with your fans directly — besides the promotion part you can also test new builds of your game on regular people and fix any bugs (or incorporate any feedback) they uncover. You can't imagine what people may come up with when playing your game, and what obvious issues you've missed while spending hours polishing it.

+ +

Promo codes

+ +

If you're selling the game, then create the ability to distribute promo codes allowing people to access your game for free (or at least a demo or time-limited version), and send them all over the place — to press, youtubers, as competition prizes, etc. If the game reaches certain people you'll get a free advert to thousands of players. It can boost interest in your game more than anything else if you get lucky.

+ +

Fostering the community

+ +

You can help community grow and promote yourself and your games at the same time. Sending out weekly newsletters and organizing online competitions or local meetups will show others that you're passionate about what you do and that they can rely on you. Then when you need any help they will be there for you.

+ +

Summary

+ +

Cara apa pun untuk mempromosikan permainan Anda adalah baik. Anda memiliki banyak opsi untuk dipilih dan sebagian besar di antaranya gratis, jadi ini hanya soal antusiasme dan waktu yang tersedia. Terkadang Anda harus menghabiskan lebih banyak waktu untuk mempromosikan game daripada benar-benar mengembangkannya. Ingatlah bahwa tidak ada gunanya memiliki permainan terbaik di dunia jika tidak ada yang tahu itu ada.

+ +

Sekarang mari kita lanjutkan dengan bagian monetisasi itu , dan dapatkan penghasilan untuk hidup.

diff --git a/files/id/games/publishing_games/index.html b/files/id/games/publishing_games/index.html new file mode 100644 index 0000000000..5559db1bbe --- /dev/null +++ b/files/id/games/publishing_games/index.html @@ -0,0 +1,28 @@ +--- +title: Publishing games +slug: Games/Publishing_games +tags: + - Games + - HTML5 + - JavaScript + - Monetization + - NeedsTranslation + - Promotion + - TopicStub + - distribution + - publishing +translation_of: Games/Publishing_games +--- +
{{GamesSidebar}}

HTML5 games have a huge advantage over native in terms of publishing and distribution — you have the freedom of distribution, promotion and monetization of your game on the Web, rather than each version being locked into a single store controlled by one company. You can benefit from the web being truly multiplatform. This series of articles looks at the options you have when you want to publish and distribute your game, and earn something out of it while you wait for it to become famous.

+ +

Game distribution

+ +

So you've followed a tutorial or two and created an HTML5 game — that's great! Game distribution provides all you need to know about the ways you can distribute your newly created game into the wild — including hosting it yourself online, submitting it to open marketplaces, and submitting it to closed ones like Google Play or the iOS App Store.

+ +

Game promotion

+ +

Developing and finishing the game is not enough. You have to let the world know that you have made something interesting available, which people will enjoy playing. There are many Game promotion techniques — many of them free — so even if you're struggling to make a living as an indie dev with zero budget you can still do a lot to let people know about your great new game. Promoting the game helps a lot in monetizing it later on too, so it's important to do it effectively.

+ +

Game monetization

+ +

When you spend your time building, publishing and promoting your game, you will at some point consider earning money out of it. Game monetization is essential to anyone who considers their game development work a serious endeavour on the path to becoming an independent game developer able to make a living, so read on and see what your options are. The technology is mature enough; it's just a matter of chosing the right approach.

diff --git a/files/id/games/techniques/index.html b/files/id/games/techniques/index.html new file mode 100644 index 0000000000..66edeebd82 --- /dev/null +++ b/files/id/games/techniques/index.html @@ -0,0 +1,32 @@ +--- +title: Techniques for game development +slug: Games/Techniques +tags: + - Games + - Guide + - NeedsTranslation + - TopicStub +translation_of: Games/Techniques +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
+

This page lists essential core techniques for anyone wanting to develop games using open web technologies.

+
+ +
+
Using async scripts for asm.js
+
Especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's JavaScript can be compiled off the main thread and be cached for future game running, resulting in a significant performance improvement for your users. This article explains how.
+
Optimizing startup performance
+
How to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.
+
Using WebRTC peer-to-peer data channels
+
In addition to providing support for audio and video communication, WebRTC lets you set up peer-to-peer data channels to exchange text or binary data actively between your players. This article explains what this can do for you, and shows how to use libraries that make this easy.
+
Efficient animation for web games
+
This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}.
+
Audio for Web Games
+
Audio is an important part of any game — it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to negotiate. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.
+
2D collision detection
+
A concise introduction to collision detection in 2D games.
+
Tilemaps
+
Tiles are a very popular technique in 2D games for building the game world. These articles provide an introduction to tilemaps and how to implement them with the Canvas API.
+
diff --git a/files/id/glossary/404/index.html b/files/id/glossary/404/index.html new file mode 100644 index 0000000000..9c8065b3e3 --- /dev/null +++ b/files/id/glossary/404/index.html @@ -0,0 +1,17 @@ +--- +title: '404' +slug: Glossary/404 +tags: + - Glossary + - HTTP Error + - Infrastructure +translation_of: Glossary/404 +--- +

404 merupakan Standard Kode Respon yang berarti bahwa {{Glossary("Server", "server")}} tidak dapat menemukan resource yang diminta.

+ +

Belajar lebih lanjut

+ + diff --git a/files/id/glossary/ajax/index.html b/files/id/glossary/ajax/index.html new file mode 100644 index 0000000000..2b4e187722 --- /dev/null +++ b/files/id/glossary/ajax/index.html @@ -0,0 +1,22 @@ +--- +title: AJAX +slug: Glossary/AJAX +translation_of: Glossary/AJAX +--- +

AJAX (Asynchronous {{glossary("JavaScript")}} dan {{glossary("XML")}}) merupakan praktik pemrograman yang menggabungkan {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, {{glossary("DOM")}}, dan XMLHttpRequest {{glossary("object")}} untuk membangun halaman web yang lebih kompleks. Yang bisa Anda lakukan dengan AJAX yaitu memungkinkan Anda untuk memperbarui bagian dari halaman tanpa harus me-reload keseluruhan halaman. AJAX juga dapat bekerja secara asynchronous, yang berarti kode anda terus berjalan ketika bagian halaman tersebut mencoba untuk memuat kembali konten (dibandingkan secara cara kerja synchronous, di mana kode akan diblokir dari saat berjalan hingga halaman telah selesai dimuat).

+ +

Pelajari juga

+ +

Pengetahuan Umum

+ + + +

Informasi Teknikal

+ + diff --git a/files/id/glossary/algoritma/index.html b/files/id/glossary/algoritma/index.html new file mode 100644 index 0000000000..d43365aeb8 --- /dev/null +++ b/files/id/glossary/algoritma/index.html @@ -0,0 +1,8 @@ +--- +title: Algoritma +slug: Glossary/Algoritma +tags: + - Glosarium +translation_of: Glossary/Algorithm +--- +

Algoritma adalah serangkaian instruksi untuk menyelesaikan suatu masalah

diff --git a/files/id/glossary/api/index.html b/files/id/glossary/api/index.html new file mode 100644 index 0000000000..b0e8c7a52e --- /dev/null +++ b/files/id/glossary/api/index.html @@ -0,0 +1,24 @@ +--- +title: API +slug: Glossary/API +tags: + - CodingScripting + - Glossary + - Infrastructure +translation_of: Glossary/API +--- +

Sebuah API (Application Programming Interface) merupakan set dari fitur dan aturan yang memungkinkan interaksi antar software yang menyediakan API dan komponen software lain. DI pengembangan Web, API umumnya disebut standard set {{glossary("method","methods")}}, {{Glossary("property","properties")}}, event, dan {{Glossary("URL","URLs")}} untuk berinteraksi dengan Konten Web.

+ +

Pelajari Lebih Lanjut

+ +

Pemahaman Umum

+ + + +

Referensi teknikal

+ + diff --git a/files/id/glossary/asynchronous/index.html b/files/id/glossary/asynchronous/index.html new file mode 100644 index 0000000000..8f2c96568d --- /dev/null +++ b/files/id/glossary/asynchronous/index.html @@ -0,0 +1,14 @@ +--- +title: Asynchronous +slug: Glossary/Asynchronous +translation_of: Glossary/Asynchronous +--- +

Asynchronous arti-nya mengacu pada sebuah communication environment (seperti email) di mana setiap bagian/ block  menerima dan memproses pesan - pesan dengan baik sekali, dan memungkinkan dapat menerima 'pesan' lebih dari sekali dan di olah dengan baik sekali dalam proses komunikasi cara ini.

+ +

Pelajari Lebih Dalam

+ +

Technical reference

+ + diff --git a/files/id/glossary/css/index.html b/files/id/glossary/css/index.html new file mode 100644 index 0000000000..c318ba2c3e --- /dev/null +++ b/files/id/glossary/css/index.html @@ -0,0 +1,48 @@ +--- +title: CSS +slug: Glossary/CSS +tags: + - CSS + - Glossary + - Web +translation_of: Glossary/CSS +--- +

CSS (Cascading Style Sheets) merupakan bahasa deklaratif yang mengontrol tampilan halaman web di {{glossary("browser")}}. Browser menerapkan deklarasi CSS pada elemen untuk menampilkannya dengan benar. Sebuah deklarasi style/gaya terdiri dari properti dan nilainya, yang menentukan bagaimana halaman web ditampilkan.

+ +

CSS merupakan salah satu dari tiga inti teknologi web, bersama dengan {{Glossary("HTML")}} dan {{Glossary("JavaScript")}}. CSS umumnya memberi style pada {{Glossary("Element","HTML elements")}}, namun juga dapat digunakan dengan bahasa markup lain seperti {{Glossary("SVG")}} atau {{Glossary("XML")}}.

+ +

Aturan CSS merupakan suatu himpunan {{Glossary("CSS Property","properties")}} yang terkait dengan {{Glossary("selector")}}. Berikut adalah sebuah contoh yang membuat setiap paragraf HTML berwarna kuning dengan warna latar hitam:

+ +
/* Selector "p" menunjukan bahwa semua paragraf pada dokumen akan dipengaruhi aturan ini */
+p {
+  /* Properti "color" mendefinisikan warna teks, pada contoh ini kuning - "yellow". */
+  color: yellow;
+
+  /* Properti "background-color" mendefinisikan warna latar, pada contoh ini hitam - "black". */
+  background-color: black
+}
+ +

Istilah "cascading" mengacu pada aturan-aturan yang mengatur bagaimana selector diprioritaskan untuk mengubah tampilan halaman. Ini merupakan fitur penting, karena sebuah situs yang kompleks dapat memiliki ribuan aturan CSS.

+ +

Pelajari Juga

+ +

Pengetahuan Umum

+ + + +

Referensi Teknikal

+ + + +

Belajar tentang CSS

+ + diff --git a/files/id/glossary/html/index.html b/files/id/glossary/html/index.html new file mode 100644 index 0000000000..3b2eb3d305 --- /dev/null +++ b/files/id/glossary/html/index.html @@ -0,0 +1,44 @@ +--- +title: HTML +slug: Glossary/HTML +translation_of: Glossary/HTML +--- +

HTML (HyperText Markup Language) merupakan sebuah bahasa deskriptif yang menentukan struktur halaman web.

+ +

Sejarah singkat

+ +

Pada tahun 1990, sebagai bagian dari visinya tentang {{glossary("World Wide Web","Web")}}, Tim Berners-Lee mendefinisikan konsep {{glossary("hypertext")}}, yang Berners-Lee buat secara resmi pada tahun selanjutnya melalui sebuah markup yang secara umum berbasis pada {{glossary("SGML")}}. {{glossary("IETF")}} mulai menetapkan HTML secara resmi pada tahun 1993, dan setelah beberapa draf mereka merilis versi 2.0 di tahun 1995. Pada tahun 1994 Berners-Lee mendirikan {{glossary("W3C")}} untuk mengembangkan Web. Di tahun 1996, W3C mengambil alih HTML dan mempublikasikan rekomendasi HTML 3.2 setahun kemudian. HTML 4.0 dirilis pada tahun 1999 dan menjadi standar ISO di tahun 2000.

+ +

Pada saat itu, W3C hampir meninggalkan HTML untuk mendukung {{glossary("XHTML")}}, sehingga memicu pendirian kelompok independen yang disebut {{glossary("WHATWG")}} di tahun 2004. Karena WHATWG, pekerjaan {{glossary("HTML5")}} diteruskan: kedua organisasi tersebut mempublikasikan draf pertama di tahun 2008 dan standar akhir di tahun 2014.

+ +

Konsep dan sintaks

+ +

Sebuah dokumen HTML merupakan sebuah dokumen plaintext yang terstruktur dengan {{glossary("element","elements")}}. Elemen dikelilingi oleh {{Glossary("tag","tags")}} pembuka dan penutup yang sesuai. Masing-masing tag dimulai dan diakhiri oleh sebuah angle bracket  (<>). Ada beberapa tag kosong atau void yang tidak dapat disertakan oleh teks apapun, seperti {{htmlelement("img")}}.

+ +

Anda dapat memperpanjang tag HTML dengan {{Glossary("attribute","attributes")}}, yang menyediakan informasi tambahan yang akan mempengaruhi bagaimana perambah mengimplementasikan elemen:

+ +

Detail of the structure of an HTML element

+ +

Sebuah file HTML biasanya disimpan dengan sebuah ekstensi .htm atau .html, yang dijalani oleh sebuah  {{Glossary("Server","web server")}}, dan dapat ditampilkan oleh {{Glossary("Browser","Web browser")}} apapun.

+ +

Pelajari juga

+ +

Pengetahuan umum

+ + + +

Belajar HTML

+ + + +

Referensi teknis

+ + diff --git a/files/id/glossary/http/index.html b/files/id/glossary/http/index.html new file mode 100644 index 0000000000..24a606d4d6 --- /dev/null +++ b/files/id/glossary/http/index.html @@ -0,0 +1,22 @@ +--- +title: HTTP +slug: Glossary/HTTP +tags: + - Beginner + - Glossary + - HTTP + - Infrastructure +translation_of: Glossary/HTTP +--- +

HTTP (HyperText Transfer Protocol) adalah {{glossary("protocol", "protokol")}} sederhana yang memunginkan transfer file di {{glossary("World Wide Web","Web")}}. HTTP bersifat tekstual (semua komunikasi dilakukan dengan teks biasa) dan stateless (tidak ada komunikasi yang menyadari komunikasi sebelumnya).

+ +
+

Pelajari juga

+ + +
+ +

 

diff --git a/files/id/glossary/identifier/index.html b/files/id/glossary/identifier/index.html new file mode 100644 index 0000000000..370c97cbb9 --- /dev/null +++ b/files/id/glossary/identifier/index.html @@ -0,0 +1,16 @@ +--- +title: Identifier +slug: Glossary/Identifier +translation_of: Glossary/Identifier +--- +

Rangkaian karakter dalam kode yang mengidentifikasikan sebuah {{glossary("variable")}}, {{glossary("function")}}, atau {{glossary("property")}}.

+ +

In {{glossary("JavaScript")}}, Pengidentifikasi dapat berisi hanya karakter alpanumerik (atau "$" atau "_"), dan tidak boleh dimulai dengan angka.  Pengenal berbeda dari string yang berupa string adalah data, sementara pengenal adalah bagian dari kode. Dalam JavaScript, tidak ada cara untuk mengonversi pengenal ke string, namun terkadang memungkinkan untuk mengurai string menjadi pengidentifikasi.

+ +

Belajar lebih lagi

+ +

Pengetahuan umum

+ + diff --git a/files/id/glossary/index.html b/files/id/glossary/index.html new file mode 100644 index 0000000000..59631f62ab --- /dev/null +++ b/files/id/glossary/index.html @@ -0,0 +1,27 @@ +--- +title: Glossary +slug: Glossary +tags: + - Beginner + - Glossary + - Index + - Landing + - NeedsTranslation + - TopicStub +translation_of: Glossary +--- +
{{LearnBox({"title":"Belajar Istilah baru:"})}}
+ +

Teknologi Web terdiri dari daftar panjang and singkatan yang digunakan di setiap dokumentasi dan coding. Glossary ini memberikan definisi dari kata - kata dan singkatan yang perlu anda ketahui untuk berhasil memahami dan membangun web.

+ +

{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}

+ +

Kontribusi ke glossary

+ +

Glossary ini tidak pernah berakhir dalam pengerjaan. Anda bisa membantu membaharuinya dengan menulis entry baru atau memperbaikinya. Cara termudah untuk memulai dengan menekan tombol yang disediakan atau pilih salah satu dari istilah berikut.

+ +

Tambahkan entry baru ke glossary

+ +

{{GlossaryList({"terms":["character encoding","DMZ","event","HMAC","condition","modem","OVP","TTL","Unicode"], "filter":"notdefined", "css":"multiColumnList"})}}

+ +

Jika anda ingin mengetahui lebih lanjut untuk berkontribusi ke glossary, kunjungi halaman status dokumentasi glossary.

diff --git a/files/id/glossary/javascript/index.html b/files/id/glossary/javascript/index.html new file mode 100644 index 0000000000..7ca928900d --- /dev/null +++ b/files/id/glossary/javascript/index.html @@ -0,0 +1,45 @@ +--- +title: JavaScript +slug: Glossary/JavaScript +tags: + - CodingScripting + - Glossary + - JavaScript +translation_of: Glossary/JavaScript +--- +

JavaScript (JS) merupakan bahasa pemrograman yang sering digunakan pada sisi klien (client-side) untuk membuat script pada halaman web secara dinamis, tapi juga sering digunakan pada sisi server ({{Glossary("Server","server")}}-side).

+ +

JavaScript tidak sama dengan {{interwiki("wikipedia", "Java_(programming_language)", "bahasa pemrograman Java")}}. Baik "Java" maupun "JavaScript" merupakan merek dagang atau merek dagang terdaftar Oracle di Amerika Serikat dan negara-negara lainnya. Namun, kedua bahasa pemrograman tersebut mempunyai sintaks, semantik, dan kegunaan yang sangat berbeda.

+ +

Dibuat sebagai bahasa sisi server oleh Brendan Eich (saat itu merupakan perkerja di Netscape Corporation), JavaScript selanjutnya hadir di Netscape Navigator 2.0 pada September 1995. JavaScript menikmati kesuksesan dan {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} memperkenalkan dukungan JavaScript di bawah nama JScript pada August 1996.

+ +

Di November 1996, Netscape mulai bekerja dengan ECMA International untuk membuat JavaScript sebagai sebuah standar industri. Sejak saat itu, JavaScript yang telah terstandardisasi disebut sebagai ECMAScript dan dispesifikasikan di bawah ECMA-262, di mana edisi terbaru (kedelapan) tersedia pada Juni 2017.

+ +

JavaScript pada umumnya digunakan pada perambah, memungkinkan pengembang untuk memanipulasi halaman web melalui {{Glossary("DOM")}}, memanipulasi data dengan {{Glossary("AJAX")}} dan {{Glossary("IndexedDB")}}, menggambar grafik dengan {{Glossary("canvas")}}, berinteraksi dengan perangkat yang menjalankan perambah melalui bermacam {{Glossary("API","APIs")}}, dan masih banyak lagi. JavaScript adalah salah satu bahasa yang paling sering digunakan di dunia, karena pertumbuhan dan peningkatan performa pada {{Glossary("API","APIs")}} di perambah yang ada baru-baru ini.

+ +

Belakangan ini, JavaScript kembali ke server dengan kesuksesan platform Node.js, yang merupakan runtime environment bersifat cross-platform JavaScript paling populer di luar perambah. Node.js memungkinkan Anda menggunakan JavaScript sebagai bahasa scripting yang mengotomatisasi banyak hal di PC dan membangun  {{Glossary("HTTP")}} dan server {{Glossary("Web Sockets")}} yang fungsional sepenuhnya.

+ +

Pelajari juga

+ +

Pengetahuan umum

+ + + +

Belajar JavaScript

+ + + +

Referensi teknis

+ + diff --git a/files/id/glossary/json/index.html b/files/id/glossary/json/index.html new file mode 100644 index 0000000000..fc0d4af364 --- /dev/null +++ b/files/id/glossary/json/index.html @@ -0,0 +1,24 @@ +--- +title: JSON +slug: Glossary/JSON +translation_of: Glossary/JSON +--- +

JavaScript Object Notation (JSON) merupakan sebuah format pertukaran data.  Meskipun bukanlah merupakan bagian dari  JavaScript,  JSON memiliki kemiripan terhadap bagian dari sintaks {{Glossary("JavaScript")}}. Meski banyak bahasa pemrograman yang mendukung JSON, JSON khususnya berguna untuk aplikasi-aplikasi berbasis JavaScript, termasuk situs dan ekstensi browser.

+ +

JSON dapat merepresentasikan angka, boolean, string, null , array (urutan terurut dari nilai-nilai), dan objek (pemetaan string-nilai) yang terdiri dari nilai-nilai tersebut (atau terdiri dari array dan objek lain). JSON tidak merepresentasikan tipe-tipe data yang lebih kompleks seperti fungsi, ekspresi regular, tanggal, dan lain sebagainya. (Objek Date secara standar melakukan serialisasi terhadap sebuah string  yang mengandung tanggal dalam format ISO, sehingga informasi yang ada tidak sepenuhnya hilang.) Apabila Anda memerlukan JSON untuk merepresentasikan tipe-tipe data tambahan, transformasikanlah nilai-nilai bersamaan ketika mereka diserialisasikan atau sebelum mereka dideserialisasikan.

+ +

Seperti XML, JSON memiliki kemampuan untuk menyimpan data yang bersifat hirarkis, tidak seperti format CSV tradisional. Banyak alat yang menyediakan translasi antara format-format ini seperti JSON to CSV Converter ini.

+ +

Pelajari juga

+ +

Pengetahuan umum

+ + + +

Referensi teknis

+ + diff --git a/files/id/glossary/method/index.html b/files/id/glossary/method/index.html new file mode 100644 index 0000000000..8f10dd9061 --- /dev/null +++ b/files/id/glossary/method/index.html @@ -0,0 +1,29 @@ +--- +title: Method +slug: Glossary/Method +tags: + - CodingScripting + - Glossary + - JavaScript +translation_of: Glossary/Method +--- +

Sebuah method merupakan {{glossary("function")}} yang berupa {{glossary("property")}} dari {{glossary("object")}}. Ada dua jenis method: Instance Method yang berupa built-in tasks yang di jalankan oleh instansi object, atau Static Methods yang berupa tasks yang dapat dijalankan tanpa membutuhkan instansi object.

+ +
+

Catatan: Fungsi di JavaScript sendiri merupakan objek, jadi, pada konteks tersebut, sebuah method merupakan {{glossary("object reference")}} dari function.

+
+ +

Pelajari lebih lanjut

+ +

Pelajari Ini

+ + + +

Referensi teknikal

+ + diff --git a/files/id/glossary/null/index.html b/files/id/glossary/null/index.html new file mode 100644 index 0000000000..42d1799b50 --- /dev/null +++ b/files/id/glossary/null/index.html @@ -0,0 +1,27 @@ +--- +title: 'Null' +slug: Glossary/Null +tags: + - CodingScripting + - Glossary + - Pustaka +translation_of: Glossary/Null +--- +

Dalam ilmu komputer, nilai null mewakili referensi suatu nilai yang tidak ada, umumnya sengaja untuk meng-tiadakan, hampa, atau Invalid {{glossary("object")}} atau pengalamatan. Banyak arti referensi null pada penerapan bahasa pemrogramman lainnya.

+ +

Dalam {{Glossary("JavaScript")}}, null adalah salahsatu dari {{Glossary("Primitive", "Nilai Primitif")}}.

+ +

Rujukan Lain

+ +

Pengetahuan Umum

+ + + +

Referensi Teknik

+ + diff --git a/files/id/glossary/primitive/index.html b/files/id/glossary/primitive/index.html new file mode 100644 index 0000000000..a79af0b9dd --- /dev/null +++ b/files/id/glossary/primitive/index.html @@ -0,0 +1,32 @@ +--- +title: Primitive +slug: Glossary/Primitive +translation_of: Glossary/Primitive +--- +

A primitif (nilai primitif, tipe data primitif) adalah data yang bukan suatu {{Glossary("object", "objek")}} dan tidak memiliki {{glossary("method","metode")}}. Dalam {{Glossary("JavaScript")}}, ada 6 tipe data primitif: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("boolean")}}, {{Glossary("null")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}} (baru dalam {{Glossary("ECMAScript")}} 2015).

+ +

Sebagian besar waktu, nilai primitif diwakili secara langsung pada tingkat terendah dalam implementasi bahasa.

+ +

Semua primitif tidak immutable (tidak bisa diubah).

+ +

Objek pembungkus primitif pada JavaScript

+ +

Kecuali untuk null dan undefined, semua nilai primitif memiliki persamaan objek yang membungkus nilai primitif:

+ + + +

Pembungkus metode valueOf() mengembalikan nilai primitif.

+ +

Belajar lebih lagi

+ +

Pengetahuan umum

+ + diff --git a/files/id/glossary/property/index.html b/files/id/glossary/property/index.html new file mode 100644 index 0000000000..dbe9210178 --- /dev/null +++ b/files/id/glossary/property/index.html @@ -0,0 +1,11 @@ +--- +title: Property +slug: Glossary/property +tags: + - Disambiguation + - Glossary +translation_of: Glossary/property +--- +

Pengaertian property bisa diartikan lebih dari satu artian berdasarkan konteks. Mungkin dapat ditujukan ke:

+ +

{{GlossaryDisambiguation}}

diff --git a/files/id/glossary/python/index.html b/files/id/glossary/python/index.html new file mode 100644 index 0000000000..ff93ff587f --- /dev/null +++ b/files/id/glossary/python/index.html @@ -0,0 +1,19 @@ +--- +title: Python +slug: Glossary/Python +translation_of: Glossary/Python +--- +

Python adalah bahasa pemrograman tujuan umum tingkat tinggi. Ini menggunakan pendekatan multi-paradigma, yang berarti mendukung prosedural, berorientasi objek dan beberapa konstruksi pemrograman fungsional. 

+ +

Diciptakan oleh Guido van Rossum sebagai penerus bahasa lain (disebut ABC) antara tahun 1985 dan 1990, dan saat ini digunakan pada sejumlah besar domain, seperti pengembangan web, sebagai bahasa script untuk aplikasi lain dan untuk membangun aplikasi yang sebenarnya.

+ +

Python dikembangkan di bawah lisensi open source yang disetujui OSI, membuatnya dapat digunakan dan didistribusikan secara bebas, bahkan untuk penggunaan komersial. Lisensi Python dikelola oleh Python Software Foundation. 

+ +

Learn More

+ +

 

+ + diff --git a/files/id/glossary/seo/index.html b/files/id/glossary/seo/index.html new file mode 100644 index 0000000000..af4c5243be --- /dev/null +++ b/files/id/glossary/seo/index.html @@ -0,0 +1,42 @@ +--- +title: SEO +slug: Glossary/SEO +tags: + - Glossary + - Intro + - SEO + - Search + - WebMechanic + - open +translation_of: Glossary/SEO +--- +

SEO (Search Engine Optimization) adalah proses membuat situs web lebih terlihat dalam hasil pencarian, juga disebut meningkatkan peringkat pencarian.

+ +

Mesin pencari {{Glossary("Crawler", "crawl")}} web, mengikuti tautan dari halaman ke halaman, dan mengindeks konten yang ditemukan. Saat Anda mencari, mesin pencari menampilkan konten yang diindeks. Crawler mengikuti aturan. Jika Anda mengikuti aturan-aturan itu dengan cermat ketika melakukan SEO untuk sebuah situs web, Anda memberikan situs peluang terbaik untuk muncul di antara hasil pertama, meningkatkan lalu lintas dan kemungkinan penghasilan (untuk e-niaga dan iklan).

+ +

Mesin pencari memberikan beberapa pedoman untuk SEO, tetapi mesin pencari besar menjaga peringkat hasil sebagai rahasia dagang. SEO menggabungkan pedoman mesin pencari resmi, pengetahuan empiris, dan pengetahuan teoritis dari karya ilmiah atau paten.

+ +

Metode SEO terbagi dalam tiga kelas besar:

+ +
+
teknis
+
Tandai konten menggunakan semantik {{Glossary("HTML")}}. Saat menjelajahi situs web, perayap hanya akan menemukan konten yang ingin Anda indeks.
+
penulisan
+
Tulis konten menggunakan kosakata pengunjung Anda. Gunakan teks dan juga gambar sehingga crawler dapat memahami subjek.
+
kepopuleran
+
Anda mendapatkan sebagian besar lalu lintas ketika situs mapan lain menautkan ke situs Anda.
+
+ +

Belajarlah lagi

+ +

Pengetahuan umum

+ + + +

Pelajari SEO

+ + diff --git a/files/id/glossary/statement/index.html b/files/id/glossary/statement/index.html new file mode 100644 index 0000000000..d13f2c7c30 --- /dev/null +++ b/files/id/glossary/statement/index.html @@ -0,0 +1,21 @@ +--- +title: Statement +slug: Glossary/Statement +translation_of: Glossary/Statement +--- +

Dalam bahasa pemrograman komputer, sebuah statemen/pernyataan adalah sebuah baris kode yang memerintahkan sebuah tugas. Setiap program terdiri dari serangkaian pernyataan.

+ +

Pengetahuan umum

+ + + +

Referensi teknis

+ + + + diff --git a/files/id/glossary/svg/index.html b/files/id/glossary/svg/index.html new file mode 100644 index 0000000000..6a25d78c8b --- /dev/null +++ b/files/id/glossary/svg/index.html @@ -0,0 +1,37 @@ +--- +title: SVG +slug: Glossary/SVG +tags: + - Glossary + - Graphics + - SVG +translation_of: Glossary/SVG +--- +

Scalable Vector Graphics (SVG) merupakan format gambar vektor 2D berbasis sintaks {{Glossary("XML")}}.

+ +

{{Glossary("W3C")}} mulai mengerjakan SVG pada akhir 1990s, namun SVG baru menjadi populer ketika {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 keluar dengan dukungan SVG. Semua {{Glossary("browser","browsers")}} sekarang mendukung SVG.

+ +

Berbasis pada sintaks {{Glossary("XML")}}, SVG dapat diberikan gaya dengan menggunakan {{Glossary("CSS")}} dan dibuat semakin interaktif dengan menggunakan {{Glossary("JavaScript")}}. HTML5 saat ini memungkinkan direct embedding pada {{Glossary("Tag","tags")}} SVG pada dokumen {{Glossary("HTML")}}.

+ +

Sebagai sebuah format gambar vektor, grafis SVG dapat dirubah skalanya tanpa batas, sehingga membuat SVG sangat berharga dalam {{Glossary("responsive design")}}, karena Anda dapat membuat antarmuka elemen dan grafis yang dapat menyesuaikan pada segala ukuran layar. SVG juga menyediakan banyak alat-alat yang berguna, seperti clipping, masking, filter, dan animasi.

+ +

Pelajari juga

+ +

Pengetahuan umum

+ + + +

Belajar SVG

+ + + +

Informasi teknis

+ + diff --git a/files/id/glossary/url/index.html b/files/id/glossary/url/index.html new file mode 100644 index 0000000000..0a7c62889a --- /dev/null +++ b/files/id/glossary/url/index.html @@ -0,0 +1,27 @@ +--- +title: URL +slug: Glossary/URL +tags: + - Glossary + - Infrastructure +translation_of: Glossary/URL +--- +

Uniform Resource Locator (URL) adalah sebuah teks string yang menentukan dimana sebuah sumber daya dapat ditemukan di internet.

+ +

Dalam konteks {{Glossary("HTTP")}}, URL disebut sebagai "alamat Web" atau "tautan". Browser Anda menampilkan URL pada address bar, seperti https://developer.mozilla.org

+ +

URL juga dapat digunakan untuk mentransfer file ({{Glossary("FTP")}}) , email ({{Glossary("SMTP")}}), dan aplikasi lainnya.

+ +

Pelajari juga

+ +

Pengetahuan umum

+ + + +

Pelajari ini

+ + diff --git a/files/id/glossary/variable/index.html b/files/id/glossary/variable/index.html new file mode 100644 index 0000000000..1e1e3c4392 --- /dev/null +++ b/files/id/glossary/variable/index.html @@ -0,0 +1,21 @@ +--- +title: Variable +slug: Glossary/Variable +translation_of: Glossary/Variable +--- +

Variabel merupakan nama lokasi untuk menyimpan {{Glossary("Value", "value")}}. Dengan begitu nilai tertentu dapat di akses melalui nama variabel yang telah ditentukan.

+ +

Lainnya

+ +

Pengetahuan Umum

+ + + +

Referensi Teknis

+ + diff --git a/files/id/glossary/xml/index.html b/files/id/glossary/xml/index.html new file mode 100644 index 0000000000..b233a5fba7 --- /dev/null +++ b/files/id/glossary/xml/index.html @@ -0,0 +1,11 @@ +--- +title: XML +slug: Glossary/XML +tags: + - Glossary + - XML +translation_of: Glossary/XML +--- +

eXtensible Markup Language (XML) adalah bahasa markup generik yang dispesifikasi oleh W3C. Industri teknologi informasi (IT) menggunakan banyak bahasa yang berdasarkan pada XML sebagai bahasa yang bersifat data-description.

+ +

Tag XML menyerupai tag HTML, tapi XML lebih fleksibel karena memungkinkan pengguna mendefinisikan tagnya sendiri. Cara bertindak XML ini seperti sebuah meta-language, di mana XML dapat digunakan untuk mendefinisikan bahasa lain, seperti {{Glossary("RSS")}}. Selain itu, HTML merupakan bahasa representasi, yang berarti XML adalah bahasa data-description. Ini berarti bahwa XML memiliki jangkauan aplikasi yang lebih luas dari sekedar Web. Misalnya, Web services dapat menggunakan XML untuk pertukaran permintaan dan tanggapan.

diff --git a/files/id/learn/accessibility/index.html b/files/id/learn/accessibility/index.html new file mode 100644 index 0000000000..7206a2393b --- /dev/null +++ b/files/id/learn/accessibility/index.html @@ -0,0 +1,63 @@ +--- +title: Accessibility +slug: Learn/Accessibility +translation_of: Learn/Accessibility +--- +
{{LearnSidebar}}
+ +

Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies responsibly so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the HTML, CSS, and JavaScript topics), cross browser testing, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.

+ +

Overview

+ +

When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.

+ + + +

By default, HTML is accessible, if used correctly. Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.

+ +

Prerequisites

+ +

To get the most out of this module, it would be a good idea to either work through at least the first two modules of the HTML, CSS, and JavaScript topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.

+ +
+

Note: If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as JSBin or Glitch.

+
+ +

Guides

+ +
+
What is accessibility?
+
This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
+
HTML: A good basis for accessibility
+
A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose . This article looks in detail at how HTML can be used to ensure maximum accessibility.
+
CSS and JavaScript accessibility best practices
+
CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.
+
WAI-ARIA basics
+
Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.
+
Accessible multimedia
+
Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.
+
Mobile accessibility
+
With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
+
+ +

Assessments

+ +
+
Accessibility troubleshooting
+
+

In the assessment for this module, we present to you a simple site with several accessibility issues that you need to diagnose and fix.

+
+
+ +

See also

+ + diff --git a/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html b/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html new file mode 100644 index 0000000000..b4431bfc93 --- /dev/null +++ b/files/id/learn/common_questions/bagaimana_cara_kerja_internet/index.html @@ -0,0 +1,98 @@ +--- +title: Bagaimana cara kerja Internet +slug: Learn/Common_questions/Bagaimana_cara_kerja_Internet +tags: + - Pemula + - Tutorial + - Web + - WebMechanics +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
+

Artikel ini membahas apa itu Internet dan bagaimana ia bekerja.

+
+ + + + + + + + + + + + +
Prasyarat:Tidak ada, namun kami mendorong Anda untuk membaca Artikel tentang menetapkan tujuan proyek terlebih dahulu
Tujuan:Anda akan mempelajari dasar-dasar infrastruktur teknis Web dan perbedaan antara Internet dan Web.
+ +

Ikhtisar

+ +

Internet merupakan tulang punggung dari Web, infrastruktur teknis yang memungkinkan Web tersedia. Pada dasarnya, Internet adalah jaringan besar komputer yang berkomunikasi bersama-sama.

+ +

Sejarah Internet agak tidak jelas. Ini dimulai pada 1960-an sebagai proyek penelitian yang didanai oleh tentara AS, kemudian berkembang menjadi infrastruktur publik pada 1980-an dengan dukungan dari banyak universitas publik dan perusahaan swasta. Berbagai teknologi yang mendukung Internet telah berevolusi dari waktu ke waktu, tetapi cara kerjanya tidak banyak berubah: Internet adalah cara untuk menghubungkan komputer bersama-sama dan memastikan bahwa, apa pun yang terjadi, mereka menemukan cara untuk tetap terhubung.

+ +

Active Learning

+ + + +

Menyelam lebih dalam

+ +

Sebuah jaringan sederhana

+ +

Ketika dua komputer perlu berkomunikasi, Anda harus menghubungkannya, baik secara fisik (biasanya dengan menggunakan Kabel Ethernet) atau nirkabel (seperti sistem WiFi atau Bluetooth). Semua komputer modern dapat memungkinkan koneksi tersebut.

+ +
+

Catatan: Untuk sisa artikel ini, kita hanya akan berbicara tentang kabel fisik, tetapi jaringan nirkabel bekerja dengan cara yang sama.

+
+ +

Two computers linked together

+ +

Jaringan seperti itu tidak terbatas pada dua komputer. Anda dapat menghubungkan banyak komputer sesuai keinginan. Tapi dapat menjadi rumit dengan mudah. Jika Anda mencoba menghubungkan, katakanlah, sepuluh komputer, Anda memerlukan 45 kabel, dengan sembilan colokan per komputer!

+ +

Ten computers all together

+ +

Untuk mengatasi masalah ini, setiap komputer di jaringan terhubung ke komputer kecil khusus yang disebut router. Router ini hanya memiliki satu pekerjaan: perumpamaannya seperti pemberi sinyal di stasiun kereta api, memastikan bahwa pesan yang dikirim dari komputer tertentu tiba di komputer tujuan yang tepat. Untuk mengirim pesan ke komputer B, komputer A harus mengirim pesan ke router, yang pada gilirannya meneruskan pesan ke komputer B dan memastikan pesan tidak dikirim ke komputer C.

+ +

Setelah kita menambahkan router ke sistem, jaringan dari 10 komputer kita membutuhkan 10 kabel: satu pasang untuk setiap komputer dan router dengan 10 colokan.

+ +

Ten computers with a router

+ +

Jaringan dalam jaringan

+ +

Sejauh ini bagus. Tapi bagaimana dengan menghubungkan ratusan, ribuan, miliaran komputer? Tentu saja satu router tidak dapat menskalakan sejauh itu, tetapi, jika Anda membaca dengan seksama, kami mengatakan bahwa router adalah komputer seperti yang lain, jadi apa yang membuat kita tidak bisa menghubungkan dua router bersama? Tidak ada, jadi ayo lakukan itu.

+ +

Two routers linked together

+ +

Dengan menghubungkan tiap komputer ke router, kemudian tiap router ke router, kita dapat menskalakan tanpa batas.

+ +

Routers linked to routers

+ +

Jaringan semacam itu sangat dekat dengan apa yang kita sebut Internet, tetapi kita kehilangan sesuatu. Kita membangun jaringan itu untuk tujuan kita sendiri. Ada jaringan lain di luar sana: teman-teman Anda, tetangga Anda, siapa pun dapat memiliki jaringan komputer sendiri. Tapi itu tidak benar-benar memungkinkan untuk memasang kabel di antara rumah Anda dan seluruh dunia, jadi bagaimana Anda menangani ini? Nah, sudah ada kabel yang terhubung ke rumah Anda, misalnya, tenaga listrik dan telepon. Infrastruktur telepon sudah menghubungkan rumah Anda dengan siapa pun di dunia sehingga itu adalah kabel yang sempurna yang kita butuhkan. Untuk menghubungkan jaringan kita ke infrastruktur telepon, kita memerlukan peralatan khusus yang disebut modem. Modem ini mengubah informasi dari jaringan kita menjadi informasi yang dapat dikelola oleh infrastruktur telepon dan sebaliknya.

+ +

A router linked to a modem

+ +

Maka kita terhubung ke infrastruktur telepon. Langkah selanjutnya adalah mengirim pesan dari jaringan kami ke jaringan yang ingin dijangkau. Untuk melakukan itu, kita akan menghubungkan jaringan ke Penyedia Layanan Internet (ISP). ISP adalah perusahaan yang mengelola beberapa router khusus yang menghubungkan semua bersama-sama dan juga dapat mengakses router ISP lain. Jadi pesan dari jaringan kita dibawa melalui jaringan jaringan ISP ke jaringan tujuan. Internet terdiri dari seluruh infrastruktur jaringan ini.

+ +

Full Internet stack

+ +

Mencari komputer

+ +

Jika Anda ingin mengirim pesan ke komputer, Anda harus menentukan komputer mana. Jadi setiap komputer yang terhubung ke jaringan memiliki alamat unik untuk mengidentifikasinya, yang disebut "alamat IP" (di mana IP adalah singkatan dari Internet Protocol). Ini adalah alamat yang dibuat dari serangkaian empat angka yang dipisahkan oleh titik-titik, misalnya: 192.168.2.10.

+ +

Itu boleh-boleh saja untuk komputer, tetapi kita manusia memiliki waktu yang sulit mengingat alamat semacam itu. Untuk mempermudah, kita bisa mengubah alamat IP dengan nama yang dapat dibaca manusia disebut nama domain. Misal, google.com adalah nama domain yang digunakan di atas alamat IP 173.194.121.32. Jadi menggunakan nama domain adalah cara termudah bagi kita untuk mencapai komputer melalui Internet.

+ +

Show how a domain name can alias an IP address

+ +

Internet dan Web

+ +

Seperti yang Anda lihat, ketika kita menjelajah Web dengan browser Web, kita biasanya menggunakan nama domain untuk mencapai situs web. Apakah itu berarti Internet dan Web adalah hal yang sama? Tidak sesederhana itu. Seperti yang kita lihat, Internet adalah infrastruktur teknis yang memungkinkan miliaran komputer terhubung bersama-sama. Di antara komputer tersebut, beberapa komputer (disebut server Web) dapat mengirim pesan yang dapat dimengerti oleh browser web. Internet adalah infrastruktur, sedangkan Web adalah layanan yang dibangun di atas infrastruktur. Perlu dicatat ada beberapa layanan lain yang dibangun di atas Internet, seperti email dan IRC.

+ +

Langkah selanjutnya

+ + diff --git a/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html b/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html new file mode 100644 index 0000000000..c50aeff182 --- /dev/null +++ b/files/id/learn/common_questions/berfikir_sebelum_membuat_kode/index.html @@ -0,0 +1,180 @@ +--- +title: Bagaimana saya mulai mendesain situs web saya? +slug: Learn/Common_questions/Berfikir_sebelum_membuat_kode +tags: + - Beginner + - Composing + - Menulis + - NeedsActiveLearning + - Pemula + - needsSchema +translation_of: Learn/Common_questions/Thinking_before_coding +--- +

Artikel ini mencakup langkah pertama yang sangat penting dari setiap proyek: tentukan apa yang ingin Anda capai dengannya.

+ + + + + + + + + + + + +
Prasyarat:None
Tujuan:Belajar untuk menentukan tujuan untuk memberikan arahan untuk proyek website Anda.
+ +

Ikhtisar

+ +

Ketika memulai dengan proyek web, banyak orang fokus pada sisi teknis. Tentu saja Anda harus terbiasa dengan teknik kesenian Anda, tetapi yang penting adalah apa yang ingin Anda capai. Ya, tampaknya sudah jelas, tetapi terlalu banyak proyek gagal bukan karena kurangnya pengetahuan teknis, tetapi karena kurangnya tujuan dan visi.

+ +

Jadi, ketika Anda mendapatkan ide dan ingin mengubahnya menjadi sebuah situs web, ada beberapa pertanyaan yang harus Anda jawab sebelum yang lain:

+ + + +

Semua ini disebut ide proyek dan merupakan langkah pertama yang diperlukan untuk mencapai tujuan Anda, apakah Anda seorang pemula atau pengembang yang berpengalaman.

+ +

Active Learning

+ +

Belum ada pembelajaran aktif yang tersedia. Tolong, pertimbangkan untuk berkontribusi.

+ +

Menyelam lebih dalam

+ +

Sebuah proyek tidak pernah dimulai dengan sisi teknis. Musisi tidak akan pernah membuat musik apa pun kecuali mereka terlebih dahulu memiliki gagasan tentang apa yang ingin mereka mainkan — dan hal yang sama berlaku untuk pelukis, penulis, dan pengembang web. Teknik menempati urutan kedua.

+ +

Teknik jelas sangat penting. Musisi harus menguasai instrumen mereka. Tetapi musisi yang baik tidak akan pernah bisa menghasilkan musik yang bagus tanpa ide. Karena itu, sebelum terjun ke sisi teknis — misalnya, kode dan alat — Anda harus mundur dulu dan memutuskan secara terperinci apa yang ingin Anda lakukan.

+ +

Diskusi satu jam dengan teman adalah awal yang baik, tetapi tidak memadai. Anda harus duduk dan menyusun ide-ide Anda untuk mendapatkan pandangan yang jelas tentang jalan apa yang harus Anda ambil untuk mewujudkan ide-ide Anda. Untuk melakukan ini, Anda hanya perlu pena dan kertas dan beberapa waktu untuk menjawab setidaknya pertanyaan-pertanyaan berikut.

+ +
+

Catatan: Ada banyak cara untuk melaksanakan ide proyek. Kita tidak bisa meletakkan semuanya di sini (keseluruhan buku tidak akan cukup). Apa yang akan kami sajikan di sini adalah metode sederhana untuk menangani apa yang para profesional sebut sebagai Project Ideation, Project Planning, danProject Management.

+
+ +

Apa yang sebenarnya ingin saya capai?

+ +

Ini adalah pertanyaan yang paling penting untuk dijawab, karena itu mendorong segalanya. Buat daftar semua tujuan yang ingin Anda capai. Bisa apa saja: menjual barang untuk menghasilkan uang, mengekspresikan pendapat politik, bertemu teman baru, bermain musik dengan musisi, mengumpulkan gambar kucing, atau apa pun yang Anda inginkan.

+ +

Misalkan Anda seorang musisi. Anda bisa berharap demikian:

+ + + +

Setelah Anda memiliki daftar seperti itu, Anda perlu memprioritaskan. Pesanlah tujuan dari yang paling penting hingga yang tidak penting:

+ +
    +
  1. Mencari teman laki-laki/perempuan.
    2. +
  2. Biarkan orang lain mendengarkan musik Anda.
    3. +
  3. Bicara tentang musik Anda.
    4. +
  4. Temui musisi lain.
    5. +
  5. Jual barang.
    6. +
  6. Ajarkan musik melalui video.
    7. +
  7. Publikasikan foto kucing Anda.
    8. +
+ +

Melakukan latihan sederhana ini — menulis tujuan dan menyortirnya — akan membantu Anda keluar ketika Anda harus mengambil keputusan. (Haruskah saya menerapkan fitur ini, gunakan layanan ini, buat desain ini?)

+ +

Jadi sekarang Anda memiliki daftar tujuan yang diprioritaskan, mari beralih ke pertanyaan berikutnya.

+ +

Bagaimana sebuah situs web dapat membawa saya ke tujuan saya?

+ +

Jadi Anda memiliki daftar sasaran dan Anda merasa perlu situs web untuk mencapai sasaran itu. Apakah kamu yakin?

+ +

Mari kita lihat kembali contoh kita. Kami memiliki lima tujuan yang terhubung dengan musik, satu tujuan yang terkait dengan kehidupan pribadi (menemukan pasangan Anda yang signifikan), dan foto-foto kucing yang sama sekali tidak terkait. Apakah masuk akal untuk membangun satu situs web untuk mencakup semua tujuan itu? Apakah itu perlu? Lagi pula, skor layanan web yang ada dapat membawa Anda ke tujuan Anda tanpa membangun situs web baru.

+ +

Menemukan seorang gadis / pacar adalah kasus utama di mana lebih masuk akal untuk menggunakan sumber daya yang ada daripada membangun situs yang sama sekali baru. Mengapa? Karena kita akan menghabiskan lebih banyak waktu membangun dan memelihara situs web daripada benar-benar mencari seorang gadis / pacar. Karena tujuan kita adalah yang paling penting, kita harus menghabiskan energi kita untuk meningkatkan alat yang ada daripada memulai dari awal. Sekali lagi, ada begitu banyak layanan web yang sudah tersedia untuk menampilkan foto yang tidak sepadan dengan upaya untuk membangun situs baru hanya untuk menyebarkan berita tentang betapa lucunya kucing kita.

+ +

Lima tujuan lainnya semuanya terhubung dengan musik. Tentu saja ada banyak layanan web yang dapat menangani tujuan ini, tetapi masuk akal dalam hal ini untuk membangun situs web khusus kami sendiri. Situs web semacam itu adalah cara terbaik untuk mengumpulkan semua hal yang ingin kami terbitkan di satu tempat (baik untuk tujuan 3, 5, dan 6) dan mempromosikan interaksi antara kami dan publik (baik untuk tujuan 2 dan 4). Singkatnya, karena semua tujuan ini berkisar pada topik yang sama, memiliki segalanya di satu tempat akan membantu kita memenuhi tujuan kita dan membantu pengikut kita terhubung dengan kita.

+ +

Bagaimana situs web dapat membantu saya mencapai tujuan saya? Dengan menjawab itu, Anda akan menemukan cara terbaik untuk mencapai tujuan Anda dan menyelamatkan diri dari usaha yang sia-sia.

+ +

Apa yang perlu dilakukan, dan dalam urutan apa, untuk mencapai tujuan saya?

+ +

Sekarang setelah Anda tahu apa yang ingin Anda capai, saatnya untuk mengubah tujuan-tujuan tersebut menjadi langkah-langkah yang dapat ditindaklanjuti. Sebagai catatan tambahan, tujuan Anda tidak harus ditentukan. Mereka berevolusi dari waktu ke waktu bahkan dalam perjalanan proyek, terutama jika Anda menghadapi hambatan yang tidak terduga atau hanya mengubah pikiran Anda.

+ +

Daripada melalui penjelasan panjang, mari kita kembali ke contoh kita dengan tabel ini:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TujuanHal yang harus dilakukan
+

Biarkan orang lain mendengarkan musik Anda

+ 		+
    +
  1. Rekam musik
    2. +
  2. Siapkan beberapa file audio yang dapat digunakan online (Bisakah Anda melakukan ini dengan layanan web yang ada?)
    3. +
  3. Berikan orang akses ke musik Anda di beberapa bagian situs web Anda
    4. +
+
Bicara tentang musik Anda +
    +
  1. Tulis beberapa artikel untuk memulai diskusi
    2. +
  2. Tentukan bagaimana tampilan artikel
    3. +
  3. Publikasikan artikel-artikel di situs web (Bagaimana melakukan ini?)
    4. +
+
Bertemu musisi lain +
    +
  1. Berikan cara agar orang lain menghubungi Anda (Email? Facebook? Telepon? Mail?)
    2. +
  2. Tetapkan bagaimana orang akan menemukan saluran kontak itu dari situs web Anda
    3. +
+
Jual barang +
    +
  1. Buat barangnya 
    2. +
  2. Simpan barangnya
    3. +
  3. Temukan cara untuk menangani pengiriman
    4. +
  4. Temukan cara untuk menangani pembayaran
    5. +
  5. Buat mekanisme di situs Anda agar orang memesan
    6. +
+
Ajarkan musik melalui video +
    +
  1. Rekam pelajaran video 
    2. +
  2. Siapkan file video yang dapat dilihat secara online (Sekali lagi, dapatkah Anda melakukan ini dengan layanan web yang ada?)
    3. +
  3. Berikan orang akses ke video Anda di beberapa bagian situs web Anda
    4. +
+
+ +

Dua hal yang perlu diperhatikan. Pertama, beberapa item ini tidak terkait dengan web (mis., Rekam musik, tulis artikel). Seringkali aktivitas offline itu lebih penting daripada sisi web proyek. Dalam penjualan, misalnya, jauh lebih penting dan memakan waktu untuk menangani persediaan, pembayaran, dan pengiriman daripada membangun situs web tempat orang dapat memesan.

+ +

Kedua, menetapkan langkah-langkah yang dapat ditindaklanjuti mengarah ke pertanyaan baru yang perlu Anda jawab. Biasanya ternyata ada lebih banyak pertanyaan daripada yang kita duga sebelumnya. (Misalnya, haruskah saya belajar bagaimana melakukan semua ini sendiri, meminta seseorang untuk melakukannya untuk saya, atau menggunakan layanan pihak ketiga?)

+ +

Kesimpulan

+ +

Seperti yang Anda lihat, ide sederhana "Saya ingin membuat situs web" menghasilkan daftar tugas yang panjang, yang hanya tumbuh lebih lama saat Anda memikirkannya. Segera mungkin terlihat luar biasa, tetapi jangan panik. Anda tidak perlu menjawab semua pertanyaan dan Anda tidak perlu melakukan semuanya dalam daftar Anda. Yang penting adalah memiliki visi tentang apa yang Anda inginkan dan bagaimana menuju ke sana. Setelah Anda memiliki visi yang jelas itu, Anda perlu memutuskan bagaimana dan kapan melakukannya. Sederhanakan tugas-tugas besar menjadi langkah-langkah kecil yang dapat ditindaklanjuti. Dan langkah-langkah kecil itu akan menambah pencapaian besar.

+ +

Dari artikel ini, Anda sekarang dapat membuat rencana kasar untuk membuat situs web. Langkah selanjutnya mungkin membaca how the Internet works.

diff --git a/files/id/learn/common_questions/index.html b/files/id/learn/common_questions/index.html new file mode 100644 index 0000000000..b63f533a9a --- /dev/null +++ b/files/id/learn/common_questions/index.html @@ -0,0 +1,135 @@ +--- +title: Pertanyaan Umum +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - NeedsTranslation + - TopicStub + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +
{{LearnSidebar}}
+ +

Bagian Area Pembelajaran ini dirancang untuk memberikan jawaban atas pertanyaan umum yang mungkin muncul, yang bukan merupakan bagian dari jalur pembelajaran inti terstruktur (misal artikel pembelajaran HTML atau CSS). Artikel ini dirancang untuk bekerja sendiri.

+ +

Bagaimana Web bekerja

+ +

Bagian ini mencakup mekanika web —pertanyaan yang berkaitan dengan pengetahuan umum tentang ekosistem Web dan bagaimana cara kerjanya.

+ +
+
+

Bagaimana cara kerja Internet?

+
+
Internet merupakan tulang punggung dari Web, infrastruktur teknis yang memungkinkan Web. Pada dasarnya, Internet adalah jaringan besar komputer yang berkomunikasi bersama-sama. Artikel ini membahas bagaimana internet bekerja, pada tingkat dasar.
+
+

 Apa perbedaan antara webpage, website, web server, dan search engine?

+
+
Pada artikel ini kami akan menjelaskan beragam konsep yang berhubungan dengan: webpage, website, web server, dan search engine. Konsep ini akan membingungkan bagi pemula yang baru mempelajari tentang Web, atau (pernah) melakukan kesalahan. Yuk, kita pelajari satu persatu konsep tersebut.
+
+

Apa yang dimaksud URL?

+
+
Dengan {{Glossary("Hypertext")}} dan {{Glossary("HTTP")}}, URL sebuah konsep utama dari Web. Mekanisme ini digunakan oleh {{Glossary("Browser","browsers")}} untuk memperoleh sumber publikasi pada web.
+
+

Apa yang dimaksud nama domain?

+
+
Nama domain adalah bagian dari infrastruktur Internet. Nama domain ini merupakan alamat sebuah web yang dapat dibaca oleh manusia yang berasal dari web server yang tersedia di Internet.
+
+

Apa yang dimaksud dengan web server?

+
+
Kata "Web server" dapat diartikan sebagai sebuah perangkat keras (hardware) atau perangkat lunak (software) yang melayani website kepada klien diseluruh dunia, atau keduanya dapat bekerja sekaligus. Pada artikel ini kita akan mempelajari bagaimana web server bekerja, dan mengapa hal ini sangat penting.
+
+ +
+
Di artikel ini, kita akan mempelajari apa yang dimaksud dengan hyperlink dan kenapa hal ini begitu penting.
+
+ +

Peralatan dan pengaturan

+ +

Pertanyaan yang berhubungan dengan peralatan/software yang dapat anda gunakan untuk membangun website.

+ +
+
+

Berapa banyak biaya yang dibutuhkan untuk membuat website?

+
+
Ketika anda akan launching sebuah website, anda (mungkin) biasa saja tidak akan mengeluarkan biaya apapun. Di artikel ini, kita akan berdiskusi berapa banyak biaya yang dibutuhkan dan apa saja yang anda dapatkan dari yang anda bayar (atau yang anda dapat secara gratis).
+
+

Software yang Saya butuhkan untuk membuat sebuah website?

+
+
Di artikel ini kami akan menjelaskan komponen software apa saja yang anda butuhkan untuk mengedit, upload, atau menampilkan sebuah website.
+
+

Text editor apa saja yang  tersedia?

+
+
Di artikel ini kami menjelaskan hal utama tentang pemilihan dan instalasi text editor untuk pengembangan web.
+
+

What are browser developer tools?

+
+
Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.
+
+

How do you make sure your website works properly?

+
+
So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.
+
+

How do you set up a local testing server?

+
+
+
+

This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.

+
+
+
+

How do you upload files to a web server?

+
+
This article shows how to publish your site online with FTP tools — one of the most common ways to get a website online so others can access it from their computers.
+
+

How do I use GitHub Pages?

+
+
This article provides a basic guide to publishing content using GitHub's gh-pages feature.
+
+

How do you host your website on Google App Engine?

+
+
Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.
+
+

What tools are available to debug and improve website performance?

+
+
This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.
+
+ +

Design and accessibility

+ +

This section lists questions related to aesthetics, page structure, accessibility techniques, etc.

+ +
+
+

How do I start to design my website?

+
+
This article covers the all-important first step of every project: define what you want to accomplish with it.
+
+

What do common web layouts contain?

+
+
When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.
+
+

What is accessibility?

+
+
This article introduces the basic concepts behind web accessibility.
+
+

How can we design for all types of users?

+
+
This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.
+
+

What HTML features promote accessibility?

+
+
This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.
+
+ +

HTML, CSS and JavaScript questions

+ +

For common solutions to HTML/CSS/JavaScript problems, try the following articles:

+ + diff --git a/files/id/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/id/learn/common_questions/pages_sites_servers_and_search_engines/index.html new file mode 100644 index 0000000000..622e047b09 --- /dev/null +++ b/files/id/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -0,0 +1,118 @@ +--- +title: >- + What is the difference between webpage, website, web server, and search + engine? +slug: Learn/Common_questions/Pages_sites_servers_and_search_engines +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +
+

In this article, we describe various web-related concepts: web pages, websites, web servers, and search engines. These terms are often confused by newcomers to the web or are incorrectly used. Let's learn what they each mean!

+
+ + + + + + + + + + + + +
Prerequisites:You should know how the Internet works.
Objective:Be able to describe the differences between a web page, a website, a web server, and a search engine.
+ +

Summary

+ +

As with any area of knowledge, the web comes with a lot of jargon. Don't worry, we won't overwhelm you with all of it (we have a glossary if you're curious). However, there are a few basic terms you need to understand at the outset, since you'll hear these expressions all the time as you read on. It's easy to confuse these terms sometimes since they refer to related but different functionalities. In fact, you'll sometimes see these terms misused in news reports and elsewhere, so getting them mixed up is understandable!

+ +

We'll cover these terms and technologies in more detail as we explore further, but these quick definitions will be a great start for you:

+ +
+
web page
+
A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's Safari. These are also often called just "pages."
+
website
+
A collection of web pages which are grouped together and usually connected together in various ways. Often called a "web site" or simply a "site."
+
web server
+
A computer that hosts a website on the Internet.
+
search engine
+
A web service that helps you find other web pages, such as Google, Bing, Yahoo, or DuckDuckGo. Search engines are normally accessed through a web browser (e.g. you can perform search engine searches directly in the address bar of Firefox, Chrome, etc.) or through a web page (e.g. bing.com or duckduckgo.com).
+
+ +

Let's look at a simple analogy — a public library. This is what you would generally do when visiting a library:

+ +
    +
  1. Find a search index and look for the title of the book you want.
    2. +
  2. Make a note of the catalog number of the book.
    3. +
  3. Go to the particular section containing the book, find the right catalog number, and get the book.
    4. +
+ +

Let's compare the library with a web server:

+ + + +

Active learning

+ +

There is no active learning available yet. Please, consider contributing.

+ +

Deeper dive

+ +

So, let's dig deeper into how those four terms are related and why they are sometimes confused with each other.

+ +

Web page

+ +

A web page is a simple document displayable by a {{Glossary("browser")}}. Such documents are written in the {{Glossary("HTML")}} language (which we look into in more detail in other articles). A web page can embed a variety of different types of resources such as:

+ + + +
+

Note: Browsers can also display other documents such as {{Glossary("PDF")}} files or images, but the term web page specifically refers to HTML documents. Otherwise, we only use the term document.

+
+ +

All web pages available on the web are reachable through a unique address. To access a page, just type its address in your browser address bar:

+ +

Example of a web page address in the browser address bar

+ +

Web site

+ +

A website is a collection of linked web pages (plus their associated resources) that share a unique domain name. Each web page of a given website provides explicit links—most of the time in the form of clickable portion of text—that allow the user to move from one page of the website to another.

+ +

To access a website, type its domain name in your browser address bar, and the browser will display the website's main web page, or homepage (casually referred as "the home"):

+ +

Example of a web site domain name in the browser address bar

+ +

The ideas of a web page and a website are especially easy to confuse for a website that contains only one web page. Such a website is sometimes called a single-page website.

+ +

Web server

+ +

A web server is a computer hosting one or more websites. "Hosting" means that all the web pages and their supporting files are available on that computer. The web server will send any web page from the website it is hosting to any user's browser, per user request.

+ +

Don't confuse websites and web servers. For example, if you hear someone say, "My website is not responding", it actually means that the web server is not responding and therefore the website is not available. More importantly, since a web server can host multiple websites, the term web server is never used to designate a website, as it could cause great confusion. In our previous example, if we said, "My web server is not responding", it means that multiple websites on that web server are not available.

+ +

Search engine

+ +

Search engines are a common source of confusion on the web. A search engine is a special kind of website that helps users find web pages from other websites.

+ +

There are plenty out there: Google, Bing, Yandex, DuckDuckGo, and many more. Some are generic, some are specialized about certain topics. Use whichever you prefer.

+ +

Many beginners on the web confuse search engines and browsers. Let's make it clear: A browser is a piece of software that retrieves and displays web pages; a search engine is a website that helps people find web pages from other websites. The confusion arises because, the first time someone launches a browser, the browser displays a search engine's homepage. This makes sense, because, obviously, the first thing you want to do with a browser is to find a web page to display. Don't confuse the infrastructure (e.g., the browser) with the service (e.g., the search engine). The distinction will help you quite a bit, but even some professionals speak loosely, so don't feel anxious about it.

+ +

Here is an instance of Firefox showing a Google search box as its default startup page:

+ +

Example of Firefox nightly displaying a custom Google page as default

+ +

Next steps

+ + diff --git a/files/id/learn/common_questions/set_up_a_local_testing_server/index.html b/files/id/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..0bc57c45d2 --- /dev/null +++ b/files/id/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,108 @@ +--- +title: Bagaimana Anda menyiapkan server pengujian lokal? +slug: Learn/Common_questions/set_up_a_local_testing_server +tags: + - Express + - Flask + - Node + - Pemula + - Python + - django + - server-side + - servers + - sisi-server +translation_of: Learn/Common_questions/set_up_a_local_testing_server +--- +
+

Artikel ini menjelaskan cara menyiapkan server pengujian lokal sederhana di komputer Anda, dan dasar-dasar penggunaannya.

+
+ + + + + + + + + + + + +
Prasyarat:Anda harus terlebih dahulu mengetahui bagaimana cara kerja Internet, dan apa itu server Web.
Tujuan:Anda akan belajar cara mengatur server pengujian lokal.
+ +

Berkas lokal vs. berkas remote

+ +

Di sebagian besar area pembelajaran, kami memberi tahu Anda untuk hanya membuka contoh Anda secara langsung di browser — ini dapat dilakukan dengan mengklik ganda file HTML, drag and drop ke jendela browser, ataupun memilih File > Open... dan menavigasi ke file HTML. Ada banyak cara untuk mencapai ini.

+ +

Jika alamat web diawali dengan file:// diikuti oleh path menuju file di hard drive lokal anda, maka berkas lokal digunakan. Sebaliknya, jika Anda melihat salah satu contoh kami dihosting di GitHub (atau contoh di beberapa remote server lain), alamat web diawali dengan http:// atau https://, untuk menunjukkan berkas tersebut diterima melalui HTTP.

+ +

Masalah dengan menguji file lokal

+ +

Beberapa contoh tidak akan berjalan jika Anda membukanya sebagai file lokal. Hal ini dapat disebabkan oleh berbagai alasan, yang paling mungkin adalah:

+ + + +

Menjalankan server HTTP lokal sederhana

+ +

Untuk mengatasi masalah async request, kita perlu menguji contoh-contoh tersebut dengan menjalankannya melalui server web lokal. OCara paling mudah untuk melakukan ini untuk tujuan kita adalah menggunakan SimpleHTTPServer module pada Python.

+ +

Untuk melakukannya:

+ +
    +
  1. +

    Install Python. Jika anda menggunakan Linux atau Mac OS X, seharusnya sudah tersedia di sistem Anda. Jika anda pengguna Windows, Anda bisa mendapatkan installer dari situs Python dan ikuti instruksi untuk menginstalnya:

    + +
      +
    • Pergi ke python.org
      • +
    • Di bawah bagian Unduh, klik tautan untuk Python "3.xxx".
      • +
    • Pada bagian bawah halaman, pilih Windows x86 executable installer lalu download.
      • +
    • Setelah download selesai, jalankan file tersebut.
      • +
    • Pada halaman awal installer, pastikan anda menceklis "Add Python 3.xxx to PATH" pada checkbox.
      • +
    • Klik Install, kemudian klik Close ketika instalasi selesai.
      • +
    +
    2. +
  2. +

    Bka command prompt (Windows) / terminal (OS X/Linux) anda. tuk mengecek apakah Python telah terinstal, ketikkan perintah berikut:

    + + 
    python -V
    +
    3. +
  3. +

    Ini seharusnya mengembalikan nilai versi. Jika ini OK, arahkan ke direktori yang ada di dalam contoh Anda, menggunakan perintah cd.

    + + 
    # masukkan nama direktori untuk memasukkannya, misalnya
+cd Desktop
+# gunakan dua titik untuk melompat satu tingkat direktori jika perlu
+cd ..
    +
    4. +
  4. +

    Ketikkan perintah berikut untuk menjalankan server di direktori tersebut:

    + + 
    # Jika versi Python yang dikembalikan di atas adalah 3.X
+python -m http.server
+# Jika versi Python yang dikembalikan di atas adalah 2.X
+python -m SimpleHTTPServer
    +
    5. +
  5. +

    Secara default, ini akan menjalankan konten-konten dalam direktori pada web server local, di port 8000. Anda dapat pergi ke server ini dengan pergi ke url  localhost:8000 di web browser anda. Disini anda akan melihat daftar isi dari direktori — klik pada berkas HTML yang akan anda jalankan.

    +
    6. +
+ +
+

Catatan: Jika anda sudah menjalankan sesuatu di port 8000, anda dapat memilih port lain dengan menjalankan perintah server diikuti dengan nilai port alternatif, misal python -m http.server 7800 (Python 3.x) atau python -m SimpleHTTPServer 7800 (Python 2.x). Anda kemudian dapat mengakses konten Anda di localhost:7800.

+
+ +

Menjalankan bahasa sisi server secara lokal

+ +

Modul SimpleHTTPServer (python 2.0) http.server (python 3.0) pada Python sangat berguna, tetapi tidak tahu cara menjalankan kode yang ditulis dalam bahasa seperti Python, PHP atau JavaScript. Untuk mengatasinya Anda akan butuh sesuatu yang lebih — apa yang Anda perlukan tergantung pada bahasa sisi server yang Anda coba jalankan. Beberapa contoh antara lain:

+ + + +
$ cd jalan/ke/kode/php/anda
+$ php -S localhost:8000
diff --git a/files/id/learn/css/index.html b/files/id/learn/css/index.html new file mode 100644 index 0000000000..b20c1b0586 --- /dev/null +++ b/files/id/learn/css/index.html @@ -0,0 +1,67 @@ +--- +title: Learn to style HTML using CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - NeedsTranslation + - Style + - Topic + - TopicStub + - length + - specificity +translation_of: Learn/CSS +--- +
{{LearnSidebar}}
+ +

Cascading Stylesheets — or {{glossary("CSS")}} — is the first technology you should start learning after {{glossary("HTML")}}. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. So for example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

+ +

Learning pathway

+ +

You should really learn the basics of HTML before attempting any CSS. We'd recommend that you work through our Introduction to HTML module first — you can then learn about:

+ + + +

Once you understand the very fundamentals of HTML, we recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't really learn CSS without knowing HTML.

+ +

Before starting this topic, you should also have at least basic familiarity with using computers and using the Web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in Installing basic software, and understand how to create and manage files, as detailed in Dealing with files — both are parts of our Getting started with the web complete beginner's module.

+ +

It is recommended that you work through Getting started with the web before attempting this topic, however, it isn't absolutely necessary; much of what is covered in the CSS basics article is also covered in our Introduction to CSS module, albeit in a lot more detail.

+ +

Modules

+ +

This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.

+ +
+
Introduction to CSS
+
This module gets you started with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.
+
Styling text
+
Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.
+
Styling boxes
+
Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.
+
CSS layout
+
At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new, fangled layout tools like flexbox.
+
Responsive design (TBD)
+
With so many different types of devices able to browse the Web these days, responsive web design (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD, explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution, and explore the technologies available for serving different videos and images depending on such features.
+
+ +

Solving common CSS problems

+ +

Use CSS to solve common problems provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage.

+ +

From the beginning, the things you'll do most are to apply colors to HTML elements and their backgrounds, change the size, shape, and position of elements, and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet!

+ +

See also

+ +
+
CSS on MDN
+
The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.
+
diff --git a/files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html b/files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html new file mode 100644 index 0000000000..76600c89ea --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/akan_terlihat_seperti_apa_website_anda/index.html @@ -0,0 +1,117 @@ +--- +title: Akan terlihat seperti apa website kamu? +slug: Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda +tags: + - Aset + - Desain + - Fonts + - 'I10n:prioritas' + - Konten + - Pemula + - Pengkomposisian + - Sederhana + - Usang + - belajar + - pelan-pelan +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")}}
+ +
+

Akan terlihat seperti apa website kamu? Diskusikan terlebih dahulu perencanaan dan desain pekerjaan yang harus kamu lakukan untuk websitemu sebelum menulis code, termasuk "Informasi apa saja yang websitemu tawarkan?" "Font dan warna apa saja yang kamu inginkan?" "Apa yang websitemu lakukan?"

+
+ +

Hal penting yang pertama: Perencanaan

+ +

Sebelum melakukan sesuatu, kamu pasti perlu ide. Apa yang harus benar-benar websitemu lakukan? Pada dasarnya sebuah website dapat melakukan apapun, tapi untuk percobaan pertama kamu harus membuat sesuatunya sederhana. Kita akan mulai dengan membuat halaman web sederhana dengan judul, gambar, dan beberapa paragraf.

+ +

Untuk memulai, kamu harus menjawab beberapa pertanyaan berikut ini:

+ +
    +
  1. Tentang apa websitemu? Apakah kamu suka anjing, New York, atau Pacman?
    2. +
  2. Informasi apa yang akan kamu sajikan? Tulis sebuah judul dan beberapa paragraf, dan pikirkan gambar yang ingin kamu tampilkan di halaman website.
    3. +
  3. Akan terlihat seperti apa websitemu, dalam kondisi paling sederhana. Apa warna latar belakang? Apa jenis huruf yang tepat: formal, kartun, bold and loud, halus?
    4. +
+ +
+

Catatan: Proyek yang kompleks perlu pedoman rinci yang masuk ke semua rincian warna, jenis huruf, jarak antara item pada halaman, gaya penulisan yang sesuai, dan sebagainya. Hal ini kadang-kadang disebut panduan desain atau buku merk, dan kamu bisa melihat contohnya di Pedoman Firefox OS.

+
+ +

Gambar desainnya

+ +

Selanjutnya, ambil pulpen dan kertas lalu buat sketsa kasar bagaimana tampilan web kamu nantinya. Untuk web pertamamu, tidak banyak yang akan digambar, tapi kamu harus terbiasa melakukan hal ini. Akan sangat membantu — dan gambarnya tidak perlu sebagus lukisan Van Gogh!

+ +

+ +
+

Catatan: Bahkan nyatanya, dalam website yang kompleks, tim desain biasa nya membuat sketsa kasar dulu, setelah itu baru membuat desain digital nya dengan editor grafik atau teknologi web.

+ +

Dalam tim yang membangun web, biasanya ada seorang desainer grafis dan seorang {{Glossary("UX", "user-experience")}} (UX) desainer. Desainer grafis kerjaanya memperindah tampilan website. Desainer UX kerjaanya lebih abstrak dalam menangani pengalaman dan interaksi pengguna dengan website.

+
+ +

Memilih aset

+ +

Sampai disini, lebih baik mulai memilih konten apa yang akan kamu tampilan dalam halaman webmu.

+ +

Teks

+ +

Kamu harus menulis paragraf dan judul di awal. Jangan sampai lupa.

+ +

Warna tema

+ +

Untuk memilih warna, lihat Color Picker dan pilih warna kesukaanmu. Saat kamu mengklik sebuah warna, kamu akan melihat 6-karakter kode yang aneh seperti #660066. Itulah yang disebut kode hex (kependekan dari hexadecimal). Kopi kodenya ke tempat aman supaya bisa dipakai nanti.

+ +

+ +

Gambar

+ +

Untuk memilih gambar, lihat Google Images dan cari sesuatu yang cocok.

+ +
    +
  1. Ketika kamu sudah menemukan yang kamu inginkan, klik gambarnya.
    2. +
  2. Pilih View image.
    3. +
  3. Di halaman selanjutnya, klik kanan pada gambar (Ctrl + klik di Mac), pilih Save Image As..., dan pilih tempat untuk menyimpan gambarnya. Bisa juga dikopi alamat webnya dari bar alamat perambanmu supaya bisa dipakai nanti.
    4. +
+ +

+ +

+ +

Perlu diingat bahwa kebanyakan gambar di web, termasuk Google Images, memiliki hak cipta. Untuk mengurangi kemungkinan kamu melanggar hak cipta, gunakan filter lisensi dari Google. klik di tombol Tool, lalu pilih opsi Usage rights yang muncul di situ. Kamu sebaiknya pilih opsi semacam Labeled for reuse.

+ +

+ +

Font

+ +

Untuk memilih font:

+ +
    +
  1. Pergi ke Google Fonts dan cari di situ sampai kamu menemukan yang pas. kamu juga bisa menyaring yang berada di kanan layar supaya pencarian lebih mudah
    2. +
  2. Klik Add to collection tepat di sebelah nama font.
    3. +
  3. Klik Use di panel bagian bawah.
    4. +
  4. Di halaman selanjutnya, gulung ke bawah ke seksi 3 dan 4, dan kopi baris kode yang diberi Google ke teks editor untuk dipakai nantinya.
    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")}}

+ +

 

+ +

Dalam modul ini

+ + diff --git a/files/id/learn/getting_started_with_the_web/css_basics/index.html b/files/id/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..110abc26fe --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,291 @@ +--- +title: CSS dasar +slug: Learn/Getting_started_with_the_web/CSS_basics +tags: + - CSS + - CodingScripting + - 'I10n:priority' + - Pemula + - Styling + - Web + - belajar +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

CSS (Cascading Style Sheets) adalah kode yang kamu gunakan untuk memberikan gaya pada halaman web kamu. Dasar-dasar CSS akan menjelaskan apa sajakah yang kamu butuhkan untuk memulai. Kami akan menjawab pertanyaan-pertanyaan seperti: Bagaimana saya dapat membuat teks saya menjadi berwarna hitam atau merah? Bagaimana saya dapat membuat konten saya tampil sedemikian rupa pada layar? Bagaimana saya dapat mendekor halaman web saya dengan latar belakang gambar atau warna-warna?

+
+ +

Apakah CSS itu?

+ +

Seperti HTML, CSS bukanlah sebuah bahasa pemrograman. CSS juga bukanlah sebuah bahasa markup — ia adalah suatu bahasa style sheet. Artinya, dengan CSS kamu dapat mengaplikasikan gaya pada elemen-elemen yang ada dalam dokumen HTML. Sebagai contoh, untuk membuat teks pada seluruh elemen paragraf dalam satu halaman HTML menjadi berwarna merah, kamu akan menulis CSS sebagai berikut:

+ +
p {
+  color: red;
+}
+ +

Salin ketiga baris dari kode CSS tersebut ke dalam suatu file baru di teks editor kamu, lalu simpan file tersebut sebagai style.css di direktori styles kamu.

+ +

Namun kita masih perlu untuk mengaplikasikan CSS tersebut ke dokumen HTML kamu. Jika tidak, CSS tersebut tidak akan berpengaruh pada bagaimana browser akan menampilkan dokumen HTML tersebut. (Kalau kamu belum mengikuti proyek kami, bacalah Dealing with files dan HTML basics untuk mencari tahu apa saja yang perlu kamu lakukan sebelumnya.)

+ +
    +
  1. Buka file index.html kamu dan letakkan baris berikut di suatu tempat di bagian head (di antara tag <head> dan </head>): + + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. Simpan index.html dan buka halaman tersebut di browser kamu. Seharusnya muncul tampilan seperti ini:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Jika teks paragraf kamu sekarang berwarna merah, selamat! Kamu berhasil menulis CSS pertama kamu.

+ +

Bagian-bagian dari sebuah CSS ruleset

+ +

Mari kita lihat CSS di atas dengan sedikit lebih detil:

+ +

+ +

Struktur di atas merupakan sebuah rule set (atau sering disebut "rule" supaya lebih singkat). Perhatikan nama dari masing-masing bagian di atas:

+ +
+
Selector
+
Nama elemen HTML di awal rule set. Selector menandai satu atau lebih elemen yang akan diberikan gaya (contoh di sini menggunakan elemen p). Untuk memberikan gaya pada elemen lain, kamu bisa mengubah selector sesuai elemen yang kamu inginkan.
+
Declaration
+
Suatu peraturan seperti color: red; yang menentukan properti mana dari elemen yang ingin kamu beri gaya.
+
Properties
+
Cara kamu memberikan gaya terhadap elemen HTML (contoh di sini, color adalah properti dari {elemen {htmlelement("p")}}.) Di dalam CSS, kamu memilih properti mana saja yang ingin kamu berikan gaya di peraturan kamu.
+
Property value
+
Sebelah sisi kanan properti setelah tanda titik dua, kita memiliki nilai properti, yang memilih satu dari banyak kemungkinan penampilan untuk properti yang diberikan (ada banyak sekali nilai-nilai color selain red).
+
+ +

Perhatikan juga bagian-bagian lain dari sintaks di atas:

+ + + +

Untuk memodifikasi banyak nilai properti sekaligus, kamu hanya perlu menggunakan tanda titik-koma sebagai pemisah, seperti ini:

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

Memilih banyak elemen

+ +

Kamu juga dapat memilih lebih dari satu tipe elemen dan mengaplikasikan sebuah rule set untuk semua tipe elemen. Untuk melakukannya, kamu dapat menuliskan lebih dari satu selector dipisahkan dengan tanda koma. Sebagai contoh:

+ +
p,li,h1 {
+  color: red;
+}
+ +

Beragam tipe selector

+ +

Ada banyak sekali tipe selector yang berbeda. Di atas, kita hanya mempelajari element selectors, yang memilih seluruh elemen dari tipe yang diberikan di dokumen HTML yang diberikan. Namun kita dapat membuat pilihan yang lebih spesifik daripada itu. Berikut adalah beberapa tipe selector lain yang sering dijumpai:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nama selectorApa yang dipilihContoh
Element selector (kadang-kadang juga disebut sebagai tag atau type selector)Seluruh elemen HTML dari tipe yang diberikan.p
+ Memilih <p>
ID selectorElemen pada halaman dengan ID yang diberikan (pada halaman HTML yang diberikan, kamu hanya boleh memiliki satu elemen per ID).#my-id
+ Memilih <p id="my-id"> atau <a id="my-id">
Class selectorSatu atau lebih elemen pada halaman dengan kelas yang ditentukan (banyak class instances yang dapat muncul di sebuah halaman)..my-class
+ Memilih<p class="my-class"> dan <a class="my-class">
Attribute selectorSatu atau lebih elemen pada halaman dengan atribut yang ditentukan.img[src]
+ Memilih <img src="myimage.png"> namun tidak memilih <img>
Pseudo-class selectorSatu atau lebih elemen yang ditentukan, namun hanya ketika elemen tersebut sedang berada pada state tertentu, seperti sedang di-hover.a:hover
+ Memilih <a>, namun hanya ketika mouse pointer sedang meng-hover link.
+ +

Ada banyak sekali selector lain yang dapat dieksplor, dan kamu dapat menemukan daftar yang lebih detil di Selectors guide kami.

+ +

Fonts dan teks

+ +

Setelah mengeksplor dasar-dasar CSS, mari kita tambahkan aturan-aturan lain dan informasi pada file style.css kita agar contoh yang kita buat memiliki tampilan yang lebih baik. Kita dapat memulai dengan membuat fonts dan teks kita untuk terlihat sedikit lebih baik.

+ +
    +
  1. Pertama-tama, kembalilah dan temukan keluaran dari Google Fonts yang kamu simpan di tempat yang aman. Tambahkan elemen {{htmlelement("link")}} di suatu tempat pada bagian head dari index.html kamu (di manapun di antara tag <head> dan </head>). Elemen link tersebut akan terlihat seperti ini: + + 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. Selanjutnya, hapus aturan yang sudah ada yang kamu miliki di file style.css.
    3. +
  3. Tambahkan baris berikut, dan ubah baris placeholder dengan font-family sungguhan yang kamu dapatkan dari Google Fonts. (font-family berarti jenis font yang ingin kamu gunakan untuk teks.) Aturan ini mengatur jenis font dan ukuran font dasar secara global untuk seluruh halaman (karena <html> merupakan parent element dari seluruh halaman, dan semua elemen di dalam halaman tersebut mewarisi font-size dan font-family yang sama): + 
    html {
+  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
+  font-family: placeholder: this should be the rest of the output you got from Google fonts
+}
    + +
    +

    Catatan: Apapun yang ada di dalam sebuah dokumen CSS antara /* dan */ adalah komentar CSS, yang akan diabaikan oleh browser ketika browser sedang mengolah kode untuk ditampilkan. Komentar berguna bagi kamu untuk menulis catatan-catatan yang membantu terkait apa yang sedang kamu lakukan.

    +
    +
    4. +
  4. Sekarang kita akan menentukan font size untuk elemen-elemen berisi teks yang ada di dalam body HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, dan {{htmlelement("p")}}). Kita juga akan menengahkan posisi teks pada heading dan menentukan line height serta letter spacing pada konten bagian body agar dapat lebih mudah dibaca: + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

Kamu dapat menyesuaikan nilai-nilai px tersebut untuk mendapatkan desain yang kamu inginkan, namun secara umum desain kamu seharusnya akan terlihat seperti ini:

+ +

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

+ +

Semua tentang boks

+ +

Satu hal yang akan kamu sadari tentang menulis CSS adalah banyak hal dalam CSS sebenarnya terkait dengan boks — mengatur ukuran, warna, posisi, dan lain-lain. Kebanyakan dari elemen-elemen HTML yang ada di halaman kamu dapat dilihat sebagai banyak boks yang saling bertumpuk di atas satu sama lain.

+ +

a big stack of boxes or crates sat on top of one another

+ +

Pada prinsipnya, susunan CSS didasari oleh box model. Masing-masing blok akan menempati tempat di halaman kamu dengan properti sebagai berikut:

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

Pada bagian ini kita juga menggunakan:

+ + + +

Ayo kita mulai menambahkan lebih banyak CSS pada halaman kita! Terus tambahkan aturan-aturan baru sampai ke bagian bawah halaman, dan jangan takut untuk bereksperimen dengan menggonta-ganti nilai-nilai untuk melihat bagaimana hasilnya.

+ +

Mengganti warna halaman

+ +
html {
+  background-color: #00539F;
+}
+ +

Aturan ini mengatur warna latar belakang seluruh halaman. Gantilah kode warna di atas menjadi warna apapun yang Anda pilih ketika Anda merencanakan situs Anda.

+ +

Mengatur body

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

Sekarang kita akan mengatur elemen {{htmlelement("body")}}. Ada beberapa deklarasi di sini, jadi mari kita bahas semuanya satu per satu:

+ + + +

Mengatur posisi dan memberikan gaya pada judul halaman utama kita

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

Kamu mungkin sudah menyadari bahwa ada jarak yang cukup jelek di bagian atas body. Hal tersebut terjadi karena beberapa browser mengaplikasikan gaya yang bersifat default ke elemen {{htmlelement("h1")}} element (salah satunya), meski kamu belum memberikan CSS apapun sama sekali! Kedengarannya buruk, namun kita juga menginginkan halaman web yang belum diberikan gaya juga memiliki keterbacaan yang mendasar. Untuk menghilangkan jarak tersebut, kita dapat merubah gaya default tersebut dengan mengatur  margin: 0;.

+ +

Selanjutnya, kita mengatur bagian atas dan bawah padding menjadi 20 piksel, dan membuat warna dari teks heading agar sama dengan warna latar belakang HTML.

+ +

Sebuah properti menarik yang kita gunakan adalah text-shadow, di mana properti ini akan mengaplikasikan bayangan teks ke konten teks dari sebuah elemen. Empat nilai dari properti tersebut adalah sebagai berikut:

+ + + +

Cobalah untuk bereksperimen dengan berbagai nilai berbeda dan lihat hasilnya!

+ +

Memposisikan gambar ke tengah

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Akhirnya, kita akan memposisikan gambar ke tengah untuk membuatnya terlihat lebih baik. Kita dapat menggunakan trik  margin: 0 auto lagi seperti yang telah kita lakukan pada bagian body, namun ada satu hal lagi yang perlu dilakukan. Elemen {{htmlelement("body")}} adalah block level, di mana elemen tersebut menempati ruang di halaman dan kita juga dapat mengaplikasikan margin dan nilai-nilai spacing lain pada elemen tersebut. Di sisi lain, gambar adalah contoh dari inline element, yang berarti kita tidak dapat melakukan hal yang sama. Sehingga untuk mengaplikasikan margin pada gambar, kita harus memberikan gambar tersebut perlakuan seperti block level menggunakan display: block;.

+ +
+

Catatan: Jangan khawatir jika kamu belum memahami display: block;dan perbedaan antara block-level dan inline. Kamu akan memahaminya seiring dengan waktu kamu mempelajari CSS lebih dalam. Kamu dapat menemukan lebih lanjut tentang nilai-nilai display yang tersedia di halaman referensi display kami.

+
+ +

Kesimpulan

+ +

Jika kamu sudah mengikuti seluruh instruksi di artikel ini, seharusnya kamu memiliki sebuah halaman yang tampak seperti ini (kamu juga dapat melihat versi kami di sini):

+ +

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

+ +

Jika Kamu mengalami kebingungan, kamu bisa membandingkan hasilmu dengan contoh sampel kode kami di Github.

+ +

Di sini, kita hanya baru saja membahas sedikit tentang CSS. Untuk mempelajari lebih lanjut, kunjungi halaman CSS Learning topic milik kami.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

+ +

 

+ +

Dalam modul ini

+ + diff --git a/files/id/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/id/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..e59c3083bb --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,96 @@ +--- +title: Bagaimana Web Bekerja +slug: Learn/Getting_started_with_the_web/How_the_Web_works +tags: + - DNS + - HTTP + - IP + - Klien + - Pemula + - Server + - TCP +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar}}
+ +

{{Previous("Learn/Getting_started_with_the_web/Publishing_your_website")}}

+ +
+

Bagaimana cara web bekerja menyediakan pandangan sederhana apa yang terjadi ketika anda melihat halaman web di browser komputer atau handphone.

+
+ +

Teori ini bukan dasar menulis kode web dalam jangka pendek, namun sebelum anda memulai anda akan mendapatkan keuntungan dari memahami apa yang terjadi di belakang.

+ +

Klien dan server

+ +

Komputer yang terhubung ke web dinamakan client dan servers. Diagram sederhana dari cara mereka berinteraksi seperti berikut:

+ +

+ + + +

Bagian lain dari toolbox

+ +

Klien dan server yang di jabarkan di atas tidak menceritakan semuanya. Banyak sekali bagian lain yang terlibat, dan kita akan membahasnya.

+ +

Saat ini, mari kita bayangkan bahwa web adalah sebuah jalan. Pada ujung jalan adalah klien, seperti halnya rumah anda. Di ujung jalan yang lain adalah server, seperti halnya pasar atau swalayan dimana anda membeli sesuatu.

+ +

+ +

Sebagai tambahan dari klien dan server, kita juga membutuhkan:

+ + + +

Lalu apa yang terjadi sebenarnya?

+ +

Ketika anda menuliskan alamat web di browser (dianalogikan seperti berjalan ke pasar):

+ +
    +
  1. Browser menuju ke DNS server dan mencari alamat server yang sebenarnya dimana website berada (anda mencari alamat pasar).
    2. +
  2. Browser mengirim pesan HTTP request ke server meminta salinan dari website untuk di kirim ke klien (anda pergi ke pasar dan memesan barang). Pesan ini, dan semua data dikirim diantara klien dan server, di kirim melalui koneksi internet menggunakan TCP/IP.
    3. +
  3. Server menyetujui permintaan klien, server mengirip pesan "200 OK", yang maksudnya "Tentu anda bisa melihat website tersebut! ini dia", dan kemudian mulai mengirim file website ke browser sebagai bagian - bagian kecil yang disebut data paket (pelayan memberikan barang anda, dan anda membawanya ke rumah anda).
    4. +
  4. Browser menggabungkan bagian - bagian halaman web menjadi sebuah halaman web sempurna dan menampilkannya untuk anda (barang sampai dirumah — barang baru, keren!).
    5. +
+ +

Penjelasan DNS

+ +

Alamat web sebenarnya tidak seperti yang kita tuliskan di browser, untaian yang kamu tuliskan di address bar merupakan untaian dari angka seperti ini: 63.245.217.105.

+ +

Ini disebut alamat IP, dan ini mewakili lokasi dari web. Akan tetapi, akan sulit untuk mengingat, itulah mengapa Domain Name System server dibuat. Ini adalah server spesial yang mencocokkan alamat yang kamu tulis di web browser (seperti "mozilla.org") ke alamat (IP) address website yang sebenarnya.

+ +

Website dapat di jangkau secara langsung melalui IP addresses. Coba buka website Mozilla website dengan menuliskan 63.245.217.105 ke address bar.

+ +

A domain name is just another form of an IP address

+ +

Penjelasan Packet

+ +

Sebelumnya kita menggunakan istilah "packet" untuk menjelaskan format dimana data yang dikirim dari server ke klien. Pada dasarnya data dikirim melalui web, dikirim sebagai ribuan bagian kecil, sehingga pengguna web yang berbeda dapat mengunduh website yang sama dalam waktu yang sama. Jika situs web mengirim sebuah bagian yang besar, hanya satu pengguna yang dapat mengunduh dalam waktu tertentu, dimana akan membuat web sangat tidak efisien dan tidak menyenangkan untuk digunakan.

+ +

Lihat juga

+ + + +

Kredit

+ +

Street photo: Street composing, oleh Kevin D.

+ +

{{Previous("Learn/Getting_started_with_the_web/Publishing_your_website")}}

diff --git a/files/id/learn/getting_started_with_the_web/html_basics/index.html b/files/id/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..a2bac009f6 --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,233 @@ +--- +title: HTML dasar +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - CodingScripting + - HTML + - 'I10n:prioritas' + - Pemula + - Web + - belajar +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +
hyperlink{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

HTML (Hypertext Markup Language) adalah kode yang digunakan untuk mengatur tata letak tampilan halaman web dan isinya. Contohnya, konten dapat disusun dalam bentuk sebuah paragraf, penomoran berbentuk titik, atau menampilkan gambar dan tabel. Seperti judulnya, artikel ini akan memberi kamu pemahaman mendasar tentang HTML dan fungsinya.

+
+ +

Jadi sebenarnya apa itu HTML?

+ +

HTML bukan sebuah bahasa pemrograman; HTML adalah bahasa markup yang mendefinisikan struktur konten kamu. HTML terdiri atas serangkaian {{Glossary("element", "elements")}}, yang dapat kamu gunakan untuk menyisipkan atau membungkus konten di dalamnya sehingga mempunyai tampilan tertentu sesuai fungsi elemennya. {{Glossary("Tag", "tags")}} penyisip dapat membuat sebuah kata atau gambar hyperlink ke konten lainnya, memiringkan tulisan, memperbesar atau memperkecil font, dan lain-lain. Lihat contoh konten dibawah ini:

+ +
My cat is very grumpy
+ +

Kalau kita ingin baris ini berdiri sendiri, kita bisa bilang bahwa ini adalah satu paragraf dengan menaruhnya di antara tag paragraf:

+ +
<p>My cat is very grumpy</p>
+ +

Anatomi elemen HTML

+ +

Mari kita jelajahi elemen paragraf ini lebih jauh.

+ +

+ +

Bagian utama dari elemen kita adalah:

+ +
    +
  1. Tag pembuka: Terdiri dari nama elemen (contoh di sini menggunakan p), yang ada di antara kurung sudut pembuka dan penutup. Ini menandakan awal elemen atau di mana elemen mulai bekerja — dalam hal ini dimana paragraf dimulai.
    2. +
  2. Tag penutup: Mirip dengan tag pembuka, bedanya di tag penutup ada garis miring di depan nama elemen. Ini meandakan di mana akhir elemen — dalam hal ini di mana paragraf berakhir. Kebiasaan lupa menulis tag penutup meruapakan suatu kesalahan yang biasa dilakukan pemula yang bisa menyebabkan hasil menjadi ngawur.
    3. +
  3. Konten: Konten elemen yang dalam hal ini hanya teks.
    4. +
  4. Elemen: Tag pembuka dan tag penutup serta konten.
    5. +
+ +

Elemen juga boleh memiliki atribut, yang terlihat seperti berikut:

+ +

+ +

Atribut mengandung informasi ekstra tentang elemen. Atribut tidak tampil di konten aktual. Disini, class adalah nama atribut, dan editor-note adalah nilainya. Atribut class berfungsi memberikan penanda (identifier) pada elemen yang nantinya bisa kamu gunakan untuk diberikan informasi gaya dan lain-lain.

+ +

Sebuah atribut harus mempunyai:

+ +
    +
  1. Jarak antara atribut dan nama elemen (atau atribut sebelumnya, kalau elemen sudah mempunyai atribut).
    2. +
  2. Nama atribut, diikuti tanda sama dengan.
    3. +
  3. Petik pembuka dan penutup diantara nilai atribut.        
    4. +
+ +

Elemen Bersarang

+ +

Kamu bisa menempatkan satu elemen ke dalam elemen lain — istilah ini disebut nesting (persarangan). Kalau kita ingin buat penekanan bahwa kucing kita "very grumpy", kita bisa membungkus kata "very" ke dalam elemen {{htmlelement("strong")}} untuk penekanan.

+ +
<p>My cat is <strong>very</strong> grumpy.</p>
+ +

Tapi kamu harus yakin bahwa elemen kamu benar-benar bersarang: contoh di atas kita buka elemen {{htmlelement("p")}} dulu, lalu elemen {{htmlelement("strong")}}, lalu kita tutup elemen {{htmlelement("strong")}}, lalu elemen {{htmlelement("p")}}. Contoh berikut ini tidak benar:

+ +
<p>My cat is <strong>very grumpy.</p></strong>
+ +

Elemen harus terbuka dan tertutup dengan benar sehingga mereka jelas berada di mana dari elemen lain. Kalau mereka tumpang-tindih seperti di atas, maka web browser kamu akan membuat tebakan terbaiknya pada apa yang ingin kamu utarakan, yang menyebabkan hasil ngawur. Jadi jangan begitu!

+ +

Elemen kosong

+ +

Beberapa elemen tidak punya konten, dan disebut elemen kosong. Ambil elemen {{htmlelement("img")}} yang sudah kita punya di HTML kita:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

Elemen ini mengandung 2 attribut, tapi tidak punya tag </img>, dan tidak punya konten. Ini karena elemen image tidak membungkus konten apapun. Tujuannya adalah mengembed image ke dalam halaman HTML di tempat di berada.

+ +

Anatomi dari dokumen HTML

+ +

Sekarang kita akan lihat bagaimana elemen individu digabung membentuk satu halaman HTML utuh. Ayo kunjungi lagi kode di mana kita menaruh contoh index.html kita (yang kita temui dalam artikel Dealing with files):

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="My test image">
+  </body>
+</html>
+ +

Di sini kita punya:

+ + + +

Image

+ +

Coba lihat elemen {{htmlelement("img")}} ini lagi:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

Seperti dikatakan sebelumnya, dia mengembed image ke dalam halaman sesuai posisinya via artibut src, yang berisi path ke file image kita.

+ +

Kita juga telah memasukkan artibut alt (alternative). Dalam atribut ini, kamu menentukan teks deskriptif bagi user yang tidak bisa melihat image, yang mungkin karena:

+ +
    +
  1. User tunanetra. Mereka sering menggunakan tools pembaca screen untuk membaca semua semua alt text.
    2. +
  2. Sesuatu terjadi yang mengakibatkan image tidak tampil. Contohnya, coba sengaja ganti path di dalam atribut src menjadi salah. Kalau kamu simpan dan reload halaman, kamu akan melihat sesuatu seperti ini:
    3. +
+ +

+ +

Kata kunci ini mengandung semua "teks deskriptif". Teks alternatif yang kamu tulis sebaiknya menyediakan cukup informasi kepada pembaca tentang image tersebut. Di contoh ini, teks kita "My test image" tidak bagus. Alternatif lain yang jauh lebih baik untuk logo Firefox kita adalah "The Firefox logo: a flaming fox surrounding the Earth."

+ +

Coba gunakan teks alternatif yang lebih baik untuk image kamu.

+ +
+

Catatan: Cari tahu lebih tentang aksesbilitas di Aksesbilitas landing page MDN.

+
+ +

Menandai teks

+ +

Bagian ini mengkover elemen HTML penting yang kamu gunakan untuk menandai teks.

+ +

Headings

+ +

Elemen heading berfungsi menentukan bahwa bagian tertentu konten kamu berupa heading — atau subheading — dari konten kamu. Sama seperti buku yang punya judul utama, judul bab, dan subjudul, dokumen HTML juga begitu. HTML berisi 6 heading level, {{htmlelement("h1")}}–{{htmlelement("h6")}} meskipun kamu hanya menggunakan paling banyak 3–4:

+ +
<h1>My main title</h1>
+<h2>My top level heading</h2>
+<h3>My subheading</h3>
+<h4>My sub-subheading</h4>
+ +

Sekarang coba tambahkan judul yang pas ke halaman HTML di atas elemen {{htmlelement("img")}} kamu.

+ +

Paragraf

+ +

Seperti dijelaskan sebelumnya, elemen {{htmlelement("p")}} berguna untuk wadah paragraf teks; kamu akan sering menggunakan ini ketika menandai konten teks reguler:

+ +
<p>This is a single paragraph</p>
+ +

Tambahkan sampel teks kamu (kamu pasti sudah punya dari What should your website look like?) ke dalam satu atau lebih paragraf, taruh langsung di bawah elemen {{htmlelement("img")}} kamu.

+ +

List

+ +

Kebanyakan konten web adalah lists, dan HTML punya special elemen untuk ini. Penandaan list selalu mengandung paling sedikit 2 elemen. Tipe list paling umum adalah terurut and tak-terurut:

+ +
    +
  1. List tak-terurut ialah list yang urutan itemnya tidak penting, seperti daftar belanja. Ini dibungkus dalam elemen {{htmlelement("ul")}}.
    2. +
  2. List terurut ialah list yang urutan itemnya penting, seperti resep. Ini dibungkus dalam elemen {{htmlelement("ol")}}.
    3. +
+ +

Tiap item dalam list ditaruh di dalam elemen {{htmlelement("li")}} (item list).

+ +

Contohnya, kalau kita ingin mengubah bagian dari fragmen paragraf berikut menjadi list:

+ +
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
+ +

Kita bisa memodifikasi markup ini menjadi:

+ +
<p>At Mozilla, we’re a global community of</p>
+
+<ul>
+  <li>technologists</li>
+  <li>thinkers</li>
+  <li>builders</li>
+</ul>
+
+<p>working together ... </p>
+ +

Coba tambahkan suatu list terurut atau tak-terurut ke halaman contoh kamu.

+ + + +

Link sangat penting — mereka yang membuat web terlihat seperti web! Untuk menambahkan link, kita harus menggunakan elemen sederhana — {{htmlelement("a")}} — "a" singkatan dari "anchor". Untuk membuat teks menjadi link di paragraf kamu, ikuti langkah ini:

+ +
    +
  1. Pilih teks berikut. Kita pilih teks "Mozilla Manifesto".
    2. +
  2. Bungkus teks ke dalam elemen {{htmlelement("a")}}, seperti ini: + 
    <a>Mozilla Manifesto</a>
    +
    3. +
  3. Berikan elemen {{htmlelement("a")}} atribut href, seperti ini: + 
    <a href="">Mozilla Manifesto</a>
    +
    4. +
  4. Isi nilai atribut ini dengan alamat web yang ingin kamu link: + 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    +
    5. +
+ +

Kamu mungkin memperoleh hasil tak terduga jika kamu buang bagian https:// atau http://, disebut protocol, di awal alamat web. Setelah membuat link, klik untuk meyakinkan itu bekerja sebagaimana mestinya.

+ +
+

href mungkin terlihat seperti pilihan yang abu-abu untuk nama atribut. Selalu ingat bahwa dia singkatan dari hypertext reference.

+
+ +

Tambahkan link ke halaman kamu sekarang kalau belum.

+ +

Kesimpulan

+ +

Jika kamu ikuti semua instruksi di artikel ini, kamu akan melihat halaman seperti berikut (kamu juga bisa melihat itu di sini):
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

Kalau kamu buntu, kamu bisa bandingkan kerjaanmu dengan contoh code yang sudah selesai punya kita di GitHub.

+ +

Di sini, kita telah menyentuh hanya lapisan luar HTML. Untuk lebih lanjut, pergi ke HTML Learning topic kita.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

+ +

 

+ +

Dalam modul ini

+ + diff --git a/files/id/learn/getting_started_with_the_web/index.html b/files/id/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..d788a4d683 --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/index.html @@ -0,0 +1,76 @@ +--- +title: Mulai Bekerja dengan Web +slug: Learn/Getting_started_with_the_web +tags: + - CSS + - Desain + - Guide + - HTML + - 'I10n:prioritas' + - Index + - Pemula + - Petunjuk + - Teori + - publishing +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}}
+ +
{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}
+ +
+

Web Memulai dengan web adalah tulisan ringkas untuk memperkenalkan Anda kepada web development. Anda akan mengatur berbagai tool yang kamu butuhkan untuk membuat sebuah halaman web yang sederhana dan mengunggah kode sederhana Anda.

+
+ +

Alur pembuatan website pertama Anda

+ +

Banyak sekali hal yang harus dilakukan untuk membuat web profesional, jadi jika Anda benar-benar baru dalam pengembangan web, kami anjurkan Anda untuk mulai dari hal yang kecil. Anda tidak akan membuat sebuah website layaknya Facebook, namun kali ini kamu akan membuat website sederhana, jadi mari kita mulai.

+ +

Dengan mengerjakan artikel-artikel berikut, Anda menuju dari nol ke membuat halaman web daring pertama Anda. Berangkat!

+ +

Memasang perangkat lunak dasar

+ +

Banyak sekali tool yang bisa kamu pilih untuk membuat sebuah website. Jika kamu baru mulai, kamu mungkin akan kebingungan dengan banyaknya editor kode, framework, atau testing tool yang ada di luar sana. Di Memasang perangkat lunak dasar, kami akan menunjukkan langkah-langkah dalam pemasangan perangkat lunak yang kamu butuhkan untuk membangun website sederhana Anda.

+ +

Akan seperti apa website Anda terlihat?

+ +

Sebelum Anda mulai menulis kode untuk website Anda, Anda harus merencanakan terlebih dahulu. Informasi apa yang akan Anda muat dalam website tersebut? Font (tulisan) dan warna apa yang akan Anda gunakan? Situs Anda akan terlihat seperti apa? Kami menguraikan metode sederhana yang bisa Anda ikuti untuk merencanakan konten dan desain situs web Anda.

+ +

Mengurus berkas

+ +

Sebuah situs terdiri dari banyak file: wacana, kode, stylesheet, konten media, dan seterusnya. Ketika Anda membangun situs, Anda harus mengatur semua berkas dalam struktur yang baik dan memastikan bahwa semua berkas dapat terhubung satu sama lain. Mengurus berkas menjelaskan bagaimana caranya Anda mengatur berkas dengan baik dan persoalan apa sajakah yang harus Anda perhatikan.

+ +

Dasar-dasar HTML

+ +

Hypertext Markup Language (HTML) adalah kode yang Anda gunakan untuk membuat struktur konten website Anda dan memberikannya arti dan tujuan. Contoh, apakah konten yang saya buat terdiri dari paragraf-paragraf, atau terdiri dari daftar-daftar? Apakah saya perlu memasukan gambar-gambar di halaman saya? Apakah saya memiliki tabel data? Tanpa membuat Anda bingung, Dasar-dasar HTML akan memberikan Anda informasi yang cukup untuk membuat Anda familiar dengan HTML.

+ +

Dasar-dasar CSS

+ +

Cascading Stylesheets (CSS) merupakan kode yang dapat kamu pakai untuk memberikan gaya (style) pada website Anda. Contoh, apakah Anda ingin teks berwarna hitam atau merah? Dimanakah seharusnya konten ditampilkan pada layar? Apa latar belakang gambar dan warna yang seharusnya digunakan untuk mendekorasi website Anda? Dasar-dasar CSS akan membantu Anda memulainya.

+ +

Dasar-dasar JavaScript

+ +

JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan fitur interaktif di website Anda. Seperti permainan, hal yang akan terjadi ketika tombol ditekan atau data dimasukkan ke dalam form (formulir), penambahan efek styling yang dinamis, animasi, dan banyak lagi. Dasar-dasar JavaScript memberikan Anda sebuah ide tentang apa saja yang dapat Anda lakukan dengan bahasa menakjubkan ini, dan cara memulainya.

+ +

Mempublikasikan website Anda

+ +

Setelah Anda menyelesaikan penulisan kode dan penyusunan berkas dalam pembuatan situs, Anda perlu untuk mempublikasikan website Anda secara online sehingga orang-orang dapat mengaksesnya. Publikasi sampel kode Anda menjelaskan bagaimana cara untuk mempublikasikan sampel kode daring Anda dengan sedikit usaha.

+ +

Cara kerja web

+ +

Ketika Anda mengakses situs kesukaan Anda, banyak hal rumit yang terjadi di dalamnya yang mungkin Anda tidak ketahui. Cara kerja web menguraikan hal-hal yang terjadi ketika Anda melihat halaman web pada komputer Anda.

+ +

Sekarang, mari kita atasi hal yang paling membuat pusing, dari manakah Anda harus membeli hosting untuk situs web Anda.

+ +

Jawaban pertanyaan ini mungkin terlihat sedikit bias, tapi kenyataannya Anda harus percaya dengan suatu yang Anda yakini. Terdapat banyak situs web yang dapat menawarkan jasa hosting gratis tapi segala hal yang gratis itu tidak selalu bagus. Harga jasa-jasa ini terus berubah-ubah, karenanya dibawah ini adalah beberapa perusahaan yang Anda dapat jadikan sebagai rujukan. (Harap dicatat daftar dibawah ini diurutkan tidak berdasarkan kepercayaan atau harga atau pelayanan, ini daftar acak dan tanpa niat dibayar perusahaan):

+ +

godaddy.com, hostgator.com, alibabacloud.com, Amazon Web Services, cluestech.com, namecheap.com, bluehost.com dan banyak lagi. Sepertinya ini bukan yang terbaik tapi setidaknya memiliki rekam jejak yang baik.

+ +

Lihat juga

+ + + +

{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}

diff --git a/files/id/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/id/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..93abc80228 --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,76 @@ +--- +title: Menginstal perangkat lunak dasar +slug: Learn/Getting_started_with_the_web/Installing_basic_software +tags: + - Browser + - 'I10n:prioritas' + - Pemula + - Setup + - Tools + - WebMechanics + - belajar + - editor teks +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +

{{PreviousNext("Learn/Getting_started_with_the_web","Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda")}}

+ +
+

Pada bagian Memasang perangkat lunak dasarini, kami akan menunjukkan kepada Anda apa saja alat yang Anda butuhkan untuk mengembangkan web sederhana, dan cara memasangnya dengan benar.

+
+ +

Alat apa yang digunakan oleh para profesional?

+ + + +

Alat apa saja yang sebenarnya saya butuhkan sekarang?

+ +

Daftar di atas sepertinya sedikit "menakutkan", tapi untungnya, Anda bisa mulai mengembangkan web tanpa harus tahu banyak tentang hal-hal ini. Pada artikel ini, kita akan membuat Anda siap dengan sesuatu yang paling sederhana, yaitu sebuah pengubah teks dan beberapa peramban web.

+ +

Memasang text editor

+ +

Anda mungkin sudah punya text editor bawaan pada komputer Anda. Secara default Windows mempunyai Notepad dan macOS mempunyai TextEdit. Distro Linux beragam; Ubuntu mempunyai gedit secara default.

+ +

Untuk mengembangkan web, Anda bisa melakukan lebih dari Notepad atau TextEdit. Kami sarankan mulai dengan Visual Studio Code, yang merupakan editor teks gratis, yang menawarkan tinjauan langsung (live preview) dan petunjuk kode.

+ +

Memasang peramban modern

+ +

Untuk saat ini, kita akan memasang dua peramban web desktop untuk menguji kode kita. Pilih sistem operasi kamu di bawah ini dan klik link yang relevan untuk mengunduh installer untuk peramban kesukaan Anda:

+ + + +

Sebelum melanjutkan, kamu harus memasang minimum dua dari browser tersebut untuk pengujian.

+ +

Memasang server web lokal

+ +

Beberapa contoh perlu dijalankan oleh server web agar dapat bekerja. Anda dapat mengetahui cara melakukan ini di Bagaimana Anda membuat server pengujian lokal?

+ +

{{PreviousNext("Learn/Getting_started_with_the_web", "Learn/Getting_started_with_the_web/Akan_terlihat_seperti_apa_website_anda")}}

+ +

Dalam modul ini

+ + diff --git a/files/id/learn/getting_started_with_the_web/javascript_basics/index.html b/files/id/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..f1fb4295df --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,398 @@ +--- +title: Dasar JavaScript +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - Beginner + - CodingScripting + - JavaScript + - Web + - belajar +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+
+ +
+

JavaScript adalah bahasa pemograman yang digunakan untuk menambahkan fitur interaktif pada website anda, seperti ketika ingin membuat game, melakukan perubahan ketika mengklik tombol, efek dinamik, animasi, dan masih banyak lagi. Tutorial ini adalah dasar dari JavaScript yang akan memberikan gambaran apa yang bisa anda buat dengan JavaScript.

+
+ +

Apakah JavaScript yang Sebenarnya?

+ +

{{Glossary("JavaScript")}} adalah bahasa pemograman yang sangat matang dan dapat dikolaborasikan dengan dokumen {{Glossary("HTML")}} dan digunakan untuk membuat website yang interaktif. JavaScript diciptakan oleh Brendan Eich yang juga co-founder dari Mozilla project, Mozilla Foundation dan Mozilla Corporation.

+ +

Anda dapat melakukan banyak hal dengan JavaScript. Anda akan memulai dari fitur sederhana seperti menentukan layout, membuat respon ketika mengklik button, caousels, dan gallery gambar. Namun pada akhirnya ketika anda sudah mendapat banyak pengetahuan anda juga akan dapat membuat game, animasi 2D dan 3D, aplikasi yang berhubungan dengan database, dan masih banyak lagi.

+ +

JavaScript sendiri adalah bahasa yang cukup komplek namun sangat fleksibel, dan banyak Developer (Programmer) telah menyediakan tool yang berdiri diatas core JavaScript agar anda dapat menggunakan fungsi - fungsi ekstra, tool tersebut sebagai berikut :

+ + + +

Karena artikel ini hanya sebagai pengenalan, kami tidak ingin membingungkan anda pada tingkat ini dengan membahas secara detail tentang apa perbedaan antara inti bahasa javascript dan perbedaan alat yang digunakan di atas. Anda bisa belajar semuanya nanti pada Area Belajar JavaScript , dan pada semua bagian MDN.

+ +

Di bawah ini kami akan memperkenalkan anda pada beberapa aspek dari inti bahasa, dan anda juga bisa bermain dengan beberapa fitur API Browser. Selamat Bersenang-senang!

+ +

Contoh "Hello World"

+ +

Judul diatas terdengar menarik bukan ?. JavaScript adalah salah satu bahasa yang sangar menarik dari banyak teknologi web yang lain. dan jika anda mengikuti tutorial ini dengan baik, anda dapat menambahkan dimensi baru dan hal lain yang kreatif pada website anda. 

+ +

Namun, JavaScript sedikit lebih rumit dari pada HTML dan CSS, dan anda akan belajar sedikit demi sedikit, dan tetaplah belajar pada langkah-langkah kecil yang kami berikan. Untuk memulainya, kami akan menunjukkan bagaimana cara menambah beberapa skrip JavaScript yang sangat sederhana pada halaman Anda, yakni dengan contoh cara membuat "Hello, world!" (contoh standar pada dasar pemrograman.)

+ +
+

Penting: Jika anda belum mengikuti semua kursus kami, download contoh kode berikut dan gunakan untuk memulai.

+
+ +
+

Catatan: Alasan kita menepatkan elemen {{htmlelement("script")}} di bawah file html adalah ketika HTML di muat oleh browser untuk ditampilkan pada sebuah file. Jika JavaScript dimuat pertama kali dan seharusnya mempengatuhi HTML di bawahnya, kemungkinan ini tidak bisa bekerja, oleh karena itu JavaScript dimuat sebelum HTML bekeja seperti seharusnya. Oleh karena itu, strategi yang terbaik biasanya adalah di bawah halaman.

+
+ +
    +
  1. Pertama-tema, buka situs percobaan anda, dan buatlah sebuah file baru bernama main.js. Simpan di dalam folder scripts.
    2. +
  2. Selanjutnya, buka file index.html Anda, dan masukkan elemen berikut pada sebuah baris bari sebelum tag penutup </body>: + 
    <script src="scripts/main.js"></script>
    +
    3. +
  3. Ini sama halnya dengan cara kerja elemen {{htmlelement("link")}} untuk CSS — ini menempatkan JavaScript ke halaman, sehingga dapat memberikan pegaruh pada HTML (CSS, dan lainnya pada halaman).
    4. +
  4. Sekarang tambahkan kode berikut pada file main.js: + 
    var myHeading = document.querySelector('h1');
+myHeading.innerHTML = 'Hello world!';
    +
    5. +
  5. Sekarang pastikan file HTML dan JavaScript disimpan, dan muat index.html di browser. Anda seharusnya mendapatkan hasil seperti berikut:
    6. +
+ +

Apa yang Terjadi?

+ +

Jadi text heading anda telah diubah menjadi "Hello world!" mengunakan JavaScript. Kita melakukannya dengan menggunakan fungsi {{domxref("Document.querySelector", "querySelector()")}} untuk mendapatkan referensi untuk heading, dan menyimpannya di variabel myHeading. Ini sama halnya seperti yang kita lakukan saat menggunakan CSS selector — kita menginginkan untuk melakukan sesuatu ke sebuah elemen, maka kita perlu memilihnya terlebih dahulu.

+ +

Setelah itu, kita tambahkan nilai dari variabel myHeading  properti {{domxref("Element.innerHTML", "innerHTML")}}  ( dimana mewakili konten heading) ke "Hello world!".

+ +

Kursus Kilat Bahasa Dasar

+ +

Mari kita jelaskan beberapa fitur dasar dari bahasa JavaScript, untuk memberi anda pemahaman lebih dalam bagaimana semuanya bekerja. Lebih baik lagi, fitur ini umum diterapkan pada semua bahasa pemrograman. Jika anda memahami fundamental ini, anda berada pada jalur untuk menguasai segala pemrograman!

+ +
+

Penting: Pada artikel ini, coba masukkan contoh kode ke konsole browser anda dan lihat apa yang terjadi. Untuk detail tentang konsole browser, lihat Temukan Browser alat pengembang.

+
+ +
+

Catatan: Fitur seperti ini sangat umum pada semua bahasa pemrograman. Jika anda dapat memahami dasar ini, anda akan mampu memulai pemrograman apapun.

+
+ +

Variabel

+ +

{{Glossary("Variable", "Variables")}} merupakan wadah yang dapat anda beri nilai. Anda bisa memulai mendeklarasikan variabel dengan keyword var, diikuti nama yang anda inginkan:

+ +
var myVariable;
+ +
+

Catatan: Semua baris di JS harus diakhiri dengan semi-colon (;), untuk menandakan akhr baris kode. Jika anda tidak menambahkanya, anda bisa mendapatkan hasil yang tidak diinginkan.

+
+ +
+

Catatan: Anda bisa memanggil variabel apa saja, tapi ada beberapa pembatasan (lihat artikel ini tentang aturan penamaan variabel.)

+
+ +
+

Catatan: JavaScript sangat case sensitive — myVariable sangat berbeda dengan variabel myvariable. jika anda mendapatkan masalah pada kode anda, periksa huruf besar/kecil (casing)!

+
+ +

Setelah mendeklarasikan sebuah variabel, anda bisa menambahkan nilai:

+ +
myVariable = 'Bob';
+ +

Anda dapat mengambil nilai dengan memangil nama variabel:

+ +
myVariable;
+ +

Anda bisa melakukan operasi ini dalam satu baris jika anda menginginkanya:

+ +
var myVariable = 'Bob';
+ +

Setelah memberikan nilai pada variabel, setelah itu anda bisa mengubah nilainya:

+ +
var myVariable = 'Bob';
+myVariable = 'Steve';
+ +

Catat bahwa variabel memiliki Tipe data yang berbeda:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariabelPenjelasanContoh
{{Glossary("String")}}Teks String. Untuk menamdakan bahwa variabel adalah sebuah string anda perlu menambahkan tanda kutip.var myVariable = 'Bob';
{{Glossary("Number")}}Angka/number. Angka tidak menggunakan tanda kutip.var myVariable = 10;
{{Glossary("Boolean")}}Nilai True/False. true/false merupakan keyword spesial di JS, dan tidak perlu menggunakan kutip.var myVariable = true;
{{Glossary("Array")}}Struktur yang memungkinkan anda menyimpan lebih dari satu nilai dalam sebuah reference.var myVariable = [1,'Bob','Steve',10];
+ Panggil setiap member array seperti ini: myVariable[0], myVariable[1], etc.
{{Glossary("Object")}}Pada dasarnya, semua. Semuanya di javascript adalah sebuah objek, dan dapat disimpan dalam variabel. Ingatlah untuk anda belajar.var myVariable = document.querySelector('h1');
+ All of the above examples too.
+ +

Jadi kenapa kita memerlukan variabel? Baik, variable dibutuhkan dalam berbagai hal menarik di pemrograman. Jika nilainya tidak berubah, maka anda tidak dapat melakukan sesuatu hal yang bersifat dinamis, seperti menyesuaikan pesan salam ke pengunjung website anda, atau mengubah gambar yang tampil di galeri, dan masih banyak lagi.

+ +

Komentar

+ +

Anda dapat menambahkan komentar di kode Javascript, seperti halnya pada CSS. Di JavaScript, sebaris komentar ditulis seperti berikut:

+ +
// Ini adalah komentar
+ +

Namun anda juga dapat menggunakan lebih dari satu baris komentar seperti yang  anda lakukan pada CSS:

+ +
/*
+Ini adalah komentar
+lebih dari satu baris
+*/
+ +

Operator

+ +

{{Glossary("operator")}} pada dasarnya adalah simbol matematika yang bertindak atas dua nilai (atau variabel yang berisi nilai) dan menghasilkan nilai baru. Pada tabel dibawah anda bisa melihat beberapa operator yang sederhana, disertai contoh untuk anda coba di konsole browser.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorPenjelasanSimbolContoh
penambahan / penggabunganDigunakan untuk menambahkan nilai satu dengan lainnya menjadi sebuah nilai baru, atau menggabungkan dua teks string.+6 + 9;
+ "Hello " + "world!";
pengurangan, Perkalian, pembagianYang ini hasilnya sama seperti yang kita kenal di matematika dasar.-, *, /9 - 3;
+ 8 * 2; // perkalian di JS menggunakan tanda bintang (*)
+ 9 / 3;
operator penugasanAnda telah melihat ini sebelumnya, penugasan di JS digunakan untuk memberikan nilai pada variabel.=var myVariable = 'Bob';
Operator kesetaraanMelakukan tes untuk melihat apakah suatu nilai sama dengan nilai pembanding, dan mengembalikan nilai hasil berupa boolean true/false .===var myVariable = 3;
+ myVariable === 4;
Negasi, tidak sama denganSering digunakan bersama operator kesetaraan, operator negasi di JS sama dengan logical NOT — membalik nilai true menjadi false dan sebaliknya.!, !== +

Ekspresi dasarnya bernilai true, namun pada pernamdingan mengembalikan nilai false karena kita menggunakan negasi:

+ +

var myVariable = 3;
+ !myVariable === 3;

+ +

Disini kita mencoba "Apakah  myVariable NOT ( tidak ) sama dengan 3". Mengembalikan nilai false, karena disitu pembandingnya sama dengan 3.

+ +

var myVariable = 3;
+ myVariable !== 3;

+
+ +

Disana masih banyak lagi yang dapat anda pelajari, tapi ini dulu yang kita cukup pahami. Lihat Operator dan ekspressi untuk daftar yang lebih lengkap.

+ +
+

Catatan: Mencampur tipe data akan memyebabkan hasil yang tidak kita duga ketika melakukan perhitungan, jadi hati - hati ketika memberikan nilai pada variabel pastikan memberikan nilai yang sesuai, dan mendapatkan hasil sesuai yang anda inginkan. Misalnya menuliskan "35" + "25" pada konsol. Kenapa anda tidak mendapatkan nilai yang anda inginkan? karena tanda kutip mengubah angka menjadi teks string — anda hanya mendapatkan nilai string yang digabungkan, dan bukan angka yang ditambahkan. Jika anda memasukkan 35 + 25, anda akan mendapatkan nilai yang sesuai.

+
+ +

Kondisional

+ +

Kondisional adalah struktur kode yang memungkinkan anda untuk menguji apakah ekspresi mengembalikan nilai yang benar atau tidak, dan kemudian menjalankan perintah lain tergantung pada hasilnya. Bentuk umum dari kondisional disebut if ... else. Contoh seperti berikut:

+ +
var esKrim = 'coklat';
+if (esKrim === 'coklat') {
+  alert('Yay, Aku suka eskrim coklat!');
+} else {
+  alert('Hahhh, tapi sukanya coklat...');
+}
+ +

Ekspresi didalam if ( ... ) dalah pengujian — disini menggunakan operator kesetaraan (seperti yang dijelaskan sebelumnya) untuk membandingkan variabe esKrim dengan string coklat untuk melihat keduanya sama. Jika hasil perbandingan mengembalikan nilai true, kode blok pertama akan dijalankan. Jika tidak, akan di lewati dan kode blok selanjutnya akan di jalankan, tepatnya setelah statement else.

+ +

Fungsi

+ +

{{Glossary("Function", "Functions")}} merupakan cara encapsulasi fungsi yang ingin anda gunakan kembali, jadi anda dapat memanggil dengan hanya sebuah nama fungsi, dan tidak harus menulis semua kodenya lagi setiap kali anda ingin menggunakannya kembali. Anda telah melihat beberapa fungsi diatas, seperti:

+ +
    +
  1. + 
    var myVariable = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('Halo!');
    +
    3. +
+ +

Fungsi ini merupakan built-in browser untuk anda gunakan kapanpun.

+ +

Jika anda melihat sesuatu yang mirip dengan nama variabel, tapi menggunakan tanda kurung — () — setelahnya, anda dapat memastikan bahwa itu adalah fungsi. Fungsi terkadang menggunakan {{Glossary("Argument", "arguments")}} — bit data yang dibutuhkan untuk dapat menjalankan fungsinya. Argumen di tulis di dalam tanda kurung, dan dipisahkan dengan koma jika memiliki lebih dari satu argumen.

+ +

Misal, Fungsi alert() membuat kotak pop-up terlihat pada jendela browser, namun kita perlu membaerikan string sebagai sebuah argumen untuk mengatakan pada fungsi alert()pesan apa yang harus di tampilkan pada kotak po-pup.

+ +

Berita bagusnya adalah kita dapat membuat fungsi anda sendiri — pada contoh berikut kita menulis sebuah fungsi sederhana dengan menggunakan dua argumen dan mengalikannya menjadi nilai baru:

+ +
function kalikan(angka1,angka2) {
+  var hasil = angka1 * angka2;
+  return hasil;
+}
+ +

Coba jalankan fungsi diatas pada konsole, kemudian coba gunakan fungsi anda beberapa kali, misal.:

+ +
kalikan(4,7);
+kalikan(20,20);
+kalikan(0.5,3);
+ +
+

Catatan: Statement return mengatakan pada browser untuk mengembalikan nilai variabel hasil keluar dari fungsi sehingga dapat digunakan. Hal ini diperlukan karena variabel yang didefinisikan di dalam blok kode atau cakupan fungsi hanya akan tersedia didalam fungsi itu sendiri. Hal ini disebuat variable {{Glossary("Scope", "scoping")}} (baca lebih lanjut tentang variable scoping disini.)

+
+ +

Events

+ +

Untuk membuat hal yang interaktif pada website, anda perlu menggunakan event — kode struktur ini mendengarkan setiap hal yang terjadi pada browser, dan kemudian memungkinkan anda menjalankan kode sebagai respon pada hal yang terjadi tersebut. Contoh yang paling terjadi adalah click event, dimana di suarakan oleh browser ketika mouse anda mengklik pada elemen seperti link, tombol atau yang lainnya. Untuk menunjukkannya, coba tambahkan kode berikut pada konsol anda, kemudian coba klik pada halaman web tersebut:

+ +
document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}
+ +

Banyak sekali cara untuk melampirkan event pada sebuah elemen; disini kita memilih elemen HTML dan membuat properti handler onclick yang sama dengan fungsi anonim (fungsi tanpa nama) yang berisi kode yang ingin kita jalankan ketika event terjadi.

+ +

Catat bahwa

+ +
document.querySelector('html').onclick = function() {};
+ +

sama dengan

+ +
var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};
+ +

Hanya untuk lebih pendek saja menuliskannya.

+ +

Meningkatkan contoh website kita

+ +

Sekarang kita meninjau beberapa dasar JavaScript, mari tambahkan bebrapa fitur dasar ke contoh situs kita untuk memberi anda satu langkah kepada suatu yang mungkin.

+ +

Menambahkan pengubah gambar

+ +

Pada bagian ini kita akan menambahkan gambar lain pada situs kita, dan tambahkan beberapa Javascript sederhana untuk mengubah antara keduanya ketika gambar di-klik.

+ +
    +
  1. Pertama, cari gambar lain yang ingin anda gunakan di situs anda. Pastikan ukurannya sama dengan gambar pertama, atau kurang lebih sama.
    2. +
  2. Simpan gambar pada folder images anda.
    3. +
  3. Pada file main.js , tuliskan kode JavaScript berikut (Jika kode Javascript hello world masih disana, hapus saja): + 
    var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}
    +
    4. +
  4. Simpan semua file dan muat index.html di browser. Sekarang kita klik gambarnya, seharusnya berubah tampilannya menjadi gambar yang satunya!
    5. +
+ +

Kita menyimpan referensi ke elemen gambar Kita dalam variabel myImage. Selanjutnya, Kita membuat fungsi tanpa nama (fungsi "anonim") pada property variabel pengendali event onclick. Sekarang, setiap kali elemen gambar ini diklik:

+ +
    +
  1. Kita mendapatkan nilai atribut src dari gambar.
    2. +
  2. Kita menggunakan kondisional untuk memeriksa apakah nilai src sama dengan path gambar asli: +
      +
    1. Jika ya, kita mengubah nilai src ke path gambar kedua, memaksa gambar lain dimuat dalam elemen {{htmlelement ("image")}}.
      2. +
    2. Jika tidak (artinya harus sudah mengalami perubahan), kita mengubah nilai src kembali ke jalur gambar asli, untuk membalikkannya kembali ke semula.
      3. +
    +
    3. +
+ +

Menambahkan pesan selamat datang yang dinamis

+ +

Selanjutnya, Kita akan menambahkan sedikit kode lagi untuk mengubah judul halaman untuk menyertakan pesan pembuka yang dinamis saat pengguna pertama kali masuk ke situs. Pesan pembuka ini akan bertahan saat pengguna meninggalkan situs dan kemudian kembali lagi. Kita juga akan menyertakan opsi untuk mengubah pengguna dan oleh karena itu pesan selamat datang diperlukan setiap waktu.

+ +
    +
  1. Pada index.html, Tambahkan baris berikut sebelum elemen {{htmlelement("script")}}: + + 
    <button>Change user</button>
    +
    2. +
  2. Pada main.js,  tambahkan kode berikut di bagian bawah file, persis seperti yang tertulis - ini mengacu pada tombol baru yang akan kita tambahkan, judulnya, dan simpan pada variabel: + 
    var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');
    +
    3. +
  3. Sekarang tambahkan fungsi berikut untuk mengatur ucapan yang dinamis - ini belum berinteraksi tapi nanti akan kita gunakan: + 
    function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+}
    + Fungsi ini berisi fungsi prompt() yang menampilkan kotak dialog seperti alert(). Perbedaannya adalah prompt() meminta pengguna untuk memasukkan data, dan menyimpan data tersebut dalam variabel saat tombol dialog OK ditekan. Dalam kasus ini, kita meminta pengguna memasukkan namanya. Selanjutnya, kita memanggil API yang disebut localStorage, yang memungkinkan kita menyimpan data di browser, dan mengambilnya nanti. Kita menggunakan fungsi setItem LocalStorage () untuk membuat dan menyimpan item data yang disebut 'name', dan menetapkan nilainya ke variabel myName yang berisi nama pengguna yang dimasukkan. Akhirnya, kita mengatur innerHTML dari judul ke string, ditambahk nama penggunanya.
    4. +
  4. Selanjutnya, tambahkan blok if ... else — kita bisa memanggil kode inisialisasi, sebagai pengatur saat aplikasi pertama kali dimuat: + 
    if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
+}
    + Blok kode pertama kali menggunakan operator negasi (logical NOT) untuk memeriksa apakah item data ada - jika tidak ada, fungsi setUserName() dijalankan untuk membuatnya. Jika sudah ada (misalnya pengguna mengaturnya saat mereka mengunjungi situs), kita mengambil nama yang tersimpan dengan menggunakan getItem() dan menetapkan innerHTML dari judul ke string, ditambah nama pengguna, sama seperti yang kita lakukan di dalam setUserName().
    5. +
  5. Terakhir, letakkan pengendali event di bawah onclick pada tombolnya, sehingga saat diklik fungsi setUserName() dijalankan. Hal ini memungkinkan pengguna untuk mengatur nama baru kapan pun mereka mau dengan menekan tombol: + 
    myButton.onclick = function() {
+  setUserName();
+}
    +
    6. +
+ +

Sekarang saat pertama kali mengunjungi situs, akan meminta nama pengguna kemudian memberi pesan yang dinamis kepada anda. Kemudian Anda bisa mengganti nama kapan saja dengan menekan tombol. Sebagai bonus tambahan, karena namanya tersimpan di dalam localStorage, tetap ada setelah situs ditutup, jadi pesan yang dinamis akan tetap ada saat Anda membuka situs ini lagi!

+ +

Kesimpulan

+ +

Jika Anda telah mengikuti semua petunjuk dalam artikel ini, halaman yang Anda buat harus terlihat seperti ini (Anda juga dapat melihat versi kami di sini):

+ +

+ +

Jika Anda terjebak kebingungan, Anda selalu bisa membandingkan pekerjaan Anda dengan contoh kode yang telah kami selesaikan di Github.

+ +

Di sini, kita hanya benar-benar menenepuk permukaan JavaScript. Jika Anda telah menikmati pembelajarannya dan ingin belajar lebih dalam dengan studi Anda, masuklah ke Panduan JavaScript kami.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/id/learn/getting_started_with_the_web/mengelola_file/index.html b/files/id/learn/getting_started_with_the_web/mengelola_file/index.html new file mode 100644 index 0000000000..04cc90ec4b --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/mengelola_file/index.html @@ -0,0 +1,123 @@ +--- +title: Berurusan dengan file +slug: Learn/Getting_started_with_the_web/Mengelola_file +tags: + - CodingScripting + - File + - HTML + - 'I10n:prioritas' + - Panduan + - Pemula + - Teori + - website +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")}}
+ +
+

Suatu website terdiri atas banyak file, seperti konten teks, kode, stylesheet, konten media, dan lain-lain. Ketika kamu sedang membuat sebuah website, kamu perlu merangkai file-file ini menjadi sebuah struktur yang sesuai pada komputermu, memastikan file-file tersebut saling terhubung antara satu dengan lainnya, dan memastikan semua konten sudah benar sebelum akhirnya kamu unggah mereka ke suatu server. Bagian ini akan membahas isu-isu yang perlu kamu ketahui sehingga kamu dapat membuat struktur file yang sesuai untuk website kamu.

+
+ +

Di mana website kamu berada dalam komputermu?

+ +

Ketika kamu sedang mengerjakan satu website lokal pada komputer pribadimu, kamu harus menyimpan semua file terkait pada satu folder sesuai dengan struktur website yang diunggah ke server. Folder ini dapat kamu simpan di manapun sesukamu, tetapi kamu harus meletakkannya di suatu tempat yang mudah ditemukan, seperti Desktop, pada folder Home, atau pada folder root dari hard drive kamu.

+ +
    +
  1. Pilih tempat untuk menyimpan proyek-proyek websitemu. Buatlah sebuah folder dengan nama web-projects (atau nama lain yang serupa). Di sinilah proyek-proyek websitemu akan disimpan. 
    2. +
  2. Di dalam folder sebelumnya, buat lagi satu folder untuk menyimpan website pertamamu. Berilah nama test-site (atau nama lainnya yang lebih menarik).
    3. +
+ +

Catatan untuk pengaturan huruf kapital dan penggunaan spasi

+ +

Kamu akan menyadari bahwa di artikel ini, kami akan meminta kamu untuk menamai folder dan file dalam huruf kecil tanpa spasi. Hal ini karena:

+ +
    +
  1. Banyak komputer, terutama web server, bersifat case-sensitive (sensitif terhadap huruf kapital dan kecil). Sebagai contoh, jika kamu meletakkan gambar pada situs seperti test-site/GambarSaya.jpg, dan kemudian pada file lain kamu akan memanggil gambar tersebut dengan  test-site/gambarsaya.jpg, maka kemungkinan hal tersebut tidak akan berhasil. 
    2. +
  2. Peramban, web server dan bahasa pemrograman tidak menangani spasi secara konsisten. Contohnya. jika kamu menggunakan spasi pada nama filemu, beberapa sistem akan memperlakukannya sebagai dua nama file. Beberapa server akan mengganti spasi pada nama filemu dengan "%20" (kode karakter untuk spasi pada URI) sehingga akan merusak semua tautanmu. Akan lebih baik bila kamu memisahkan kata-kata menggunakan tanda hubung (-), dibandingkan underscore (_): file-saya.html vs. file_saya.html.
    3. +
+ +

Jawaban singkatnya adalah kamu sebaiknya menggunakan tanda hubung (-) untuk nama file mu. Mesin pencari Google memperlakukan tanda hubung sebagai pemisah kata, namun ia tidak memperlakukan underscore sebagai hal yang sama. Atas dasar hal tersebut, sebaiknya kamu membiasakan diri menulis nama folder dan file dengan huruf kecil, tanpa spasi, dan dengan kata-kata yang dipisahkan oleh tanda hubung, kecuali bila kamu tahu apa yang kamu lakukan. Hal ini dapat membantumu terhindar dari masalah ke depan.

+ +

Bagaimana struktur yang harus kamu gunakan untuk websitemu?

+ +

Berikutnya, mari kita lihat struktur seperti apa yang diperlukan oleh website percobaan kita. Hal yang paling sering kamu temukan pada proyek website apapun yang kita buat adalah sebuah file indeks HTML dan folder untuk menyimpan gambar, file CSS, dan file script. Ayo buat sekarang juga:

+ +
    +
  1. index.html: File ini secara umum berisi halaman beranda, yaitu gambar dan teks yang bisa dilihat orang saat pertama kali membuka websitemu. Dengan menggunakan pengedit teks, buat sebuah file baru bernama index.html dan simpan di dalam folder test-site.
    2. +
  2. Folder images: Folder ini berisi semua gambar yang akan digunakan pada websitemu. Buatlah sebuah folder bernama images di dalam folder test-site. 
    3. +
  3. Folder styles: Folder ini berisi kode CSS yang digunakan untuk kontenmu (contoh: pengaturan teks dan warna latar belakang). Buat folder bernama styles di dalam folder test-site.
    4. +
  4. Folder scripts: Folder ini berisi semua kode JavaScript yang digunakan untuk menambah fungsionalitas interaktif pada websitemu. Buat folder bernama scripts di dalam folder test-site.
    5. +
+ +
+

Catatan: Pada komputer Windows, kamu mungkin mengalami kesulitan saat melihat nama file, karena Windows memiliki opsi Hide extensions for known file types yang aktif secara default. Umumnya, kamu dapat mematikannya dengan masuk ke Windows Explorer, pilih Folder options..., hilangkan centang pada kotak cek Hide extensions for known file types, lalu klik OK. Untuk informasi spesifik mengenai versi Windowsmu, kamu dapat melakukan pencarian di web.

+
+ +

Jalur/Path file

+ +

Agar file-file dapat berkomunikasi antara satu dengan lainnya, kamu harus menyediakan sebuah path file — sebuah rute sehingga satu file dapat mengetahui di mana lokasi file yang lainnya. Untuk mendemonstrasikannya, kita akan memasukkan sedikit HTML ke dalam file index.html, dan membuatnya menampilkan gambar yang kamu pilih pada artikel "Akan terlihat seperti apa website kamu?" 

+ +
    +
  1. Salin gambar yang kamu pilih sebelumnya ke folder image.
    2. +
  2. Buka file index.html, dan tambahkan kode berikut ke dalam file sama seperti di bawah. Abaikan maksud dari semuanya untuk saat ini — kita akan melihat struktur lebih detilnya di seri berikut. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="" alt="My test image">
+  </body>
+</html>
    +
    3. +
  3. Baris <img src="" alt="My test image"> adalah kode HTML yang menyisipkan gambar ke dalam halaman. Kita perlu memberitahu HTML di mana letak gambar tersebut. Gambar berada pada folder images yang sejajar dengan file index.html. Untuk menelusuri struktur file dari index.html ke gambar kita, jalur file yang kita butuhkan adalah images/your-image-filename. Sebagai contoh, gambar tersebut kami namai  firefox-icon.png, sehingga jalur file-nya menjadi images/firefox-icon.png.
    4. +
  4. Sisipkan jalur file tersebut ke dalam kode HTML kamu di antara tanda petik pada kode src="".
    5. +
  5. Simpan file HTML, kemudian buka halaman tersebut pada peramban webmu (double-click file). Kamu akan melihat halaman web barumu menampilkan gambarmu!
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Beberapa aturan umum untuk jalur file:

+ + + +

Untuk sekarang, itulah semua yang perlu kamu ketahui.

+ +
+

Catatan: Sistem file pada Windows biasanya menggunakan garis miring terbalik (\), bukan garis miring (/), contohnya C:\windows. Hal ini tidak masalah pada HTML — bahkan jika kamu sedang mengembangkan websitemu di Windows, kamu tetap dapat menggunakan garis miring di kodemu.

+
+ +

Apa lagi yang harus dilakukan?

+ +

Begitulah untuk saat ini. Struktur foldermu seharusnya terlihat seperti ini:

+ +

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

+ +

 

+ +

 

+ +

Dalam modul ini

+ + diff --git a/files/id/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/id/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..ad9eaa3f64 --- /dev/null +++ b/files/id/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,111 @@ +--- +title: Publishing your website +slug: Learn/Getting_started_with_the_web/Publishing_your_website +tags: + - Beginner + - 'I10n:priority' + - Learn + - NeedsTranslation + - Web + - publishing +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")}}
+ +
+

Setelah anda selesai menulis kode dan mengatur file yang membentuk website anda, anda perlu menaruh file - file tersebut secara online agar orang lain bisa menemukannya. Artikel ini menunjukan bagaimana kode sederhana anda online dengan sedikit usaha.

+
+ +

Apa pilihannya?

+ +

Menerbitkan sebuah website bukanlah topik yang sederhana, terutama karena banyak sekali cara yang bisa digunakan. Pada artikel ini kita tidak akan membahas keseluruhan cara. Namun, kita akan membahas pro dan kontra dari ketiga strategi yang sangat luas dari pandangan pemula, dan kita akan mencoba salah satu cara untuk digunakan.

+ +

Mencari hosting dan nama domain

+ +

Jika anda ingin mengontrol keseluruhan website anda, maka anda perlu menyisikan uang untuk membeli:

+ + + +

Setiap website professional menerbitkan website dengan cara ini.

+ +

Sebagai tambahan, anda memerlukan program {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (lihat Berapa mahal harganya: software untuk lebih detail) untuk mengirim file website ke server. Program FTP sangat bervariasi, tapi umumnya anda perlu login ke web server anda menggunakan detail yang diberikan oleh perusahaan hosting anda (mis. username, password, host name). Kemudian program akan menampilkan file lokal dan file di web server ada dalam dua jendela, jadi anda bisa mentransfernya dari komputer lokal ke web server dan sebaliknya:

+ +

+ +

Tips mencai hosting dan domain

+ + + +

Menggunakan alat online seperti GitHub, Google App Engine atau Dropbox

+ +

Beberapa alat yang memungkinkan anda menerbitkan website secara online:

+ + + +

Tidak seperti hosting umumnya, alat tersebut dapat digunakan secara gratis, tapi anda hanya mendapatkan fitur terbatas atau yang hanya disediakan.

+ +

Menggunakan IDE berbasis web seperti Thimble

+ +

Banyak sekali aplikasi web yang meniru lingkungan pengembangan situs web, memungkinkan anda untuk menulis HTML, CSS, dan JavaScript, kemudian menampilkan hasil kode itu saat diberikan sebagai situs web - semuanya ada dalam satu tab browser. Secara umum alat ini cukup mudah, bagus untuk dipelajari, dan gratis (untuk fitur dasar), dan mereka meng-host halaman yang anda berikan di alamat web yang unik. Namun, fitur dasarnya cukup terbatas, dan aplikasi biasanya tidak menyediakan ruang hosting untuk aset (seperti gambar).

+ +

Cobalah bermain dengan beberapa contoh ini, dan lihatlah mana yang paling Anda sukai:

+ + + +

+ +

Penerbitan Melalui Github Pages

+ +

Sekarang mari kami menuntun anda melalui cara mudah menerbitkan situs anda melalui GitHub Pages.

+ +
    +
  1. Pertama, daftar akun GitHub dan verifikasi alamat email anda.
    2. +
  2. Selanjutnya, anda perlu membuat repository untuk menempatkan file anda.
    3. +
  3. Pada halaman ini, pada kolom Nama Repository, tulis username.github.io, dimana username merupakan username akun github anda. Sebagai contoh, teman kita rmsubekti perlu menuliskan rmsubekti.github.io.
    + Juga centang Initialize this repository with a README kemudian klik Create repository.
    4. +
  4. Setelah itu, seret konten folder website anda ke repository dan klik Commit changes.
    + +
    +

    Catatan: Pastikan folder website anda memiliki file index.html.

    +
    +
    5. +
  5. +

    Sekarang kunjugi username.github.io dari browser anda untuk melihat website anda di sajikan secara online. Sebagai contoh, untuk username chrisdavidmills, maka kunjugi chrisdavidmills.github.io.

    + +
    +

    Catatan: Mungkin akan memakan waktu sedikit lama agar website anda dapat disajikan. Jika tidak segera disajikan, anda mungkin perlu menunggu beberapa menit kemudian coba lagi.

    +
    +
    6. +
+ +

Pelajari lebih lanjut, kunjungi GitHub Pages Help.

+ +

Bacaan lebih lanjut

+ + + +

{{PreviousNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works")}}

diff --git a/files/id/learn/how_to_contribute/index.html b/files/id/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..0a64757fc1 --- /dev/null +++ b/files/id/learn/how_to_contribute/index.html @@ -0,0 +1,108 @@ +--- +title: Cara berkontribusi untuk Area Belajar di MDN +slug: Learn/How_to_contribute +tags: + - Dokumentasi + - MDN + - MDN Meta + - Proyek MDC + - belajar + - kontribusi +translation_of: Learn/How_to_contribute +--- +

{{LearnSidebar}}

+ +

Jika Anda berada disini, itu mungkin karena Anda tertarik berkontribusi dalam Area Belajar MDN. Itu berita bagus!

+ +

Pada halaman ini, Anda akan menemukan semua hal yang Anda butuhkan untuk mulai membantu menigkatkan konten pembelajaran MDN. Ada banyak hal yang dapat Anda lakukan, tergantung pada seberapa waktu yang anda miliki dan apakah Anda seorang pemula, seorang pengembang web, atau seorang guru.

+ +
+

Catatan: Jika Anda telah menjadi kontributor MDN, jangan ragu untuk memeriksa ulang halaman status dokumentasi untuk melacak pekerjaan yang sudah dilakukan dan melihat apa yang menjadi prioritas menulis.

+
+ +
+

Catatan: Kontributor menggunakan Trello board untuk mengorganisir diri. Jika Anda ingin menggunakannya, hanya dengan membuat akun Trello dan ping Jeremie untuk memberikan Anda akses tulis ke papan.

+
+ +

Saya seorang pemula

+ +

Mengagumkan! Pemula sangat penting untuk menciptakan dan memberikan umpan balik pada materi pembelajaran. Anda memiliki perspektif yang unik pada artikel ini sebagai bagian dari target pengunjung, yang dapat membuat Anda menjadi Anggota yang sangat berharga dari tim kami. memang, jika Anda menggunakan salah satu artikel kami untuk mempelajari sesuatu dan Anda terjebak, atau menemukan artikel yang membingungkan dalam berbagai cara, Anda dapat memperbaikinya atau biarkan kami tahu tentang masalahnya sehingga kami dapat memperbaikinya.

+ +

Kontribusi juga merupakan cara yang bagus untuk bersenang-senang sambil belajar hal-hal baru. Jika Anda pernah merasa kebingungan atau memiliki pertanyaan, jangan ragu untuk menghubungi kami di mailing list kami atau Saluran IRC (lihat di bagian bawah halaman ini untuk rincian).
+
+ Berikut adalah beberapa cara yang disarankan untuk Anda dapat berkontribusi:

+ +
+
Tambahkan tag ke artikel kami (5 menit)
+
Pemberian tag konten MDN adalah salah satu cara termudah untuk berkontribusi MDN. Seperti banyak fitur kami menggunakan tag untuk membantu menyajikan informasi dalam konteks, membantu dengan pemberian tag merupakan kontribusi yang sangat berharga. Lihatlah daftar istilah dan artikel pembelajaran tanpa tag untuk memulai.
+
Membaca dan meninjau daftar istilah (15 menit)
+
Sebagai pemula, kita perlu mata segar Anda untuk melihat konten kami. Jika Anda menemukan entri glossary yang sulit untuk dipahami, itu berarti bahwa entrinya perlu ditingkatkan. Jangan ragu untuk membuat perubahan yang Anda anggap perlu. Jika Anda tidak berpikir Anda memiliki keterampilan yang diperlukan untuk mengedit entri sendiri, setidaknya memberitahu kami di mailing list kami.
+
Menulis daftar istilah baru (1 jam)
+
Ini adalah cara yang paling efektif untuk belajar sesuatu yang baru. Pilih sebuah konsep yang ingin  Anda pahami, dan saat Anda belajar tentang hal itu, tulislah daftar istilah tentang hal itu. Menjelaskan sesuatu kepada orang lain adalah cara yang bagus untuk "memperbaiki" pengetahuan ke dalam otak Anda, dan membantu Anda memahami diri sendiri, sambil membantu orang lain. Setiap orang menang!
+
Membaca dan meninjau artikel pembelajaran (2 jam)
+
Hal ini sangat mirip meninjau daftar istilah (lihat di atas); itu hanya membutuhkan waktu lebih lama, karena artikel ini biasanya sedikit lebih lama.
+
+ +

Saya seorang pengembang web

+ +

Fantastis! Keterampilan teknis Anda adalah apa yang kami butuhkan untuk memastikan kami menyediakan konten teknis yang akurat untuk pemula. Karena ini adalah bagian tertentu dari MDN didedikasikan untuk belajar Web, pastikan penjelasan Anda sesederhana mungkin, tanpa begitu sederhana itu tidak akan berguna. Ini lebih penting untuk dimengerti daripada menjadi terlalu tepat.

+ +
+
Membaca dan meninjau daftar istilah (15 menit)
+
Sebagai pengembang web, kita perlu Anda untuk memastikan konten kami secara teknis akurat tanpa terlalu bertele-tele. Jangan ragu untuk membuat perubahan yang Anda anggap perlu. Jika Anda ingin mendiskusikan isi sebelum mengedit, ping kami di mailing list kami atau Saluran IRC.
+
Menulis daftar istilah baru (1 jam)
+
Menjelaskan istilah teknis merupakan cara yang sangat baik untuk belajar menulis yang akurat sekaligus sederhana secara teknis. Para pemula akan berterima kasih kepada Anda atas hal ini. Kami memiliki banyak istilah yang belum terdefinisikan, yang membutuhkan perhatian Anda. Pilih salah satu dan kerjakan.
+
Membaca dan meninjau artikel pembelajaran (2 jam)
+
Ini adalah hal yang sama seperti meninjau entri glossary (lihat di atas); hanya saja membutuhkan sedikit lebih banyak waktu karena artikelnya sedikit panjang.
+
Menulis artikel pembelajaran baru (4 jam)
+
MDN kurang artikel sederhana tentang menggunakan teknologi web (HTML, CSS, JavaScript, dll). Kami juga memiliki konten lama di MDN yang layak untuk dikaji dan dibentuk kembali. Dorong kemampuan Anda sampai batas untuk membuat teknologi web yang dapat digunakan bahkan oleh pemula.
+
Buat latihan, contoh kode atau alat pembelajaran aktif (? hours)
+
Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif", karena orang belajar lebih baik dengan melakukanya sendiri. Materi tersebut adalah latihan atau konten interaktif yang membantu pengguna untuk menerapkan dan memanipulasi ricnian konsep dalam sebuah artikel. Ada banyak cara yang mungkin untuk membuat konten pembelajaran yang aktif, dari menciptakan contoh kode dengan JSFiddle atau serupa, untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan Thimble. Lepaskan kreativitas Anda!
+
+ +

Saya seorang Pengajar

+ +

MDN memiliki sejarah panjang keunggulan teknis, tapi kami tidak memiliki rasa yang baik dari cara terbaik untuk mengajarkan konsep untuk pendatang baru. Di sinilah kami perlu Anda, sebagai pengajar atau pendidik. Anda dapat membantu kami memastikan bahwa materi yang kami berikan baik, jalur pendidikan yang masuk akal bagi pembaca kami.

+ +
+
Membaca dan meninjau daftar istilah (15 menit)
+
Periksa daftar istilah dan jangan takut untuk membuat perubahan yang menurut Anda perlu. Jika Anda ingin mendiskusikan konten sebelum mengedit, ping kami di mailing list atau Saluran IRC kami.
+
Menulis daftar istilah baru (1 jam)
+
Jelas, definisi sederhana dari istilah dan ikhtisar dasar konsep dalam daftar istilah penting dalam memenuhi kebutuhan pemula '. Pengalaman Anda sebagai seorang pendidik dapat membantu membuat daftar istilah yang sangat baik; kami memiliki banyak istilah yang belum terdefinisikan yang perlu Anda perhatikan. Pilih satu dan kerjakan.
+
Tambahkan ilustrasi dan/ atau skema artikel (1 jam)
+
Seperti yang anda ketahui, ilustrasi merupakan bagian penting dari isi pembelajaran apapun. Ini adalah sesuatu yang kita sering kekurangan di MDN dan keterampilan Anda dapat membuat perbedaan di area itu. Kunjungi artikel yang kekurangan konten ilustrasi dan pilih salah satu yang Anda inginkan untuk membuat ilustrasi.
+
Membaca dan meninjau artikel pembelajaran (2 jam)
+
Hal ini mirip dengan meninjau daftar istilah (lihat di atas), tetapi membutuhkan lebih banyak waktu karena artikel biasanya sedikit lebih panjang.
+
Menulis artikel pembelajaran baru (4 jam)
+
Kita perlu artikel yang mudah tentang ekosistem Web dan topik fungsional lain di sekitarnya. Karena ini artikel pembelajaran perlu mendidik daripada mencoba untuk benar-benar menutupi segala sesuatu yang perlu diketahui, pengalaman Anda dalam mengetahui apa yang harus diliput dan bagaimana hal itu akan menjadi aset besar.
+
Buat latihan, kuis atau alat pembelajaran interaktif (? jam)
+
Semua artikel pembelajaran kita membutuhkan apa yang kita sebut materi "belajar aktif". Materi tersebut adalah latihan atau konten interaktif yang membantu pengguna belajar untuk menggunakan dan memanipulasi konsep yang dirincikan dalam sebuah artikel. Ada banyak hal yang dapat Anda lakukan di sini, dari membuat kuis untuk membangun konten interaktif yang sepenuhnya dapat diubah dengan Thimble. Lepaskan kreativitas Anda!
+
Buat jalur studi (? jam)
+
Dalam rangka memberikan tutorial yang progresif dan mudah dipahami, kita perlu membentuk konten jalur studi. Ini adalah cara untuk mengumpulkan konten yang ada dan mencari apa kekurangan artikel pembelajaran untuk menuliskannya.
+
diff --git a/files/id/learn/html/howto/index.html b/files/id/learn/html/howto/index.html new file mode 100644 index 0000000000..ef45d155ad --- /dev/null +++ b/files/id/learn/html/howto/index.html @@ -0,0 +1,142 @@ +--- +title: Menggunakan HTML dalam masalah umum +slug: Learn/HTML/Howto +translation_of: Learn/HTML/Howto +--- +
{{LearnSidebar}}
+ +

Daftar berikut menunjukkan solusi untuk masalah umum sehari-hari yang harus kamu selesaikan dengan menggunakan HTML.

+ +
+
+

Struktur Dasar

+ +

Penerapan HTML yang paling dasar adalah struktur dokumen. Jika kamu baru mengenal HTML, kamu harus mulai dengan ini.

+ + + +

Dasar semantik tingkat dasar

+ +

HTML mengkhususkan dalam memberikan informasi semantik untuk dokumen, jadi HTML menjawab banyak pertanyaan yang mungkin kamu miliki tentang bagaimana cara menyampaikan pesan kamu dengan baik di dokumen kamu.

+ + +
+ +
+ + +

Salah satu alasan utama HTML adalah memudahkan navigasi {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:

+ + + +

Gambar & multimedia

+ + + +

Scripting & styling

+ +

HTML hanya mengatur struktur dokumen. Untuk mengatasi masalah tampilan, gunakan{{glossary("CSS")}}, atau gunakan scripting atau javascript untuk membuat halaman Anda interaktif.

+ + + +

Embedded content

+ + +
+
+ +

Masalah yang tidak umum atau tingkat lanjut

+ +

Selain dasar-dasarnya, HTML sangat kaya dan menawarkan fitur-fitur canggih untuk memecahkan masalah yang kompleks. Artikel ini membantu kamu menangani kasus penggunaan yang kurang umum yang mungkin kamu hadapi:

+ +
+
+

Forms (Formulir)

+ +

Forms adalah struktur HTML kompleks yang dibuat untuk mengirim data dari halaman web ke server web. Kami mendorong kamu untuk membaca panduan lengkap kami. Di sinilah kamu harus memulai:

+ + + +

Tabular information ( Informasi Tabel)

+ +

Beberapa informasi, yang disebut data tabular, perlu diatur ke dalam tabel dengan kolom dan baris. Itu salah satu struktur HTML paling kompleks, dan menguasainya tidaklah mudah:

+ + + +

Data representation (Representasi data)

+ + +
+ +
+

Sematik text tingkat lanjut

+ +
    +
  • Cara membuat garis baru
    • +
  • How to mark changes (added and removed text) — see the {{htmlelement("ins")}} and {{htmlelement("del")}} elements.
    • +
+ +

Advanced images & multimedia

+ + + +

Internationalization

+ +

HTML tidak monolingual. Alat ini menyediakan sesuatu untuk menangani masalah internasionalisasi umum.

+ + + +

Performa

+ + +
+
+ +

     

+ +
+
+
diff --git a/files/id/learn/html/index.html b/files/id/learn/html/index.html new file mode 100644 index 0000000000..8f5726db10 --- /dev/null +++ b/files/id/learn/html/index.html @@ -0,0 +1,58 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - HTML + - Panduan + - Pemula + - Pengenalan + - Topik + - belajar +translation_of: Learn/HTML +--- +
{{LearnSidebar}}
+ +

Untuk membangun websites, Anda harus mengetahui tentang {{Glossary('HTML')}} — teknologi dasar yang digunakan untuk menentukan struktur halaman web,yaitu HTML. HTML adalah kerangka dari suatu halaman web. Anda dapat menggunakan HTML untuk menentukan konten mana yang termasuk dalam paragraf, judul, link, gambar, input form, multimedia player dan lain-lain.

+ +

+ +

Jalur belajar

+ +

Idealnya, Anda harus memulai perjalanan belajar dengan mempelajari HTML. Memulai dengan membaca Introduction to HTML. Anda kemudian dapat melanjutkan untuk belajar tentang topik yang lebih maju seperti:

+ + + +

Sebelum topik dimulai, Anda harus mempunyai paling sedikit akrab menggunakan komputer, dan menggunakan web secara pasif (yaitu hanya melihat, yang mengkonsumsi konten). Anda harus memiliki lingkungan kerja dasar yang diatur seperti yang terperinci dalam Installing basic software, dan memahami bagaimana membuat dan mengelola file, seperti yang dijelaskan dalam Dealing with files — keduanya merupakan bagian dari modul Getting started with the web.

+ +

Dianjurkan agar Anda bekerja melalui Getting started with the web sebelum mencoba topik ini, namun hal itu tidak mutlak diperlukan; sebgaian besar dari apa yang tercakup dalam artikel HTML basics juga dibahas dalam modul Introduction to HTML, meskipun dalam detail lebih banyak.

+ +

Modul

+ +

Topik ini berisi modul berikut, dalam urutan yang disarankan untuk mengerjakannya. Anda pasti harus mulai dengan yang pertama.

+ +
+
Pengenalan tentang HTML
+
Modul ini mengatur panggung, membuat Anda terbiasa dengan konsep dan sintaks penting, melihat penerapan HTML ke teks, cara membuat hyperlink, dan cara menggunakan HTML untuk menyusun halaman web.
+
Multimedia and embedding
+
Modul ini membahas bagaimana menggunakan HTML untuk menyertakan multimedia di halaman web Anda, termasuk berbagai cara agar gambar dapat disertakan, dan bagaimana cara menyematkan video, audio, dan bahkan seluruh halaman Web lainnya.
+
HTML Tables
+
Mewakili data tabular pada halaman web dengan cara yang dapat dimengerti, {{glossary("Accessibility", "accessible")}} bisa menjadi tantangan tersendiri. Modul ini mencakup markup tabel dasar, beserta fitur yang lebih kompleks seperti menerapkan caption dan ringkasan.
+
HTML Forms
+
Forms adalah bagian yang sangat penting dari Web — ini memberikan banyak fungsi yang Anda butuhkan untuk berinteraksi dengan situs web, misalnya. Mendaftar dan masuk, mengirim umpan balik, membeli produk, dan banyak lagi. Modul ini akan membantu Anda memulai dengan membuat bagian-bagian client-side.
+
+ +

Memecahkan masalah HTML biasa

+ +

Gunakan HTML untuk memecahkan masalah umum menyediakan tautan ke bagian konten yang menjelaskan cara menggunakan HTML untuk memecahkan masalah yang sangat umum saat membuat laman web: menangani judul, menambahkan gambar atau video, menekankan konten, membuat formulir dasar, dll.

+ +

Lihat juga

+ +
+
+
HTML (HyperText Markup Language) on MDN
+
Petunjuk utama masuk untuk HTML dokumentasi di MDN, termasuk elemen rinci dan referensi atribut - jika Anda ingin mengetahui atribut elemen atau nilai apa yang dimiliki atribut, misalnya, ini adalah tempat yang tepat untuk memulai.
+
+
diff --git a/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html b/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..acddef0b53 --- /dev/null +++ b/files/id/learn/html/multimedia_dan_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,362 @@ +--- +title: Adding vector graphics to the Web +slug: Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web +tags: + - Gambar + - Grafik + - Pemula + - Raster + - SVG + - Vektor + - belajar + - iframe + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

Grafik vektor sangat berguna dalam banyak keadaan — mereka memiliki ukuran file kecil dan sangat skalabel, sehingga mereka tidak terlalu besar ketika diperbesar atau meledak hingga ukuran besar. Dalam artikel ini kami akan menunjukkan kepada Anda bagaimana memasukkan satu di halaman web Anda.

+
+ + + + + + + + + + + + +
Prerequisites:Anda harus tahu basics of HTML dan bagaimana caranya insert an image into your document.
Objective:Pelajari cara menyematkan gambar SVG (vektor) ke halaman web.
+ +
+

Note: Artikel ini tidak bermaksud mengajarkan Anda SVG; hanya apa itu, dan bagaimana menambahkannya ke halaman web.

+
+ +

Apa itu grafik vektor?

+ +

Di web, Anda akan bekerja dengan dua jenis gambar — gambar raster, dan gambar vektor:

+ + + +

Untuk memberi Anda gambaran tentang perbedaan antara keduanya, mari kita lihat sebuah contoh. Anda dapat menemukan contoh ini langsung di repo Github kami sebagai vector-versus-raster.html — itu menunjukkan dua gambar yang tampaknya identik berdampingan, dari bintang merah dengan bayangan hitam. Perbedaannya adalah yang kiri adalah PNG, dan yang kanan adalah gambar SVG.

+ +

Perbedaannya menjadi jelas ketika Anda memperbesar halaman - gambar PNG menjadi pixelated saat Anda memperbesar karena berisi informasi di mana masing-masing piksel harus (dan apa warna). Ketika diperbesar, setiap piksel hanya bertambah ukurannya untuk mengisi beberapa piksel pada layar, sehingga gambar mulai tampak ganjil. Namun gambar vektor terus terlihat bagus dan segar, karena berapapun ukurannya, algoritma tersebut digunakan untuk mencari tahu bentuk-bentuk pada gambar, dengan nilai-nilai yang hanya diskalakan karena semakin besar.

+ +

Two star images

+ +

Two star images zoomed in, one crisp and the other blurry

+ +
+

Note: Gambar-gambar di atas sebenarnya semua PNG - dengan bintang kiri di setiap kasus mewakili gambar raster, dan bintang kanan mewakili gambar vektor. Again, go to the vector-versus-raster.html demo for a real example!

+
+ +

Selain itu, file gambar vektor jauh lebih ringan daripada raster mereka, karena mereka hanya perlu memegang beberapa algoritma, daripada informasi tentang setiap pixel dalam gambar secara individual.

+ +

What is SVG?

+ +

SVG is an {{glossary("XML")}}-based bahasa untuk menggambarkan gambar vektor. Ini pada dasarnya markup, seperti HTML, kecuali bahwa Anda memiliki banyak elemen berbeda untuk menentukan bentuk yang ingin Anda tampilkan di gambar Anda, dan efek yang ingin Anda terapkan pada bentuk-bentuk itu. SVG adalah untuk menandai grafik, bukan konten. Di ujung paling sederhana dari spektrum, Anda memiliki elemen untuk membuat bentuk sederhana, seperti {{svgelement("circle")}} dan {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)

+ +

Sebagai contoh sederhana, kode berikut ini membuat lingkaran dan persegi panjang:

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="black" />
+  <circle cx="150" cy="100" r="90" fill="blue" />
+</svg>
+ +

This creates the following output:

+ +

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

+ +

Dari contoh di atas, Anda mungkin mendapat kesan bahwa SVG mudah untuk handcode. Ya, Anda dapat membuat kode tangan SVG sederhana dalam editor teks, tetapi untuk gambar yang kompleks ini dengan cepat mulai menjadi sangat sulit. For creating SVG images, most people use a vector graphics editor like Inkscape or Illustrator. Paket-paket ini memungkinkan Anda untuk membuat berbagai ilustrasi menggunakan berbagai alat grafis, dan membuat perkiraan foto (misalnya fitur Trace Bitmap dari Inkscape.)

+ +

SVG memiliki beberapa keuntungan tambahan selain yang dijelaskan sejauh ini:

+ + + +

Jadi mengapa ada orang yang mau menggunakan grafik raster di atas SVG? Nah, SVG memang memiliki beberapa kelemahan:

+ + + +

Grafik raster bisa dibilang lebih baik untuk gambar presisi kompleks seperti foto, karena alasan yang dijelaskan di atas.

+ +
+

Note: Di Inkscape, simpan file Anda sebagai Plain SVG untuk menghemat ruang. Juga, silakan lihat ini article describing how to prepare SVGs for the Web.

+
+ +

Adding SVG to your pages

+ +

In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.

+ +

The quick way: {{htmlelement("img")}}

+ +

To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

+ +
<img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87"
+    width="100" />
+ +

Pros

+ + + +

Cons

+ + + +

Troubleshooting and cross-browser support

+ +

For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your src attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:

+ +
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+ +

Anda juga dapat menggunakan SVG sebagai gambar latar belakang CSS, seperti yang ditunjukkan di bawah ini. Dalam kode di bawah ini, browser lama akan tetap dengan PNG yang mereka pahami, sementara browser yang lebih baru akan memuat SVG:

+ +
background: url("fallback.png") no-repeat center;
+background-image: url("image.svg");
+background-size: contain;
+ +

Like the <img> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.

+ +

Jika SVG Anda tidak muncul sama sekali, itu mungkin karena server Anda tidak diatur dengan benar. Jika itu masalahnya, ini article will point you in the right direction.

+ +

How to include SVG code inside your HTML

+ +

Anda juga dapat membuka file SVG dalam editor teks, menyalin kode SVG, dan menempelkannya ke dokumen HTML Anda — this is sometimes called putting your SVG inline, or inlining SVG. Pastikan cuplikan kode SVG Anda dimulai dan diakhiri dengan <svg></svg> tags (don't include anything outside those.) Berikut adalah contoh yang sangat sederhana dari apa yang mungkin Anda tempel ke dalam dokumen Anda:

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

Pros

+ + + +

Cons

+ + + + + +

How to embed an SVG with an {{htmlelement("iframe")}}

+ +

Anda dapat membuka gambar SVG di browser Anda seperti halnya halaman web. Jadi menanamkan dokumen SVG dengan <iframe> is done just like we studied in From <object> to <iframe> — other embedding technologies.

+ +

Here's a quick review:

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Triangle with three unequal sides" />
+</iframe>
+ +

Ini jelas bukan metode terbaik untuk memilih:

+ +

Cons

+ + + +

Active Learning: Playing with SVG

+ +

Di bagian pembelajaran aktif ini kami ingin Anda bersenang-senang bermain SVG untuk bersenang-senang. Di bagian Input di bawah ini Anda akan melihat bahwa kami telah menyediakan beberapa sampel untuk Anda mulai. Anda juga dapat pergi ke SVG Element Reference, cari tahu lebih detail tentang mainan lain yang bisa Anda gunakan di SVG, dan coba juga itu. Bagian ini adalah tentang mempraktekkan keterampilan riset Anda, dan bersenang-senang.

+ +

If you get stuck and can't get your code working, you can always reset it using the Reset button.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Summary

+ +

Artikel ini telah memberi Anda tur singkat tentang apa itu vektor grafik dan SVG, mengapa mereka berguna untuk diketahui, dan bagaimana memasukkan SVG ke dalam halaman web Anda. Itu tidak pernah dimaksudkan sebagai panduan lengkap untuk mempelajari SVG, hanya sebuah petunjuk sehingga Anda tahu apa itu SVG jika Anda bertemu dalam perjalanan Anda di Web. Jadi jangan khawatir jika Anda belum merasa sudah ahli SVG. Kami telah menyertakan beberapa tautan di bawah ini yang mungkin membantu Anda jika Anda ingin pergi dan mencari tahu lebih lanjut tentang cara kerjanya.

+ +

Pada artikel terakhir modul ini, kami akan mengeksplorasi gambar responsif secara terperinci, dengan melihat alat-alat HTML yang memungkinkan Anda membuat gambar Anda bekerja lebih baik di berbagai perangkat.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

In this module

+ + diff --git a/files/id/learn/html/multimedia_dan_embedding/index.html b/files/id/learn/html/multimedia_dan_embedding/index.html new file mode 100644 index 0000000000..fe111da30c --- /dev/null +++ b/files/id/learn/html/multimedia_dan_embedding/index.html @@ -0,0 +1,73 @@ +--- +title: Multimedia dan Embedding +slug: Learn/HTML/Multimedia_dan_embedding +tags: + - Asesmen + - Audio + - CodingScripting + - Flash + - HTML + - Image + - Landing + - Multimedia + - Panduan + - Pemula + - Pengembedan + - SVG + - Video + - Web + - belajar + - iframe + - imagemap + - img + - responsif +translation_of: Learn/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the web come alive with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.

+ +

Persyaratan

+ +

Sebelum memulai modul ini, kamu harus punya pengetahuan mendasar tentang HTML dasar, seperti dicover sebelumnya dalam Pengenalan HTML. Kalau kamu belum bekerja melalui modul ini (atau sesuatu yang serupa), kerja dulu di situ, lalu kembali lagi!

+ +
+

Catatan: Kalau kamu bekerja pada komputer/tablet/device lain yang mana kamu tidak bisa membuat filemu sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program coding daring macam JSBin atau Thimble.

+
+ +

Petunjuk

+ +

Module ini berisi artikel berikut yang akan mengantar kamu melalui semua fundamental mengembed multimedia dalam halaman web.

+ +
+
Image dalam HTML
+
Ada tipe multimedia lain yang dipertimbangkan, tapi itu logis jika mulai dengan elemen {{htmlelement("img")}} yang untuk mengembed image sederhana ke dalam halaman web. Di artikel ini kita akan melihat bagaimana menggunakan itu lebih dalam, termasuk dasar, menganotasi itu dengan caption menggunakan {{htmlelement("figure")}}, dan bagaimana itu dikaitkan dengan CSS background images.
+
Konten video dan audio
+
Berikutnya, kita akan melihat bagaimana menggunakan elemen {{htmlelement("video")}} dan {{htmlelement("audio")}} HTML5 untuk mengembed video dan audio dalam halaman kita, termasuk dasar, menyediakan akses ke format file berbeda ke peramban berbeda, menambah caption dan subtitle, dan bagaimana menambah fallback untuk peramban jadul.
+
Dari <object> ke <iframe> — teknologi pengembedan lain
+
Pada poin ini kita akan mengambil langkah menyamping, melihat pasangan elemen yang dipakai untuk mengembed beragam tipe konten ke dalam halaman web: elemen {{htmlelement("iframe")}}, {{htmlelement("embed")}} dan {{htmlelement("object")}}. <iframe> dipakai untuk mengembed halaman web lain, dan 2 lainnya untuk mengembed PDF, SVG, dan bahkan Flash — teknologi yang jarang, tapi masih ada saja.
+
Menambah grafis vektor ke web
+
Grafis vektor bisa berfaedah dalam beberapa situasi. Tidak seperti format reguler macam PNG/JPG, mereka tidak terdistorsi/terpixelasi ketika dizoom-in — tetap mulus ketika discale. Artikel ini memperkenalkan kamu ke grafis vektor dan bagaimana memasukkan format {{glossary("SVG")}} populer ke dalam halaman web.
+
Image responsif
+
Dengan berbagai tipe device yang mampu meramban web — dari ponsel mobile ke komputer desktop — konsep esensial untuk menguasai dunia web modern web world ialah desain responsif. Ini menunjukkan kreasi halaman web yang otomatis menyesuaikan fitur mereka dengan beragam ukuran layar, resolusi, dan lain sebagainya. Ini akan dibahas mendetil dalam modul CSS lebih lanjut, tapi untuk sekarang, kita akan melihat tools yang tersedia bagi HTML untuk membuat responsif image, termasuk elemen {{htmlelement("picture")}}.
+
+ +

Asesmen

+ +

Asesmen berikut akan menguhi pemahamanmu tentang HTML dasar yang dicover dalam panduan di atas:

+ +
+
Halaman splash Mozilla
+
Dalam asesmen ini, kita akan menguji pengetahuanmu tentang beberapa teknik yang didiskusikan dalam artikel modul, membuat kamu menambah beberapa image dan video ke halaman splash funky tentang Mozilla!
+
+ +

Lihat juga

+ +
+
Add a hitmap on top of an image
+
Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.
+
Web literacy basics 2
+
+

An excellent Mozilla foundation course that explores and tests some of the skills talked about in this Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).

+
+
diff --git a/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html b/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html new file mode 100644 index 0000000000..e13790b7f4 --- /dev/null +++ b/files/id/learn/html/multimedia_dan_embedding/responsive_images/index.html @@ -0,0 +1,251 @@ +--- +title: Responsive images +slug: Learn/HTML/Multimedia_dan_embedding/Responsive_images +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")}}
+ +
+

Pada artikel ini, kita akan belajar tentang konsep gambar responsif - gambar yang bekerja dengan baik pada perangkat dengan ukuran layar, resolusi, dan fitur lain yang sangat berbeda - dan melihat alat apa yang disediakan HTML untuk membantu mengimplementasikannya. Ini membantu meningkatkan kinerja di berbagai perangkat yang berbeda. Gambar responsif hanyalah salah satu bagian dari responsive design, topik CSS masa depan yang dapat Anda pelajari.

+
+ + + + + + + + + + + + +
Prerequisites:Anda harus sudah mengetahui basics of HTML dan cara add static images to a web page.
Objective:Learn how to use features like {{htmlattrxref("srcset", "img")}} and the {{htmlelement("picture")}} element to implement responsive image solutions on websites.
+ +

Why responsive images?

+ +

Let's examine a typical scenario. Situs web tipikal mungkin berisi gambar tajuk dan beberapa gambar konten di bawah tajuk. Gambar header kemungkinan akan menjangkau seluruh lebar header, dan gambar konten akan cocok di suatu tempat di dalam kolom konten. Berikut ini contoh sederhana:

+ +

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.

+ +

Ini bekerja dengan baik pada perangkat layar lebar, seperti laptop atau desktop (you can see the example live and find the source code on Github.) Kami tidak akan banyak membahas CSS dalam pelajaran ini, kecuali untuk mengatakan bahwa:

+ + + +

Namun, masalah muncul ketika Anda mulai melihat situs di perangkat layar sempit. Header di bawah ini terlihat baik-baik saja, tetapi mulai mengambil banyak ketinggian layar untuk perangkat seluler. Dan pada ukuran ini, sulit untuk melihat orang-orang di dalam gambar konten pertama.

+ +

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.

+ +

An improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. A second cropped image could be displayed for a medium width screen device, like a tablet. This is commonly known as the art direction problem.

+ +

In addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. And conversely, a small raster image starts to look grainy when displayed larger than its original size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at vector graphics). This is called the resolution switching problem.

+ +

Sebaliknya, tidak perlu untuk menampilkan gambar besar di layar secara signifikan lebih kecil dari ukuran yang dimaksudkan. Melakukannya dapat menghabiskan bandwidth; khususnya, pengguna seluler tidak ingin membuang bandwidth dengan mengunduh gambar besar yang ditujukan untuk desktop, ketika gambar kecil dilakukan untuk perangkat mereka. Idealnya, Anda akan memiliki beberapa resolusi yang tersedia dan melayani ukuran yang sesuai tergantung pada perangkat yang mengakses data di situs web.

+ +

Untuk membuat segalanya lebih rumit, beberapa perangkat memiliki layar resolusi tinggi yang membutuhkan gambar lebih besar dari yang Anda harapkan untuk ditampilkan dengan baik. Ini pada dasarnya adalah masalah yang sama, tetapi dalam konteks yang sedikit berbeda.

+ +

Anda mungkin berpikir bahwa gambar vektor akan menyelesaikan masalah ini, dan mereka melakukannya pada tingkat tertentu - mereka berukuran kecil dalam ukuran dan skalanya dengan baik, dan Anda harus menggunakannya sedapat mungkin. Namun, mereka tidak cocok untuk semua jenis gambar. Gambar vektor sangat bagus untuk grafik, pola, elemen antarmuka, dll. Sederhana, tetapi mulai menjadi sangat kompleks untuk membuat gambar berbasis vektor dengan jenis detail yang akan Anda temukan di katakanlah, foto. Format gambar raster seperti JPEG lebih cocok untuk jenis gambar yang kita lihat dalam contoh di atas.

+ +

This kind of problem didn't exist when the web first existed, in the early to mid 90s — back then the only devices in existence to browse the Web were desktops and laptops, so browser engineers and spec writers didn't even think to implement solutions. Responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction).

+ +
+

Note: The new features discussed in this article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — are all supported in release versions of modern desktop and mobile browsers (including Microsoft's Edge browser, although not Internet Explorer.) 

+
+ +

How do you create responsive images?

+ +

Di bagian ini, kita akan melihat dua masalah yang diilustrasikan di atas dan menunjukkan bagaimana menyelesaikannya menggunakan fitur gambar HTML yang responsif. Anda harus mencatat bahwa kami akan fokus pada HTML {{htmlelement("img")}}s for this section,  seperti yang terlihat di area konten dari contoh di atas - gambar di header situs hanya untuk dekorasi, dan karenanya diimplementasikan menggunakan gambar latar belakang CSS. CSS arguably has better tools for responsive design than HTML, and we'll talk about those in a future CSS module.

+ +

Resolution switching: Different sizes

+ +

So, what is the problem that we want to solve with resolution switching? We want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. The standard {{htmlelement("img")}} element traditionally only lets you point the browser to a single source file:

+ +
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

We can however use two new attributes — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — to provide several additional source images along with hints to help the browser pick the right one. You can see an example of this in our responsive.html example on Github (see also the source code):

+ +
<img srcset="elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 600px) 480px,
+            800px"
+     src="elva-fairy-800w.jpg"
+     alt="Elva dressed as a fairy">
+ +

The srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line. Each value contains a comma-separated list, and each part of those lists is made up of three sub-parts. Let's run through the contents of each now:

+ +

srcset mendefinisikan set gambar yang kami akan memungkinkan browser untuk memilih di antara, dan berapa ukuran masing-masing gambar. Setiap rangkaian informasi gambar dipisahkan dari yang sebelumnya dengan koma. Untuk masing-masing, kami menulis:

+ +
    +
  1. An image filename (elva-fairy-480w.jpg)
    2. +
  2. A space
    3. +
  3. The image's intrinsic width in pixels (480w) — note that this uses the w unit, not px as you might expect. This is the image's real size, which can be found by inspecting the image file on your computer (for example, on a Mac you can select the image in Finder and press Cmd + I to bring up the info screen).
    4. +
+ +

sizes mendefinisikan serangkaian kondisi media (mis. lebar layar) dan menunjukkan ukuran gambar apa yang terbaik untuk dipilih, ketika kondisi media tertentu benar - ini adalah petunjuk yang telah kita bicarakan sebelumnya. Dalam hal ini, sebelum setiap koma kami menulis:

+ +
    +
  1. A media condition ((max-width:600px)) — you'll learn more about these in the CSS topic, but for now let's just say that a media condition describes a possible state that the screen can be in. In this case, we are saying "when the viewport width is 600 pixels or less".
    2. +
  2. A space
    3. +
  3. The width of the slot the image will fill when the media condition is true (480px)
    4. +
+ +
+

Note: For the slot width, you may provide an absolute length (px, em) or a length relative to the viewport (vw), but not percentages. You may have noticed that the last slot width has no media condition (this is the default that is chosen when none of the media conditions are true). The browser ignores everything after the first matching condition, so be careful how you order the media conditions.

+
+ +

So, with these attributes in place, the browser will:

+ +
    +
  1. Look at its device width
    2. +
  2. Work out which media condition in the sizes list is the first one to be true
    3. +
  3. Look at the slot size given to that media query
    4. +
  4. Load the image referenced in the srcset list that most closely matches the chosen slot size
    5. +
+ +

And that's it! At this point, if a supporting browser with a viewport width of 480px loads the page, the (max-width: 600px) media condition will be true, and so the browser chooses the 480px slot. The elva-fairy-480w.jpg will be loaded, as its inherent width (480w) is closest to the slot size. The 800px picture is 128KB on disk, whereas the 480px version is only 63KB — a saving of 65KB. Now, imagine if this was a page that had many pictures on it. Using this technique could save mobile users a lot of bandwidth.

+ +
+

Note: When testing this with a desktop browser, if the browser fails to load the narrower images when you've got its window set to the narowest width, have a look at what the viewport is (you can approximate it by going into the browser's JavaScript console and typing in document.querySelector('html').clientWidth). Different browsers have minimum sizes that they'll let you reduce the window width to, and they might be wider than you'd think. When testing it with a mobile browser, you can use tools like Firefox's about:debugging page to inspect the page loaded on the mobile using the desktop developer tools.
+
+ To see which images were loaded, you can use Firefox DevTools's Network Monitor tab.

+
+ +

Older browsers that don't support these features will just ignore them. Instead, those browsers will go ahead and load the image referenced in the {{htmlattrxref("src", "img")}} attribute as normal.

+ +
+

Note: In the {{htmlelement("head")}} of the example linked above, you'll find the line <meta name="viewport" content="width=device-width">: this forces mobile browsers to adopt their real viewport width for loading web pages (some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or design).

+
+ +

Resolution switching: Same size, different resolutions

+ +

If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using srcset with x-descriptors and without sizes — a somewhat easier syntax! You can find an example of what this looks like in srcset-resolutions.html (see also the source code):

+ +
<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 this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):

+ +
img {
+  width: 320px;
+}
+ +

In this case, sizes is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the srcset. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the elva-fairy-320w.jpg image will be loaded (the 1x is implied, so you don't need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the elva-fairy-640w.jpg image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.

+ +

Art direction

+ +

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. It would probably be better to show a smaller, portrait image on mobile, which zooms in on the person. 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 different sources for the browser to choose from, 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 has shaved an average of 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. For example, you couldn't load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript, and then 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. +
+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find a detailed assessment that tests these skills at the end of the module; see Mozilla splash page.

+ +

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

In this module

+ + +
diff --git a/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html b/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..5563c68fd3 --- /dev/null +++ b/files/id/learn/html/pengenalan_html/document_and_website_structure/index.html @@ -0,0 +1,293 @@ +--- +title: Document and website structure +slug: Learn/HTML/Pengenalan_HTML/Document_and_website_structure +tags: + - HTML + - Halaman + - Panduan + - Pemula + - Script Coding + - Situs + - Tata letak + - blocks + - semantic +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

Selain mendefinisikan setiap bagian halaman Anda (seperti "paragraf" atau "gambar"), {{glossary("HTML")}} juga menawarkan sejumlah elemen tingkat blok yang digunakan untuk menentukan area situs web Anda (seperti "header", "menu navigasi", "kolom konten utama"). Artikel ini membahas cara merencanakan struktur situs web dasar, dan menulis HTML untuk mewakili struktur ini.

+ + + + + + + + + + + + +
Prerequisites:Basic HTML familiarity, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals. How hyperlinks work, as covered in Creating hyperlinks.
Objective:Learn how to structure your document using semantic tags, and how to work out the structure of a simple website.
+ +

Bagian dasar dari suatu dokumen

+ +

Halaman web dapat dan akan terlihat sangat berbeda satu sama lain, tetapi mereka semua cenderung berbagi komponen standar yang sama, kecuali halaman menampilkan video layar penuh atau permainan, adalah bagian dari semacam proyek seni, atau hanya terstruktur dengan buruk:

+ +
+
header (tajuk):
+
Biasanya strip besar di bagian atas dengan tajuk besar, logo, dan mungkin tagline. Ini biasanya tetap sama dari satu halaman web ke yang lain.
+
navigation bar (bilah navigasi):
+
Tautan ke bagian utama situs; biasanya diwakili oleh tombol menu, tautan, atau tab. Seperti tajuk, konten ini biasanya tetap konsisten dari satu halaman web ke halaman web lainnya - memiliki navigasi yang tidak konsisten pada situs web Anda hanya akan menyebabkan pengguna yang bingung dan frustrasi. Banyak perancang web menganggap bilah navigasi sebagai bagian dari tajuk daripada komponen individual, tetapi itu bukan keharusan; pada kenyataannya, beberapa juga berpendapat bahwa memiliki dua terpisah lebih baik untuk aksesibilitas, karena pembaca layar dapat membaca dua fitur lebih baik jika mereka terpisah.
+
main content (konten utama):
+
Area besar di tengah yang berisi sebagian besar konten unik dari halaman web yang diberikan, misalnya, video yang ingin Anda tonton, atau cerita utama yang Anda baca, atau peta yang ingin Anda lihat, atau berita utama, dll. Ini adalah satu bagian dari situs web yang pasti akan bervariasi dari halaman ke halaman!
+
sidebar (bilah samping):
+
Beberapa info tambahan, tautan, kutipan, iklan, dll. Biasanya, ini kontekstual dengan apa yang terkandung dalam konten utama (misalnya pada halaman artikel berita, bilah sisi mungkin berisi bio penulis, atau tautan ke artikel terkait) tetapi ada juga merupakan kasus di mana Anda akan menemukan beberapa elemen berulang seperti sistem navigasi sekunder.
+
footer:
+
Strip di bagian bawah halaman yang umumnya berisi cetakan, pemberitahuan hak cipta, atau info kontak. Ini adalah tempat untuk menaruh informasi umum (seperti header) tetapi biasanya, informasi itu tidak penting atau sekunder untuk situs web itu sendiri. Footer juga terkadang digunakan untuk {{Glossary("SEO")}} tujuan, dengan menyediakan tautan untuk akses cepat ke konten populer.
+
+ +

A "typical website" could be structured something like this:

+ +

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

+ +

HTML for structuring content

+ +

The simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job.

+ +

This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

+ +
+

Note: Colorblind people represent around 4% of the world population or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion).

+
+ +

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job.

+ +

Untuk menerapkan mark up semantik tersebut, HTML menyediakan tag khusus yang dapat Anda gunakan untuk mewakili bagian tersebut, misalnya:

+ + + +

Active learning: exploring the code for our example

+ +

Our example seen above is represented by the following code (you can also find the example in our GitHub repository). Kami ingin Anda melihat contoh di atas, dan kemudian melihat daftar di bawah untuk melihat bagian apa yang membentuk bagian visual apa.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>My page title</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Here is our main header that is used across all the pages of our website -->
+
+    <header>
+      <h1>Header</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
+
+    <!-- Here is our page's main content -->
+    <main>
+
+      <!-- It contains an article -->
+      <article>
+        <h2>Article heading</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>Subsection</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Another subsection</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- the aside content can also be nested within the main content -->
+      <aside>
+        <h2>Related</h2>
+
+        <ul>
+          <li><a href="#">Oh I do like to be beside the seaside</a></li>
+          <li><a href="#">Oh I do like to be beside the sea</a></li>
+          <li><a href="#">Although in the North of England</a></li>
+          <li><a href="#">It never stops raining</a></li>
+          <li><a href="#">Oh well...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- And here is our main footer that is used across all the pages of our website -->
+
+    <footer>
+      <p>©Copyright 2050 by nobody. All rights reversed.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Luangkan waktu untuk melihat kode dan memahaminya - komentar di dalam kode juga akan membantu Anda untuk memahaminya. Kami tidak meminta Anda untuk melakukan banyak hal lain dalam artikel ini, karena kunci untuk memahami tata letak dokumen adalah menulis struktur HTML yang baik, dan kemudian meletakkannya dengan CSS. Kami akan menunggu ini sampai Anda mulai mempelajari tata letak CSS sebagai bagian dari topik CSS.

+ +

HTML layout elements in more detail

+ +

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference. For now, these are the main definitions that you should try to understand:

+ + + +

Non-semantic wrappers

+ +

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some {{glossary("CSS")}} or {{glossary("JavaScript")}}. For cases like these, HTML provides the {{HTMLElement("div")}} and {{HTMLElement("span")}} elements. You should use these preferably with a suitable {{htmlattrxref('class')}} attribute, to provide some kind of label for them so they can be easily targeted.

+ +

{{HTMLElement("span")}} is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

+ +
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
+him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
+play, the lights should be down low]</span>.</p>
+ +

Dalam hal ini, catatan editor seharusnya hanya memberikan arahan ekstra untuk sutradara drama; tidak seharusnya memiliki makna semantik tambahan. Untuk pengguna yang terlihat, CSS mungkin akan digunakan untuk menjauhkan catatan sedikit dari teks utama.

+ +

{{HTMLElement("div")}} is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

+ +
<div class="shopping-cart">
+  <h2>Shopping cart</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Total cost: $237.89</p>
+</div>
+ +

This isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a  <section>, as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.

+ +
+

Warning: Div sangat nyaman digunakan sehingga mudah digunakan terlalu banyak. Karena mereka tidak memiliki nilai semantik, mereka hanya mengacaukan kode HTML Anda. Berhati-hatilah untuk menggunakannya hanya ketika tidak ada solusi semantik yang lebih baik dan cobalah untuk mengurangi penggunaannya seminimal mungkin jika tidak, Anda akan kesulitan memperbarui dan memelihara dokumen Anda.

+
+ +

Line breaks and horizontal rules

+ +

Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:

+ +

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

+ +
+
<p>There once was a man named O'Dell<br>
+Who loved to write HTML<br>
+But his structure was bad, his semantics were sad<br>
+and his markup didn't read very well.</p>
+
+ +

Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace); with <br> elements in the code, the markup renders like this:

+ +

{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}

+ +

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

+ +
+
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
+<hr>
+<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hazily and sighed; "better get back to work then", he mused.</p>
+
+ +

Would render like this:

+ +

{{EmbedLiveSample('horizantal-rule-live-sample', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Planning a simple website

+ +

Setelah Anda merencanakan struktur laman web sederhana, langkah logis berikutnya adalah mencoba mencari tahu konten apa yang ingin Anda tempatkan di seluruh situs web, halaman apa yang Anda butuhkan, dan bagaimana mereka harus diatur dan terhubung satu sama lain untuk pengalaman pengguna terbaik. This is called {{glossary("Information architecture")}}. Dalam situs web besar dan kompleks, banyak perencanaan yang dapat dilakukan dalam proses ini, tetapi untuk situs web sederhana dari beberapa halaman, ini bisa sangat sederhana, dan menyenangkan!

+ +
    +
  1. Ingatlah bahwa Anda akan memiliki beberapa elemen yang umum untuk sebagian besar (jika tidak semua) halaman - seperti menu navigasi, dan konten footer. Jika situs Anda untuk bisnis, misalnya, sebaiknya informasi kontak Anda tersedia di catatan kaki di setiap halaman. Catat kesamaan yang ingin Anda miliki untuk setiap halaman.the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. +
  2. Selanjutnya, buatlah sketsa kasar tentang bagaimana Anda ingin struktur setiap halaman terlihat (mungkin terlihat seperti situs web sederhana kami di atas). Catat apa yang akan menjadi setiap blok.A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. +
  3. Sekarang, tukar pikiran semua konten lain (tidak umum untuk setiap halaman) yang ingin Anda miliki di situs web Anda - tulis daftar besar.A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. +
  4. Selanjutnya, cobalah untuk mengurutkan semua item konten ini menjadi grup, untuk memberi Anda gambaran tentang bagian apa yang bisa hidup bersama di halaman yang berbeda. Ini sangat mirip dengan teknik yang disebut {{glossary("Card sorting")}}.The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. +
  5. Sekarang cobalah untuk membuat sketsa peta situs kasar - miliki gelembung untuk setiap halaman di situs Anda, dan gambarlah garis untuk menunjukkan alur kerja khas antar halaman. Beranda mungkin ada di tengah, dan tautan ke sebagian besar jika tidak semua yang lain; sebagian besar halaman di situs kecil harus tersedia dari navigasi utama, meskipun ada pengecualian. Anda mungkin juga ingin memasukkan catatan tentang bagaimana hal-hal disajikan.A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. +
+ +

Active learning: create your own sitemap

+ +

Coba lakukan latihan di atas untuk situs web ciptaan Anda sendiri. Anda ingin membuat situs tentang apa?

+ +
+

Note: Simpan pekerjaan Anda di suatu tempat; Anda mungkin membutuhkannya nanti.

+
+ +

Test your skills!

+ +

Anda telah mencapai akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? Anda dapat menemukan penilaian terperinci yang menguji keterampilan ini di akhir modul; see Structuring a page of content. Kami menyarankan untuk membaca artikel berikutnya dalam seri ini terlebih dahulu dan tidak hanya melewatkannya saja!

+ +

Ringkasan

+ +

Pada titik ini, Anda harus memiliki ide yang lebih baik tentang bagaimana membuat struktur halaman web / situs. Pada artikel terakhir modul ini, kita akan mempelajari cara men-debug HTML.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html b/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..bbee58cc80 --- /dev/null +++ b/files/id/learn/html/pengenalan_html/html_text_fundamentals/index.html @@ -0,0 +1,1047 @@ +--- +title: Teks mendasar HTML +slug: Learn/HTML/Pengenalan_HTML/HTML_text_fundamentals +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

Salah satu tugas utama HTML adalah memberikan struktur dan makna teks (dikenal juga sebagai {{glossary("semantics")}}) dengan begitu peramban dapat menampilkannya dengan benar. Artikel ini menjelaskan cara {{glossary("HTML")}} digunakan untuk membuat struktur halaman teks dengan menambahkan judul dan paragraf, menekankan kata-kata, membuat daftar, dan lainnya.

+ + + + + + + + + + + + +
Prasyarat:Familiar dengan dasar-dasar HTML, dicakup dalam Getting started with HTML.
Hal yang dipelajari:Mempelajari cara menandai halaman dasar teks untuk memberikan struktur dan tujuan — termasuk paragraf, judul, daftar, penekanan, dan kutipan.
+ +

Dasar-dasarnya: Judul dan paragaf

+ +

Sebaguan besar struktur teks terdiri dari judul dan paragraf, st structured text consists of headings and paragraphs, ntah Anda membaca sebuah kisah, koran, buku pelajaran, majalah, dsb.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Konten yang terstruktur membuat pengalaman membaca lebih mudah dan lebih menyenangkan.

+ +

Dalam HTML, setiap paragraf dirangkap element {{htmlelement("p")}}, seperti berikut.

+ +
<p>I am a paragraph, oh yes I am.</p>
+ +

Setiap judul juga dirangkap dalam sebuah element "heading":

+ +
<h1>I am the title of the story.</h1>
+ +

Terdaoat beberapa element heading (judul) — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, dan {{htmlelement("h6")}}. Setiap element mewakili level konten yang berbeda dalam dokumennnya; <h1> mewakili judul utama, <h2> mewakili sub judul, <h3> mewakili sub-sub judul, dan seterusnya.

+ +

Menerapkan susunan struktural

+ +

Untuk contohnya, dalam sebuah kisah, <h1> mewakili judul kisahnya, <h2> mewakili judul setiap babnya dan <h3> mewakili sub-bagian setiap babnya, dan seterusnya.

+ +
<h1>The Crushing Bore</h1>
+
+<p>By Chris Mills</p>
+
+<h2>Chapter 1: The dark night</h2>
+
+<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
+
+<h2>Chapter 2: The eternal silence</h2>
+
+<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
+
+<h3>The specter speaks</h3>
+
+<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
+ +

Sebenarnya terserah Anda element yang digunakan, selama susunannya masuk akal. Anda perlu mengingat beberapa prakter terbaik saat Anda membuat struktur seperti:

+ + + +

Why do we need structure?

+ +

To answer this question, let's take a look at text-start.html — the starting point of our running example for this article (a nice hummus recipe). You should save a copy of this file on your local machine, as you'll need it for the exercises later on. This document's body currently contains multiple pieces of content — they aren't marked up in any way, but they are separated with linebreaks (Enter/Return pressed to go onto the next line).

+ +

However, when you open the document in your browser, you'll see that the text appears as a big chunk!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

This is because there are no elements to give the content structure, so the browser does not know what is a heading and what is a paragraph. Furthermore:

+ + + +

We therefore need to give our content structural markup.

+ +

Active learning: Giving our content structure

+ +

Let's jump straight in with a live example. In the example below, add elements to the raw text in the Input field so that it appears as a heading and two paragraphs in the Output field.

+ +

If you make a mistake, you can always reset it using the Reset button. If you get stuck, press the Show solution button to see the answer.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Why do we need semantics?

+ +

Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (Do any countries use red to mean "go"? I hope not.)

+ +

In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

+ +
<h1>This is a top level heading</h1>
+ +

By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above).

+ +

On the other hand, you could make any element look like a top level heading. Consider the following:

+ +
<span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span>
+ +

This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (you'll find out more about these later on in the course). We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.

+ +

Lists

+ +

Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.

+ +

Unordered

+ +

Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.

+ +
milk
+eggs
+bread
+hummus
+ +

Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:

+ +
<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+ +

Active learning: Marking up an unordered list

+ +

Try editing the live sample below to create your very own HTML unordered list.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Ordered

+ +

Ordered lists are lists in which the order of the items does matter — let's take a set of directions as an example:

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

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <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 style="text-decoration-line: underline; text-decoration-style: wavy;">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/id/learn/html/pengenalan_html/index.html b/files/id/learn/html/pengenalan_html/index.html new file mode 100644 index 0000000000..367ef45712 --- /dev/null +++ b/files/id/learn/html/pengenalan_html/index.html @@ -0,0 +1,64 @@ +--- +title: Pengenalan HTML +slug: Learn/HTML/Pengenalan_HTML +tags: + - CodingScripting + - HTML + - Link + - Pengenalan HTML + - Struktur + - Teks + - head + - semantic +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

Pada intinya, {{glossary("HTML")}} adalah bahasa yang cukup sederhana yang tersusun dari elemen, yang bisa diaplikasikan pada teks untuk menambah perbedaan maksud dalam dokumen (Apakah paragraf? Apakah daftar dengan butir? Apakah bagian dari sebuah tabel?), membentuk struktur dokumen menjadi satu bagian logikal (Apakah memiliki header? Apakah berbentuk tiga kolom? Apakah sebuah menu navigasi?), dan menempatkan konten seperti gambar dan video pada satu halaman. Modul ini akan memperkenalkan dua hal dulu, dan memperkenalkan konsep fundamental dan sintaks yang harus kamu ketahui untuk memahami HTML.

+ +

Prasyarat

+ +

Sebelum memulai modul ini, kamu tidak harus memiliki pengetahuan mengenai HTML, tapi kamu setidaknya harus sudah terbiasa menggunakan komputer dan menggunakan web secara pasif (misalnya, hanya membuka-buka dan menikmati kontennya). Kamu harus memiliki perlengkapan dasar (seperti dijelaskan dalam Menginstal perangkat lunak dasar), dan memahami cara membuat dan mengelola file (seperti dijelaskan dalam Berurusan dengan file). Keduanya adalah bagian dari modul untuk pemula yang berjudul Mengenal apa itu web.

+ +
+

Catatan: Jika kamu menggunakan komputer/tablet/alat lain yang tidak bisa membuat file sendiri, kamu bisa mencoba (banyak) contoh kode di aplikasi pemrograman daring seperti JSBin atau Thimble.

+
+ +

Panduan

+ +

Modul ini berisi artikel-artikel berikut, yang akan mengajarkan kamu mengenai semua teori dasar HTML dan memberimu kesempatan untuk menguji beberapa keterampilan.

+ +
+
Mulai bekerja dengan HTML
+
Mengkover dasar-dasar HTML, untuk memulai — kita mendefinisikan elemen, atribut, dan istilah penting lainnya, dan menunjukkan di mana posisi mereka dalam HTML. Kita juga tunjukkan bagaimana tipikal halaman HTML terstruktur dan bagaimana elemen HTML tersetruktur, dan menjelaskan fitur dasar penting lainnya. Selain itu, kita akan bermain dengan beberapa HTML supaya kamu tertarik!
+
Apa yang ada di head? Metadata dalam HTML
+
Head dokumen HTML merupakan bagian yang tidak tampil dalam peramban web ketika halaman dimuat. Dia mengandung informasi seperti halaman {{htmlelement("title")}}, link ke {{glossary("CSS")}} (jika kamu ingin memberi gaya konten HTML mu dengan CSS), link ke kustom favicons, dan metadata (data tentang HTML, misalnya siapa yang menulis, dan kata kunci penting yang menjelaskan dokumen tersebut).
+
Fundamental teks HTML
+
Salah satu dari tugas utama HTML ialah memberi teks arti (juga disebut semantic), sehingga peramban tahu cara yang benar untuk menampilkannya. Artikel ini melihat bagaimana menggunakan HTML untuk memecah blok teks menjadi satu struktur headings dan paragraf, tambah penekanan/kepentingan ke dalam kata-kata, membuat list, dan banyak lagi.
+
Membuat hyperlinks
+
Hyperlinks sangat penting — merekalah yang membuat web menjadi web. Artikel ini menunjukkan syntaks yang dibutuhkan untuk membuat link, dan mendiskusikan praktek terbaik untuk link.
+
Pemformatan teks maju
+
Banyak elemen lain dalam HTML untuk pemformatan teks yang tidak kita dapatkan dalam artikel fundamental teks HTML. Elemen ini kurang dikenal, tapi masih berfaedah untuk diketahui. Dalam artikel ini kamu akan belajar tentang menandai quotasi, deskripsi list, kode komputer dan text terkait lain, subscript dan superscript, informasi kontak, dan banyak lagi.
+
Struktur dokumen dan website
+
Selain mendefinisi bagian individu halaman kamu (seperti sebuah "paragraf" atau "gambar"), HTML juga digunakan untuk mendefinisi area website kamu (seperti header," "menu navigasi," atau "kolom konten utama.") Artikel ini melihat ke dalam bagaimana merencanakan struktur web dasar dan bagaimana menulis HTML untuk mewakili struktur ini.
+
Mendebug HTML
+
Menulis HTML itu bagus, tapi kalau sesuatu buruk terjadi, dan kamu tidak bisa mengatasinya? Artikel ini akan memperkenalkan kamu pada beberapa tools yang berfaedah untuk itu.
+
+ +

Latihan

+ +

Latihan-latihan berikut akan menguji pemahaman kamu mengenai HTML dasar yang ada pada panduan-panduan di atas.

+ +
+
Menandai huruf
+
Kita semua belajar menulis huruf cepat atau lambat; itu juga contoh berfaedah untuk menguji keahlian memformat. Dalam asesmen ini, kamu akan diberi huruf untuk ditandai.
+
Menandai halaman konten
+
Asesmen ini menguji kemampuanmu menggunakan HTML untuk menstrukturisasi halaman konten sederhana, yang berisi header, footer, menu navigasi, konten utama, dan sidebar.
+
+ +

Lihat juga

+ +
+
Dasar literasi web 1
+
Kursus Mozilla foundation terbaik yang menjelajahi dan menguji banyak kemampuan dalam modul Pengenalan HTML. Pelajar akan akrab dengan bacaan, tulisan, dan berpartisipasi dalam web di modul 6-bagian ini. Cari tahu fondasi web melalui produksi dan kolaborasi.
+
diff --git a/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html b/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..2535589f38 --- /dev/null +++ b/files/id/learn/html/pengenalan_html/structuring_a_page_of_content/index.html @@ -0,0 +1,116 @@ +--- +title: Structuring a page of content +slug: Learn/HTML/Pengenalan_HTML/Structuring_a_page_of_content +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.

+ + + + + + + + + + + + +
Prerequisites:Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on Document and website structure.
Objective:To test knowledge of web page structures, and how to represent a prospective layout design in markup.
+ +

Starting point

+ +

To get this assessment started, you should go and grab the zip file containing all the starting assets.

+ +


+ The zip file contains:

+ + + +

Create the example on your local computer, or alternatively use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.

+ +
+

Note: If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

+
+ +

Project brief

+ +

Untuk proyek ini, tugas Anda adalah mengambil konten untuk beranda situs web pengamatan burung dan menambahkan elemen struktural ke dalamnya sehingga dapat memiliki tata letak halaman yang diterapkan padanya. Perlu memiliki:

+ + + +

You need to add a suitable wrapper for (Anda perlu menambahkan pembungkus yang cocok untuk:):

+ + + +

You should also:

+ + + +

Hints and tips

+ + + +

Example

+ +

The following screenshot shows an example of what the homepage might look like after being marked up.

+ +

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

+ +

Assessment or further help

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for Structuring a page of content".
      • +
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • +
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • +
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • +
    +
    3. +
+ +

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/id/learn/html/tabel/index.html b/files/id/learn/html/tabel/index.html new file mode 100644 index 0000000000..b8fe3a2d8a --- /dev/null +++ b/files/id/learn/html/tabel/index.html @@ -0,0 +1,36 @@ +--- +title: HTML Tables +slug: Learn/HTML/Tabel +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

Salah satu tugas umum di HTML adalah menyusun data secara tabular dan untuk tujuan tersebut maka disediakan sejumlah elemen dan atribut. HTML yang ditambah sedikit CSS untuk styling akan memudahkan untuk menampilkan tabel informasi pada website seperti jadwal pelajaran, jadwal kolam renang atau statistik tentang dinosaurus atau tim sepakbola favoritmu. Modul ini akan memberi apa yang anda ingin ketahui tentang menyusun data tabular dengan HTML.

+ +

+ +

Prasayarat

+ +

Sebelum memulai modul ini, anda harus sudah menguasai dasar HTML — Lihat Introduction to HTML.

+ +
+

Catatan: Jika anda berkerja di komputer/tablet/atau perangkat lain yang tidak memiliki kemampuan untuk membuat file sendiri, anda dapat mencoba (sebagian besar) contoh kode pada program coding online seperti JSBin atau Glitch.

+
+ +

Panduan

+ +

Modul ini berisi artikel berikut :

+ +
+
HTML table basics
+
Artikel ini membawa anda mengawali pembahasan tabel HTML, mencakup dasar mengenai baris dan sel, heading, membuat sel span untuk kolom dan baris berganda, dan bagaimana untuk mengelompokan semua sel di dalam sebuah kolom untuk tujuan styling.
+
HTML table advanced features and accessibility
+
Modul ini mengulas beberapa fitur lanjutan tabel HTML — seperti caption/rangkuman dan mengelompokan baris dalam bagian judul tabel, bodi atau footer — dan juga melihat aksesibilitas tabel untuk melihat kesalahan pengguna
+
+ +

Penilaian

+ +
+
Structuring planet data
+
pada penilaian tabel, kami menyediakan anda data planet dalam tata surya kita, dan membantu menyusunnya dalam tabel HTML.
+
diff --git a/files/id/learn/index.html b/files/id/learn/index.html new file mode 100644 index 0000000000..3e9329375a --- /dev/null +++ b/files/id/learn/index.html @@ -0,0 +1,97 @@ +--- +title: Belajar Pengembangan Web +slug: Learn +tags: + - Index + - Landing + - Pemula + - Web +translation_of: Learn +--- +
+

V-neckline necklines are ideal for the following body types:

+ +

Because it gives a vertical impression to the outfit worn, the V-neckline can give the illusion of a slimmer, more elongated, and taller silhouette. Adapted to all body types, the V-neck can, depending on the depth chosen, create a balanced look.

+ +

A V-neckline is particularly recommended for silhouettes with broad shoulders and for people who have a large bust or a very short neck. While, overall, depending on the shape of the neckline, moreover, you're petite, skinny or voluptuous, the V-neck flatters and suits all body types.

+ +

If you want to buy some stylish and fashionable dresses you can visit bonanza satrangi online store and find the latest gorgeous and stylish dresses with good quality.

+ +

What is a square neckline?

+ +

The square collar is a neckline whose shape, on the front, evokes that of a square or a rectangle. This neckline falls straight and visually cuts the bust. This is a perfect style for women with large breasts as well as those with small breasts. However, it is not recommended for women with a square face as it will make it look too masculine.

+ +

Square necklines are ideal for the following body types:

+ +

Pyramid morphology

+ +

If you are a woman with a small neck and narrow shoulders, this type of neckline will help you lengthen your neck. In addition, if you have a round face or a pyramid-shaped body, a square neckline will help you rebalance the lines of your face as well as those of your figure. Finally, the square neckline is ideal for women with large breasts because it offers a sophisticated structure to the neckline without revealing too much.

+ +

Latest bonanza satrangi sale 2020 offers new designs and best quality dresses for men and women.

+ + + +

What is a dancer's neckline?

+ +

The dancer neckline is a very indented rounded neckline which owes its name to the leotard worn by the dancers. 

+ +

Black dress with dancer collar, fitted and sleeveless

+ +

Dancing necklines are ideal for the following body types:

+ +

Hourglass morphology

+ +

Pyramid morphology

+ +

This simple cut neckline is very flattering and fits almost any figure. Very high cut, this wide and deep neckline lengthens the neck and highlights the collarbones. Whether you are petite or tall, this neckline will suit you. The dancer collar works particularly well on people with narrow shoulders. Indeed, this neckline balances the defects as well as the proportions.

+ +

Nishatlinen provides the latest summer lawn and cotton dresses with unique designs. If you want to buy these stylish and stunning dresses you can visit nishat linen online store.

+ +

Accompany your tops with a dancer collar or your dresses with this neckline of a collar that follows its flared shape. Lightweight, layered necklaces or earrings will not compete with your cleavage and may even create a perfect lengthening effect if you are petite.

+ +

What is a halter or halter neckline?

+ +

The halter neckline or halter neckline consists of two triangular points of fabric, of variable width according to the desired effect. These cutouts run down the chest to the back of the neck. Sometimes the halter neckline is made from a single piece of fabric that is tied or tied with a drawstring or tie at the nape of the neck. 

+ + + +

Avoid this neckline if:

+ +

You have a downward shoulder line

+ +

Broad or square shoulders

+ +

If you have beefy arms, broad shoulders, or a voluminous chest, avoid wearing a dress or halter top. Indeed, this neckline will tend to make you appear wider than you are.

+ +

How to wear the halter neckline or the halter neck?

+ +

No collar is needed with this particular neckline. Opt for a pair of trendy earrings or, more simply, let this spectacular neckline speak for itself.

+ +

What is a sweetheart neckline or sweetheart neckline?

+ +

This neckline has a neckline whose shape, on the front, evokes the graphics of the upper part of a heart. This very feminine neckline is mainly associated with strapless dresses, with off the shoulders. However, a few clothes with long sleeves and thin straps may also feature a heart-shaped neckline. This neckline shape is mostly found on wedding dresses and evening gowns but is increasingly found on casual clothes like tank tops or feminine tops.

+ +

The sweetheart neckline adapts very easily to all body types and to all sizes. It is suitable for small breasts as well as medium or larger breasts. Small women, with small breasts and narrow shoulders will opt for this sweetheart neckline to appear more voluptuous. Finally, the vertical hollow of this neckline visually lengthens the face and balances the proportions of the silhouette of the wearer.

+ +

Which keyhole neckline is best?

+ +

The “keyhole” neckline is very close to the halter neckline (or halter) except that the converging diagonal lines meet at the beginning of the neck to form a small slit similar to the shape of a keyhole. This very versatile neckline can have several shapes: it can be in the form of a discreet slot on a top or a dress or adopt a more or less important oval or round shape, closed by a seam, a tie to tie or a fastening system (button, clip, etc.).

+ +

Correctly positioned, this opening can give the impression of wearing a jewel and, depending on the height or it is located, this opening can reveal more or less the neckline.

+ +

Short black dress, with a keyhole neckline.

+ +

Keyhole necklines are ideal for the following body types:

+ +

Keyhole necklines can be tailored to fit most figures and women of all ages. The effect depends on the height at which the opening is located. If you have a petite bust, this neckline can magnify your cleavage and provide an illusion of volume.

+ +

Avoid this neckline if:

+ +

You have a round body shape and a voluminous chest. Indeed, located on a voluminous chest, this low-cut keyhole neckline could harm your elegance by revealing your chest a little too much.

+ +

In conclusion:

+ +

There are many other forms of necklines and necklines and this list cannot be exhaustive, however, we have no doubt that this guide will guide you on the forms adapted to your face and your body type. Now you should be able to find the perfect top or the perfect dress to flatter your figure as well as your facial features. 

+ + +
diff --git a/files/id/learn/javascript/building_blocks/index.html b/files/id/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..14142a20ba --- /dev/null +++ b/files/id/learn/javascript/building_blocks/index.html @@ -0,0 +1,42 @@ +--- +title: JavaScript building blocks +slug: Learn/JavaScript/Building_blocks +translation_of: Learn/JavaScript/Building_blocks +--- +
{{LearnSidebar}}
+ +

Pada modul ini, kita lanjutkan cakupan semua fitur dasar JavaScript, arahkan perhatian kita pada jenis blok kode yang biasa ditemukan seperti pernyataan kondisional, perulangan, fungsi, dan events. Anda pernah melihat dasar ini sudah ada di kursus, tapi hanya sebentar - di sini kami akan membahas semuanya secara jelas.

+ +

Persyaratan

+ +

Sebelum memulai modul ini, Anda harus memiliki beberapa pemahaman mengenai dasar-dasar dari HTML dan CSS, dan Anda juga harus sudah mengerjakan modul kami sebelumnya , Memulai JavaScript.

+ +
+

Catatan: Jika Anda bekerja di komputer / tablet / perangkat lain dimana Anda tidak memiliki kemampuan untuk membuat file sendiri, Anda bisa mencoba (sebagian besar) contoh kode dalam program pengkodean online seperti JSBin atau Thimble.

+
+ +

Panduan

+ +
+
Membuat keputusan di kode Anda — kondisional
+
Dalam bahasa pemrograman apapun, kode perlu untuk membuat keputusan dan melakukan tindakan yang sesuai pada masukan yang berbeda. Misalnya dalam permainan, jika jumlah nyawa pemain adalah 0, maka permainannya berakhir. Dalam aplikasi cuaca, jika yang dilihat adalah pagi hari maka akan tampil grafik matahari terbit dan jika sudah malam hari maka akan menunjukkan bintang dan bulan. Pada artikel ini kita akan membahas bagaimana struktur kondisional bekerja dalam JavaScript.
+
Kode perulangan (looping)
+
Terkadang Anda membutuhkan tugas yang dilakukan lebih dari sekali dan berulang-ulang. Misalnya melihat daftar banyak nama. Dalam pemrograman, loop melakukan pekerjaan ini dengan sangat baik. Di sini kita akan melihat struktur perulangan di JavaScript.
+
Fungsi — blok kode yang bisa digunakan kembali
+
Konsep penting lainnya dalam berkode adalah fungsi. Fungsi memungkinkan Anda untuk menyimpan bagian kode yang melakukan satu tugas di dalam blok yang ditetapkan, dan kemudian memanggil kode itu kapan pun Anda memerlukannya kemudian menggunakan satu perintah pendek untuk memanggilnya daripada harus mengetikkan kode yang sama beberapa kali. Pada artikel ini kita akan mengeksplorasi konsep dasar di balik fungsi seperti sintaks dasar, bagaimana cara memanggil dan mendefinisikan fungsi, ruang lingkup, dan parameternya.
+
Membangun fungsi sendiri
+
Dengan sebagian besar teori esensial yang telah dibahas dalam artikel sebelumnya, artikel ini akan memberikan pengalaman praktik. Di sini Anda akan mendapatkan beberapa latihan dengan membangun fungsi Anda sendiri. Ikutilah jalannya, kami juga akan menjelaskan beberapa rincian lebih lanjut mengenai fungsi.
+
Fungsi mengembalikan suatu nilai
+
Ada satu konsep penting yang bisa kita diskusikan dalam kursus ini, untuk menutup fungsi kita bisa mengembalikan suatu nilai. Beberapa fungsi tidak mengembalikan nilai yang signifikan setelah selesai, tapi ada juga yang melakukannya. Penting untuk memahami apa nilai mereka, bagaimana memanfaatkannya dalam kode Anda, dan bagaimana membuat fungsi Anda sendiri mengembalikan nilai yang berguna.
+
Perkenalan events
+
Events adalah tindakan atau kejadian yang terjadi di sistem yang Anda gunakan dalam pemrograman, dimana sistem memberi tahu Anda sehingga Anda dapat meresponsnya dengan cara apa pun jika diinginkan. Misalnya jika pengguna mengeklik tombol pada laman web, Anda mungkin ingin menanggapi tindakan tersebut dengan menampilkan kotak informasi. Pada artikel akhir ini kita akan membahas beberapa konsep penting seputar events, dan melihat bagaimana mereka bekerja di browser.
+
+ +

Penilaian

+ +

Penilaian berikut akan menguji pemahaman Anda tentang dasar-dasar JavaScript yang tercakup dalam panduan di atas.

+ +
+
Galeri Gambar
+
Sekarang setelah melihat fundamental dari bangunan blok di JavaScript, kami akan menguji pengetahuan Anda tentang loop, fungsi, kondisional dan events dengan membangun barang yang cukup umum yang akan Anda lihat di banyak situs web yaitu galeri gambar yang dibuat dengan JavaScript.
+
diff --git a/files/id/learn/javascript/client-side_web_apis/index.html b/files/id/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..171c0647b7 --- /dev/null +++ b/files/id/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,50 @@ +--- +title: Client-side web APIs +slug: Learn/JavaScript/Client-side_web_APIs +tags: + - API + - Artikel + - CodingScripting + - DOM + - JavaScript + - Landing + - Latihan + - Media + - Module + - Pemula + - WebAPI + - data +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +
{{LearnSidebar}}
+ +

Ketika menulis JavaScript client-side untuk website atau aplikasi, anda tidak akan berkembang jauh sebelum memulai cara menggunakan API — yaitu sekumpulan interface untuk memanifulasi berbagai aspect pada browser dan operating sistem dimana situs dijalankan, atau cara mengolah data dari website atau service yang lain. Didalam modul kali ini, kita akan menjelajahi apa itu API dan bagaimana cara menggunakan beberapa API yang sangat umum yang mungkin anda akan temukan dalam pekerjaan Development anda.

+ +

Prasyarat

+ +

Untuk mendapatkan hasil maksimal dalam modul ini, diharuskan bagi anda menyelesaikan tahapan modul JavaScript pada seri-seri (First steps, Building blocks, dan JavaScript objects). Keseluruhan modul tersebut cukup banyak melibatkan cara-cara penggunaan API yang sederhana, dikarenakan akan sulit untuk menulis contoh-contoh JavaScript client-side yang sangat berguna tanpa mereka! Disini kita meningkat pada satu level, dengan mengharapkan pengetahunan lebih mendalam tentang core pemrograman JavaScript dan mengeksplorasi banyak contoh Web API yang umum.

+ +

Pengetahuan dasar mengenai HTML dan CSS juga akan sangat berguna.

+ +
+

Catatan: Jika anda sedang bekerja dengan  perangkat dimana anda tidak mendapatkan kemampuan untuk membuat file -file anda sendiri, anda dapat mencoba (hampir semua) contoh code pada sebuah program pemrograman online semisal JSBin atau Thimble.

+
+ +

Panduan

+ +
+
Pengenalan tentang Web API
+
Sebagai permulaan, kita akan memulai melihat mengenai API dari sebuah level yang tinggi — tentang apa itu API, bagaimana cara API bekerja, bagaimana cara menggunakannya pada program kita, dan bagaimana mereka dibentuk secara terstruktur? Kita juga akan melihat apa perbedaan utama antara Class-class API dan jenis penggunaan sepert apa yang mereka miliki.
+
Cara memanipulasi dokumen
+
Ketika sedang menulis website dan aplikasi, satu hal yang sangat penting yang anda ingin lakukan adalah menemukan berbagai cara untuk memanipulasi dokumen-dokumen web. Hal ini biasanya dilakukan menggunakan Document Object Model (DOM), sekumpulan API untuk mengontrol HTML dan memperindah tampilan informasi yang menekankan penggunaan objek {{domxref("Document")}}.  Pada artikel ini, kita akan melihat bagaimana cara menggunakan DOM secara detail, we'll look at how to use the DOM in detail, bersamaan dengan berbagai API menarik lainnya yang dapat mengubah ruang lingkup anda dengan cara-cara yang menarik.
+
Cara mengambil data dari server
+
Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entirely new page. This seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept, and look at technologies that make it possible, such as {{domxref("XMLHttpRequest")}} and the Fetch API.
+
Third party APIs
+
The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter.
+
Drawing graphics
+
The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (SVG) language, to APIs for drawing on HTML {{htmlelement("canvas")}} elements, (see The Canvas API and WebGL). Ths article provides an introduction to the Canvas API, and further resources to allow you to learn more.
+
Video and audio APIs
+
HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.
+
Client-side storage
+
Modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. This article explains the very basics of how these work.
+
diff --git a/files/id/learn/javascript/client-side_web_apis/introduction/index.html b/files/id/learn/javascript/client-side_web_apis/introduction/index.html new file mode 100644 index 0000000000..20cd0d7214 --- /dev/null +++ b/files/id/learn/javascript/client-side_web_apis/introduction/index.html @@ -0,0 +1,278 @@ +--- +title: Introduction to web APIs +slug: Learn/JavaScript/Client-side_web_APIs/Introduction +translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

First up, we'll start by looking at APIs from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? We'll also take a look at what the different main classes of APIs are, and what kind of uses they have.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, JavaScript basics (see first steps, building blocks, JavaScript objects).
Objective:To gain familiarity with APIs, what they can do, and how you can use them in your code.
+ +

What are APIs?

+ +

Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place.

+ +

As a real-world example, think about the electricity supply in your house, apartment, or other dwellings. If you want to use an appliance in your house, you simply plug it into a plug socket and it works. You don't try to wire it directly into the power supply — to do so would be really inefficient and, if you are not an electrician, difficult and dangerous to attempt.

+ +

+ +

Image source: Overloaded plug socket by The Clear Communication People, on Flickr.

+ +

In the same way, if you want to say, program some 3D graphics, it is a lot easier to do it using an API written in a higher level language such as JavaScript or Python, rather than try to directly write low level code (say C or C++) that directly controls the computer's GPU or other graphics functions.

+ +
+

Note: See also the API glossary entry for further description.

+
+ +

APIs in client-side JavaScript

+ +

Client-side JavaScript, in particular, has many APIs available to it — these are not part of the JavaScript language itself, rather they are built on top of the core JavaScript language, providing you with extra superpowers to use in your JavaScript code. They generally fall into two categories:

+ + + +

 

+ +

 

+ +

+ +

 

+ +

Relationship between JavaScript, APIs, and other JavaScript tools

+ +

So above, we talked about what client-side JavaScript APIs are, and how they relate to the JavaScript language. Let's recap this to make it clearer, and also mention where other JavaScript tools fit in:

+ + + +

What can APIs do?

+ +

There are a huge number of APIs available in modern browsers that allow you to do a wide variety of things in your code. You can see this by taking a look at the MDN APIs index page.

+ +

Common browser APIs

+ +

In particular, the most common categories of browser APIs you'll use (and which we'll cover in this module in greater detail) are:

+ + + +

Common third-party APIs

+ +

Third party APIs come in a large variety; some of the more popular ones that you are likely to make use of sooner or later are:

+ + + +
+

Note: You can find information on a lot more 3rd party APIs at the Programmable Web API directory.

+
+ +

How do APIs work?

+ +

Different JavaScript APIs work in slightly different ways, but generally, they have common features and similar themes to how they work.

+ +

They are based on objects

+ +

APIs are interacted with in your code using one or more JavaScript objects, which serve as containers for the data the API uses (contained in object properties), and the functionality the API makes available (contained in object methods).

+ +
+

Note: If you are not already familiar with how objects work, you should go back and work through our JavaScript objects module before continuing.

+
+ +

Let's return to the example of the Geolocation API — this is a very simple API that consists of a few simple objects:

+ + + +

So how do these objects interact? If you look at our maps-example.html example (see it live also), you'll see the following code:

+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+  var myOptions = {
+    zoom: 8,
+    center: latlng,
+    mapTypeId: google.maps.MapTypeId.TERRAIN,
+    disableDefaultUI: true
+  }
+  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+});
+ +
+

Note: When you first load up the above example, you should be given a dialog box asking if you are happy to share your location with this application (see the {{anch("They have additional security mechanisms where appropriate")}} section later in the article). You need to agree to this to be able to plot your location on the map. If you still can't see the map, you may need to set your permissions manually; you can do this in various ways depending on what browser you are using; for example in Firefox go to > Tools > Page Info > Permissions, then change the setting for Share Location; in Chrome go to Settings > Privacy > Show advanced settings > Content settings then change the settings for Location.

+
+ +

We first want to use the {{domxref("Geolocation.getCurrentPosition()")}} method to return the current location of our device. The browser's {{domxref("Geolocation")}} object is accessed by calling the {{domxref("Navigator.geolocation")}} property, so we start off by using

+ +
navigator.geolocation.getCurrentPosition(function(position) { ... });
+ +

This is equivalent to doing something like

+ +
var myGeo = navigator.geolocation;
+myGeo.getCurrentPosition(function(position) { ... });
+ +

But we can use the dot syntax to chain our property/method access together, reducing the number of lines we have to write.

+ +

The {{domxref("Geolocation.getCurrentPosition()")}} method only has a single mandatory parameter, which is an anonymous function that will run when the device's current position has been successfully retrieved. This function itself has a parameter, which contains a {{domxref("Position")}} object representing the current position data.

+ +
+

Note: A function that is taken by another function as an argument is called a callback function.

+
+ +

This pattern of invoking a function only when an operation has been completed is very common in JavaScript APIs — making sure one operation has completed before trying to use the data the operation returns in another operation. These are called asynchronous operations. Because getting the device's current position relies on an external component (the device's GPS or other geolocation hardware), we can't guarantee that it will be done in time to just immediately use the data it returns. Therefore, something like this wouldn't work:

+ +
var position = navigator.geolocation.getCurrentPosition();
+var myLatitude = position.coords.latitude;
+ +

If the first line had not yet returned its result, the second line would throw an error, because the position data would not yet be available. For this reason, APIs involving asynchronous operations are designed to use {{glossary("callback function")}}s, or the more modern system of Promises, which were made available in ECMAScript 6 and are widely used in newer APIs.

+ +

We are combining the Geolocation API with a third party API — the Google Maps API — which we are using to plot the location returned by getCurrentPosition() on a Google Map. We make this API available on our page by linking to it — you'll find this line in the HTML:

+ +
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
+ +

To use the API, we first create a LatLng object instance using the google.maps.LatLng() constructor, which takes our geolocated {{domxref("Coordinates.latitude")}} and {{domxref("Coordinates.longitude")}} values as parameters:

+ +
var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+ +

This object is itself set as the value of the center property of an options object that we've called myOptions. We then create an object instance to represent our map by calling the google.maps.Map() constructor, passing it two parameters — a reference to the {{htmlelement("div")}} element we want to render the map on (with an ID of map_canvas), and the options object we defined just above it.

+ +
var myOptions = {
+  zoom: 8,
+  center: latlng,
+  mapTypeId: google.maps.MapTypeId.TERRAIN,
+  disableDefaultUI: true
+}
+
+var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+ +

With this done, our map now renders.

+ +

This last block of code highlights two common patterns you'll see across many APIs. First of all, API objects commonly contain constructors, which are invoked to create instances of those objects that you'll use to write your program. Second, API objects often have several options available that can be tweaked to get the exact environment you want for your program. API constructors commonly accept options objects as parameters, which is where you'd set such options.

+ +
+

Note: Don't worry if you don't understand all the details of this example immediately. We'll cover using third party APIs in a lot more detail in a future article.

+
+ +

They have recognizable entry points

+ +

When using an API, you should make sure you know where the entry point is for the API. In The Geolocation API, this is pretty simple — it is the {{domxref("Navigator.geolocation")}} property, which returns the browser's {{domxref("Geolocation")}} object that all the useful geolocation methods are available inside.

+ +

The Document Object Model (DOM) API has an even simpler entry point — its features tend to be found hanging off the {{domxref("Document")}} object, or an instance of an HTML element that you want to affect in some way, for example:

+ +
var em = document.createElement('em'); // create a new em element
+var para = document.querySelector('p'); // reference an existing p element
+em.textContent = 'Hello there!'; // give em some text content
+para.appendChild(em); // embed em inside para
+ +

Other APIs have slightly more complex entry points, often involving creating a specific context for the API code to be written in. For example, the Canvas API's context object is created by getting a reference to the {{htmlelement("canvas")}} element you want to draw on, and then calling its {{domxref("HTMLCanvasElement.getContext()")}} method:

+ +
var canvas = document.querySelector('canvas');
+var ctx = canvas.getContext('2d');
+ +

Anything that we want to do to the canvas is then achieved by calling properties and methods of the content object (which is an instance of {{domxref("CanvasRenderingContext2D")}}), for example:

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+};
+ +
+

Note: You can see this code in action in our bouncing balls demo (see it running live also).

+
+ +

They use events to handle changes in state

+ +

We already discussed events earlier on in the course, in our Introduction to events article — this article looks in detail at what client-side web events are and how they are used in your code. If you are not already familiar with how client-side web API events work, you should go and read this article first before continuing.

+ +

Some web APIs contain no events, but some contain a number of events. The handler properties that allow us to run functions when events fire are generally listed in our reference material in separate "Event handlers" sections. As a simple example, instances of the XMLHttpRequest object (each one represents an HTTP request to the server to retrieve a new resource of some kind) have a number of events available on them, for example the load event is fired when a response has been successfully returned containing the requested resource, and it is now available.

+ +

The following code provides a simple example of how this would be used:

+ +
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+var request = new XMLHttpRequest();
+request.open('GET', requestURL);
+request.responseType = 'json';
+request.send();
+
+request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +
+

Note: You can see this code in action in our ajax.html example (see it live also).

+
+ +

The first five lines specify the location of resource we want to fetch, create a new instance of a request object using the XMLHttpRequest() constructor, open an HTTP GET request to retrieve the specified resource, specify that the response should be sent in JSON format, then send the request.

+ +

The onload handler function then specifies what we do with the response. We know the response will be successfully returned and available after the load event has required (unless an error occurred), so we save the response containing the returned JSON in the superHeroes variable, then pass it to two different functions for further processing.

+ +

They have additional security mechanisms where appropriate

+ +

WebAPI features are subject to the same security considerations as JavaScript and other web technologies (for example same-origin policy), but they sometimes have additional security mechanisms in place. For example, some of the more modern WebAPIs will only work on pages served over HTTPS due to them transmitting potentially sensitive data (examples include Service Workers and Push).

+ +

In addition, some WebAPIs request permission to be enabled from the user once calls to them are made in your code. As an example, you may have noticed a dialog like the following when loading up our earlier Geolocation example:

+ +

+ +

The Notifications API asks for permission in a similar fashion:

+ +

+ +

These permission prompts are given to users for security — if they weren't in place, then sites could start secretly tracking your location without you knowing it, or spamming you with a lot of annoying notifications.

+ +

Summary

+ +

At this point, you should have a good idea of what APIs are, how they work, and what you can do with them in your JavaScript code. You are probably excited to start actually doing some fun things with specific APIs, so let's go! Next up, we'll look at manipulating documents with the Document Object Model (DOM).

+ +

{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

In this module

+ + diff --git a/files/id/learn/javascript/first_steps/index.html b/files/id/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..6f7e166951 --- /dev/null +++ b/files/id/learn/javascript/first_steps/index.html @@ -0,0 +1,63 @@ +--- +title: Memulai Javascript +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Article + - Assessment + - Beginner + - Guide + - JavaScript + - Landing + - Operator + - String + - Variables +translation_of: Learn/JavaScript/First_steps +--- +
{{LearnSidebar}}
+ +

Pada modul Javascript pertama kita, kita akan mengawali dengan menjawab beberapa pertanyaan fundamental seperti "Apa itu JavaScript?", "seperti apa?", dan "untuk apa?", sebelum anda melanjutkan belajar menulis javascript pertama kali. Setelah itu, kita akan mendiskusikan beberapa kunci block pembangun secara detail, Seperti variable, string, number dan array.

+ +

Persyaratan

+ +

Sebelum memulai modul ini, anda tidak perlu memiliki pemahaman javascript sebelumnya, namun anda perlu setidaknya pernah menggunakan HTML and CSS. Anda disarankan belajar dari modul berikut sebelum memulai di javascript:

+ + + +
+

Catatan: jika anda bekerja dengan menggunakan computer/tablet/perangkat lainnya dimana anda tidak memiliki kemampuan untuk membuat file anda sendiri, anda bisa mencoba (sangat disarankan) contoh kode di online coding program seperti JSBin atau Thimble.

+
+ +

Panduan

+ +
+
Apa itu JavaScript?
+
Selamat datang di Kursus Javascript MDN untuk pemula! pada artikel pertama kita akan melihat javascript dari level tertinggi, menjawab pertanyaan seperti "Apa itu javascript?", dan "untuk apa?", dan memastikan anda nyaman dengan tujuan dari JavaScript.
+
Percikan pertama Javascript
+
Sekarang anda akan belajar teori tentang JavaScript, dan apa yang bisa anda lakukan dengan itu, kita akan memberikan anda kursus kilat pada dasar JavaScript melalui tutorial yang praktis. Disini anda akan membuat permainan sederhana "Guess the number" langkah demi langkah.
+
Apa yang salah? Memecahkan Masalah JavaScript
+
Ketika anda membangun permainan "Guess the number" pada artikel sebelumnya, anda mungkin telah  menemukan bahwa itu tidak berjalan dengan baik. Jangan takut — artikel ini akan membantu anda memecahkan masalah tersebut dengan memberikan anda beberapa tips sederhana untuk mencari dan memperbaiki error di program javascript.
+
Menyimpan informasi yang anda butuhkan — Variable
+
Setelah membaca beberapa artikel, anda perlu mengetahui apa itu javascript, apa yang bisa dimanfaatkan bagi anda, bagaimana menggunakannya dengan teknologi web lain, dan seperti apa fitur utama dari level tertinggi. Pada artikel ini kita akan kembali ke hal yang lebihdasar, melihat bagaimana bekerja dengan hal paling dasar pada block pembangun JavaScript — Variable.
+
Matematika dasar di JavaScript — number dan operator
+
Pada poin ini anda akan mendiskusikan matematika di JavaScript — bagaimana kita mengabungkan operator dan fitur lain untuk berhasil memanipulasi angka melakukan perintah kita.
+
Penanganan text — strings di JavaScript
+
Selanjunya kita akan mengalihkan perhatian kita pada string — ini adalah potongan teks di programming. Pada artikel ini kita akan melihat pada semua hal umum yang sangat perlu anda tahu tentang string ketika belajar JavaScript, seperti membuat string, memunculkan tanda kutip pada string, dan menggabungkanya.
+
Metod string yang berguna
+
Sekarang kita telah melihat pada dasar string, mari kita beralih dan mulai memikirkan tentang operasi apa yang berguna yang bisa kita gunakan dengan method built-in pada string, seperti mencari panjang teks string, menggabung dan memisahkan string, mensubtitusi sebuah karakter pada string ke lainnya, dan banyak lagi.
+
Arrays
+
Pada artikel terakhir pada modul ini, kita akan melihat pada array — cara rapi untuk menyimpan daftar item pada sebuah nama variabel. Disini kita akan melihat kenapa ini berguna, kemudian mencari tahu bagaimana membuat array, mengambil, menambah, dan menghapus item yang tersimpan pada array, dan banyak lagi.
+
+ +

Penilaian

+ +

Penilaian berikut akan menguji pemahaman anda tentang dasar javascrip berdasarkan paduan yang telah diberikan.

+ +
+
Silly story generator
+
Pada penilaian ini anda ditugaskan mengambil beberapa pengetahuan yang anda dapatkan dari modul artikel ini dan menerapkannya dengan membuat sebuah aplikasi seru yang menghasilkan cerita konyol secara acak. Selamat Bersenang — senang!
+
diff --git a/files/id/learn/javascript/first_steps/what_is_javascript/index.html b/files/id/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..f85ec8b2e1 --- /dev/null +++ b/files/id/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,433 @@ +--- +title: What is JavaScript? +slug: Learn/JavaScript/First_steps/What_is_JavaScript +tags: + - 3rd party + - API + - Artikel + - Bahasa Indonesia + - Browser + - Coding + - JavaScript + - Learn + - Pemula + - programming +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+ +

Selamat datang di kursus Javascript MDN tingkat pemula ini! Di artikel ini kita akan melihat JavaScript dari level tinggi, menjawab pertanyaan seperti "Apa itu?" dan "Bagaimana kamu dapat melakukannya", dan memastikan kamu nyaman dengan kegunaan JavaScript 

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS.
Objective:To gain familiarity with what JavaScript is, what it can do, and how it fits into a web site.
+ +

Definisi Tingkat Tinggi

+ +

JavaScript merupakan bahasa pemrograman yang memungkinkan anda untuk melakukan sesuatu yang kompleks di halaman web — ketika halaman web dibuka, pasti ada sesuatu selain menampilkan halaman statis dan informasi — halaman web akan menampilkan konten terbaru, map interaktif, animasi 2D/3D, scrolling video, dan lain-lain. — Apabila semua itu ada di sebuah halaman web, sudah pasti halaman itu menggunakan bahasa JavaScript.  JavaScript merupakan lapisan/layer ketiga dari standard web technologies, yang pertama HTML dan kedua CSS. Anda dapat melihat dokumentasinya di link yang di sediakan.

+ +

+ + + +

Mari kita buat label teks sederhana sebagai contoh. kita bisa gunakan HTML untuk strukturnya.

+ +
<p>Player 1: Chris</p>
+ +

+ +

Lalu kita tambahkan CSS agar terlihat menarik.

+ +
p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;j
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}
+ +

+ +

Dan yang terakhir, kita akan menambahkan JavaScript sehingga kita bisa menambahkan Player:

+ +
var para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  var name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+
+ +

{{ EmbedLiveSample('Definisi_Tingkat_Tinggi', '', '', '', 'Learn/JavaScript/First_steps/What_is_JavaScript') }}

+ +

Coba kalian klik label teks yang sudah kita buat dan lihat apa yang terjadi!. Kalian akan diminta menuliskan nama untuk Player 1. (Note: Kalian bisa melihat demo ini di GitHub  — source code, atau live preview)

+ +

JavaScript bisa melakukan sesuatu lebih dari yang diatas! — mari kita jelajahi lebih tentang JavaScript.

+ +

Lalu apa yang bisa dilakukannya?

+ +

Inti dari bahasa JavaScript terdiri dari beberapa fitur umum pada bahasa program lainnya yang memungkinkan kita:

+ + + +

What is even more exciting however is the functionality built on top of the core JavaScript language. So-called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.

+ +

APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.

+ +

They generally fall into two categories.

+ +

+ +

Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:

+ + + +
+

Note: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider cross browser testing in more detail when you get closer to delivering production code (i.e. real code that real customers will use).

+
+ +

Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:

+ + + +
+

Note: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our Client-side web APIs module.

+
+ +

There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!

+ +

What is JavaScript doing on your page?

+ +

Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.

+ +

Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

+ + + + + +

+ + + +

The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.

+ +

This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS were there to affect, then errors would occur.

+ +

Browser security

+ +

Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.

+ +
+

Note: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.

+
+ +

JavaScript running order

+ +

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:

+ +
var para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  var name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updateName() code block (lines 5–8) is run. The updateName() code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.

+ +

If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — TypeError: para is undefined. This means that the para object does not exist yet, so we can't add an event listener to it.

+ +
+

Note: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.

+
+ +

Interpreted versus compiled code

+ +

You might hear the terms interpreted and compiled in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it.

+ +

Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example C/C++ are compiled into assembly language that is then run by the computer.

+ +

JavaScript is a lightweight interpreted programming language. Both approaches have different advantages, which we won't discuss at this point.

+ +

Server-side versus client-side code

+ +

You might also hear the terms server-side and client-side code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this JavaScript module we are explicitly talking about client-side JavaScript.

+ +

Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, and ASP.NET. And JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our Dynamic Websites – Server-side programming topic.

+ +

Dynamic versus static code

+ +

The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.

+ +

A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.

+ +

How do you add JavaScript to your page?

+ +

JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.

+ +

Internal JavaScript

+ +
    +
  1. First of all, make a local copy of our example file apply-javascript.html. Save it in a directory somewhere sensible.
    2. +
  2. Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.
    3. +
  3. Next, go to your text editor and add the following in your head — just before your closing </head> tag: + 
    <script>
+
+  // JavaScript goes here
+
+</script>
    +
    4. +
  4. Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: + 
    document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    var para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }
+
+  var buttons = document.querySelectorAll('button');
+
+  for(var i = 0; i < buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});
    +
    5. +
  5. Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.
    6. +
+ +
+

Note: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a .html file? Did you add your {{htmlelement("script")}} element just before the </head> tag? Did you enter the JavaScript exactly as shown? JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.

+
+ +
+

Note: You can see this version on GitHub as apply-javascript-internal.html (see it live too).

+
+ +

External JavaScript

+ +

This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.

+ +
    +
  1. First, create a new file in the same directory as your sample HTML file. Call it script.js — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.
    2. +
  2. Replace your current {{htmlelement("script")}} element with the following: + 
    <script src="script.js" defer></script>
    +
    3. +
  3. Inside script.js, add the following script: + 
    function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+var buttons = document.querySelectorAll('button');
+
+for(var i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
    +
    4. +
  4. Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code, and making it reusable across multiple HTML files. Plus the HTML is easier to read without huge chunks of script dumped in it.
    5. +
+ +
+

Note: You can see this version on GitHub as apply-javascript-external.html and script.js (see it live too).

+
+ +

Inline JavaScript handlers

+ +

Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:

+ +
function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+ +
<button onclick="createParagraph()">Click me!</button>
+ +

You can try this version of our demo below.

+ +

{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150, "", "", "hide-codepen-jsfiddle") }}

+ +

This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline onclick handler to make the function run when the button is pressed.

+ +

Please don't do this, however. It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the onclick="createParagraph()" attribute on every button you wanted the JavaScript to apply to.

+ +

Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:

+ +
var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

This might be a bit longer than the onclick attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.

+ +
+

Note: Try editing your version of apply-javascript.html and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?

+
+ +

Script loading strategies

+ +

There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the Document Object Model), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.

+ +

In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.

+ +

In the internal example, you can see this structure around the code:

+ +
document.addEventListener("DOMContentLoaded", function() {
+  ...
+});
+ +

This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll learn about events later in the course).

+ +

In the external example, we use a more modern JavaScript feature to solve the problem, the async attribute, which tells the browser to continue downloading the HTML content once the <script> tag element has been reached.

+ +
<script src="script.js" async></script>
+ +

In this case both the script and the HTML will load simultaneously and the code will work.

+ +
+

Note: In the external case, we did not need to use the DOMContentLoaded event because the async attribute solved the problem for us. We didn't use the async solution for the internal JavaScript example because async only works for external scripts.

+
+ +

And old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the </body> tag), so that it would load after all the HTML has been parsed. The problem with this solution (and the DOMContentLoaded solution seen above) is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site. This is why async was added to browsers!

+ +

async and defer

+ +

There are actually two ways we can bypass the problem of the blocking script — async and defer. Let's look at the difference between these two.

+ +

Async scripts will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use async when the scripts in the page run independently from each other and depend on no other script on the page.

+ +

For example, if you have the following script elements:

+ +
<script async src="js/vendor/jquery.js"></script>
+
+<script async src="js/script2.js"></script>
+
+<script async src="js/script3.js"></script>
+ +

You can't rely on the order the scripts will load in. jquery.js may load before or after script2.js and script3.js and if this is the case, any functions in those scripts depending on jquery will produce an error because jquery will not be defined at the time the script runs.

+ +

Defer will run the scripts in the order they appear in the page and execute them as soon as the script and content are downloaded:

+ +
<script defer src="js/vendor/jquery.js"></script>
+
+<script defer src="js/script2.js"></script>
+
+<script defer src="js/script3.js"></script>
+ +

All the scripts with the defer attribute will load in the order they appear on the page. So in the second example, we can be sure that jquery.js will load before script2.js and script3.js and that script2.js will load before script3.js.

+ +

To summarize:

+ + + +

Comments

+ +

As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:

+ + + +

So for example, we could annotate our last demo's JavaScript with comments like so:

+ +
// Function: creates a new paragraph and append it to the bottom of the HTML body.
+
+function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Get references to all the buttons on the page and sort them in an array.
+  2. Loop through all the buttons and add a click event listener to each one.
+
+  When any button is pressed, the createParagraph() function will be run.
+*/
+
+var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

Summary

+ +

So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.

+ +

JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will plunge straight into the practical, getting you to jump straight in and build your own JavaScript examples.

+ + + +

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/id/learn/javascript/index.html b/files/id/learn/javascript/index.html new file mode 100644 index 0000000000..bdcf5aeedb --- /dev/null +++ b/files/id/learn/javascript/index.html @@ -0,0 +1,57 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - JavaScript + - JavaScript Pemula + - Landing + - Module + - Pemula +translation_of: Learn/JavaScript +--- +
{{LearnSidebar}}
+ +

{{Glossary("JavaScript")}} adalah bahasa pemrograman yang memungkinkan anda mengimplementasikan hal kompleks di halaman web — setiap halaman web tidak hanya berdiam disana dengan menampilkan informasi statis untuk anda lihat — menampilkan update setiap waktu, peta interaktif, animasi grafis 2D/3D, scrolling video jukeboxes, dll. — anda bisa memastikan bahwa disanalah JavaScript terlibat.

+ +

Jalur Belajar

+ +

JavaScript dapat dikatakan sulit untuk dipelajari dibandingkan teknologi terkait seperti HTML dan CSS. Sebelum mencoba belajar JavaScript, disarankan anda telah mengetahui setidaknya kedua teknologi tersebut, dan mungkin yang lain juga. Mulailah dengan modul belajar berikut:

+ + + +

Memiliki pengalaman bahasa pemrograman lain juga bisa sangat membantu anda memahami Javascript.

+ +

Setelah mengetahui dasar javascript , anda bisa belajar topik yang lebih lanjut, seperti:

+ + + +

Modul Belajar

+ +

Pada topik ini berisi modul berikut, dengan urutan yang disarankan untuk belajar.

+ +
+
Dasar JavaScript
+
Pada modul pertama ini, kita akan menjawab beberapa pertanyaan fundamental seperti  "apa itu JavaScript?", "seperti apa itu javascript?", dan "untuk apa?", sebelum melanjukan untuk menuntun anda berlatih menulis javascript untuk pertama kali. Setelah itu, kita akan mendiskusikan beberapa kunci fitur Javascript secara detail, seperti variabel, strings, number dan array.
+
Block Pembangun JavaScript
+
Pada modul ini, kita melanjutkan memperluas cakupan pada semua kunci fitur fundamental Javascript, beralih pada tipe kode block yang umum digunakan seperti pernyataan kondisional, perulangan, fungsi, dan event. Anda tentu telah melihatnya di pembelajaran, tapi hanya sepintas — disini kita akan mendiskusikannya dengan lebih eksplisit.
+
Mengenal Objek JavaScript
+
Di JavaScript, kebanyakan diantaranya adalah objek, dari fitur inti javascript seperti string dan array sampai pada API browser dibangun diatas JavaScript. Anda juga bisa membuat objek anda sendiri untuk merangkum fungsi dan variabel terkait menjadi paket yang lebih efisien. Sifat orientasi objek dari javascript sangat penting untuk dipahami jika anda ingin meningkatkan pengetahuan pada bahasa dan menulis kode yang lebih efisien, karena itu disini kami telah menyediakan modul ini untuk membantu anda. Disini kita belajar teori objek dan sintak secara detail, melihat bagaimana anda bisa membuat objek anda sendiri, dan menjelaskan apa itu data JSON dan bagaimana menggunakannya.
+
Client-side web API
+
Ketika menulis client-side JavaScript untuk Website atau aplikasi, anda tidak akan lebih jauh sebelum memulai menggunakan API — antarmuka untuk memanipulasi aspek berbeda dari browser dan sistem operasi dimana situs berjalan, atau bahkan data dari website lain atau services. Pada modul ini kita akan membahas apa itu API, dan bagaimana menggunakan API yang umum digunakan pada pembangunan kode anda. 
+
+ +

Lihat Juga

+ +
+
JavaScript di MDN
+
Poin utama untuk inti dokumentasi Javascript di MDN — dimana anda mencari referensi yang luas pada semua aspek dari dan beberapa tutorial lanjutan untuk mendalami pengalaman menggunakan Javascript.
+
Coding math
+
Seri terbaik dari tutorial video untuk anda belajar matematika yang perlu dipahami untuk menjadi programer yang lebih efektif, oleh Keith Peters.
+
diff --git a/files/id/learn/javascript/objects/dasar-dasar/index.html b/files/id/learn/javascript/objects/dasar-dasar/index.html new file mode 100644 index 0000000000..6c273b51a3 --- /dev/null +++ b/files/id/learn/javascript/objects/dasar-dasar/index.html @@ -0,0 +1,261 @@ +--- +title: Dasar-dasar Objek JavaScript object +slug: Learn/JavaScript/Objects/Dasar-dasar +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

Pada artikel ini, kita akan melihat beberapa hal mendasar dalam sintaks Javascript Objek dan meninjau kembali beberapa fitur JavaScript yang telah kita bahas pada bab sebelumnya .

+ + + + + + + + + + + + +
Prasyarat:Mengetahui dasar komputer literasi, memahami tentang dasar HTML dan CSS, memahami dasar javascript (lihat First steps dan Building blocks).
Tujuan:Untuk memahami teori dasar tentang pemrograman berbasis objek, dan bagaimana hubungannya dengan Javascript dan bagaimana memulai bekerja menggunakan JavaScript objects.
+ +

Dasar Objek

+ +

Objek adalah kumpulan data yang saling berkaitan secara data maupun fungsionalitas (yang terdiri dari beberapa variabel dan fungsi yang disebut properti (properties) dan metode (method) ketika digunakan dalam objek). 

+ +

Untuk memulainya, silakan salin file oojs.html, yang berisi tentang contoh kecil dari apa yang kita bahas. Kita akan menggunakan file ini sebagai dasar untuk mempelajari sintaks objek dasar. Saat  mempelajarinya anda harus memiliki developer tools JavaScript console.

+ +

Seperti banyak hal dalam JavaScript, membuat objek dimulai dengan mendefinisikan dan menginisialisasi beberapa variabel. Coba anda gunakan baris kode berikut pada kode JavaScript yang sudah ada dalam file, simpan lalu refresh:

+ +
const person = {};
+ +

Now open your browser's JavaScript console, enter person into it, and press Enter/Return. You should get a result similar to one of the below lines:

+ +
[object Object]
+Object { }
+{ }
+
+ +

Congratulations, you've just created your first object. Job done! But this is an empty object, so we can't really do much with it. Let's update the JavaScript object in our file to look like this:

+ +
const 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] + '.');
+  }
+};
+
+ +

After saving and refreshing, try entering some of the following into the JavaScript console on your browser devtools:

+ +
person.name
+person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()
+ +

You have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!

+ +
+

Note: If you are having trouble getting this to work, try comparing your code against our version — see oojs-finished.html (also see it running live). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.

+
+ +

So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. name and age above), and a value (e.g. ['Bob', 'Smith'] and 32). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:

+ +
const objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+};
+ +

The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's properties. The last two items are functions that allow the object to do something with that data, and are referred to as the object's methods.

+ +

An object like this is referred to as an object literal — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.

+ +

It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.

+ +

Dot notation

+ +

Above, you accessed the object's properties and methods using dot notation. The object name (person) acts as the namespace — it must be entered first to access anything encapsulated inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:

+ +
person.age
+person.interests[1]
+person.bio()
+ +

Sub-namespaces

+ +

It is even possible to make the value of an object member another object. For example, try changing the name member from

+ +
name: ['Bob', 'Smith'],
+ +

to

+ +
name : {
+  first: 'Bob',
+  last: 'Smith'
+},
+ +

Here we are effectively creating a sub-namespace. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:

+ +
person.name.first
+person.name.last
+ +

Important: At this point you'll also need to go through your method code and change any instances of

+ +
name[0]
+name[1]
+ +

to

+ +
name.first
+name.last
+ +

Otherwise your methods will no longer work.

+ +

Bracket notation

+ +

There is another way to access object properties — using bracket notation. Instead of using these:

+ +
person.age
+person.name.first
+ +

You can use

+ +
person['age']
+person['name']['first']
+ +

This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called associative arrays — they map strings to values in the same way that arrays map numbers to values.

+ +

Setting object members

+ +

So far we've only looked at retrieving (or getting) object members — you can also set (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:

+ +
person.age = 45;
+person['name']['last'] = 'Cratchit';
+ +

Try entering the above lines, and then getting the members again to see how they've changed, like so:

+ +
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 in the JS console:

+ +
person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }
+ +

You can now test out your new members:

+ +
person['eyes']
+person.farewell()
+ +

One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. We could get those values like this:

+ +
let myDataName = nameInput.value;
+let myDataValue = nameValue.value;
+ +

We could then add this new member name and value to the person object like this:

+ +
person[myDataName] = myDataValue;
+ +

To test this, try adding the following lines into your code, just below the closing curly brace of the person object:

+ +
let myDataName = 'height';
+let myDataValue = '1.75m';
+person[myDataName] = myDataValue;
+ +

Now try saving and refreshing, and entering the following into your text input:

+ +
person.height
+ +

Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.

+ +

What is "this"?

+ +

You may have noticed something slightly strange in our methods. Look at this one for example:

+ +
greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}
+ +

You are probably wondering what "this" is. The this keyword refers to the current object the code is being written inside — so in this case this is equivalent to person. So why not just write person instead? As you'll see in the Object-oriented JavaScript for beginners article, when we start creating constructors and so on, this is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different person object instances may have different names, but we want to use their own name when saying their greeting).

+ +

Let's illustrate what we mean with a simplified pair of person objects:

+ +
const person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+const person2 = {
+  name: 'Deepti',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

In this case, person1.greeting() outputs "Hi! I'm Chris."; person2.greeting() on the other hand outputs "Hi! I'm Deepti.", even though the method's code is exactly the same in each case. As we said earlier, this is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.

+ +

You've been using objects all along

+ +

As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than in our own basic custom examples.

+ +

So when you used string methods like:

+ +
myString.split(',');
+ +

You were using a method available on an instance of the String class. Every time you create a string in your code, that string is automatically created as an instance of String, and therefore has several common methods and properties available on it.

+ +

When you accessed the document object model using lines like this:

+ +
const myDiv = document.createElement('div');
+const myVideo = document.querySelector('video');
+ +

You were using methods available on an instance of the Document class. For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods and properties available on it.

+ +

The same is true of pretty much any other built-in object or API you've been using — Array, Math, and so on.

+ +

Note that built in objects and APIs don't always create object instances automatically. As an example, the Notifications API — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:

+ +
const myNotification = new Notification('Hello!');
+ +

Again, we'll look at constructors in a later article.

+ +
+

Note: It is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it sends a message to another object via one of its methods, and waits for a response, which we know as a return value.

+
+ +

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: Object basics.

+ +

Summary

+ +

Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.

+ +

In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git a/files/id/learn/javascript/objects/index.html b/files/id/learn/javascript/objects/index.html new file mode 100644 index 0000000000..a1ddfe032a --- /dev/null +++ b/files/id/learn/javascript/objects/index.html @@ -0,0 +1,54 @@ +--- +title: Memperkenalkan objek JavaScript +slug: Learn/JavaScript/Objects +tags: + - Artikel + - Asesmen + - CodingScripting + - JavaScript + - Objek + - Panduan + - Pemula + - Tutorial + - belajar +translation_of: Learn/JavaScript/Objects +--- +
{{LearnSidebar}}
+ +

Dalam JavaScript, banyak hal adalah objek, dari fitur inti JavaScript seperti string dan array sampai API browser dibangun atas JavaScript. Kamu bahkan bisa membuat objek sendiri untuk membungkus function dan variabel yang berhubungan menjadi package yang efisien, dan bertindak sebagai wadah data praktis. Sifat JavaScript yang berorientasi object penting untuk dipahami jika kamu ingin melangkah lebih jauh dengan pengetahuanmu tentang bahasanya, oleh karena itu kami menyediakan modul ini untuk membantumu. Di sini kita mengajarkan teori objek dan syntax secara detil, lalu melihat bagaimana cara membuat objekmu sendiri.

+ +

Persyaratan

+ +

Sebelum mulai modul ini, kamu harus punya beberapa pemahaman dengan dasar-dasar dari modul Pengenalan HTML dan Pengenalan CSS sebelum mulai JavaScript.

+ +

Kamu juga harus punya pemahaman tentang JavaScript dasar sebelum melihat objek JavaScript secara detil. Sebelum mencoba modul ini, pahami dulu Langkah pertama JavaScript dan Blok bangunan JavaScript.

+ +
+

Catatan: Jika kamu bekerja di komputer /tablet /perangkat lain di mana kamu tiak punya kemampuan membuat file sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program pengkodean online seperti JSBin atau Thimble.

+
+ +

Panduan

+ +
+
Dasar Objek
+
+

Dalam artikel pertama tentang objek JavaScript, kita akan melihat syntax dasar objek JavaScript dan meninjau kembali beberapa fitur JavaScript yang telah kita lihat sebelumnya, mengulangi fakta bahwa banyak fitur yang telah kamu hadapi sebelumnya, yang mana itu sebenarnya objek.

+
+
JavaScript berorientasi object untuk pemula
+
Dengan dasar-dasar yang sudah dilalui, kita sekarang akan fokus pada JavaScript berorientasi objek (OOJS) - artikel ini menyajikan pandangan dasar teori pemrograman berorientasi objek (OOP), kemudian membahas bagaimana JavaScript mengemulasikan kelas objek melalui fungsi konstruktor, dan cara membuat objek secara instan.
+
Prototipe objek
+
Prototipe adalah mekanisme di mana objek JavaScript mewarisi fitur satu sama lain, dan mereka bekerja secara berbeda dengan mekanisme pewarisan dalam bahasa pemrograman berorientasi objek klasik. Pada artikel ini kita mengeksplorasi perbedaan itu, menjelaskan bagaimana rantai prototipe bekerja, dan melihat bagaimana properti prototipe dapat digunakan untuk menambahkan metode pada konstruktor yang ada.
+
Pewarisan/Inheritance pada JavaScript
+
Dengan sebagian besar rincian OOJS sudah dijelaskan, artikel ini menunjukkan bagaimana membuat kelas objek "child" (konstructor) yang mewarisi fitur dari kelas "parent" mereka. Selain itu, kami menyajikan beberapa saran, kapan dan di mana kamu bisa menggunakan OOJS..
+
Bekerja dengan data JSON
+
JavaScript Object Notation (JSON) adalah format standar untuk mewakili data terstruktur sebagai objek JavaScript, yang biasanya digunakan untuk mewakili dan mentransmisi data di situs web (misalnya mengirimkan beberapa data dari server ke klien, sehingga dapat ditampilkan di laman web). Kamu akan sering menjumpainya, jadi dalam artikel ini, kami memberikan semua yang kamu butuhkan untuk bekerja dengan JSON menggunakan JavaScript, termasuk mengakses item data dalam objek JSON dan menulis JSONmu sendiri.
+
Latihan membangun objek
+
Pada artikel sebelumnya, kita melihat semua teori esensial dari objek JavaScript dan sintak secara detil, sehingga memberi dasar kokoh untuk mulai membangun. Di artikel ini, kita melakukan latihan praktik, memberimu beberapa latihan lagi dalam membangun objek JavaScript sendiri untuk menghasilkan sesuatu yang menyenangkan dan berwarna — beberapa bola pantul berwarna.
+
+ +

Asesmen

+ +
+
Menambahkan fitur pada demo bola pantul kita
+
Dalam asesmen ini, kamu diharapkan menggunakan demo bola pantul dari artikel sebelumnya sebagai titik awal, dan menambahkan beberapa fitur baru dan menarik.
+
diff --git a/files/id/learn/server-side/django/development_environment/index.html b/files/id/learn/server-side/django/development_environment/index.html new file mode 100644 index 0000000000..79cb6b884a --- /dev/null +++ b/files/id/learn/server-side/django/development_environment/index.html @@ -0,0 +1,423 @@ +--- +title: Setting up a Django development environment +slug: Learn/Server-side/Django/development_environment +translation_of: Learn/Server-side/Django/development_environment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
+ +

Sekarang setelah Anda tahu apa gunanya Django, kami akan menunjukkan kepada Anda cara mengatur dan menguji lingkungan pengembangan Django di Windows, Linux (Ubuntu), dan macOS - sistem operasi apa pun yang Anda gunakan, artikel ini akan memberi Anda apa yang Anda butuhkan untuk dapat mulai mengembangkan aplikasi Django.

+ + + + + + + + + + + + +
Prerequisites:Pengetahuan dasar tentang penggunaan terminal / baris perintah dan cara menginstal paket perangkat lunak pada sistem operasi komputer pengembangan Anda.
Objective:Untuk memiliki lingkungan pengembangan untuk Django (2.0) yang berjalan di komputer Anda.
+ +

Gambaran lingkungan pengembangan Django

+ +

Django membuatnya sangat mudah untuk mengatur komputer Anda sendiri sehingga Anda dapat mulai mengembangkan aplikasi web. Bagian ini menjelaskan apa yang Anda dapatkan dengan lingkungan pengembangan, dan memberikan gambaran umum dari beberapa opsi pengaturan dan konfigurasi Anda. Sisa dari artikel ini menjelaskan metode yang disarankan untuk menginstal lingkungan pengembangan Django di Ubuntu, macOS, dan Windows, dan bagaimana Anda dapat mengujinya.

+ +

Apa itu Django development environment?

+ +

The development environment  adalah instalasi Django di komputer lokal Anda yang dapat Anda gunakan untuk mengembangkan dan menguji aplikasi Django sebelum menyebarkannya ke lingkungan produksi.

+ +

Alat utama yang disediakan Django sendiri adalah seperangkat skrip Python untuk membuat dan bekerja dengan proyek Django, bersama dengan server web pengembangan sederhana yang dapat Anda gunakan untuk menguji lokal (yaitu pada komputer Anda, bukan pada server web eksternal) Aplikasi web Django di browser web komputer Anda.

+ +

Ada alat periferal lain, yang merupakan bagian dari lingkungan pengembangan, yang tidak akan kita bahas di sini. Ini termasuk hal-hal seperti editor teks atau IDE untuk mengedit kode, dan alat manajemen kontrol sumber seperti Git untuk mengelola berbagai versi kode Anda dengan aman. Kami berasumsi bahwa Anda telah menginstal editor teks.

+ +

Apa saja opsi pengaturan Django?

+ +

Django sangat fleksibel dalam hal bagaimana dan di mana ia dapat diinstal dan dikonfigurasi. Django dapat:

+ + + +

Masing-masing opsi ini memerlukan konfigurasi dan pengaturan yang sedikit berbeda. Subbagian berikut menjelaskan beberapa pilihan Anda. Untuk sisa artikel ini, kami akan menunjukkan kepada Anda cara mengatur Django pada sejumlah kecil sistem operasi, dan pengaturan itu akan diasumsikan sepanjang sisa modul ini.

+ +
+

Catatan: Opsi instalasi lain yang mungkin dicakup dalam dokumentasi resmi Django. Kami menautkan ke appropriate documents below.

+
+ +

Sistem operasi apa yang didukung?

+ +

Aplikasi web Django dapat dijalankan di hampir semua mesin yang dapat menjalankan bahasa pemrograman Python 3: Windows, macOS, Linux / Unix, Solaris, dan lain-lain. Hampir semua komputer harus memiliki kinerja yang diperlukan untuk menjalankan Django selama pengembangan.

+ +

In this article, we'll provide instructions for Windows, macOS, and Linux/Unix.

+ +

Versi Python apa yang harus digunakan?

+ +

Kami menyarankan Anda menggunakan versi terbaru yang tersedia - pada saat penulisan ini adalah Python 3.8.2.

+ +

Python 3.5 or later can be used if needed (Python 3.5 support will be dropped in future releases).

+ +
+

Catatan: Python 2.7 tidak dapat digunakan dengan rilis Django saat ini (The Django 1.11.x series adalah yang terakhir untuk mendukung Python 2.7).

+
+ +

Di mana kita bisa mengunduh Django?

+ +

Ada tiga tempat untuk mengunduh Django:

+ + + +

Artikel ini menunjukkan cara menginstal Django dari PyPi, untuk mendapatkan versi stabil terbaru.

+ +

Database yang mana?

+ +

Django mendukung empat database utama (PostgreSQL, MySQL, Oracle, dan SQLite), dan ada perpustakaan komunitas yang menyediakan berbagai tingkat dukungan untuk database SQL dan NoSQL populer lainnya. Kami menyarankan Anda memilih database yang sama untuk produksi dan pengembangan (meskipun Django mengabstraksikan banyak perbedaan database menggunakan Object-Relational Mapper (ORM), there are still potential issues that are better to avoid).

+ +

Untuk artikel ini (dan sebagian besar modul ini) kita akan menggunakan database SQLite, yang menyimpan datanya dalam file. SQLite dimaksudkan untuk digunakan sebagai basis data yang ringan dan tidak dapat mendukung konkurensi tingkat tinggi. Namun, ini adalah pilihan yang sangat baik untuk aplikasi yang hanya bersifat baca-saja.

+ +
+

Catatan: Django dikonfigurasi untuk menggunakan SQLite secara default ketika Anda memulai proyek situs web Anda menggunakan alat standar (django-admin). Ini adalah pilihan yang bagus ketika Anda memulai karena tidak memerlukan konfigurasi atau pengaturan tambahan.

+
+ +

Menginstal seluruh sistem atau dalam lingkungan virtual Python?

+ +

Ketika Anda menginstal Python3 Anda mendapatkan lingkungan global tunggal yang dibagikan oleh semua kode Python3. Meskipun Anda dapat menginstal paket Python apa pun yang Anda suka di lingkungan, Anda hanya dapat menginstal satu versi tertentu dari setiap paket pada suatu waktu.

+ +
+

Catatan: Aplikasi python yang diinstal ke dalam lingkungan global berpotensi dapat saling bertentangan (mis. Jika mereka bergantung pada versi berbeda dari paket yang sama).

+
+ +

Jika Anda menginstal Django ke lingkungan default / global maka Anda hanya akan dapat menargetkan satu versi Django di komputer. Ini bisa menjadi masalah jika Anda ingin membuat situs web baru (menggunakan Django versi terbaru) sambil tetap mempertahankan situs web yang bergantung pada versi yang lebih lama.

+ +

Akibatnya, pengembang Python / Django berpengalaman biasanya menjalankan aplikasi Python dalam lingkungan virtual Python independen. Ini memungkinkan beberapa lingkungan Django berbeda di satu komputer. Tim pengembang Django sendiri merekomendasikan agar Anda menggunakan lingkungan virtual Python!

+ +

Modul ini mengasumsikan bahwa Anda telah menginstal Django ke lingkungan virtual, dan kami akan menunjukkan caranya di bawah ini.

+ +

Memasang Python 3

+ +

Untuk menggunakan Django Anda harus menginstal Python di sistem operasi Anda. Jika anda menggunakan Python 3 maka anda juga akan memerlukan Python Package Index tool — pip3 — yang digunakan untuk mengelola (menginstal, memperbarui, dan menghapus) paket / pustaka Python yang digunakan oleh Django dan aplikasi Python Anda yang lain.

+ +

Bagian ini menjelaskan secara singkat bagaimana Anda dapat memeriksa versi Python apa yang ada, dan menginstal versi baru sesuai kebutuhan, untuk Ubuntu Linux 18.04, macOS, dan Windows 10.

+ +
+

Note: Bergantung pada platform Anda, Anda mungkin juga dapat menginstal Python / pip dari manajer paket sistem operasi sendiri atau melalui mekanisme lain. Untuk sebagian besar platform, Anda dapat mengunduh file instalasi yang diperlukan dari https://www.python.org/downloads/ dan menginstalnya menggunakan metode spesifik platform yang sesuai.

+
+ +

Ubuntu 18.04

+ +

Ubuntu Linux 18.04 LTS sudah terdapat Python 3.6.6 secara default. Anda dapat melihatnya dengan menjalankan perintah berikut di bash terminal:

+ +
python3 -V
+ Python 3.6.6
+
+ +

Namun, alat Python Package Index yang akan dibutuhkan untuk dapat  memasang packages Python 3 (termasuk Django) tidak tersedia secara default. Jadi, Anda dapat memasang pip3 di bash terminal menggunakan:

+ +
sudo apt install python3-pip
+
+ +

macOS

+ +

macOS "El Capitan" dan versi terbaru yang lainnya tidak tersedia Python 3 didalamnya. Anda dapat melihatnya dengan menjalankan perintah di bash terminal:

+ +
python3 -V
+ -bash: python3: command not found
+ +

Anda dapat dengan mudah memasang Python 3 (bersamaan dengan pip3) di python.org:

+ +
    +
  1. Download installer yang dibutuhkan: +
      +
    1. Pergi ke https://www.python.org/downloads/
      2. +
    2. Pilih tombol Download Python 3.8.2 (versi minor yang tepat mungkin berbeda)
      3. +
    +
    2. +
  2. Cari file tersebut dengan menggunakan Finder, double-click file tersebut. Ikuti perintah pada proses instalasi.
    3. +
+ +

Sekarang Anda dapat mengonfirmasi keberhasilan instalasi dengan melihat versi Python 3 seperti yang ditunjukkan dibawah:

+ +
python3 -V
+ Python 3.8.2
+
+ +

Anda dapat pula mengecek bahwa pip3 sudah terpasang dengan melihat list packages yang tersedia:

+ +
pip3 list
+ +

Windows 10

+ +

Windows doesn't include Python by default, but you can easily install it (along with the pip3 tool) from python.org:

+ +
    +
  1. Download the required installer: +
      +
    1. Go to https://www.python.org/downloads/
      2. +
    2. Select the Download Python 3.8.2 button (the exact minor version number may differ).
      3. +
    +
    2. +
  2. Instal Python dengan mengklik dua kali pada file yang diunduh dan mengikuti petunjuk instalasi
    3. +
  3. Pastikan untuk menandai kotak yang berlabel "Add Python to PATH"Pastikan untuk menandai kotak yang berlabel
    4. +
+ +

You can then verify that Python 3 was installed by entering the following text into the command prompt:

+ +
py -3 -V
+ Python 3.8.2
+
+ +

The Windows installer incorporates pip3 (the Python package manager) by default. You can list installed packages as shown:

+ +
pip3 list
+
+ +
+

Note: Pemasang harus mengatur semua yang Anda butuhkan agar perintah di atas berfungsi. Namun jika Anda mendapatkan pesan bahwa Python tidak dapat ditemukan, Anda mungkin lupa menambahkannya ke jalur sistem Anda. Anda dapat melakukan ini dengan menjalankan penginstal lagi, memilih "Modify", dan centang kotak berlabel  "Add Python to environment variables" di halaman kedua.

+
+ +

Using Django inside a Python virtual environment

+ +

Perpustakaan yang akan kami gunakan untuk membuat lingkungan virtual kami adalah virtualenvwrapper (Linux and macOS) dan virtualenvwrapper-win (Windows), yang pada gilirannya keduanya menggunakan alat virtualenv. The wrapper tools menciptakan antarmuka yang konsisten untuk mengelola antarmuka di semua platform.

+ +

Menginstal perangkat lunak lingkungan virtual

+ +

Ubuntu virtual environment setup

+ +

Setelah menginstal Python dan pip Anda dapat menginstal virtualenvwrapper (which includes virtualenv). Panduan instalasi resmi dapat ditemukan here, atau ikuti instruksi di bawah ini.

+ +

Install the tool using pip3:

+ +
sudo pip3 install virtualenvwrapper
+ +

Kemudian tambahkan baris berikut di akhir file startup shell Anda (ini adalah nama file tersembunyi .bashrc di direktori home Anda). Ini mengatur lokasi di mana lingkungan virtual seharusnya hidup, lokasi direktori proyek pengembangan Anda, dan lokasi skrip yang diinstal dengan paket ini:

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+
+ +
+

Note: The VIRTUALENVWRAPPER_PYTHON and VIRTUALENVWRAPPER_VIRTUALENV_ARGS variables point to the normal installation location for Python3, and source /usr/local/bin/virtualenvwrapper.sh points to the normal location of the virtualenvwrapper.sh script. If the virtualenv doesn't work when you test it, one thing to check is that Python and the script are in the expected location (and then change the startup file appropriately).
+
+ You can find the correct locations for your system using the commands which virtualenvwrapper.sh and which python3.

+
+ +

Kemudian muat ulang file startup dengan menjalankan perintah berikut di terminal:

+ +
source ~/.bashrc
+ +

Pada titik ini Anda akan melihat banyak skrip dijalankan seperti yang ditunjukkan di bawah ini:

+ +
virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
+
+ +

Sekarang Anda dapat membuat lingkungan virtual baru dengan perintah mkvirtualenv .

+ +

macOS virtual environment setup

+ +

Pengaturan virtualenvwrapper pada macOS hampir persis sama dengan di Ubuntu (sekali lagi, Anda dapat mengikuti instruksi dari official installation guide atau di bawah). 

+ +

Install virtualenvwrapper (and bundling virtualenv) using pip as shown.

+ +
sudo pip3 install virtualenvwrapper
+ +

Then add the following lines to the end of your shell startup file.

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+ +
+

Note: The VIRTUALENVWRAPPER_PYTHON variable points to the normal installation location for Python3, and source /usr/local/bin/virtualenvwrapper.sh points to the normal location of the virtualenvwrapper.sh script. If the virtualenv doesn't work when you test it, one thing to check is that Python and the script are in the expected location (and then change the startup file appropriately).

+ +

For example, one installation test on macOS ended up with the following lines being necessary in the startup file:

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh
+ +

You can find the correct locations for your system using the commands which virtualenvwrapper.sh and which python3.

+
+ +

These are the same lines as for Ubuntu, but the startup file is the differently named hidden file .bash_profile in your home directory.

+ +
+

Note: If you can't find .bash_profile to edit in the finder, you can also open this in the terminal using nano.

+ +

The commands look something like this:

+ +
cd ~  # Navigate to my home directory
+ls -la #List the content of the directory. YOu should see .bash_profile
+nano .bash_profile # Open the file in the nano text editor, within the terminal
+# Scroll to the end of the file, and copy in the lines above
+# Use Ctrl+X to exit nano, Choose Y to save the file.
+
+
+ +

Then reload the startup file by making the following call in the terminal:

+ +
source ~/.bash_profile
+ +

At this point, you may see a bunch of scripts being run (the same scripts as for the Ubuntu installation). You should now be able to create a new virtual environment with the mkvirtualenv command.

+ +

Windows 10 virtual environment setup

+ +

Installing virtualenvwrapper-win is even simpler than setting up virtualenvwrapper because you don't need to configure where the tool stores virtual environment information (there is a default value). All you need to do is run the following command in the command prompt:

+ +
pip3 install virtualenvwrapper-win
+ +

Now you can create a new virtual environment with the mkvirtualenv command

+ +

Creating a virtual environment

+ +

Setelah Anda menginstal virtualenvwrapper or virtualenvwrapper-win then working with virtual environments is very similar on all platforms.

+ +

Sekarang anda dapat membuat lingkungan baru dengan perintah mkvirtualenv .Saat perintah ini berjalan, Anda akan melihat lingkungan sedang disiapkan (apa yang Anda lihat sedikit platform-specific). Ketika perintah selesai lingkungan virtual baru akan aktif - Anda dapat melihat ini karena awal prompt akan menjadi nama lingkungan dalam tanda kurung (di bawah ini kami menunjukkan ini untuk Ubuntu, tetapi baris terakhir mirip untuk Windows / macOS) .

+ +
$ mkvirtualenv my_django_environment
+
+Running virtualenv with interpreter /usr/bin/python3
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
+(my_django_environment) ubuntu@ubuntu:~$
+
+ +

Sekarang Anda berada di dalam lingkungan virtual Anda dapat menginstal Django dan mulai mengembangkan.

+ +
+

Catatan: Mulai sekarang dalam artikel ini (dan memang modul) asumsikan bahwa setiap perintah dijalankan dalam lingkungan virtual Python seperti yang kita atur di atas.

+
+ +

Menggunakan lingkungan virtual

+ +

Hanya ada beberapa perintah berguna lainnya yang harus Anda ketahui (ada lebih banyak dalam dokumentasi alat, tetapi ini adalah yang akan Anda gunakan secara teratur):

+ + + +

Installing Django

+ +

Setelah Anda membuat lingkungan virtual, dan memanggil workon untuk memasukkannya, kamu dapat menggunakan pip3 untuk menginstal Django. 

+ +
pip3 install django~=2.2
+ +

Anda dapat menguji bahwa Django diinstal dengan menjalankan perintah berikut (ini hanya menguji apakah Python dapat menemukan modul Django):Anda dapat menguji bahwa Django diinstal dengan menjalankan perintah berikut (ini hanya menguji apakah Python dapat menemukan modul Django):

+ +
# Linux/macOS
+python3 -m django --version
+ 2.2.12
+
+# Windows
+py -3 -m django --version
+ 2.2.12
+
+ +
+

Catatan: Jika perintah Windows di atas tidak menampilkan modul django, cobalah:

+ +
py -m django --version
+ +

Pada Windows, skrip Python 3 diluncurkan dengan mengawali perintah dengan py -3, meskipun ini dapat bervariasi tergantung pada instalasi spesifikasi anda. Coba hilangkan -3  jika anda menemukan masalah dengan perintah, Di Linux / macOS, perintahnya adalah python3.

+
+ +
+

Penting: Sisa modul ini menggunakan perintah Linux untuk menjalankan Python 3 (python3) . Jika anda bekerja pada Windows cukup ganti awalan ini dengan: py -3

+
+ +

Menguji instalasi Anda

+ +

Tes di atas berfungsi, tetapi tidak terlalu menyenangkan. Tes yang lebih menarik adalah membuat proyek kerangka dan melihatnya bekerja. Untuk melakukan ini, pertama-tama navigasikan di command prompt / terminal Anda ke tempat Anda ingin menyimpan aplikasi Django Anda. Buat folder untuk situs pengujian Anda dan navigasikan ke dalamnya.

+ +
mkdir django_test
+cd django_test
+
+ +

Anda kemudian dapat membuat situs kerangka baru bernama "mytestsite" menggunakan alat django-admin seperti yang ditunjukkan. Setelah membuat situs, Anda dapat menavigasi ke folder tempat Anda akan menemukan skrip utama untuk mengelola proyek, bernama manage.py.

+ +
django-admin startproject mytestsite
+cd mytestsite
+ +

Kita dapat menjalankan development web server dari dalam folder ini menggunakan manage.py dan perintah runserver , seperti yang ditunjukkan.

+ +
$ python3 manage.py runserver
+Performing system checks...
+
+System check identified no issues (0 silenced).
+
+You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
+Run 'python manage.py migrate' to apply them.
+
+December 16, 2018 - 07:06:30
+Django version 2.2.12, using settings 'mytestsite.settings'
+Starting development server at http://127.0.0.1:8000/
+Quit the server with CONTROL-C.
+
+ +
+

Catatan: Perintah di atas menunjukkan perintah Linux / macOS. Anda dapat mengabaikan peringatan tentang "15 migrasi yang belum diterapkan" pada titik ini!

+
+ +

Setelah server berjalan, Anda dapat melihat situs dengan menavigasi ke URL berikut di browser web lokal Anda:http://127.0.0.1:8000/. Anda akan melihat situs yang terlihat seperti ini:
+ Django Skeleton App Homepage - Django 2.0

+ + + +

Ringkasan

+ +

Anda sekarang memiliki lingkungan pengembangan Django dan berjalan di komputer Anda.

+ +

Di bagian pengujian Anda juga melihat secara singkat bagaimana kami dapat membuat situs web Django baru menggunakan django-admin startproject, dan jalankan di browser Anda menggunakan server web pengembangan (python3 manage.py runserver). Pada artikel selanjutnya, kami memperluas proses ini, membangun aplikasi web yang sederhana namun lengkap.

+ +

Lihat juga

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}

+ +

Dalam modul ini

+ + diff --git a/files/id/learn/server-side/django/index.html b/files/id/learn/server-side/django/index.html new file mode 100644 index 0000000000..c95aa6f162 --- /dev/null +++ b/files/id/learn/server-side/django/index.html @@ -0,0 +1,67 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - CodingScripting + - Pemula + - Python + - Server-side programming + - belajar + - django +translation_of: Learn/Server-side/Django +--- +
{{LearnSidebar}}
+ +

Django merupakan sebuah web framework server-side yang sangat populer dan unggul. Modul ini menunjukan mengapa Django adalah salah satu web server frameworks yang paling populer, bagaimana mempersiapkan sebuah lingkungan pengembangan, dan bagaimana memulai menggunakan Django untuk membuat aplikasi web milik Anda.

+ +

Persyaratan

+ +

Sebelum memulai modul ini, Anda tidak perlu memiliki pengetahuan tentang Django. Anda perlu mengetahui apa itu server-side web programming dan web frameworks, idealnya dengan membaca topik di modul Server-side website programming first steps.

+ +

Pengetahuan umum tentang konsep pemrograman dan Python sangat direkomendasikan, tetapi tidak penting untuk memahami konsep inti.

+ +
+

Catatan: Python adalah salah satu bahasa pemrograman termudah bagi pemula untuk dibaca dan dimengerti. Disarankan, jika Anda ingin memahami modul ini dengan lebih baik maka ada banyak buku dan tutorial gratis yang tersedia di internet (programmers baru barangkali ingin memeriksa halaman Python untuk Non Programmers di wiki python.org).

+
+ +

Panduan

+ +
+
Pengenalan Django
+
Dalam artikel pertama Django kita menjawab pertanyaan "Apa itu Django?" dan memberi Anda sebuah gambaran tentang apa yang membuat web framework ini spesial. Kita akan menjelaskan mengenai fitur utama-nya, termasuk beberapa fungsi lanjutan yang tidak dapat kami bahas secara rinci dalam modul ini. Kita juga akan menunjukan Anda beberapa bagian utama aplikasi Django, untuk memberi gambaran tentang apa yang dapat dilakukan sebelum Anda memasangnya dan mulai bermain.
+
Menyiapkan lingkungan pengembangan Django
+
Sekarang Anda sudah tahu apa itu Django, Kita akan menunjukan Anda bagaimana untuk mempersiapkan dan menguji sebuah lingkungan pengembangan Django pada Windows, Linux (Ubuntu), dan Mac OS X -- apapun sistem operasi yang Anda gunakan, artikel ini akan memberi apa yang Anda inginkan untuk dapat mulai mengembangkan aplikasi Django.
+
Django Tutorial: Situs Perpustakaan Lokal
+
Artikel pertama dalam rangkaian tutorial praktis kami menjelaskan apa yang akan Anda pelajari, dan memberikan gambaran umum tentang "perpustakaan lokal", contoh situs yang akan Kita kerjakan dan kembangkan di artikel berikutnya.
+
Django Tutorial Part 2: Membuat kerangka website
+
Artikel ini menjelaskan bagaimana Anda dapat membuat sebuah "skeleton (kerangka)" website sebagai dasar, yang kemudian dapat Anda gunakan untuk diisi dengan pengaturan situs, urls, models, views, dan templates.
+
Django Tutorial Part 3: Menggunakan Models
+
Artikel ini menunjukan bagaimana untuk mendefinisikan models untuk website LocalLibrary — models mewakili sebuah struktur data yang ingin disimpan dalam data aplikasi kita, dan juga memperbolehkan Django untuk menyimpan data didalam sebuah database untuk kita(dan memodifikasinya nanti). Hal ini menjelaskan apa itu model, bagaimana hal itu di deklarasikan, dan beberapa jenis field (attribute suatu data) utama.Hal ini juga secara singkat menunjukkan beberapa cara utama untuk mengakses data model.
+
Django Tutorial Part 4: Django admin situs
+
Sekarang setelah kita membuat models untuk website LocalLibrary. Kita akan mengunakan situs Django Admin untuk menambahkan beberapa  data buku "sebenarnya". Pertama Kita akan menunjukkan Anda bagaimana cara mendaftarkan models dengan situs admin (admin site), lalu kita akan menunjukkan cara masuk dan membuat beberapa data. Pada akhirnya Kita menunjukkan beberapa cara untuk lebih meningkatkan penyajian situs admin.
+
Django Tutorial Part 5: Membuat home page Kita
+
Kita telah mengetahui bahwa untuk menambahkan sebuah kode untuk menampilkan halaman penuh pertama kita -- sebuah homepage untuk Locallibrary yang menunjukkan berapa banyak record yang Kita miliki dari masing-masing tipe model dan menyediakan link navigasi sidebar ke halaman Kita yang lain. Sepanjang jalan kita akan mendapatkan pengalaman praktek dalam menulis URL maps dan views, mendapatkan records dari sebuah database, dan menggunakan templates.
+
Django Tutorial Part 6: List umum dan detail views
+
Tutorial ini mengembangkan website Locallibrary Kita, menambahkan list dan detail untuk books dan authors. Di sini kita akan belajar tentang generic class-based views (sebuah tampilan berbasis class), dan menampilkan bagaimana mereka dapat mengurangi jumlah kode yang harus Anda tulis untuk kasus penggunaan umum. Kita juga akan membahas URL secara lebih rinci, menunjukkan bagaimana melakukan pencocokan pola dasar.
+
Django Tutorial Part 7: Sessions framework
+
Tutorial ini mengembangkan website LocalLibrary kita, menambahkan session-based visit-counter ke sebuah home page. Ini adalah contoh yang relatif sederhana, namun ini menunjukkan bagaimana Anda dapat menggunakan sesi framework untuk menyediakan perilaku konsisten bagi pengguna anonymous(anonim) di situs Anda sendiri.
+
Django Tutorial Part 8: User authentication and perizinan
+
Pada tutorial ini Kami akan menunjukan Anda bagaimana untuk memperbolehkan pengguna untuk masuk ke situs Anda dengan akun mereka, dan bagaimana mengatur apa yang dapat mereka lakukan dan melihat berdasarkan pada apakah mereka login dan perizinan mereka. Sebagai bagian dari demonstrasi ini, kita akan memperluas website LocalLibrary, menambahkan halaman masuk dan logout, dan halaman pengguna dan staf untuk melihat buku-buku yang telah dipinjam.
+
Django Tutorial Part 9: Bekerja dengan forms
+
Dalam tutorial ini Kami akan menunjukkan cara bekerja dengan HTML Forms di Django, dan khusunya cara termudah untuk menulis Forms untuk membuat, memperbaru, dan menghapus model Instances. Sebagai bagian dari demonstrasi ini, Kita akan memperluas website LocalLibrary sehingga pustakawan dapat memperbarui buku, dan membuat, memperbarui, dan menghapus penulis menggunakan formulir kita sendir(bukan menggunakan aplikasi admin).
+
Django Tutorial Part 10: Menguji aplikasi web Django
+
Seiring berkembangnya website mereka menjadi lebih sulit untuk dilakukan pengujian secara manual -- bukan hanya karena adanya lebih banyak tes, namun, karena interaksi antar komponen menjadi lebih kompleks, perubahan kecil di satu area dapat memerlukan banyak tes tambahan untuk memverifikasi pengaruhnya terhadap area lain. Salah satu cara untuk mengurangi masalah ini adalah dengan menulis tes secara otomatis, yang dapat dengan mudah dan handal dijalankan setiap kali Anda melakukan perubahan. Tutorial ini menunjukkan bagaimana mengotomatisasi pengujian unit dari situs Anda menggunakan Django's test framework.
+
Django Tutorial Part 11: Meluncurkan Django untuk produksi
+
Sekarang Anda telah membuat (dan menguji) website LocalLibrary yang hebat, Anda akan menginstallnya pada public web server sehingga bisa diakses oleh staf perpustakaan dan anggota melalui internet. Artikel ini memberikan gambaran umum tentang bagaimana Anda bisa menemukan host untuk menyebarkan situs web Anda, dan apa yang perlu Anda lakukan agar situs Anda siap masuk produksi.
+
Keamanan aplikasi web Django
+
Melindungi data pengguna merupakan bagian penting dari setiap desain situs web. Kita sebelumnya menjelaskan beberapa ancaman keamanan yang lebih umum dalam artikel Web security — artikel ini memberikan demonstrasi praktis tentang bagaimana perlindungan built-in (yang secara default terinstall) Django menangani ancaman tersebut.
+
+ +

Penilaian

+ +

Penilaian berikut akan menguji pemahaman Anda tentang bagaimana membuat situs web menggunakan Django, seperti yang dijelaskan dalam panduan yang tercantum di atas.

+ +
+
DIY Django mini blog
+
Dalam penilaian ini Anda akan menggunakan beberapa pengetahuan yang telah Anda pelajari dari modul ini untuk membuat blog Anda sendiri.
+
diff --git a/files/id/learn/server-side/django/tutorial_local_library_website/index.html b/files/id/learn/server-side/django/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..21ed6a040e --- /dev/null +++ b/files/id/learn/server-side/django/tutorial_local_library_website/index.html @@ -0,0 +1,90 @@ +--- +title: 'Django Tutorial: The Local Library website' +slug: Learn/Server-side/Django/Tutorial_local_library_website +translation_of: Learn/Server-side/Django/Tutorial_local_library_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
+ +
Pada artikel pertama ini dalam seri latihan praktek menjelaskan apa yang akan Anda pelajari, dan menyediakan sebuah gambaran mengenai percobaan website "local library" Kita akan bekerja dan terus berkembang pada artikel-artikel selanjuntya.
+ + + + + + + + + + + + +
Prerequisites:Read the Django Introduction. For the following articles you'll also need to have set up a Django development environment. 
Objective:To introduce the example application used in this tutorial, and allow readers to understand what topics will be covered. 
+ +

Gambaran

+ +

Selamat datang di tutorial django MDN "Local Library", dimana kita akan mengembangakn sebuah website yang memungkinkan untuk mengatur sebuah katalog untuk perpustakaan lokal. 

+ +

Pada seri ini Anda akan:

+ + + +

Anda sudah belajar mengenai beberapa topik-topik yang akan dibahas. Pada akhir seri tutorial Anda seharusnya cukup tahu untuk mengembangkan aplikasi simple Django secara pribadi.

+ +

The LocalLibrary website

+ +

LocalLibrary is the name of the website that we'll create and evolve over the course of this series of tutorials. As you'd expect, the purpose of the website is to provide an online catalog for a small local library, where users can browse available books and manage their accounts.

+ +

This example has been carefully chosen because it can scale to show as much or as little detail as we need, and can be used to show off almost any Django feature. More importantly, it allows us to provide a guided path through the most important functionality in the Django web framework:

+ + + +

Even though this is a very extensible example, it's called LocalLibrary for a reason — we're hoping to show the minimum information that will help you get up and running with Django quickly. As a result we'll store information about books, copies of books, authors and other key information. We won't however be storing information about other items a library might store, or provide the infrastructure needed to support multiple library sites or other "big library" features. 

+ +

I'm stuck, where can I get the source?

+ +

As you work through the tutorial we'll provide the appropriate code snippets for you to copy and paste at each point, and there will be other code that we hope you'll extend yourself (with some guidance).

+ +

If you get stuck, you can find the fully developed version of the website on Github here.

+ +

Summary

+ +

Now that you know a bit more about the LocalLibrary website and what you're going to learn, it's time to start creating a skeleton project to contain our example.

+ +

{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}

+ +

In this module

+ + diff --git a/files/id/learn/server-side/first_steps/index.html b/files/id/learn/server-side/first_steps/index.html new file mode 100644 index 0000000000..b085099081 --- /dev/null +++ b/files/id/learn/server-side/first_steps/index.html @@ -0,0 +1,39 @@ +--- +title: Server-side website programming first steps +slug: Learn/Server-side/First_steps +translation_of: Learn/Server-side/First_steps +--- +
{{LearnSidebar}}
+ +

Pada module server-side ini, akan menjawab beberapa pertanyaan mendasar mengenai pemrograman server-side--, apa itu ?, apa bedanya dengan pemrograman client-side ?, kenapa pemmogrmaan ini sangat berguna. Kemudian akan diberikan penjelasan singkat dari beberapa framework pemrograman server-side populer, bersamaan dengan petunjuk bagaimana memilih framework yang paling cocok untuk website Anda. 

+ +

Prasyarat

+ +

Sebelum memulai modul ini, Anda tidak harus memiliki pengetahuan apapun mengenai pemgrograman server-side, atau jenis pemrograman lainnya.

+ +

Anda perlu untuk mengeti "bagaimana web bekerja". Kami sarankan Anda baca terlebih dahulu topik - topik berikut:

+ + + +

Dengan pemahaman dasar diatas, Anda akan siap untuk belajar dengan modul ini. 

+ +

Panduan

+ +
+
Pengenalan web server side
+
Welcome to the MDN beginner's server-side programming course! In this first article we look at Server-side programming  from a high level, answering questions such as "what is it?", "how does it differ from client-side programming?", and "why it is so useful?". After reading this article you'll understand the additional power available to websites through server-side coding.
+
Client-Server overview
+
Now that you know the purpose and potential benefits of server-side programming we're going to examine in detail what happens when a server receives a "dynamic request" from a browser. As most website server-side code handles requests and responses in similar ways, this will help you understand what you need to do when writing your own code.
+
Server-side web frameworks
+
The last article showed you what a server-side web application needs to do in order to respond to requests from a web browser. Now we show how web frameworks can simplify these tasks, and help you choose the right framework for your first server-side web application.
+
Website security
+
Website security requires vigilance in all aspects of website design and usage. This introductory article won't make you a website security guru, but it will help you understand the first important steps you can take to harden your web application against the most common threats.
+
+ +

Assessments

+ +

This "overview" module doesn't have any assessement because we haven't yet shown you any code.  We do hope at this point you have a good understanding of what sorts of functionality you can deliver using server-side programming and you have made a decision about what server-side web framework you will use to create your first website.

diff --git a/files/id/learn/server-side/index.html b/files/id/learn/server-side/index.html new file mode 100644 index 0000000000..b497257371 --- /dev/null +++ b/files/id/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +title: Server-side website programming +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +
{{LearnSidebar}}
+ +

The Dynamic Websites – Server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.

+ +

Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using HTML, CSS, and JavaScript), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.

+ +

In the modern world of web development, learning about server-side development is highly recommended.

+ +

Learning pathway

+ +

Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.

+ +

A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".

+ +

You will need to understand "how the web works". We recommend that you first read the following topics:

+ + + +

With that basic understanding you'll be ready to work your way through the modules in this section. 

+ +

Modules

+ +

This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . 

+ +
+
Server-side website programming first steps
+
This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.
+
Django Web Framework (Python)
+
Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.
+
Express Web Framework (Node.js/JavaScript)
+
Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.
+
+ +

See also

+ +
+
Node server without framework
+
This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.
+
diff --git a/files/id/learn/web_mechanics/index.html b/files/id/learn/web_mechanics/index.html new file mode 100644 index 0000000000..c1cb59bd12 --- /dev/null +++ b/files/id/learn/web_mechanics/index.html @@ -0,0 +1,29 @@ +--- +title: Mekanisme Web +slug: Learn/Web_Mechanics +tags: + - MekanismeWeb + - Pemula +translation_of: Learn/Common_questions +--- +

Kompetensi ini merepresentasikan pemahaman Anda mengenai ekosistem web. Kami pecah pengetahuan yang Anda butuhkan kedalam bentuk yang lebih kecil, yakni detil keahliannya.

+ +

{{NoteStart}}Mekanisme web berfokus pada sisi fungsional dari ekosistem web, bukan pada sisi teknis, dimana pembahasannya berada pada Infrastruktur.{{NoteEnd}}

+ +

Keahlian Dasar

+ +

Mulailah dari sini jika Anda belum akrab dengan web. Kami juga menyarankan Anda untuk mengunjungi ke halaman glosarium kami untuk bantuan dalam memahami berbagai jargon yang ada pada web.

+ +

{{ArticlesByTag({"tags":["WebMechanics","Beginner"]})}}

+ +

Keahlian Menengah

+ +

Jika Anda sudah pernah mengenal web, di sini ada beberapa detail yang dapat Anda pelajari lebih lanjut:

+ +

{{ArticlesByTag({"tags":["WebMechanics","Intermediate"]})}}

+ +

Keahlian Lanjutan

+ +

Jika Anda adalah seorang pembuat web yang berpengalaman, Anda mungkin tertarik untuk mempelajari keahlian yang luar biasa.

+ +

{{ArticlesByTag({"tags":["WebMechanics","Advanced"]})}}

diff --git a/files/id/mdn/about/index.html b/files/id/mdn/about/index.html new file mode 100644 index 0000000000..f220277d09 --- /dev/null +++ b/files/id/mdn/about/index.html @@ -0,0 +1,135 @@ +--- +title: About MDN Web Docs +slug: MDN/About +translation_of: MDN/About +--- +
{{MDNSidebar}}
+ +
{{IncludeSubNav("/en-US/docs/MDN")}}
+ +

MDN Web Docs (yang sebelumnya dikenal sebagai MDN — the Mozilla Developer Network) adalah sebuah platform pembelajaran untuk teknologi web dan perangkat lunak yang berbasis Web. termasuk: 

+ + + +

Misi Kami

+ +

Misi MDN sederhana: menyediakan pengembang informasi yang pengembang butuhkan untuk membangun proyek  open Web dengan mudah. Jika MDN adalah sebuah teknologi terbuka di Web, kita ingin mendokumentasikannya.

+ +

Kita juga menyediakan dokumentasi tentang Mozilla products dan cara build and contribute to Mozilla projects.

+ +

Jika kamu tidak yakin apakah sebuah artikel harus dibahas di MDN, baca Does this belong on MDN?

+ +

Cara kamu dapat membantu

+ +

Kamu tidak perlu menjadi seorang coder profesional atau penulis untuk membantu MDN! Kita mempunya banyak cara agar kamu dapat membantu, dari me-review artikel memastikan artikel tersebut masuk akal, kontribusi di tulisan, menambahkan contoh kode. Sebenarnya, ada banyak cara untuk membantu. Kami memiliki halaman Getting Started yang membantu kamu mengambil tugas untuk dikerjakan berdasarkan ketertarikanmu dan jumlah waktu yang kamu luangkan!.

+ +

Kamu juga dapat membantu dengan mempromosikan MDN pada blog atau website mu.

+ +

Komunitas MDN 

+ +

Komunitas kita bersifat global. Kami memiliki kontributor yang luar biasa di seluruh dunia yang bekerja dengan berbagai bahasa. Jika kamu suka untuk belajar lebih banyak tentang kita, atau kamu butuh bantuan MDN, cek discussion forum kami atau saluran IRC! Kamu juga dapat menetahui berita terbaru tentang kamu dengan me- follow akun Twitter,  @MozDevNet. Kamu juga dapat mengirimkan cuitan ke kami jika kau melihat sesuatu yang salah atau jika kamu suka memberikan masukkan (kami akan berterima kasih) pada penulis - penulis dan kontributor kami.

+ + + +

Menggunakan konten website dokumentasi MDN

+ +

Konten MDN tersedia gratis, dan berlisensi open source.

+ +

Hak cipta dan lisensi

+ +

Konten MDN semuanya tersedia dengan berbagai variasi lisensi open source. Pada bagian ini membahas tipe-tipe konten yang kami sediakan dan lisensi yang berefek di masing-masingnya.

+ +

Dokumentasi dan artikel

+ +

MDN wiki documents telah disiapkan oleh kontribusi-kontribusi penulis baik dari dalam maupun dari luar Mozilla Foundation. Kecuali diyatakan lain, konten tersedia dibawah syarat Creative Commons Attribution-ShareAlike license (CC-BY-SA), v2.5 atau versi selanjutnya. 

+ +

Ketika menggukan ulang konten MDN, kamu perlu memastikan 2 hal:

+ +
    +
  1. +

    Atribusi diberikan pada konten orisinil.

    + +

    Mohon atribut "Kontributor Mozilla" dan termasuk sebuah tautan (online) atau URL (cetak) ke halaman wiki khusus untuk sumber konten. Contoh, untuk menyediakan atribusi pada artikel ini, kamu dapat menulis:

    + +
    +

    About MDN oleh Mozilla Contributors dibawah lisensi CC-BY-SA 2.5.

    +
    + +

    Catat bahwa pada contoh, tautan "Mozilla Contributors" ke halaman official. liat Best practices for attribution untuk penjelasan lebih lanjut.

    +
    2. +
  2. +

    Penggunaan ulang di publikasikan dibawah lisensi yag sama dengan konten original—CC-BY-SA v2.5 atau versi selanjutnya.

    +
    3. +
+ +

Contoh kode dan bagian kecil

+ +

Contoh kode yang ditambahkan pada atau setelah 20 Agustus 2010 pada public domain (CC0). Tidak diperlukan pemberitahuan lisensi, tapi jika kamu butuh lisensi, kamu dapat menggunakan: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".

+ +

Contoh kode yang ditambahkan pada wiki ini sebelum 20 Agustus 2010 tersedia dibawah lisensi MIT license; Kamu harus menambahkan informasi atribusi pada MIT template: "© <tanggal revisi halaman wiki> <nama orang yang memasukkan ke wiki>

+ +

Kamu dapat menentukan lisensi mana pada sebuah contoh kode yang tersedia dibawah history artikel. Untuk menampilkan history :

+ +
    +
  1. Klik tombol Edit in wiki pada header artikel.  Tombol ini membawa kamu pada artikel sama yang editable, wiki version of MDN Web Docs (tapi tidak benar-benar menempatkan artikel pada mode edit).  
    2. +
  2. Klik ikon berbentuk roda gigi pada header di artikel wiki, dan pilih History pada menu yang muncul.
    3. +
  3. Klik View All, dan lihat revisi terbaru yang ada sebelum 20 Agustus 2010 (jika ada) .
    4. +
  4. Klik stempel tanggal dari revisi untuk melihat revisi pada artikel dihari itu .
    5. +
+ +

Jika terdapat contoh revisi yang kamu pilih, kemudian revisi itu ditambahkan sebelum lisensi dirubah dan tersedia dibawah syarat lisensi MIT. Jika contoh kode tidak ada atau tidak ada revisi sebelum 20 Agustus 2010, kemudian revisi telah ditambahkan setelah berubah dan pada domain publik.

+ +

Kontribusi

+ +

Jika kamu berharap untuk berkontribusi pada wiki ini, kamu harus membuat dokumentasi tersedia dibawah lisensi Attribution-ShareAlike (atau ada kalanya sebuah lisensi alternatif yang secara khusus pada halaman yang kamu edit), dan contoh kode tersedia dibawah Creative Commons CC-0 (sebuah dedikasi Public Domain ). Menambahkan pada wiki ini berarti kamu setuju bahwa kontribusimu akan dibuat tersedia dibawah lisensi tersebut.

+ +

Beberapa konten lama yang telah dibuat dibawah sebuah lisensi lain dari pada lisensi yang telah dijelaskan diatas; Konten ini ditunjukkan pada bagian bawah disetiap halaman melalui sebuah Alternate License Block.

+ +
+

Tidak ada halaman baru yang mungkin dibuat menggunakan  alternate licenses.

+
+ +

Hak cipta untuk kontribusi materi tetap pada penulis kecuali penulis menetapkannya pada orang lain.

+ +

Jika kamu memiliki pertanyaan atau kepentingan tentang diskusi disini, mohon hubungi MDN administrators.

+ +

Logo, merek dagang, tanda layanan dan tanda kata.

+ +
+

Hak pada merek datang, logo, dan tanda layanan pada Mozilla Foundation, serta tampilan dan nuansa pada website, tidak berada dibawah lisensi Creative Commons, dan luasnya merupakan karya penulis (seperti logo dan desain grafis), mereka tidak termasuk pada karya yang dibawah lisensi pada persyaratan tersebut. Jika kamu menggunakan tulisan pada dokumen, dan berharap menggunakan hak ini, atau kamu punya pertanyaan-pertanyaan lain tentang mematuhi persyaratan lisensi pada koleksi ini. kamu harus menghubungi Mozilla Foundation disini: licensing@mozilla.org.

+ +

Menautkan MDN

+ +

Lihat artikel ini untuk pedoman linking to MDN untuk praktek terbaik ketika menautkan.

+ +

Mengunduh konten

+ +

Halaman tunggal

+ +

Kamu dapat menyalin konten dari halaman tunggal pada MDN dengan menambahkan URL parameters untuk menetapkan format yang kamu inginkan.

+ +

Alat Third-party

+ +

Kamu dapat meliat konten MDN melalui alat third-party seperti Dash (untuk macOS) dan Zeal (untuk Linux dan Windows).

+ +

Kapeli juga mempublikasikan offline MDN docs covering HTML, CSS, JavaScript, SVG, dan XSLT.

+ +

Melaporkan masalah pada Documen Web MDN

+ +

lihat How to report a problem on MDN.

+ +

Sejarah Dokumen Web MDN

+ +

MDN Web Docs (sebelumnya Mozilla Developer Network (MDN), sebelumnya Mozilla Developer Center (MDC), a.k.a. Devmo) proyek dimulai pada awal 2005, ketika Mozilla Foundation memperoleh sebuah lisensi dari AOL untuk menggunakan konten original Netscape DevEdge. Konten DevEdge merupakan konten yang masih sangat berguna yang kemudian di migrasi sukarelawan pada wiki ini sehingga konten ini menjadi mudah diperbarui dan dipelihara.

+ +

Nama telah dirubah menjadi MDN Web Docs pada Juni 2017. Lihat The Future of MDN: A Focus on Web Docs untuk alasan dibalik keputusan ini.

+ +

Kamu dapat mencari lebih banyak sejarah MDN pada halaman 10th anniversary celebration kami, termasuk sejarah lain oleh beberapa orang yang terlibat.

+ +

Tentang Mozilla

+ +

Kalau kamu ingin mempelajari lebih banyak tentang siapa kita, bagaimana menjadi bagian dari Mozilla atau sekedar tempat menemukan kita, kamu berada di tempat yang tepat. Untuk menemukan hal yang mendorong kami dan yang membuat kami berbeda, mohon kunjungi halaman mission kita.

diff --git a/files/id/mdn/contribute/feedback/index.html b/files/id/mdn/contribute/feedback/index.html new file mode 100644 index 0000000000..fc2958dc4f --- /dev/null +++ b/files/id/mdn/contribute/feedback/index.html @@ -0,0 +1,56 @@ +--- +title: 'Project:Tanggapan' +slug: MDN/Contribute/Feedback +tags: + - Dokumentasi + - MDN + - MDN Meta + - Panduan +translation_of: MDN/Contribute/Feedback +--- +
{{MDNSidebar}}
+ +

Selamat datang di Mozilla Developer Network! Jika kamu mempunyai masalah, atau ingin meminta saran, ini tempat yang tepat. Kenyataannya kamu tertarik mengirimkan tanggapan membuat anda semakin menjadi bagian dari komunitas Mozilla, dan kami berterima kasih atas ketertarikan kamu.

+ +

Kamu memiliki beberapa pilihan untuk menawarkan wawasan, artikel ini akan membantumu melakukannya.

+ +

Memperbarui dokumentasi

+ +

Pertama-tama, jika kamu melihat masalah dalam dokumentasi, kamu boleh mengkoreksinya sendiri. Masuk dengan Persona, tekan tombol biru Edit sehingga membuka editor dan masukan kata untuk berkontribusi pada dokumentasi MDN. Dokumentasi di sini adalah pengetahuan, dan dikumpulkan oleh team relawan dan staff yang dibayar, jadi jangan malu -- tata bahasa kamu tidak harus sempurna. Kami akan membersihkan jika kamu membuat kesalahan; tak ada salahnya untuk dilakukan!

+ +

Untuk informasi lebih lanjut tentang kontribusi untuk dokumentasi MDN, lihat:

+ + + +

Gabung dalam percakapan

+ +

Bicara pada kami! Ada beberapa cara untuk terhubung dengan orang lain yang bekerja dalam konten MDN.

+ +

Obrolan

+ +

Kami menggunakan Internet Relay Chat (IRC) untuk mendiskusikan MDN dan kontennya. Kamu dapat bergabung dalam percakapan! Kami mempunyai beberapa saluran, tergantung pada minat kamu:

+ +
+
Situs MDN (#mdn)
+
Saluran ini untuk diskusi umum MDN. Bila kamu tidak yakin dimana mendapatkan bantuan, atau masalah yang melibatakan kamu, kamu dapat bertanya di sini!
+
Situs dokumentasi pengembang (#mdndev)
+
Di saluran #mdndev ini kita membahas tentang pekerjaan pengembang platform yang berjalan pada situs MDN. Bila kamu memiliki masalah tentang fungsionalitas website, atau ide tentang fitur, kamu dapat bergabung dalam pembahasan ini.
+
+ +

(Asinkron) Diskusi

+ +

Diskusi jangka panjang terjadi di forum diskusi MDN kita. Kamu bisa posting ke forum via email ke mdn@mozilla-community.org. Jika kamu bergabung dengan forum, kamu dapat memilih untuk memiliki pemberitahuan tentang diskusi yang dikirimkan kepada kamu melalui email juga.

+ +

Laporkan masalah

+ +

Masalah dokumentasi

+ +

Bila kamu melihat masalah dalam dokumentasi dan tidak bisa memperbaikinya sendiri karena berbagai alasan, kamu dapat melaporkan masalah! Kamu dapat menggunakan formulir ini untuk semua masalah dokumentasi, apakah itu koreksi sederhana atau permintaan untuk sepotong konten yang sama sekali baru. Seperti disebutkan sebelumnya, kami mengundang anda untuk berkontribusi dengan melakukan perubahan sendiri, tetapi opsi pelaporan ini tersedia untuk kamu juga.

+ +

Masalah situs

+ +

Bila kamu mengalami masalah dengan situs web MDN, atau memiliki ide untuk fitur baru dalam situs ini, anda dapat mengajukan permintaan dalam sistem Bugzilla juga.

diff --git a/files/id/mdn/contribute/getting_started/index.html b/files/id/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..04dd189549 --- /dev/null +++ b/files/id/mdn/contribute/getting_started/index.html @@ -0,0 +1,126 @@ +--- +title: Langkah Awal Di MDN +slug: MDN/Contribute/Getting_started +tags: + - Dokumentasi + - Langkah Awal + - MDN + - Panduan + - Proyek MDN +translation_of: MDN/Contribute/Getting_started +--- +
{{MDNSidebar}}
{{IncludeSubnav("/id/docs/MDN")}}
+ +

Kami adalah komunitas terbuka yang terdiri dari pengembang dan penulis sumber daya untuk Web yang lebih baik, terlepas dari merek, browser, atau perangkat. Siapa saja dapat memberikan kontribusinya dan mereka yang membuat kami semakin kuat. Bersama kita bisa melanjutkan untuk menggerakkan inovasi di Web untuk memberikan pelayanan yang lebih baik. Dimulai disini, dengan Anda.

+ +

Setiap bagian dari MDN (dokumen, demonstrasi, dan situs itu sendiri) dibuat oleh komunitas terbuka para pengembang sumber daya. Bergabunglah bersama kami!

+ +

3 langkah mudah untuk MDN

+ +

MDN adalah sebuah ensiklopedia, dimana semua orang bisa menambah dan mengedit konten. Anda tidak perlu menjadi seorang pemrogram atau mengetahui banyak hal mengenai teknologi. Ada beberapa tugas yang harus diselesaikan, mulai dari yang termudah (Mengoreksi bacaan and mengoreksi kesalahan penulisan) hingga yang kompleks (menulis dokumentasi Program aplikasi antarmuka, API).

+ +

Ikut berkontribusi sangatlah mudah dan aman. Bahkan jika Anda melakukan kesalahan, itu mudah diperbaiki. Bahkan jika Anda tidak mengetahui dengan tepat bagaimana suatu hal yang seharusnya benar, atau tata bahasa Anda tidak sepenuhnya bagus, jangan khawatir akan hal tersebut! Kami memiliki tim yang terdiri dari orang-orang yang bekerja untuk memastikan bahwa konten di MDN bisa lebih baik sebisa mungkin. Seseorang akan ikut serta untuk memastikan bahwa pekerjaan Anda rapih dan ditulis dengan benar.

+ +

Langkah 1: Membuat akun di MDN

+ +

Untuk memulai kontribusi Anda di MDN, Anda memerlukan sebuah akun di MDN. Untuk keterangan lanjut, silahkan lihat bagaimana membuat sebuah akun.

+ +

Langkah 2: Ambil sebuah tugas untuk diselesaikan

+ +

Setelah Anda selesai login, bacalah deskripsi mengenai perbedaan tipe tugas pada daftar dibawah ini, dan tentukan mana yang menjadi daya tarik bagi Anda. Anda bisa mengambil tugas manapun yang Anda sukai sebagai kontribusi yang Anda berikan.

+ +

Langkah 3: Kerjakan tugas

+ +

Setelah Anda menentukan tugas seperti apa yang Anda ingin kerjakan, temukan halaman yang spesifik, misalnya kode, atau yang lainnya untuk dikerjakan, dan lakukanlah!

+ +

Jangan khawatir mengenai kesempurnaan dalam mengerjakan; kontributor MDN lainnya ada disini untuk membantu memperbaiki kesalahan yang terjadi. Jika Anda ingin melakukan percobaan sebelum melakukan sesuatu "yang nyata", Anda bisa mengedit halaman Kotakpasir. Jika Anda memiliki pertanyaan selama melakukan pekerjaan, kunjungi halaman Komunitas untuk informasi di daftar surat menyurat (mailing lists) dan saluran bercakap (Chat Channels) dimana Anda bisa mendapatkan jawaban.

+ +

Ketika Anda selesai, silahkan ambil item lainnya, atau lihat lagi Hal lain yang Anda bisa lakukan di MDN.

+ +

Jenis-jenis tugas yang memungkinkan

+ +

Ada banyak jalan yang dapat Anda ambil untuk berkontribusi untuk MDN tergantung keahlian yang Anda persiapkan dan sukai. Walaupun beberapa tugas bisa menghilangkan semangat, kami juga memiliki banyak kegiatan mudah yang tersedia. Kegiatan tersebut setidaknya hanya membutuhkan lima menit (atau kurang!) dari waktu Anda. Bersama dengan tugas dan dengan deskripsi yang pendek, Anda akan mengetahui berapa waktu perkiraan setiap jenis tugas biasanya akan diselesaikan.

+ +

Opsi 1: Saya menyukai kata-kata

+ +

Anda bisa membantu kami meninjau atau mengedit dokumen yang ada, dan menerapkan label yang benar.

+ + + +
Catatan: Jika Anda sedang meninjau artikel atau menulis artikel yang baru, kami berharap Anda meninjau Panduan Gaya. Ini akan membantu untuk meyakinkan bahwa artikel tersebut sesuai.
+ +

Opsi 2: Saya menyukai kode

+ +

Kami membutuhkan lebih banyak sampel kode! Anda juga dapat membantu membangun perangkat halaman kami, Kuma!

+ + + +

Opsi 3: Saya menyukai kata-kata dan kode

+ +

Kami memiliki tugas-tugas yang membutuhkan teknis dan kemampuan bahasa bersama, seperti menulis artikel baru, meninjau keakurasian teknis, atau mengadapsikan dokumen-dokumen.

+ + + +

Opsi 4: Saya ingin MDN ada di bahasa saya

+ +

Semua lokalisasi and terjemahan selesai dikerjakan di MDN oleh komunitas sukarelawan kami yang mengagumkan.

+ + + +

Opsi 5: Saya menemukan beberapa kesalahan informasi tapi saya tidak tahu bagaimana memperbaikinya

+ +

Anda dapat melaporkan masalah tersebut dengan mengisi dokumentasi kesalahan. (5 menit)

+ +

Gunakan nilai bidang ini:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Bidang BugzillaNilai
produkDokumentasi Pengembang
komponen[memilih daerah yang sesuai dengan topik, atau "Umum" jika Anda tidak yakin atau Anda tidak melihat mana yang benar]
URLHalaman dimana Anda menemukan masalah
DeskripsiSebanyak yang Anda ketahui atau memiliki waktu untuk mengutarakan masalah tersebut dan dimana menemukan informasi yang benar. Ini dapat berisi orang-orang yang ("berbicara jadi-dan-jadi") sebaik mungkin seperti tautan Web.
+ +

Hal-hal lai yang bisa Anda lakukan di MDN

+ + diff --git a/files/id/mdn/contribute/howto/create_an_mdn_account/index.html b/files/id/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..aba3020441 --- /dev/null +++ b/files/id/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,44 @@ +--- +title: Bagaimana Membuat Akun MDN +slug: MDN/Contribute/Howto/Create_an_MDN_account +tags: + - Bagaimana + - Dokumentasi + - MDN Meta + - Panduan + - Pemula +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}

Untuk melakukan perubahan isi MDN, Anda membutuhkan sebuah MDN profil. Anda tidak perlu profil jika Anda hanya ingin membaca dan mencari info di kumpulan dokumen MDN. Panduan ini akan membantu anda melakukan pengaturan profil akun MDN anda.

+ +
Mengapakah MDN membutuhkan alamat email saya?
+
+Alamat email Anda digunakan dalam pemulihan akun dan juga digunakan oleh administrator MDN untuk menghubungi Anda tentang akun atau kegiatan Anda dalam situs web.
+
+Selanjutnya, Anda dapat mendaftar untuk menerima pemberitahuan (seperti pada situs-situs tertentu diubah) serta pesan (misalnya, jika Anda ingin bergabung tim tes beta kami, Anda mungkin menerima email tentang fitur-fitur baru yang membutuhkan tes).
+
+Alamat email Anda tidak akan ditampilkan pada MDN dan akan digunakan mengikuti kebijakan privasi kami saja.
+ +
    +
  1. Pada bagian atas tiap halaman MDN Anda dapat menemukan tombol "Masuk melalui". Arahkan mouse Anda pada tombol ini (atau sentuh, jika Anda menggunakan perankat seluler) untuk menampilkan daftar otentikasi layanan yang kami mendukung untuk login ke MDN.
    2. +
  2. Pilih satu layanan login dari yang tersedia ditampilan. Saat ini hanya mendukung layanan melalui akun GitHub. Perlu diingat bahwa jika anda gunakan akun GitHub, profil GitHub Anda akan terhubung dengan halaman profil MDN anda.
    3. +
  3. Ikuti halaman yang mengarah ke halaman masuk akun GitHub tersebut untuk menghubungkan ke akun MDN Anda.
    4. +
  4. Saat layanan otentikasi kembali ke akun MDN, Anda akan diminta untuk mendaftarkan satu nama pengguna dan alamat email. Nama pengguna Anda akan tampil secara publik untuk kredit kerja yang Anda lakukan. Janganlah menggunakan alamat email Anda sebagai nama pengguna.
    5. +
  5. Tekan tombol berlabel Create my MDN profile.
    6. +
  6. Jika alamat email yang Anda masukkan pada langkah 4 tidak sama dengan alamat email yang Anda gunakan dengan layanan otentikasi, silahkan verifikasi email dengan mengecek email Anda dan tekan pada link pada email konfirmasi yang telah dikirim kepada Anda.
    7. +
+ +

Begitu saja! Anda telah memiliki akun MDN dan Anda dapat segera menyunting halaman!
+
+ Anda bisa klik pada nama Anda di bagian atas setiap halaman MDN untuk melihat profil publik Anda. Dari sana, Anda bisa klik tombol Edit untuk membuat perubahan pada profil atau melakukan penambahan pada profil Anda.

+ +
+

Note: Nama pengguna baru tidak boleh berisi spasi atau karakter "@". Ingatlah nama pengguna akan ditampilkan secara publik untuk menunjukkan kreasi yang Anda buat!

+
+ +

 

diff --git a/files/id/mdn/contribute/howto/do_a_technical_review/index.html b/files/id/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..7a9ffab8a9 --- /dev/null +++ b/files/id/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,49 @@ +--- +title: How to do a technical review +slug: MDN/Contribute/Howto/Do_a_technical_review +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{MDNSidebar}}

A Technical review consists of reviewing the technical accuracy and completeness of an article and correcting it if necessary. If a writer of an article wants someone else to check the technical content of an article, the writer ticks the "Technical review" checkbox while editing. Often the writer contacts a specific engineer to perform the technical review, but anyone with technical expertise in the topic can do one.

+ +

This article describes how to perform a technical review, thereby helping to ensure that MDN's content is accurate.

+ +
+
What is the task?
+
Reviewing and correcting the articles for technical accuracy and completeness.
+
Where does it need to be done?
+
In specific articles that are marked as requiring a technical review.
+
What do you need to know to do the task?
+
+
    +
  • Expert knowledge of the topic of the article you are reviewing. If reading the article doesn't teach you anything significantly new, consider yourself an expert.
    • +
  • How to edit a wiki article on MDN.
    • +
+
+
What are the steps to do it?
+
+
    +
  1. Pick an article to review: +
      +
    1. Go to the list of pages that need technical reviews. This lists all the pages for which a technical review has been requested.
      2. +
    2. Choose a page whose topic you are very familiar with.
      3. +
    3. Click on the article link to load the page.
      4. +
    +
    2. +
  2. Read the article, paying close attention to technical details: Is the article correct? Is there anything missing? Don't hesitate to switch to a different page if the first one you choose doesn't suit you.
    3. +
  3. If there are no errors, you don't need to edit the article to mark it as reviewed. Look for the "quick review" box in the left sidebar of the page. This yellow box lists any pending reviews and lets you clear their review request flag. It looks like this if a technical review has been requested:
    + Screenshot of the sidebar's box listing reviews that have been requested and allowing the flags to be changed.
    4. +
  4. Deselect the Technical checkbox, and click Save.
    5. +
  5. If you find errors that need to be corrected, you'll be glad to know that you can also change the review request status from within the editor. Here's the workflow: +
      +
    1. To edit the page, click the Edit button near the top of the page; this puts you into the MDN editor.
      2. +
    2. Fix any technical information is not correct, and/or add any important information that is missing.
      3. +
    3. Enter a Revision Comment at the bottom of the article. This is a brief message that describes what you did, like 'Technical review completed.' If you corrected information, include that in your comment, for example 'Technical review and fixed parameter descriptions.' This helps other contributors and site editors know what you changed and why. You can also mention if there were specific bits that you didn't feel qualfied to review
      4. +
    4. Deselect the Technical box under Review Needed? just below the Revision Comment area of the page.
      5. +
    5. Click the PUBLISH button.
      6. +
    +
    6. +
+ +

Congratulations! You've finished your first technical review! Thank you for your help!

+
+
diff --git a/files/id/mdn/contribute/howto/do_an_editorial_review/index.html b/files/id/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..74aff54886 --- /dev/null +++ b/files/id/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,52 @@ +--- +title: How to do an editorial review +slug: MDN/Contribute/Howto/Do_an_editorial_review +tags: + - Dokumentasi + - MDN Meta + - Panduan +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}
{{IncludeSubnav("/id/docs/MDN")}}
+ +

Ulasan redaksi terdiri dari memperbaiki kesalahan ketik, ejaan, tata bahasa, pemakaian, atau teks yang salah dalam artikel. Tidak semua relawan ahli bahasa, tetapi terlepas dari pengetahuan mereka sangat berkontribusi pada artikel yang berguna, dimana membutuhkan salin-ubah dan koreksi cetakan.

+ +

Artikel ini menggambarkan bagaimana cara melakukan ulasan redaksi, dengan demikian membantu memastikan bahwa konten MDN akurat .

+ +
+
Apa sih tugasnya?
+
Salin-ubah dan perbaikan cetakan dari artikel yang membutuhkan ulasan redaksi.
+
Dimana ulasan redaksi dikerjakan?
+
Diantara artikel yang sudah ditandai membutuhkan ulasan redaksi.
+
Apa yang harus diketahui untuk menyelesaikan tugas?
+
Baik dalam tata bahasa dan kemampuan eja berbahasa Inggris. Seseorang pengulas redaksi memastikan tata bahasa, ejaan, dan kata dengan benar serta masuk akal, dan berikut juga MDN writing style guide.
+
Apa langkah-langkah untuk melakukannya?
+
+
    +
  1. Pilih artikel yang ingin diulas: +
      +
    1. Ke daftar artikel yang membutuhkan ulasan.  Ini berisi halaman yang diminta untuk diulas.
      2. +
    2. Pilih halaman yang meiliki judul bahasa Inggris dan yang tidak diawali Template: (Template: halaman yang mengandung MDN macro code.)
      3. +
    3. Klik tautan pada artikel untuk menampilkan halaman.
      4. +
    +
    2. +
  2. Baca artikelnya, berikan perhatian pada kesalahan ketik, ejaan, tata bahasa, atau penggunaan kata yang salah. Jangan ragu untuk beralih ke halaman yang berbeda jika pertama yang Anda pilih tidak sesuai dengan Anda .
    3. +
  3. Jika tidak terdapat kesalahan, anda tidak perlu merubah artikel untuk menandakan itu telah diulas. Cari kotak "quick review" di sisi kiri dari halaman:
    + Screenshot of the editorial review request sidebar box
    + Hapus centang pada kotak Editorial dan klik Save.
    4. +
  4. Jika anda menemukan error yang perlu di koreksi: +
      +
    1. Klik tombol Sunting di atas halaman; ini akan membawa anda ke MDN editor.
      2. +
    2. Mengoreksi kesalahan ketik, penulisan, tata bahasa, atau penggunaan kode yang error yang anda temukan. Anda tidak perlu memperbaiki semuanya, tapi pastikan anda meninggalkan permintaan editor review pada halaman yang anda rasa belum sepenuhnya sempurna untuk anda menyelesaikannya hingga keseluruhan artikel.
      3. +
    3. Masukan Revision Comment pada bawah artikel; seperti 'Editorial review: perbaikan salah ketik, tata bahasa & penulisan.' Ini memungkinkan kontributor lain dan editor situs tahu apa yang anda rubah dan kenapa.
      4. +
    4. Hapus centang pada kotak Editorial dibawah Review Needed?. Tepatnya pada bawah komentar revisi pada halaman.
      5. +
    5. Klik tombol Publish.
      6. +
    +
    5. +
+ +
+

Perubahan yang anda buat mungkin tidak langsung di tampilkan setelah disimpan; disini ada rentang waktu ketika halaman di proses dan disimpan.

+
+
+
diff --git a/files/id/mdn/contribute/howto/index.html b/files/id/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..1ac1697957 --- /dev/null +++ b/files/id/mdn/contribute/howto/index.html @@ -0,0 +1,16 @@ +--- +title: How-to guides +slug: MDN/Contribute/Howto +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto +--- +
{{MDNSidebar}}
{{IncludeSubnav("/id/docs/MDN")}}
+ +

Artikel berikut menyediakan pedoman langkah - langkah untuk mencapai tujuan tertentu ketika berkontribusi di MDN.

+ +

{{LandingPageListSubpages}}

diff --git a/files/id/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/id/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..ad89ef0686 --- /dev/null +++ b/files/id/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,46 @@ +--- +title: How to set the summary for a page +slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +
{{MDNSidebar}}

You can define the summary of a page on MDN, to be used in various ways, including in search engine results, in other MDN pages such as topical landing pages, and in tooltips. It should be text that makes sense both in the context of the page, and when displayed in other contexts, without the rest of the page content.

+

A summary can be explicitly defined within a page. If it is not explicitly defined, then typically the first sentence or so is used, which is not always the best text for this purpose.

+ + + + + + + + + + + + + + + + + + + +
What is the task?Marking the text within a page that should be used as its summary in other contexts; this task might include writing appropriate text if needed.
Where does it need to be done?In pages that lack a summary or have a less-than-great summary.
What do you need to know to do the task?Ability to use the MDN editor; good English writing skills; enough familiarity with the topic of the page to write a good summary.
What are the steps to do it? +
    +
  1. Pick a page on which to set the summary: +
      +
    1. In the MDN documentation status page, click the link under Sections for a topic that you know something about (for example, HTML).
      2. +
    2. On the topic's documentation status page, click the Pages header in the Summary table. This takes you to an index of all the pages in that topic section; it shows the page links in the left column, and the tags and summaries in the right column.
      3. +
    3. Pick a page that is missing a summary, or that has a poor summary.
      4. +
    4. Click the link to go to that page.
      5. +
    +
    2. +
  2. Click Edit to open the page in the MDN editor.
    3. +
  3. Look for a sentence or two that works as a summary out of context. If needed, edit the existing content to create or modify sentences to be a good summary.
    4. +
  4. Select the text to be used as a summary.
    5. +
  5. In the Styles widget of the editor toolbar, select SEO Summary. (In the page source, this creates a {{HTMLElement("span")}} element with class="seoSummary" around the selected text.)
    6. +
  6. Save your changes with a revision comment like "Set the page summary."
    7. +
+
+

 

+

 

+

 

diff --git a/files/id/mdn/contribute/howto/tag/index.html b/files/id/mdn/contribute/howto/tag/index.html new file mode 100644 index 0000000000..8b0d868f78 --- /dev/null +++ b/files/id/mdn/contribute/howto/tag/index.html @@ -0,0 +1,373 @@ +--- +title: How to properly tag pages +slug: MDN/Contribute/Howto/Tag +translation_of: MDN/Contribute/Howto/Tag +--- +
{{MDNSidebar}}

One important feature of MDN that helps users find content is the article tag. Each page can be tagged with zero or more tags (preferably at least one) to help categorize the content. There are many ways tags are used to help organize information on MDN; this page will help you learn how to best tag pages to help information be organized, sorted, and located by readers.

+ +

For a guide to the user interface for editing tags on pages, see the tagging section in our editor guide.

+ +

Note that proper use of tags is important; we are increasingly using automation to generate lists of content, landing pages, and cross-linking of articles. Failure to properly tag articles as indicated below can prevent articles from being listed correctly.

+ +

Ways tags are used on MDN

+ +

There are several ways tags get used on MDN:

+ +
+
Categorization
+
What type of document is it? Is it a reference? A tutorial? A landing page? These can be used when filtering searches, so they're really important!
+
Topic identification
+
What topic does the article cover? Is it about an API? The DOM? Graphics? These, too, are important, because they can be used as filters on searches.
+
Technology status
+
What's the status of the technology? Is it non-standard? Obsolete or deprecated? Experimental?
+
Skill level
+
For tutorials and guides, how advanced is the material covered by the article?
+
Document metadata
+
The writing community often needs a way to track information about pages in need of specific kinds of work. This is done using tags.
+
+ +

Tag type guide

+ +

Here's a quick guide to the types of tags and possible values for them.

+ +

Category

+ +

Tagging an article with one of these categories will help automatically constructed landing pages, table of contents pages, and the like be more accurately built. These terms will also be used by our new search system, eventually, to let the user locate reference or guide information by their choice.

+ +

The following category names are standard tagging terms used on MDN.

+ +
+
{{Tag("Intro")}}
+
The article provides introductory material about a topic. In theory there should be only one of these per technology area.
+
{{Tag("Featured")}}
+
The article is a high-importance article that should be featured in a special way on landing pages; this must be used sparingly. Only three or fewer of these should exist in any documentation area.
+
{{Tag("Reference")}}
+
The article contains reference material about an API, element, attribute, property, or the like.
+
{{Tag("Landing")}}
+
The page is a landing page.
+
{{Tag("Guide")}}
+
The article is a how-to or guide page.
+
{{Tag("Example")}}
+
The article is a code sample page, or has code samples. This shouldn't be used for very one-liner "syntax examples" but actual snippets of useful code, or for full usable samples.
+
+ +

Topic

+ +

By identifying the article's topic area, you can also help to generate better search results as well as landing pages and other navigational aids.

+ +

While there's some room for flexibility here as new topic areas are identified, we try to keep these to the names of APIs or technologies. Some useful examples:

+ + + +

In general, the name of an interface that has a number of related pages, such as Node (which has many pages for its various properties and methods) makes a good topic identification tag, as does the name of an overall technology or technology type. A page about WebGL might be tagged with Graphics and WebGL, for example, while a page about the {{HTMLElement("canvas")}} element might be tagged HTML, Element, Canvas, and Graphics.

+ +

Technology status

+ +

To help the reader understand how viable a technology is, we use tags to label pages as to what the status of the technology's specification is. This isn't as detailed as actually explaining what the spec is and where in the specification process the technology is (that's what the Specifications table is for), but it will help the reader judge, at a glance, whether using the technology described in the article is a good idea or not.

+ +

Here are possible values for these tags:

+ +
+
{{Tag("Non-standard")}}
+
Indicates that the technology or API described on the page is not part of a standard, but is considered stable in the browser or browsers that do implement it. If you don't use this tag, the assumption is made that the article covers something that's standard. The compatibility table on the page should clarify which browser(s) support this technology or API.
+
{{Tag("Deprecated")}}
+
The technology or API covered on the page has been marked as deprecated in the specification, and is expected to eventually be removed, but is generally still available in current versions of browsers.
+
{{Tag("Obsolete")}}
+
The technology or API has been deemed obsolete and has been removed (or is actively in the process of being removed) from all or most current browsers.
+
{{Tag("Experimental")}}
+
The technology is not standardized, and is an experimental technology or API that may or may not ever become part of a standard.
+
{{Tag("Needs Privileges")}}
+
The API requires privileged access to the device on which the code is running.
+
{{Tag("Certified Only")}}
+
The API only works in certified code.
+
+ +

Regardless of the use of these tags, you should be sure to include a compatibility table in your article!

+ +

Skill level

+ +

The skill level tag type is only used for guides and tutorials (that is, pages tagged Guide). It's used to help users whittle down tutorials based on their familiarity level with a technology, for example. There are three values for this:

+ +
+
{{Tag("Beginner")}}
+
Articles designed to introduce the reader to a technology they've never used or have only a passing familiarity with.
+
{{Tag("Intermediate")}}
+
Articles for users that have gotten started with the technology but aren't experts.
+
{{Tag("Advanced")}}
+
Articles about stretching the capabilities of a technology and of the reader.
+
+ +

Document metadata

+ +

The writing community uses tags to label articles as requiring specific types of work. Here's a list of the ones we use most:

+ +
+
{{Tag("junk")}}
+
The article needs to be deleted.
+
{{Tag("NeedsContent")}}
+
The article is a stub, or is otherwise lacking information. This tag means that someone should review the content and add more details and/or finish writing the article.
+
{{Tag("NeedsExample")}}
+
The article needs one or more examples created to help illustrate the article's point. These examples should use the live sample system.
+
{{Tag("NeedsLiveSamples")}}
+
The article has one or more examples that need to be updated to use the live sample system.
+
{{Tag("NeedsUpdate")}}
+
The content is out of date and needs to be updated.
+
{{Tag("l10n:exclude")}}
+
The content is not really worth localizing and will not appear on localization status pages.
+
{{Tag("l10n:priority")}}
+
The content is important and should be marked as a priority for MDN translators. Shows up in an extra priority table on localization status pages.
+
+ +

Web Literacy Map

+ +

The WebMaker project, through the Web Literacy Map, has defined a set of tags to qualify the various competencies and skills recommended to get better at reading, writing and participating on the Web. We use them on MDN to help our users to find the best resources to suit their needs:

+ +
+
{{Tag("Navigation")}}
+
The articles provides information on how to browse the web.
+
{{Tag("WebMechanics")}}
+
The article provides information on how the web is organized and how it's working.
+
{{Tag("Search")}}
+
The article provides information on how to locate information, people and resources via the web.
+
{{Tag("Credibility")}}
+
The article provides information on how to critically evaluate information found on the web.
+
{{Tag("Security")}}
+
The article provides information on how to keep systems, identities, and content safe.
+
{{Tag("Composing")}}
+
The article provides information on how to create and curate content for the web.
+
{{Tag("Remixing")}}
+
The article provides information on how to modify existing web resources to create something new.
+
{{Tag("DesignAccessibility")}}
+
The article provides information on how to create universally effective communications through web resources.
+
{{Tag("CodingScripting")}}
+
The article provides information on how to code and/or create interactive experiences on the web.
+
{{Tag("infrastructure")}}
+
The article provides information which help understanding the Internet technical stack.
+
{{Tag("Sharing")}}
+
The article provides information on how to create resources with others.
+
{{Tag("Collaborating")}}
+
The article provides information on how to work with each other.
+
{{Tag("Community")}}
+
The article provides information on how to get involved in web communities and understanding their practices.
+
{{Tag("Privacy")}}
+
The article provides information on how to examine the consequences of sharing data online.
+
{{Tag("OpenPractices")}}
+
The article provides information on how to help keep the web universally accessible.
+
+ +

Putting it all together

+ +

So, with these different types of tags, you assemble them together to get the full set of tags for a page. A few examples:

+ +
+
A tutorial about WebGL for beginners
+
Appropriate tags would be: WebGL, Graphics, Guide, Beginner
+
Reference page for the {{HTMLElement("canvas")}} element
+
This should be tagged with Canvas, HTML, Element, Graphics Reference
+
A landing page for Firefox OS developer tools
+
This should be tagged with Tools, Firefox OS, Landing
+
+ +

Tagging and search filters

+ +

The upcoming search filter implementation, which will let users restrict the results of their searches based on criteria they specify, will rely on proper tagging of pages on MDN. Here's a table of the various search filters and which tags they look for.

+ +
+

Note: If multiple tags are listed under "Tag name," that means any one or more of those tags need to be present for the article to match.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Filter groupSearch filter nameTag name
TopicOpen Web Apps{{Tag("Apps")}}
 HTML{{Tag("HTML")}}
 CSS{{Tag("CSS")}}
 JavaScript{{Tag("JavaScript")}}
 APIs and DOM{{Tag("API")}}
 Canvas{{Tag("Canvas")}}
 SVG{{Tag("SVG")}}
 MathML{{Tag("MathML")}}
 WebGL{{Tag("WebGL")}}
 XUL{{Tag("XUL")}}
 Marketplace{{Tag("Marketplace")}}
 Firefox{{Tag("Firefox")}}
 Firefox for Android{{Tag("Firefox Mobile")}}
 Firefox for Desktop{{Tag("Firefox Desktop")}}
 Firefox OS{{Tag("Firefox OS")}}
 Mobile{{Tag("Mobile")}}
 Web Development{{Tag("Web Development")}}
 Add-ons & Extensions{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}
 Games{{Tag("Games")}}
Skill levelI'm an Expert{{Tag("Advanced")}}
 Intermediate{{Tag("Intermediate")}}
 I'm Learning{{Tag("Beginner")}}
Document typeDocsThis will restrict the search to docs content, leaving out Hacks and other MDN content.
 DemosThis will include Demo Studio content in the search results.
 Tools{{Tag("Tools")}}
 Code Samples{{Tag("Example")}}
 How-To & Tutorial{{Tag("Guide")}}
 Developer ProfilesThis will include developer profiles from the MDN site in the search results.
 External ResourcesThis is something the dev team will need to figure out.
+ +

Tagging problems you can fix

+ +

There are several types of problems with tags you can help fix:

+ +
+
No tags
+
All articles should have at least one tag, and usually more than one. Generally, at a minimum, articles should have at least a "category" tag and a "topic" tag. Often other tags are appropriate as well, but if you can help us ensure that at least these are present, you'll be a documentation hero!
+
Tags that don't follow our tagging standards
+
We have a Tagging standards guide that explains how we use tags, including lists of appropriate tags to use on various types of documentation. Ideally, all articles should follow these standards, so if you see a page whose tags don't do so, please fix it!
+
Incorrect tags
+
If you're looking at an article about HTML and it's got the "JavaScript" tag on it, that's probably wrong! Similarly, if an article is about Mozilla internals but has the "Web" tag on it, that's probably wrong too. Remove these tags (and, if missing, add the right ones). This type of problem includes misspelled tags. "JavaScript" or "Javascript" for example (the latter actually will match, since tags are case-insensitive, but it's just not right!).
+
Missing tags
+
If an article has some tags, but not all of the appropriate ones, feel free to add more. Maybe you're looking at a page in the JavaScript reference, which is correctly tagged with "JavaScript" but has no other tags. Since it's a reference page, this should also have the "Reference" tag. You're invited to add it!
+
Tag spam
+
This insidious beast is the most revolting tag problem of all: some Web vermin has deposited its droppings in the tags for a page, leaving a page with tags like "Free warez!" or "Hey I was browsing your site and wanted to ask you if you could help me solve this problem I'm having with Flash crashing all the time". These need to be deleted posthaste!
+
+ +

If you see one (or more) of these problems, you can help by logging into MDN, then clicking the Edit button at the top right of the MDN window. Once the editor loads up, scroll down to the bottom of the page, where you'll see the tag box. For more details on the tagging interface, see "The tags box" in the MDN editor guide.

diff --git a/files/id/mdn/contribute/index.html b/files/id/mdn/contribute/index.html new file mode 100644 index 0000000000..4d76fd020d --- /dev/null +++ b/files/id/mdn/contribute/index.html @@ -0,0 +1,23 @@ +--- +title: Contributing to MDN +slug: MDN/Contribute +tags: + - Documentation + - Guide + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Selamat Datang! Dengan mengunjungi halaman ini, anda telah mengambil satu langkah menjadi kontributor di MDN!

+ +

Daftar paduan disini memuat semua aspek kontribusi ke MDN, diantaranya paduan style, paduan menggunakan alat dan editor kami, dan banyak lagi. Pastikan anda membaca (dan aduan tentang) Mozilla Terms sebelum mengedit atau membuat halaman.

+ +

Jika anda belum pernah berkontribusi di MDN, Paduan Memulai bisa membantu anda memulai.

+ +
 
+ +

{{LandingPageListSubPages()}}

diff --git a/files/id/mdn/contribute/processes/index.html b/files/id/mdn/contribute/processes/index.html new file mode 100644 index 0000000000..d01213c69f --- /dev/null +++ b/files/id/mdn/contribute/processes/index.html @@ -0,0 +1,23 @@ +--- +title: Proses dokumentasi +slug: MDN/Contribute/Processes +tags: + - ButuhPenerjemahan + - Landing + - MDN Meta + - Meta MDN + - NeedsTranslation + - Pendaratan + - Processes + - Proses + - RintisanTopik + - TopicStub +translation_of: MDN/Contribute/Processes +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

The MDN documentation project is enormous; there are a huge number of technologies to cover, and we have hundreds of contributors all over the world. To help bring order to chaos, we've got standard processes to follow when working on specific documentation-related tasks. Here you'll find guides to those processes.

+ +

{{LandingPageListSubPages()}}

diff --git a/files/id/mdn/contribute/tugas/index.html b/files/id/mdn/contribute/tugas/index.html new file mode 100644 index 0000000000..c72f962d66 --- /dev/null +++ b/files/id/mdn/contribute/tugas/index.html @@ -0,0 +1,25 @@ +--- +title: Tugas untuk dilakukan di MDN +slug: MDN/Contribute/Tugas +tags: + - Dokumentasi + - MDN + - Panduan + - Proyek MDC +translation_of: MDN/Contribute/Getting_started +--- +
{{MDNSidebar}}

Anda ingin membuat MDN menjadi lebih baik ? Ada banyak sekali cara untuk membantu: dari memperbaiki ejaan kalimat sampai membuat konten baru, Atau bahkan membantu mengembangkan platform Kurma dimana website ini dibuat. Panduan kontributor MDN mencakup semua hal yang bisa anda bantu dan lakukkan untuk mereka. Dibawah ini, anda bisa mencari daftar spesifikasi dari tugas yang perlu diselesaikan.

+ +

Ada banyak hal yang bisa anda lakukan untuk membantu MDN. Kami punya panduan untuk tugas yang ingin anda lakukan pada artikel Memulai MDN. Berikut caranya: 

+ + + +

Untuk ide lebih lanjut bagaimana anda bisa membantu dengan MDN, lihat Panduan kami. Anda bisa mencari daftar kategori dari halaman yang anda butuhkan untuk membantu pada bagian  Status Dokumen.

diff --git a/files/id/mdn/guidelines/index.html b/files/id/mdn/guidelines/index.html new file mode 100644 index 0000000000..fdedce143e --- /dev/null +++ b/files/id/mdn/guidelines/index.html @@ -0,0 +1,16 @@ +--- +title: MDN content and style guides +slug: MDN/Guidelines +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Guidelines +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Paduan berikut memberikan detail bagaimana dokumentasi MDN harus ditulis dan format tulisannya, juga cara bagaimana contoh kode dan konten lainnya di sampaikan. Dengan mengikuti paduan berikut, anda dapat memastikan bahwa semua material yang anda buat asli dan mudah digunakan.

+ +

{{LandingPageListSubpages}}

diff --git a/files/id/mdn/guidelines/layout/index.html b/files/id/mdn/guidelines/layout/index.html new file mode 100644 index 0000000000..9bb0fe9ea3 --- /dev/null +++ b/files/id/mdn/guidelines/layout/index.html @@ -0,0 +1,7 @@ +--- +title: MDN page layout guide +slug: MDN/Guidelines/Layout +translation_of: Archive/Meta_docs/MDN_page_layout_guide +--- +
{{MDNSidebar}}

These guides supplement the MDN style guide with specific layouts for the various types of pages on MDN. This helps contributors create new content that's structurally consistent with the rest of MDN.

+

{{LandingPageListSubpages}}

diff --git a/files/id/mdn/guidelines/writing_style_guide/index.html b/files/id/mdn/guidelines/writing_style_guide/index.html new file mode 100644 index 0000000000..b3ad6bb25f --- /dev/null +++ b/files/id/mdn/guidelines/writing_style_guide/index.html @@ -0,0 +1,802 @@ +--- +title: Writing style guide +slug: MDN/Guidelines/Writing_style_guide +tags: + - tags bahasa Indonesia +translation_of: MDN/Guidelines/Writing_style_guide +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

To present documentation in an organized, standardized, and easy-to-read manner, the MDN Web Docs style guide describes how text should be organized, spelled, formatted, and so on. These are guidelines rather than strict rules. We are more interested in content than formatting, so don't feel obligated to learn the style guide before contributing. Do not be upset or surprised, however, if an industrious volunteer later edits your work to conform to this guide.

+ +

The language aspects of this guide apply primarily to English-language documentation. Other languages may have (and are welcome to create) style guides. These should be published as subpages of the localization team's page.

+ +

For style standards that apply to content written for sites other than MDN, refer to the One Mozilla style guide.

+ +

Basics

+ +

The best place to start in any extensive publishing style guide is with some very basic text standards to help keep documentation consistent. The following sections outline some of these basics to help you.

+ +

Page titles

+ +

Page titles are used in search results and also used to structure the page hierarchy in the breadcrumb list at the top of the page. The page title (which is displayed at the top of the page and in the search results) can be different from the page "slug", which is the portion of the page's URL following "<locale>/docs/".

+ +

Title and heading capitalization

+ +

Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:

+ + + +

We have many older pages that were written before this style rule was established. Feel free to update them as needed if you like. We're gradually getting to them.

+ +

Choosing titles and slugs

+ +

Page slugs should be kept short; when creating a new level of hierarchy, the new level's component in the slug should just be a word or two.

+ +

Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.

+ +

Creating new subtrees

+ +

When you need to add some articles about a topic or subject area, you will typically do so by creating a landing page, then adding subpages for each of the individual articles. The landing page should open with a paragraph or two describing the topic or technology, then provide a list of the subpages with descriptions of each page. You can automate the insertion of pages into the list using some macros we've created.

+ +

For example, consider the JavaScript guide, which is structured as follows:

+ + + +

Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.

+ +
+

Note: Adding articles requires page creation privileges.

+
+ +

General article content guidelines

+ +

When writing any document, it's important to know how much to say. If you ramble on too long, or provide excessive detail, the article becomes tedious to read and nobody will use it. Getting the amount of coverage right is important for several reasons. Among those reasons: to ensure that the reader finds the information they truly need, and to provide enough quality material for search engines to adequately analyze and rank the article.

+ +

We'll discuss the former (providing the information the reader may need) here. To learn a little about ensuring that pages are properly classified and ranked by search engines, see the article How to write for SEO on MDN.

+ +

The goal is to write pages that include all the information that readers may need without going on too long about it all. We have a few recommendations in this area.

+ +

Consider your audience

+ +

Keep in mind that these are guidelines. Some of these tips may not apply in every case. Certainly keep your article's audience in mind. An article on advanced network techniques likely doesn't need to go into as much detail about basic networking concepts as the typical article on networking code, for instance.

+ +

Provide a useful summary

+ +

Make sure the article's summary—that is, the opening paragraph or paragraphs before the first heading—provides enough information for the reader to understand if the article is likely to be covering what they're interested in reading about.

+ +

In guide or tutorial content, the summary should let the reader know what topics will be covered and what they're already expected to know, if anything. It should mention the technology, technologies, and/or APIs that are being documented or discussed, with links to those, and it should offer hints as to the situations in which the article's contents might be useful.

+ +
Example: Too short!
+ +

This example of a summary is far too short. It leaves out too much information, such as what it means exactly to "stroke" text, where the text is drawn, and so forth.

+ +
+

CanvasRenderingContext2D.strokeText() draws a string.

+
+ +
Example: Too long!
+ +

Here, we've updated the summary, but now it's far too long. Too much detail is included, and the text gets far too much into other methods and properties.

+ +

Instead, the summary should focus on the strokeText() method, and should refer to the appropriate guide where the other details are offered.

+ +
+

When called, the Canvas 2D API method CanvasRenderingContext2D.strokeText() strokes the characters in the specified string beginning at the coordinates specified, using the current pen color. In the terminology of computer graphics, "stroking" text means to draw the outlines of the glyphs in the string without filling in the contents of each character with color.

+ +

The text is drawn using the context's current font as specified in the context's {{domxref("CanvasRenderingContext2D.font", "font")}} property.

+ +

The placement of the text relative to the specified coordinates are determined by the context's textAlign, textBaseline, and direction properties. textAlign controls the placement of the string relative to the X coordinate specified; if the value is "center", then the string is drawn starting at x - (stringWidth / 2), placing the specified X-coordinate in the middle of the string. If the value is "left", the string is drawn starting at the specified value of x. And if textAlign is "right", the text is drawn such that it ends at the specified X-coordinate.

+ +

(etc etc etc...)

+ +

You can, optionally, provide a fourth parameter that lets you specify a maximum width for the string, in pixels. If you provide this parameter, the text is compressed horizontally or scaled (or otherwise adjusted) to fit inside a space that wide when being drawn.

+ +

You can call the fillText() method to draw a string's characters as filled with color instead of only drawing the outlines of the characters.

+
+ +
Example: Much better!
+ +

Here we see a much better overview for the strokeText() method.

+ +
+

The {{domxref("CanvasRenderingContext2D")}} method strokeText(), part of the Canvas 2D API, strokes—that is, draws the outlines of—the characters of a specified string, anchored at the position indicated by the given X and Y coordinates. The text is drawn using the context's current {{domxref("CanvasRenderingContext2D.font", "font")}}, and is justified and aligned according to the {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, and {{domxref("CanvasRenderingContext2D.direction", "direction")}} properties.

+ +

For more details and further examples, see {{SectionOnPage("/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Text")}} in the Learning Area as well as our main article on the subject, Drawing text.

+
+ +

Include all relevant examples

+ +

More pages should have examples than not. The majority of pages probably deserve multiple examples, in fact.

+ +

It's important to ensure that you use examples to clarify what every parameter is used for, and to clarify any edge cases that may exist. You should also use examples to demonstrate solutions for common tasks, and you should use examples to demonstrate solutions to problems that may arise.

+ +

Each example should be preceded by text explaining what the example does and anything the reader should know before beginning to read or try out the example.

+ +
Code Examples
+ +

Each piece of code should include an explanation of how it works. Keep in mind that it may make sense to break up a large piece of code into smaller portions so they can be described individually.

+ +

The text following each piece of code should explain anything relevant, using an appropriate level of detail.

+ + + +

When using the live sample system, it's helpful to be aware that all of the {{HTMLElement("pre")}} blocks in the area that contains the sample are concatenated together before running the example, which lets you break any or all of the HTML, CSS, and JavaScript into multiple segments, each optionally with its own descriptions, headings, and so forth. This makes documenting code incredibly powerful and flexible.

+ +

Overly-short articles are hard to find

+ +

If an article is "thin"—that is, too short—it may not be indexed properly (or at all) by search engines. As a rule of thumb, the article's body text should be at least 250–300 words. Don't artificially inflate a page, but treat this guideline as a minimum target length when possible.

+ +

Sections, paragraphs, and newlines

+ +

Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels.

+ +

H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers, consider breaking up the article into several smaller articles with a landing page, and linking them together using the following macros: {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}}.

+ +

Heading dos and donts

+ + + +

The Enter (or Return) key on your keyboard starts a new paragraph. To insert a newline, rather than a new paragraph (that is, to create a {{HTMLElement("br")}} instead of a {{HTMLElement("p")}}), hold down the Shift key while pressing Enter.

+ +

Lists

+ +

Lists should be formatted and structured uniformly across all contributions. Individual list items should be written with suitable punctuation, regardless of the list format. However, depending on the type of list you are creating, you will want to adjust your writing as described in the sections below.

+ +

Bulleted lists

+ +

Bulleted lists should be used to group related pieces of concise information. Each item in the list should follow a similar sentence structure. Phrases and sentences in bulleted lists should include standard punctuation. Periods must appear at the end of each sentence in a bulleted list, including the item's final sentence, just as would be expected in a paragraph.

+ +

An example of a correctly structured bulleted list:

+ +
+

In this example we should include:

+ + +
+ +

Note how the same sentence structure repeats from bullet to bullet. In this example, each bullet point states a condition followed by a comma and a brief explanation, and each item in the list ends with a period.

+ +

Numbered lists

+ +

Numbered lists are used primarily to enumerate steps in a set of instructions. Because instructions can be complex, clarity is a priority, especially if the text in each list item is lengthy. As with bulleted lists, follow standard punctuation usage.

+ +

An example of a correctly structured numbered list:

+ +
+

In order to correctly structure a numbered list, you should:

+ +
    +
  1. Open with a heading or brief paragraph to introduce the instructions. It's important to provide the user with context before beginning the instructions.
    2. +
  2. Start creating your instructions, and keep each step in its own numbered item. Your instructions may be quite extensive, so it is important to write clearly and use correct punctuation.
    3. +
  3. After you have finished your instructions, close off the numbered list with a brief summary or explanation of the expected outcome upon completion.
    4. +
+ +

This is an example of writing a closing explanation. We have created a short numbered list that provides instructive steps to produce a numbered list with the correct formatting.

+
+ +

Note how the items in numbered lists read like short paragraphs. Because numbered lists are routinely used for instructional purposes, or to walk someone through an orderly procedure, be sure to keep each item focused: one item per number or step.

+ +

Text formatting and styles

+ +

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

+ +
The "Note Box" style is used to call out important notes, like this one.
+ +
Similarly, the "Warning Box" style creates warning boxes like this.
+ +

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, ask for help in the MDN discussion forum.

+ +

Code sample style and formatting

+ +
+

Note: This section deals with the styling/formatting of code as it appears on an MDN article. If you want guidelines on actually writing code examples, see our Code sample guidelines.

+
+ +

Tabs and line breaks

+ +

Use two spaces per tab in all code examples. Indent the code cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

+ +
if (condition) {
+  /* handle the condition */
+} else {
+  /* handle the "else" case */
+}
+
+ +

Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:

+ +
if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
+       || class.YET_ANOTHER_CONDITION ) {
+  /* something */
+}
+
+var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
+                           .createInstance(Components.interfaces.nsIToolkitProfileService);
+
+ +

Inline code formatting

+ +

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names. (This uses the {{HTMLElement("code")}} element). For example: "the frenchText() function".

+ +

Method names should be followed by a pair of parentheses: doSomethingUseful(). The parentheses help differentiate methods from other code terms.

+ +

Syntax highlighting

+ +

Screenshot of the 'Syntax Highlighter' menu.Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Select the appropriate language from the language list button (the one with the two code blocks), as seen in the screenshot to the right. This will insert a preformatted code box with line numbers and syntax highlighting for the chosen language.

+ +
+

Note: Do not use the {{HTMLElement("code")}} element inside the {{HTMLElement("pre")}} block!

+ +

While this structure is used on some sites, we do not do so on MDN; nesting these elements will break certain aspects of our styling.

+
+ +

The following example shows text with JavaScript formatting:

+ +
+
for (let i = 0, j = 9; i <= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
+
+ +

If no appropriate language is available, use ("No Highlight" in the language menu). This will result in code without syntax highlighting:

+ +
x = 42;
+ +

Syntax definitions

+ +

When writing the syntax description section of a reference page, use the "Syntax Box" option in the "Styles" drop-down menu in the editor toolbar. This creates a specially-formatted box used specifically for syntax definitions, distinguishing them from other code blocks.

+ +

Blocks not referring to code

+ +

There are a few use cases where a <pre> block does not refer to code and doesn't have syntax highlighting nor line numbers. In such cases you should add a <pre> without a class attribute. Those cases include things like tree structures:

+ +
root/
+
+  folder1/
+    file1
+
+  folder2/
+    file2
+    file3
+
+ +

To create preformatted content without syntax highlighting and line numbers click the "pre" button in the toolbar. Then start to type the text.

+ +

Styling mentions of HTML elements

+ +

There are specific rules to follow when writing about HTML elements. These rules produce consistent descriptions of elements and their components. They also ensure correct linking to detailed documentation.

+ +
+
Element names
+
Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, enclose the name in angle brackets and use the "Inline Code" style (e.g., <title>).
+
Attribute names
+
Use "Inline Code" style to put attribute names in code font. Additionally, put them in bold face when the attribute is mentioned in association with an explanation of what it does, or the first time it's used in the article.
+
Attribute definitions
+
Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages easily by simply using the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.
+
Attribute values
+
Use the "Inline Code" style to apply <code> to attribute values, and don't use quotation marks around string values, unless needed by the syntax of a code sample.
+
For example: "When the type attribute of an <input> element is set to email or tel ..."
+
+ +

Latin abbreviations

+ +

In notes and parentheses

+ + + +

In running text

+ + + +

Meanings and English equivalents of Latin abbreviations

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
+ +
+

Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another.

+ +

Also, be sure that you use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.

+
+ +

Acronyms and abbreviations

+ +

Capitalization and periods

+ +

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

+ + + +

Expansion

+ +

On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or glossary entry describing the technology.

+ + + +

Plurals of acronyms and abbreviations

+ +

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

+ + + +

"Versus", "vs.", and "v."

+ +

The contraction "vs." is preferred.

+ + + +

Capitalization

+ +

Use standard English capitalization rules in body text, and capitalize "World Wide Web." It is acceptable to use lower case for "web" (used alone or as a modifier) and "internet;" this guideline is a change from a previous version of this guide, so you may find many instances of "Web" and "Internet" on MDN. Feel free to change these as you are making other changes, but editing an article just to change capitalization is not necessary.

+ +

Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER." The only exception is that if you wish to abbreviate the name of the "Escape" key, you may use "ESC".

+ +

Certain words should always be capitalized (such as trademarks which include capital letters), or words derived from the name of a person (unless it's being used within code, and the rules of the language in which the code is written mandate lower-casing). Some examples:

+ + + +

Contractions

+ +

Our writing style tends to be casual, so you should feel free to use contractions (e.g., "don't", "can't", "shouldn't"), if you prefer.

+ +

Pluralization

+ +

Use English-style plurals, not the Latin- or Greek-influenced forms.

+ + + +

Hyphenation

+ +

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

+ + + +

Gender-neutral language

+ +

It is a good idea to use gender-neutral language in any writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So, for example, if you are talking about the actions of a specific man, usage of "he"/"his" is fine; but if the subject is a person of either gender, "he"/"his" isn't appropriate.
+
+ Let's take the following example:

+ +
+

A confirmation dialog appears, asking the user if he allows the Web page to make use of his Web cam.

+
+ +
+

A confirmation dialog appears, asking the user if she allows the Web page to make use of her Web cam.

+
+ +

Both versions are gender-specific. To fix this, use gender-neutral pronouns:

+ +
+

A confirmation dialog appears, asking the user if they allow the Web page to make use of their Web cam.

+
+ +
+

MDN allows the use of this very common syntax (which is controversial among usage authorities) to make up for the lack of a neutral gender in English.

+ +

The use of the third-person plural as a gender neutral pronoun (that is, using "they," "them", "their," and "theirs") is an accepted practice, commonly known as "singular 'they.'"

+
+ +

You can use both genders:

+ +
+

A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.

+
+ +

Making the users plural:

+ +
+

A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.

+
+ +

The best solution, of course, is to rewrite and eliminate the pronouns:

+ +
+

A confirmation dialog appears, requesting the user's permission for web cam access.

+
+ +
+

A confirmation dialog box appears, which asks the user for permission to use the web cam.

+
+ +

The last way of dealing with the problem is arguably better. It is not only grammatically more correct, but removes some of the complexity associated with dealing with genders across different languages that may have wildly different gender rules. This solution can make translation easier for both readers and localizers.

+ +

Numbers and numerals

+ +

Dates

+ +

For dates (not including dates in code samples) use the format "January 1, 1990".

+ + + +

Alternately, you can use the YYYY/MM/DD format.

+ + + +

Decades

+ +

For decades, use the format "1990s". Don't use an apostrophe.

+ + + +

Plurals of numerals

+ +

For plurals of numerals add "s". Don't use an apostrophe.

+ + + +

Commas

+ +

In running text, use commas only in five-digit and larger numbers.

+ + + +

Punctuation

+ +

Serial comma

+ +

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

+ + + +
+

This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

+
+ +

Apostrophes and quotation marks

+ +

Do not use "curly" quotes and quotation marks. On MDN, we only use straight quotes and apostrophes.

+ +

There are a couple of reasons for this.

+ +
    +
  1. We need to choose one or the other for consistency.
    2. +
  2. If curly quotes or apostrophes make their way into code snippets—even inline ones—readers may copy and paste them, expecting them to function (which they will not).
    3. +
+ + + +

Spelling

+ +

For words with variant spellings, always use their American English spelling.

+ +

In general, use the first entry at Dictionary.com, unless that entry is listed as a variant spelling or as being primarily used in a non-American form of English. For example, if you look up "behaviour", you find the phrase "Chiefly British" followed by a link to the American standard form, "behavior". Do not use variant spellings.

+ + + +

Terminology

+ +

HTML elements

+ +

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style.

+ +

When you reference a given element for the first time in a section, you should use the {{TemplateLink("HTMLElement")}} macro to create a link to the documentation for the element (unless you're writing within that element's reference document page).

+ + + +

Parameters vs. arguments

+ +

The preferred term on MDN is parameters. Please avoid the term "arguments" for consistency whenever possible.

+ +

User interface actions

+ +

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

+ + + +

Voice

+ +

While the active voice is preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

+ +

Wiki markup and usage

+ + + +

Links are a large part of what makes a wiki a powerful learning and teaching tool. Below you'll find some basic information, but you can find a complete guide to creating and editing links on MDN in our editor guide.

+ +

We encourage you to create appropriate links among articles; they help improve navigation and discoverability of content, and they provide important context to search engines like Google to help them provide better results. Every page should have a good set of links from words or phrases to other pages that expand upon the relevant ideas. This can be used both to define terms and to provide more in-depth or detailed documentation about a topic, or to connect to a related page that offers examples or information that may be of further interest.

+ +

You can easily create links not only among pages on MDN (internal links) but also to pages outside MDN (external links).

+ +

There are two ways to create links: you explicitly create a link using the Link button in the editor's toolbar—or by pressing Ctrl+K (Cmd-K on the Mac)—or you can use MDN's powerful macro system to generate links automatically or based on an input value.

+ +

When deciding what text to use as a link, there are a few guidelines you can follow:

+ + + +

URL schemes

+ +

For security reasons, you should only create links that use the following schemes:

+ + + +

Others may or may not work, but are not supported and will probably be removed by editorial staff.

+ +
+

In particular, avoid the about: or chrome:// schemes, as they will not work. Similarly, the javascript: scheme is blocked by most modern browsers, as is jar:.

+
+ +

Page tags

+ +

Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags.

+ +

You can find details on tagging in our How to properly tag pages guide.

+ +

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

+ +

Screenshot of the UX for adding and removing tags on MDN

+ +

To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.

+ +

To remove a tag, just click the little "X" icon in the tag.

+ +

Tagging pages that need work

+ +

In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.

+ +

Tagging obsolete pages

+ +

Use the following tags for pages that are not current:

+ +
+
Junk
+
Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.
+
Obsolete
+
Use for content that is technically superseded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the {{TemplateLink("obsolete_header")}} macro to put a prominent banner on the topic.
+
Archive
+
Use for content that is technically superseded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the NeedsUpdate tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the Archive section.
+
+ +

SEO summary

+ +

The SEO summary provides a short description of a page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself. (In other words, it's not just for SEO.)

+ +

By default, the first paragraph of the page is used as the SEO summary. However, you can override this behavior by marking a section with the "SEO summary" style in the WYSIWYG editor.

+ +

Landing pages

+ +

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

+ +
    +
  1. A brief (typically one paragraph) overview of what the technology is and how it's used. See {{anch("Writing a landing page overview")}} for tips.
    2. +
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. +
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. +
+ +

Creating a page link list

+ +

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

+ +
<div class="row topicpage-table">
+  <div class="section">
+    ... left column contents ...
+  </div>
+  <div class="section">
+    ... right column contents ...
+  </div>
+</div>
+ +

The left column should be a list of articles, with an <h2> header at the top of the left column explaining that it's a list of articles about the topic (e.g., "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <dl> list of articles with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

+ +

The right column should contain one or more of the following sections, in order:

+ +
+
Getting help from the community
+
This should provide information on Matrix chat rooms and mailing lists available on the topic. The heading should use the class "Community".
+
Tools
+
A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".
+
Related topics
+
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
+
+ +

{{TODO("Finish this once we finalize the landing page standards")}}

+ +

Using and inserting images

+ +

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:

+ +
    +
  1. Before uploading your image, please ensure that it's as small as possible by using an image optiization tool. +
      +
    1. For bitmap images (JPG or PNG), consider a tool such as ImageOptim (macOS), TinyPNG (web service), or Trimage (Linux).
      2. +
    2. For SVG images, use the svgo tool to optimize the SVG file before sending it. The default configuration is fine.
      3. +
    +
    2. +
  2. Attach the desired image file to the article (at the bottom of every article in edit mode). If your artwork is a diagram in SVG format (which is ideal if there is text that may need to be localized), you can't upload it directly, but you can ask an MDN admin to do it for you.
    3. +
  3. Click the "insert image" button in the MDN documentation WYSIWYG editor.
    4. +
  4. In the WYSIWYG editor, in the drop-down list of attachments, select the newly created attachment that is your image.
    5. +
  5. Press OK.
    6. +
+ +
+

Important: Remember to save any changes you've made before uploading an attachment to your article! The editor is closed during the upload process, and currently does not verify whether or not you wish to save your work when it does so.

+
+ +

Other references

+ +

Preferred style guides

+ +

If you have questions about usage and style not covered here, we recommend referring to the Microsoft Writing Style Guide or, failing that, the Chicago Manual of Style. An unofficial crib sheet for the Chicago Manual of Style is available online.

+ +

Preferred dictionary

+ +

For questions of spelling, please refer to Dictionary.com. The spelling checker for this site uses American English. Please do not use variant spellings (e.g., use color rather than colour).

+ +

We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please post them on the MDN discussion forum, so we know what should be added.

+ +

MDN-specific

+ + + +

Language, grammar, spelling

+ +

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

+ + diff --git a/files/id/mdn/index.html b/files/id/mdn/index.html new file mode 100644 index 0000000000..3d34d67796 --- /dev/null +++ b/files/id/mdn/index.html @@ -0,0 +1,46 @@ +--- +title: The MDN project +slug: MDN +tags: + - Landing + - MDN + - MDN Meta +translation_of: MDN +--- +
+

Pink or blue: what color choice for her wedding evening dress

+ +

The wedding party dresses are a class of outfits that impress with their richness and variety of models they offer. However, if there is one criterion that determines the choice of evening dress for women, it is the color. It is first she who catches the eye before any interest is paid to other details. When it comes to colors, the same wealth of possibilities can be observed at marriage. However, there are two colors that have charm and are a true expression of femininity; pink and blue.

+ +

If you want to buy khaadi pret dresses and khaadi latest summer dresses you can visit online Khaadi sale. They offer the latest eid collection and summer lawn dresses collection with good quality.

+ +

 Suki Waterhouse in a pink wedding dress & Bradley Cooper

+ +

 Pink and blue are colors that have charm in common, although each has its own characteristics. The pink evening dress is a piece that makes the difference at first sight, because of its hue. Color symbolizing romanticism, pink brings to your style, an effect of novelty and more radiance. Attractive, it seduces the eye and commands admiration. Therefore, the pink wedding dress, therefore, represents a distinguished option, which adapts to various forms of evening dresses, to allow you to be as radiant as possible. Thus, it can be short and stand out through details and embellishments, as it can belong, low-cut, open back, or openwork. It should still be noted that these multiple options of evening wear all guarantee you a clean and elegant look.

+ +

Gul Ahmed sale offers the latest dress design with good quality if you want to buy these dresses you can visit at an online store.

+ +

Jennifer Lawrence simple blue dress for wedding

+ +

 For its part, blue is one of the most popular colors for evening dresses. The wedding evening dress in blue is a refined choice, imbued with visibility and expression. It is well suited for flaunting since it sublimates your appearance by making you shine. It is characterized by the many variations in which it is available, ranging from royal blue to dark blue, not to mention pale blue. This same diversity applies to the shapes of the wedding party dress which can also be short and sexy, long and tight, decorated with rhinestones, sequins, or other embellishments according to preference. The blue evening dress ensures you a perfect and elegant outfit, with a sensual or luxurious tone depending on the model.

+ +

 Pink V-neck dress & blue vintage wedding party dress

+ +

 So, pink or blue? Opinions will certainly differ, although in either case, you will have sported an authentic and sumptuous outfit. On robespourmariage.fr, the midnight blue princess evening dress with V-neck back and guipure lace applied and the sexy pink dress with a plunging neckline are able to guide your choice.

+ +

The gray evening dress: as remarkable as it is unnoticed

+ +

A good time, a good atmosphere, and what could be better than being well undermined. For the occasion, we want to be on our 31. So the fateful question of what to wear begins to trot in the head. As soon as you decide on a gray evening dress, there are still several questions. What model, what cut, what material, what accessories and adornments, and above all that color of the dress to wear. What if we decided on a gray dress? Bland, who told you such nonsense! Did you not know that the trend is gray? Highlighted properly, it eclipses all other colors. 

+ +

A mixture of black and white, it is an interesting alternative for lovers of black & white. Know that with your gray dress, you will be of the sexiest refinement. Gray is suitable for all women regardless of their skin color. It is a neutral color to which we give the desired shine. There are several shades of it from the lightest to the darkest. So you have the possibility to choose your evening dress for weddings ranging from pearl gray to metallic gray. The materials in which it is found are numerous, each bringing its own touch to color. If you choose a maxi dress in silky satin or silk, the shine effect is more than guaranteed, especially since the gray hangs well in the light. Rather a dress in chiffon, lace, here implies a play of transparency of majestic softness.

+ +

Chic gray fluid dress Kate Middleton asymmetric style

+ +

The gray wedding dress is not just wintery, as we often think. Although so much whiteness contrasts very well with it, it goes well in all seasons, well in both hot and cool weather. To go to a party during the spring-summer, you could opt for a short gray dress in silk or satin strapless or with straps. Sheath or ballerina according to the desire of each one. A great choice for a slim person. If you want to go lengthwise, a clean fabric such as lace, tulle, or muslin, for an empire, mermaid, or duchess cut. Fall-winter, we will focus on volume, why not a gray velvet dress, mermaid cut, or a satin dress with a sumptuous drape with long sleeves and a play of transparency.

+ +

In terms of accessories, you should know that gray is very suitable for other colors but should not be overshadowed. If your dress is not already adorned with rhinestones, beading, sequins, and more, then adornments that add sparkle would be welcome. Clutch and shoe will probably match, black, white, or why not a total gray look.

+ +

Gray evening dresses the short strapless A-line heart-shaped evening dress adorned with strapless rhinestones or the pleated & appliquéd evening dress with illusion collar; yes muslin, vaporous materials are in vogue. Greek goddess or princess, that's what these two models inspire. Both in the same style, yet the first a dark ash gray and the second a very light gray. The difference is also at the level of the asymmetrically decorated bustier for the second and stepped for the first. On the online store of robespourmariage.fr, you can customize them.

+ + +
diff --git a/files/id/mdn/komunitas/conversations/index.html b/files/id/mdn/komunitas/conversations/index.html new file mode 100644 index 0000000000..d39080c8a3 --- /dev/null +++ b/files/id/mdn/komunitas/conversations/index.html @@ -0,0 +1,56 @@ +--- +title: MDN community conversations +slug: MDN/Komunitas/Conversations +tags: + - Komunitas + - MDN Meta + - Panduan +translation_of: MDN/Community/Conversations +--- +
{{MDNSidebar}}

"Pekerjaan" dari MDN terjadi di situs MDN, tetapi "Komunitas" juga juga melakukannya melalui diskusi (tidak tersinkronisasi) dan chatting serta meeting (tersinkronisasi)

+ +

Diskusi Tidak Tersinkronisasi

+ +

Untuk berbagi informasi dan berdiskusi, MDN memiliki kategori sendiri ("MDN") di forum Wacana Mozilla. Gunakan kategori ini untuk semua topik yang terkait dengan MDN, termasuk pembuatan konten dokumentasi, terjemahan, dan perawatan; Pengembangan platform MDN; Dan perencanaan, penetapan tujuan, dan pelacakan kemajuan.

+ + + +

Arsip sejarah

+ +

Sebelum Juni 2017, diskusi terkait MDN berlangsung dalam daftar surat yang dikirimkan dan diarsipkan dengan kelompok Google. Jika Anda ingin mencari diskusi terakhir ini, Anda dapat melihat grup Google yang sesuai dengan milis lama. (Ya, kita tahu nama-nama ini tumpang tindih dan membingungkan. Kecelakaan pada masa sebelumnya. maafkan hal ini.)

+ +
+
mozilla.dev.mdc a.k.a. dev-mdc
+
Daftar ini untuk diskusi tentang konten dokumentasi di MDN.
+
mozilla.dev.mdn a.k.a. dev-mdn
+
Daftar ini adalah tentang pengembangan pekerjaan pada platform Kuma yang mendasari MDN.
+
mozilla.mdn a.k.a mdn@
+
Forum ini untuk diskusi perencanaan dan prioritas tingkat tinggi, untuk situs web MDN dan prakarsa terkait lainnya.
+
+ +

Obrolan di IRC

+ +

Internet Relay Chat (IRC) adalah Metode yang kami pilih untuk obrolan harian dan diskusi real-time antar anggota komunitas. Kami menggunakan beberapa saluran (channel) pada irc.mozilla.org server untuk diskusi terkait dengan MDN.

+ +
+
#mdn
+
channel ini adalah channel utama kami untuk mendiskusikan konten MDN. Kami berbicara tentang menulis, mengatur konten, dan sebagainya. Kami juga memiliki percakapan "water cooler" disini - Ini adalah cara komunitas kami tetap terhubung atau sekedar hang out. Ini juga merupakan tempat untuk berbicara tentang aspek-aspek lain dari MDN (selain pengembangan platform), seperti Demo Studio, profil, dan sebagainya
+
#mdndev
+
Channel ini adalah di mana tim pengembang kami - orang yang menulis kode atau yang membuat MDN bekerja - hang out dan membahas pekerjaan mereka sehari-hari. Kamu dipersilakan untuk bergabung dan berpartisipasi dalam pengembangan atau hanya bertanya tentang masalah yang kamu lihat tentang software
+
+ +

Channel ini sangat aktif selama hari kerja di Amerika Utara.

+ +

Anda mungkin ingin mempelajari lebih lanjut tentang IRC dan menggunakan instalan IRC client seperti ChatZilla. Hal ini dijalankan sebagai Firefox add-on, yang membuatnya cepat dan mudah untuk menginstal dan menggunakan. Jika Anda tidak terbiasa dengan IRC, cara mudah untuk bergabung menggunakan klien IRC berbasis web seperti scrollback, yang merupakan pra-dikonfigurasi dengan mdn dan mandev saluran.

+ +

Join our meetings (and other events)

+ +

The MDN team holds a number of regular meetings that are open to the MDN community. See the MDN Meetings page on the Mozilla wiki for details on the schedule, agendas and notes, and info on how to join.

+ +

See the MDN Events calendar for these and other meetings, local meetups, and other events. The recurring meetings are summarized on the MDN Meetings wiki page.

+ +

See the MDN Events calendar for these and other meetings, doc sprints, and other events. The recurring meetings are summarized on the MDN Meetings wiki page.

diff --git a/files/id/mdn/komunitas/index.html b/files/id/mdn/komunitas/index.html new file mode 100644 index 0000000000..a60c631f76 --- /dev/null +++ b/files/id/mdn/komunitas/index.html @@ -0,0 +1,75 @@ +--- +title: Gabung di Komunitas MDN +slug: MDN/Komunitas +translation_of: MDN/Community +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Ringkasan

+ +
+

MDN (yang merupakan singkatan dari jaringan pengembang Mozilla) lebih dari wiki: Ini adalah komunitas pengembang bekerja sama untuk membuat MDN sumber daya yang luar biasa bagi para pengembang yang menggunakan teknologi Web terbuka. "Pekerjaan" yang terjadi di situs MDN, tapi "komunitas" juga terjadi melalui (asynchronous) diskusi dan (sinkron) chat online.

+
+ +

Kami akan senang jika kamu berkonstribusi di MDN, tapi kami akan lebih senang jika kamu berpartisipasi didalam komunitas MDN. Berikut adalah cara untuk bisa terhubung, ada tiga langkah mudah:

+ +
    +
  1. Buat akun MDN.
    2. +
  2. Berlangganan diskusi dev-mdc.
    3. +
  3. masuk ke IRC.
    4. +
+ +

Buat akun MDN

+ +

{{page("/en-US/docs/MDN/Contribute/Howto/Create_an_MDN_account") }}

+ +

Bergabung milis kami

+ +

untuk berbagi informasi dan memiliki diskusi yang sedang berlangsung, Mozilla memilki beberapa milis yang berguna. Berikut yang khusus untuk MDN adalah:

+ +
+
dev-mdc
+
Daftar ini adalah di mana kita memiliki diskusi yang sedang berlangsung tentang dokumentasi di MDN. Kami berbicara tentang perubahan proses, perbaikan yang kami buat, dan kami memilah-milah siapa yang ingin bekerja di mana konten. Ini sangat disarankan agar Anda bergabung di daftar ini jika Anda tertarik serius menyelam ke dokumentasi di MDN!
+
dev-mdn
+
Daftar ini adalah di mana kita memegang diskusi tentang pekerjaan pengembangan pada platform Kuma yang mendasari MDN ini. Jika anda penasaran tentang pekerjaan pengembangan yang terjadi di belakang layar, ingin terlibat dalam proses pembuatan decsisions tentang platform, atau bekerja pada patch untuk memperbaiki platform, Anda pasti harus terlibat dalam daftar ini.
+
mdn-drivers
+
Milis ini digunakan untuk membantu memutuskan prioritas pengembangan MDN. ini umumnya digunakan untuk diskusi apa yang harus dikerjakan selanjutnya, dan di mana kami pergi untuk menarik perhatian tim pengembangan ketika sebuah masalah serius perlu diperbaiki, setelah kita mengajukan bug untuk masalah ini.
+
+ +

Ada juga beberapa daftar khusus untuk masyarakat lokalisasi MDN. Jika komunitas anda sangat besar dan aktif, anda mungkin bisa mendapatkan daftar dibuat untuk komunitas anda; hanya meminta kami dan kami akan melihat ke dalamnya. Saat ini, bahasa ini memiliki daftar: Spanyol, Jepang dan Portugis.

+ +

Mengapa "dev-mdc"? Di masa lalu, ini dikenal sebagai "Mozilla Developer Center", atau MDC. Milis berawal dari masa itu, jadi dev-mdc. Ada juga dev-mdn mailing list, yaitu untuk diskusi tentang pengembangan platform Kuma yang MDN berjalan pada. Anda dipersilakan untuk bergabung itu juga, tapi itu tidak diperlukan jika Anda hanya tertarik pada konten MDN.

+ +

Masuk ke IRC

+ +

Internet Relay Chat (IRC) adalah metode pilihan untuk hari-hari chatting dan waktu nyata diskusi di antara anggota masyarakat. Kami menggunakan beberapa saluran pada irc.mozilla.org server untuk diskusi yang berkaitan dengan MDN.

+ +
+
#mdn
+
Saluran ini merupakan saluran utama untuk mendiskusikan konten MDN. Kami membahas tentang tulisan, organisasi konten dan sebagainya. Kami juga memiliki "air pendingin" dalam percakapan kami di sini - sebagai cara komunitas kami berbagi dan saling berhubungan. Juga sebagai tempat untuk membicarakan  aspek lain dari MDN (lebih dari pengembangan platform), semisal Studio Tampil, profile dan sebagainya.
+
#mdndev
+
Saluran ini adalah di mana tim-pengembangan kami orang yang menulis kode yang membuat MDN kerja-hang out dan membahas pekerjaan mereka sehari-hari. Anda dipersilakan untuk bergabung dan baik berpartisipasi dalam pembangunan atau hanya bertanya tentang masalah yang Anda lihat dengan perangkat lunak.
+
+ +

Saluran ini yang paling mungkin untuk menjadi aktif selama hari kerja di Amerika Utara.

+ +

Jika Anda tidak terbiasa dengan IRC, Cara tercepat untuk bergabung menggunakan Scrollback - a web-based IRC client yang pra-dikonfigurasi dengan mdn dan mdndev channel. Anda juga mungkin ingin Belajar tentang IRC dan menggunakan IRC client diinstal seperti ChatZilla. Hal ini dilaksanakan sebagai Firefox add-on, yang membuatnya cepat dan mudah untuk menginstal dan menggunakan.

+ +

Join our biweekly meetings (and other events)

+ +

Every other week, the MDN community holds an IRC-based meeting to exchange notes, talk about what we've been doing, and sort out what we'd like to do for the next two weeks. We also talk about development plans for the MDN platform itself, and often get updates about new and upcoming features of the site. These are casual, fun meetings, and everyone's welcome to participate.

+ +

See the MDN Community Meetings page on the Mozilla wiki for details on the schedule as well as agendas and notes for past and upcoming meetings.

+ +

See the MDN Events calendar for these and other meetings, doc sprints, and other events.

+ +

Project administrators

+ +

kamu dapat menghubungi MDN project administrator melalui email. BIla kamu ingin berbicara dengan pemimpin MDN documentation, ia bernama {{UserLink("Sheppy", "Eric Shepherd")}}, dan ia senang untuk menjawab pertanyaan yang kamu ajukan, atau membantu mencarikan orang yang lebih tepat.

+ +

Langkah Berikutnya

+ + diff --git a/files/id/mdn/user_guide/index.html b/files/id/mdn/user_guide/index.html new file mode 100644 index 0000000000..b2e20cd131 --- /dev/null +++ b/files/id/mdn/user_guide/index.html @@ -0,0 +1,13 @@ +--- +title: MDN user guide +slug: MDN/User_guide +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Tools +--- +
{{MDNSidebar}}

The Mozilla Developer Network site is an advanced system for finding, reading, and contributing to documentation and sample code for Web developers (as well as for Firefox and Firefox OS developers). The MDN user guide provides articles detailing how to use MDN to find the documentation you need, and, if you wish, how to help make the material better, more expansive, and more complete.

+

{{SubpagesWithSummaries}}

diff --git a/files/id/mdn/user_guide/menghapus_halaman/index.html b/files/id/mdn/user_guide/menghapus_halaman/index.html new file mode 100644 index 0000000000..df0ba8ef81 --- /dev/null +++ b/files/id/mdn/user_guide/menghapus_halaman/index.html @@ -0,0 +1,17 @@ +--- +title: Menghapus Halaman +slug: MDN/User_guide/Menghapus_halaman +tags: + - MDN + - Panduan + - Proyek MDC +translation_of: MDN/Tools/Page_deletion +--- +
{{MDNSidebar}}

Hanya Admin MDN yang bisa menghapus halaman. Artikel ini menjelaskan bagaimana meminta halaman yang dihapus dari MDN.

+

Untuk menyusun halaman yang ingin dihapus, Anda harus mengikuti cara berikut:

+
    +
  1. Jangan hapus atau mengganti konten dari halaman. Kami ingin memiliki catatan dari halaman seperti pertama dihapus.
    2. +
  2. Tambahkan label "sampah" di halaman tersebut. Jangan hapus label lainnya.
    3. +
  3. Jika halaman tersebut sangat mendesak untuk segera dihapus (Sebagai contoh, konten berisi hal yang tidak sopan, penghinaan, atau secara teknis berbahaya), beritahukan pada admin MDN.
    4. +
+

Admin akan menghapus halaman tersebut jika memungkinkan, setelah mengkonfirmasi bahwa penghapusan tersebut boleh dilakukan.

diff --git a/files/id/mozilla/add-ons/index.html b/files/id/mozilla/add-ons/index.html new file mode 100644 index 0000000000..f25d110860 --- /dev/null +++ b/files/id/mozilla/add-ons/index.html @@ -0,0 +1,16 @@ +--- +title: Add-ons +slug: Mozilla/Add-ons +translation_of: Mozilla/Add-ons +--- +

{{AddonSidebar}}

+ +

Add-ons Menambah fungsi baru pada aplikasi berbasis Gecko seperti Firefox, SeaMonkey dan Thunderbird. Ada dua jenis "add-on" :  Extensions menambahkan fitur ke aplikasi, sedangkan Tema merubah tampilan pada aplikasi.

+ +

Keduanya (Extention, dan Tema) ditemukan dalam addons.mozilla.org, dikenal juga sebagai AMO. Ketika Anda masukan add-ons ke AMO mereka meninjau, dan setelah melewati tinjauan maka mereka menyajikan untuk pengguna. Anda tidak harus masukan add-on ke AMO, tetapi anda lakukan, pengguna dapat menaruh keyakinan bahwa mereka telah ditinjau, dan Anda dapat keuntungan dari visibilitas AMO sebagai sumber add-on yang berguna.

+ +

Add-ons dapat mempengaruhi perilaku aplikasi host mereka. Kami telah membangun sekumpulan panduan untuk membantu memastikan bahwa mereka telah didukung mendapatkan pengalaman yang baik pada pengguna. Panduan ini digunakan untuk beberapa add-on, apakah mereka juga ditaruh di addons.mozilla.org atau tidak.

+ +

Extentions

+ +

Extention menambah fungsi dari aplikasi Mozzila seperti Firefox dan Thunderbird. Extension dapat menambahkan fitur pada peramban, seperti mengatur tab, dan mereka dapat merubah konten web untuk meningkatkan pengguanan atau keamanan website tertentu.

diff --git a/files/id/mozilla/add-ons/setting_up_extension_development_environment/index.html b/files/id/mozilla/add-ons/setting_up_extension_development_environment/index.html new file mode 100644 index 0000000000..6519e6752d --- /dev/null +++ b/files/id/mozilla/add-ons/setting_up_extension_development_environment/index.html @@ -0,0 +1,167 @@ +--- +title: Setting up an extension development environment +slug: Mozilla/Add-ons/Setting_up_extension_development_environment +translation_of: Archive/Add-ons/Setting_up_extension_development_environment +--- +

This article gives suggestions on how to set up your Mozilla application for extension development. Unless otherwise specified, these suggestions apply to both Firefox and Thunderbird as well as SeaMonkey version 2.0 and above.

+ +

Overview

+ + + +

Development profile

+ +

To avoid performance degradation from development-related prefs and extensions, and to avoid losing your personal data, you can use a separate profile for development work.

+ +

You can run two instances of Thunderbird or Firefox at the same time by using separate profiles and starting the application with parameters -no-remote and -P ProfileName. For example, the following command will start Firefox with a profile called "dev" whether an instance of Firefox is already running or not. (If there is no "dev" user yet, you'll get the profile selection screen instead, where you can create one.)

+ +

On Ubuntu (and many other Linux distributions):

+ +
/usr/bin/firefox -no-remote -P dev
+ +

On some other distributions of Linux/Unix:

+ +
/usr/local/bin/firefox -no-remote -P dev
+
+ +

On Mac OS Snow Leopard (10.6) and newer:

+ +
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &
+
+ +

On Mac OS Leopard (10.5) and older, you must request the 32-bit portion of the Universal Binary (https://bugzilla.mozilla.org/show_bug.cgi?id=622970):

+ +
arch -arch i386 /Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &
+
+ +

On Windows:

+ +
Start -> Run "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
+
+ +

On Windows 64 bit:

+ +
Start -> Run "%ProgramFiles(x86)%\Mozilla Firefox\firefox.exe" -no-remote -P dev
+ +

To start Thunderbird or SeaMonkey instead of Firefox, substitute "thunderbird" or "seamonkey" for "firefox" in the examples above.

+ +

Note that you can run Firefox using your regular profile while developing.

+ +

Parameter -P ProfileName doesn't imply -no-remote, therefore use them together. Otherwise, if you already run a Firefox instance without -no-remote, and you attempt to start another instance with -P ProfileName but again without -no-remote, that second invocation would ignore its -P ProfileName parameter, but instead it would open a new blank window for the already running instance (sharing its profile, sessions etc.).

+ +

(There is a thread in the Mozillazine forums that explains how to use both stable and development versions of Firefox to check extension compatibility. See Installing Firefox 3 or Minefield while keeping Firefox 2.)

+ +

Development command flags

+ +

As of Gecko 2 (Firefox 4), JavaScript files are cached ("fastload"). The -purgecaches command-line flag disables this behavior. Alternatively, you can set the MOZ_PURGE_CACHES environment variable. See this bug for more information.

+ +

Development preferences

+ +

There is a set of development preferences that, when enabled, allows you to view more information about application activity, thus making debugging easier. However,  these preferences can degrade performance, so you may want to use a separate development profile when you enable these preferences.

+ +

Accessing Firefox development preferences

+ +

To change preference settings in Firefox or SeaMonkey, type about:config in the Location Bar. You can also use the Extension Developer's Extension, which provides a menu interface for Firefox settings. Alternatively, install the Developer Profile to set the preferences listed below and skip the rest of this section.

+ +

Accessing Thunderbird development preferences

+ +

To change preference settings in Thunderbird, open the "Preferences" (Unix) or "Options" (Windows) interface. On the "Advanced" page, select the "General" tab then click the "Config Editor" button.

+ + + +

Not all preferences are defined by default, and are therefore not listed by default. You will have to create new (boolean) entries for them. For more information about Mozilla preferences, refer to the mozillaZine article on "about:config". (Tip: Download addon DevPrefs, it will automatically handle this)

+ + + +

Never set {{pref("nglayout.debug.disable_xul_fastload")}} to true in a production environment; it exists solely to aid in debugging. In particular, add-ons should never change this preference.
.

+ +
+

Note:The Error Console is disabled by default starting in {{Gecko("2.0")}}. You can re-enable it by changing the devtools.errorconsole.enabled preference to true and restarting the browser. With this, javascript.options.showInConsole is also set to true by default.

+
+ +
+

Tip: Download the addon DevPrefs from AMO to automatically configure the preferences.

+
+ +

Development extensions

+ +

These extensions may help you with your development.

+ + + +

Firefox extension proxy file

+ +

Extension files are normally installed in the user profile. However, it is usually easier to place extension files in a temporary location, which also protects source files from accidental deletion. This section explains how to create a proxy file that points to an extension that is installed in a location other than the user profile.

+ +
    +
  1. Get the extension ID from the extension's install.rdf file.
    2. +
  2. Create a file in the "extensions" directory under your profile directory with the extension's ID as the file name (for example "your_profile_directory/extensions/{46D1B3C0-DB7A-4b1a-863A-6EE6F77ECB58}"). (How to find your profile directory) Alternatively, rather than using a GUID, create a unique ID using the format "name@yourdomain" (for example chromebug@mydomain.com) - then the proxy filename will be same as that ID, with no curly brackets {}.
    3. +
  3. +

    The contents of this file should be the path to the directory that contains your install.rdf file, for example /full/path/to/yourExtension/ on Mac and Linux, and C:\full\path\to\yourExtension\ on Windows. Remember to include the closing slash and remove any trailing whitespace.

    + +
      +
    • Note: If you already installed the extension via XPI, you should uninstall it first before creating the pointer file.
      • +
    • Also note that the use of proxy files requires that the extension's chrome.manifest defines its chrome urls using traditional directories, rather than a JARed structure. See below.
      • +
    +
    4. +
  4. Place the file in the extensions folder of your profile and restart the application.
    5. +
+ +

Using directories rather than JARs

+ +

Regardless of whether you choose to eventually package your extension's chrome in a JAR or in directories, developing in directories is simpler. If you choose a JARed structure for releasing, you can still develop with a directory structure by editing your chrome.manifest. For example, rather than having

+ +
content	myExtension	jar:chrome/myExtension.jar!/content/
+
+ +

use

+ +
content	myExtension	chrome/content/
+
+ +

{{ h1_gecko_minversion("Preventing the first launch extension selector", "8.0") }}

+ +

Starting in Firefox 8, on the first launch of a new version of Firefox, it presents user interface letting users select which third party add-ons to keep. This lets them weed out add-ons that were installed without their knowledge, or that are no longer needed.

+ +

However, this interface can be disruptive when debugging add-ons. You can avoid this by setting the preference extensions.autoDisableScopes to 14.

+ +

{{ languages( { "de": "de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen", "fr": "fr/Configuration_d'un_environnement_de_développement_d'extensions", "ja": "ja/Setting_up_extension_development_environment", "zh-cn": "cn/Setting_up_extension_development_environment", "pl": "pl/Przygotowanie_środowiska_programowania_rozszerzenia", "ru": "ru/Настройка_среды_разработки_расширений" } ) }}

diff --git a/files/id/mozilla/add-ons/webextensions/apa_itu_webextensions/index.html b/files/id/mozilla/add-ons/webextensions/apa_itu_webextensions/index.html new file mode 100644 index 0000000000..63c093bc53 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/apa_itu_webextensions/index.html @@ -0,0 +1,34 @@ +--- +title: Apa itu WebExtensions? +slug: Mozilla/Add-ons/WebExtensions/Apa_Itu_WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

Add-ons memperluas dan memodifikasi fungsi dari web browser. Mereka ditulis menggunakan teknologi Web standar - JavaScript, HTML, dan CSS - ditambah beberapa API JavaScript. Antara lain, add-ons dapat menambahkan fitur baru untuk browser atau mengubah tampilan atau konten dari situs web tertentu.

+ +

WebExtensions adalah sistem cross-browser untuk mengembangkan browser add-ons. Untuk sebagian besar API tersebut kompatibel dengan ekstensi API yang didukung oleh Google Chrome dan Opera. Ekstensi ditulis untuk browser ini dalam banyak kasus akan berjalan di Firefox atau Microsoft Edge hanya dengan beberapa perubahan. API ini juga sepenuhnya kompatibel dengan multiprocess Firefox.

+ +

Kami juga berniat untuk memperpanjang API untuk mendukung kebutuhan para pengembang, jadi jika Anda memiliki ide, kami akan senang mendengar mereka. Anda dapat menghubungi kami dev-addons mailing list atau #webextensions di IRC.

+ +

Sebelum WebExtensions, Anda bisa mengembangkan Firefox add-ons menggunakan salah satu dari tiga sistem yang berbeda: XUL/XPCOM overlays, bootstrapped extensions, atau Add-on SDK. Di masa depan, WebExtensions akan menjadi cara yang direkomendasikan untuk mengembangkan add-ons pada Firefox, dan sistem lainnya akan dihentikan.

+ +

Apa berikutnya?

+ + diff --git a/files/id/mozilla/add-ons/webextensions/api/browsersettings/index.html b/files/id/mozilla/add-ons/webextensions/api/browsersettings/index.html new file mode 100644 index 0000000000..2372f738e0 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/api/browsersettings/index.html @@ -0,0 +1,63 @@ +--- +title: browserSettings +slug: Mozilla/Add-ons/WebExtensions/API/browserSettings +translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings +--- +
{{AddonSidebar}}
+ +
Enables an extension to modify certain global browser settings. Each property of this API is a {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} object, providing the ability to modify a particular setting.
+ +
+ +
Because these are global settings, it's possible for extensions to conflict. See the documentation for BrowserSetting.set() for details of how conflicts are handled.
+ +
+ +
+

To use this API you need to have the "browserSettings" permission.

+
+ +

Properties

+ +
+
{{WebExtAPIRef("browserSettings.allowPopupsForUserEvents")}}
+
Determines whether code running in web pages can display popups in response to user events.
+
{{WebExtAPIRef("browserSettings.cacheEnabled")}}
+
Determines whether the browser cache is enabled or not.
+
{{WebExtAPIRef("browserSettings.closeTabsByDoubleClick")}}
+
Determines whether the selected tab can be closed with a double click.
+
{{WebExtAPIRef("browserSettings.contextMenuShowEvent")}}
+
Determines the mouse event that triggers a context menu popup.
+
{{WebExtAPIRef("browserSettings.ftpProtocolEnabled")}}
+
Determines whether the FTP protocol is enabled.
+
{{WebExtAPIRef("browserSettings.homepageOverride")}}
+
Read the value of the browser's home page.
+
{{WebExtAPIRef("browserSettings.imageAnimationBehavior")}}
+
Determines how the browser treats animated images.
+
{{WebExtAPIRef("browserSettings.newTabPageOverride")}}
+
Reads the value of the browser's new tab page.
+
{{WebExtAPIRef("browserSettings.newTabPosition")}}
+
Controls the position of newly opened tabs relative to already open tabs.
+
{{WebExtAPIRef("browserSettings.openBookmarksInNewTabs")}}
+
Determines whether bookmarks are opened in the current tab or a new tab.
+
{{WebExtAPIRef("browserSettings.openSearchResultsInNewTabs")}}
+
Determines whether search results are opened in the current tab or a new tab.
+
{{WebExtAPIRef("browserSettings.openUrlbarResultsInNewTabs")}}
+
Determines whether address bar autocomplete suggestions are opened in the current tab or a new tab.
+
{{WebExtAPIRef("browserSettings.overrideDocumentColors")}}
+
Controls whether the user-chosen colors override the page's colors.
+
{{WebExtAPIRef("browserSettings.useDocumentFonts")}}
+
Controls whether the browser will use the fonts specified by a web page or use only built-in fonts.
+
{{WebExtAPIRef("browserSettings.webNotificationsDisabled")}}
+
Prevents websites from showing notifications using the Notification Web API.
+
{{WebExtAPIRef("browserSettings.zoomFullPage")}}
+
Controls whether zoom is applied to the entire page or to text only.
+
{{WebExtAPIRef("browserSettings.zoomSiteSpecific")}}
+
Controls whether page zoom is applied on a per-site or per-tab basis. If {{WebExtAPIRef("privacy.websites")}}.resistFingerprinting is true, this setting has no effect and zoom is applied on a per-tab basis.
+
+ +

Browser compatibility

+ +

{{Compat("webextensions.api.browserSettings")}}

+ +

{{WebExtExamples("h2")}}

diff --git a/files/id/mozilla/add-ons/webextensions/api/index.html b/files/id/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..9b63bd59e8 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,50 @@ +--- +title: JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +
{{AddonSidebar}}
+ +
+

The WebExtension JavaScript APIs can be used inside the add-on's background scripts and in any browser action or page action popups that the add-on defines. A few of these APIs can also be accessed by an add-on's content scripts (see the list in the content script guide).

+ +

To use the more powerful APIs you need to request permission in your add-on's manifest.json.

+ +

You can access the APIs using the browser namespace:

+ +
function logTabs(tabs) {
+  console.log(tabs);
+}
+
+browser.tabs.query({currentWindow: true}, logTabs);
+
+ +
+

Many of the APIs are asynchronous, returning a Promise:

+ +
function logCookie(c) {
+  console.log(c);
+}
+
+function logError(e) {
+  console.error(e);
+}
+
+var setCookie = browser.cookies.set(
+  {url: "https://developer.mozilla.org/"}
+);
+setCookie.then(logCookie, logError);
+
+ +
+

Note that this is different from Google Chrome's extension system, which uses the chrome namespace instead of browser, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions supports chrome and callbacks as well as browser and promises. Mozilla has also written a polyfill which enables code that uses browser and promises to work unchanged in Chrome: https://github.com/mozilla/webextension-polyfill.

+ +

Microsoft Edge uses the browser namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.

+ +

Not all browsers support all the APIs: for the details, see Browser support for JavaScript APIs.

+
+ +
{{SubpagesWithSummaries}}
diff --git a/files/id/mozilla/add-ons/webextensions/api/notifikasi/index.html b/files/id/mozilla/add-ons/webextensions/api/notifikasi/index.html new file mode 100644 index 0000000000..e4fb084bb2 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/api/notifikasi/index.html @@ -0,0 +1,62 @@ +--- +title: notifikasi +slug: Mozilla/Add-ons/WebExtensions/API/notifikasi +tags: + - API + - Add-ons + - Ekstensi + - Notifikasi + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/notifications +--- +
{{AddonSidebar}}
+ +

Tampilkan pemberitahuan kepada pengguna, menggunakan mekanisme pemberitahuan sistem operasi yang mendasarinya. Karena API ini menggunakan mekanisme pemberitahuan sistem operasi, detail tentang bagaimana pemberitahuan muncul dan berperilaku mungkin berbeda sesuai dengan sistem operasi dan pengaturan pengguna.

+ +

Untuk menggunakan API ini Anda harus memiliki izin "notifikasi"

+ +

Tipe

+ +
+
{{WebExtAPIRef("notifications.NotificationOptions")}}
+
Menentukan isi pemberitahuan.
+
{{WebExtAPIRef("notifications.TemplateType")}}
+
Jenis pemberitahuan. Misalnya, ini menentukan apakah pemberitahuan dapat memuat gambar.
+
+ +

Fungsi

+ +
+
{{WebExtAPIRef("notifications.clear()")}}
+
Hapus pemberitahuan khusus, berikan ID-nya.
+
{{WebExtAPIRef("notifications.create()")}}
+
Buat dan tampilkan pemberitahuan baru.
+
{{WebExtAPIRef("notifications.getAll()")}}
+
Dapatkan semua notifikasi.
+
{{WebExtAPIRef("notifications.update()")}}
+
Perbarui notifikasi
+
+ +

Events

+ +
+
{{WebExtAPIRef("notifications.onButtonClicked")}}
+
Dipecat ketika pengguna mengklik tombol di notifikasi.
+
{{WebExtAPIRef("notifications.onClicked")}}
+
Dipecat ketika pengguna mengklik pemberitahuan, tetapi tidak pada tombol.
+
{{WebExtAPIRef("notifications.onClosed")}}
+
Dipecat ketika pemberitahuan ditutup, baik oleh sistem atau karena pengguna memecatnya.
+
{{WebExtAPIRef("notifications.onShown")}}
+
Dipecat segera setelah pemberitahuan telah ditampilkan.
+
+ +

Kompatibilitas peramban

+ +

{{Compat("webextensions.api.notifications")}}

+ +

{{WebExtExamples("h2")}}

+ +
Ucapan terima kasih + +

API ini berdasarkan pada API Chromium chrome.notifications.

+
diff --git a/files/id/mozilla/add-ons/webextensions/api/windows/createtype/index.html b/files/id/mozilla/add-ons/webextensions/api/windows/createtype/index.html new file mode 100644 index 0000000000..569dbc0b97 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/api/windows/createtype/index.html @@ -0,0 +1,65 @@ +--- +title: windows.CreateType +slug: Mozilla/Add-ons/WebExtensions/API/windows/CreateType +translation_of: Mozilla/Add-ons/WebExtensions/API/windows/CreateType +--- +
{{AddonSidebar()}}
+ +

Menentukan jenis browser window yang akan dibuat.

+ +

Tipe

+ +

Nilai dari tipe ini adalah strings. Nilai yang tersedia adalah:

+ + + +

Browser compatibility

+ + + +

{{Compat("webextensions.api.windows.CreateType")}}

+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.windows API. This documentation is derived from windows.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/id/mozilla/add-ons/webextensions/api/windows/index.html b/files/id/mozilla/add-ons/webextensions/api/windows/index.html new file mode 100644 index 0000000000..d0611824cd --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/api/windows/index.html @@ -0,0 +1,127 @@ +--- +title: windows +slug: Mozilla/Add-ons/WebExtensions/API/windows +tags: + - API + - Add-ons + - Extensions + - Interface + - NeedsTranslation + - Non-standard + - Reference + - TopicStub + - WebExtensions + - Windows +translation_of: Mozilla/Add-ons/WebExtensions/API/windows +--- +
{{AddonSidebar}}
+ +

Interact with browser windows. You can use this API to get information about open windows and to open, modify, and close windows. You can also listen for window open, close, and activate events.

+ +

Types

+ +
+
{{WebExtAPIRef("windows.WindowType")}}
+
The type of browser window this is.
+
{{WebExtAPIRef("windows.WindowState")}}
+
The state of this browser window.
+
{{WebExtAPIRef("windows.Window")}}
+
Contains information about a browser window.
+
{{WebExtAPIRef("windows.CreateType")}}
+
Specifies the type of browser window to create.
+
+ +

Properties

+ +
+
{{WebExtAPIRef("windows.WINDOW_ID_NONE")}}
+
The windowId value that represents the absence of a browser window.
+
{{WebExtAPIRef("windows.WINDOW_ID_CURRENT")}}
+
The windowId value that represents the current window.
+
+ +

Functions

+ +
+
{{WebExtAPIRef("windows.get()")}}
+
Gets details about a window, given its ID.
+
{{WebExtAPIRef("windows.getCurrent()")}}
+
Gets the current window.
+
{{WebExtAPIRef("windows.getLastFocused()")}}
+
Gets the window that was most recently focused — typically the window 'on top'.
+
{{WebExtAPIRef("windows.getAll()")}}
+
Gets all windows.
+
{{WebExtAPIRef("windows.create()")}}
+
+

Creates a new window.

+
+
{{WebExtAPIRef("windows.update()")}}
+
Updates the properties of a window. Use this to move, resize, and (un)focus a window, etc.
+
{{WebExtAPIRef("windows.remove()")}}
+
Closes a window, and all its tabs.
+
+ +

Events

+ +
+
{{WebExtAPIRef("windows.onCreated")}}
+
Fired when a window is created.
+
{{WebExtAPIRef("windows.onRemoved")}}
+
Fired when a window is closed.
+
{{WebExtAPIRef("windows.onFocusChanged")}}
+
Fired when the currently focused window changes.
+
+ +

Browser compatibility

+ +

{{Compat("webextensions.api.windows")}}

+ + + +

Edge incompatibilities

+ +

Promises are not supported in Edge. Use callbacks instead.

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.windows API. This documentation is derived from windows.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/id/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/id/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html new file mode 100644 index 0000000000..96ab65479e --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html @@ -0,0 +1,21 @@ +--- +title: Browser support for JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +--- +
{{AddonSidebar}}
+ + + +

{{WebExtAllCompatTables}}

+ +
Acknowledgments + +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ +

See also

+ + diff --git a/files/id/mozilla/add-ons/webextensions/content_scripts/index.html b/files/id/mozilla/add-ons/webextensions/content_scripts/index.html new file mode 100644 index 0000000000..da5a653034 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/content_scripts/index.html @@ -0,0 +1,554 @@ +--- +title: Content scripts +slug: Mozilla/Add-ons/WebExtensions/Content_scripts +translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts +--- +
{{AddonSidebar}}
+ +

A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the web site itself, such as those loaded using the {{HTMLElement("script")}} element).

+ +

Background scripts can access all the WebExtension JavaScript APIs, but they can't directly access the content of web pages. So if your extension needs to do that, you need content scripts.

+ +

Just like the scripts loaded by normal web pages, content scripts can read and modify the content of their pages using the standard DOM APIs.

+ +

Content scripts can only access a small subset of the WebExtension APIs, but they can communicate with background scripts using a messaging system, and thereby indirectly access the WebExtension APIs.

+ +
+

Note that content scripts are blocked on the following domains:

+ + + +

If you try to inject a content script into a page in these domains, it fails and the page logs a CSP error.

+ +

Because these restrictions include addons.mozilla.org, users may attempt to use your extension immediately after installation—only to find that it doesn't work! You may want to add an appropriate warning, or an onboarding page to move users away from addons.mozilla.org.

+
+ +
+

Values added to the global scope of a content script with let foo or window.foo = "bar" may disappear due to bug 1408996.

+
+ +

Loading content scripts

+ +

You can load a content script into a web page in one of three ways:

+ +
    +
  1. +
    +
    At install time, into pages that match URL patterns.
    +
    Using the content_scripts key in your manifest.json, you can ask the browser to load a content script whenever the browser loads a page whose URL matches a given pattern.
    +
    +
    2. +
  2. +
    +
    At runtime, into pages that match URL patterns.
    +
    Using the {{WebExtAPIRef("contentScripts")}} API, you can ask the browser to load a content script whenever the browser loads a page whose URL matches a given pattern. (This is similar to method 1, except that you can add and remove content scripts at runtime.)
    +
    +
    3. +
  3. +
    +
    At runtime, into specific tabs.
    +
    Using the tabs.executeScript() API, you can load a content script into a specific tab whenever you want. (For example, in response to the user clicking on a browser action.)
    +
    +
    4. +
+ +

There is only one global scope per frame, per extension. This means that variables from one content script can directly be accessed by another content script, regardless of how the content script was loaded.

+ +

Using methods (1) and (2), you can only load scripts into pages whose URLs can be represented using a match pattern.

+ +

Using method (3), you can also load scripts into pages packaged with your extension, but you can't load scripts into privileged browser pages (like "about:debugging" or "about:addons").

+ +

Content script environment

+ +

DOM access

+ +

Content scripts can access and modify the page's DOM, just like normal page scripts can. They can also see any changes that were made to the DOM by page scripts.

+ +

However, content scripts get a "clean" view of the DOM. This means:

+ + + +

In Firefox, this behavior is called Xray vision.

+ +

Consider a web page like this:

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

The script page-script.js does this:

+ +
// page-script.js
+
+// add a new element to the DOM
+let 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'");
+}
+ +

Now an extension injects a content script into the page:

+ +
// content-script.js
+
+// can access and modify the DOM
+let 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()
+ +

The same is true in reverse; page scripts cannot see JavaScript properties added by content scripts.

+ +

This means that content scripts can rely on DOM properties behaving predictably, without worrying about its variables clashing with variables from the page script.

+ +

One practical consequence of this behavior is that a content script doesn't have access to any JavaScript libraries loaded by the page. So, for example, if the page includes jQuery, the content script can't see it.

+ +

If a content script needs to use a JavaScript library, then the library itself should be injected as a content script alongside the content script that wants to use it:

+ +
"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["jquery.js", "content-script.js"]
+  }
+]
+ +
+

Note: Firefox does provide some APIs that enable content scripts to access JavaScript objects created by page scripts, and to expose their own JavaScript objects to page scripts.

+ +

See Sharing objects with page scripts for more details.

+
+ +

WebExtension APIs

+ +

In addition to the standard DOM APIs, content scripts can use the following WebExtension APIs:

+ +
+
From extension:
+
+ +
+
From runtime:
+
+ +
+
From i18n:
+
+ +
+
From menus:
+
+ +
+
Everything from:
+
storage
+
+ +

XHR and Fetch

+ +

Content scripts can make requests using the normal window.XMLHttpRequest and window.fetch() APIs.

+ +
+

In Firefox, content script requests (for example, using fetch()) happen in the context of an extension, so you must provide an absolute URL to reference page content.

+ +

In Chrome, these requests happen in context of the page, so they are made to a relative URL.  For example, /api is sent to https://«current page URL»/api.

+
+ +

Content scripts get the same cross-domain privileges as the rest of the extension: so if the extension has requested cross-domain access for a domain using the permissions key in manifest.json, then its content scripts get access that domain as well.

+ +

This is accomplished by exposing more privileged XHR and fetch instances in the content script, which has the side-effect of not setting the Origin and Referer headers like a request from the page itself would; this is often preferable to prevent the request from revealing its cross-origin nature.

+ +
+

In Firefox, extensions that need to perform requests that behave as if they were sent by the content itself can use  content.XMLHttpRequest and content.fetch() instead.

+ +

For cross-browser extensions, the presence of these methods must be feature-detected.

+
+ +

Communicating with background scripts

+ +

Although content scripts can't directly use most of the WebExtension APIs, they can communicate with the extension's background scripts using the messaging APIs, and can therefore indirectly access all the same APIs that the background scripts can.

+ +

There are two basic patterns for communicating between the background scripts and content scripts:

+ + + +

One-off messages

+ +

To send one-off messages, with an optional response, you can use the following APIs:

+ + + + + + + + + + + + + + + + + + + + + +
In content scriptIn background script
Send a messagebrowser.runtime.sendMessage()browser.tabs.sendMessage()
Receive a messagebrowser.runtime.onMessagebrowser.runtime.onMessage
+ +

For example, here's a content script that listens for click events in the web page.

+ +

If the click was on a link, it sends a message to the background page with the target URL:

+ +
// content-script.js
+
+window.addEventListener("click", notifyExtension);
+
+function notifyExtension(e) {
+  if (e.target.tagName != "A") {
+    return;
+  }
+  browser.runtime.sendMessage({"url": e.target.href});
+}
+ +

The background script listens for these messages and displays a notification using the 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
+  });
+}
+
+ +

(This example code is lightly adapted from the notify-link-clicks-i18n example on GitHub.)

+ +

Connection-based messaging

+ +

Sending one-off messages can get cumbersome if you are exchanging a lot of messages between a background script and a content script. So an alternative pattern is to establish a longer-lived connection between the two contexts, and use this connection to exchange messages.

+ +

Both sides have a runtime.Port object, which they can use to exchange messages.

+ +

To create the connection:

+ + + +

This returns a runtime.Port object.

+ + + +

Once each side has a port, the two sides can:

+ + + +

For example, as soon as it loads, the following content script:

+ + + +
// content-script.js
+
+let 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!"});
+});
+ +

The corresponding background script:

+ + + +
// background-script.js
+
+let portFromCS;
+
+function connected(p) {
+  portFromCS = p;
+  portFromCS.postMessage({greeting: "hi there content script!"});
+  portFromCS.onMessage.addListener(function(m) {
+    portFromCS.postMessage({greeting: "In background script, received message from content script:" + m.greeting});
+  });
+}
+
+browser.runtime.onConnect.addListener(connected);
+
+browser.browserAction.onClicked.addListener(function() {
+  portFromCS.postMessage({greeting: "they clicked the button!"});
+});
+
+ +

Multiple content scripts

+ +

If you have multiple content scripts communicating at the same time, you might want to store connections to them in an array.

+ + + +
// background-script.js
+
+let 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!"})
+    })
+});
+
+ + + +

Choosing between one-off messages and connection-based messaging

+ +

The choice between one-off and connection-based messaging depends on how your extension expects to make use of messaging.

+ +

The recommended best practices are:

+ +
+
Use one-off messages when…
+
+
    +
  • Only one response is expected to a message.
    • +
  • A small number of scripts listen to receive messages ({{WebExtAPIRef("runtime.onMessage")}} calls).
    • +
+
+
Use connection-based messaging when…
+
+
    +
  • Scripts engage in sessions where multiple messages are exchanged.
    • +
  • The extension need to know about task progress, needs to know if a task is interrupted, or may want to interrupt a task initiated using messaging.
    • +
+
+
+ +

Communicating with the web page

+ +

By default, content scripts don't get access to objects created by page scripts. However, they can communicate with page scripts using the DOM window.postMessage and window.addEventListener APIs.

+ +

For example:

+ +
// page-script.js
+
+let 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 + "\"");
+  }
+});
+ +

For a complete working example of this, visit the demo page on GitHub and follow the instructions.

+ +
+

Be very careful when interacting with untrusted web content in this manner! Extensions are privileged code which can have powerful capabilities and hostile web pages can easily trick them into accessing those capabilities.

+ +

To give a trivial example, suppose the content script code that receives the message does something like this:

+ +
// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &&
+      event.data.direction   &&
+      event.data.direction == "from-page-script") {
+    eval(event.data.message);
+  }
+});
+ +

Now the page script can run any code with all the privileges of the content script.

+
+ +

Using eval() in content scripts

+ +
+
In Chrome
+
{{jsxref("eval")}} always runs code in the context of the content script, not in the context of the page.
+
In Firefox
+
+

If you call eval(), it runs code in the context of the content script.

+ +

If you call window.eval(), it runs code in the context of the page.

+
+
+ +

For example, consider a content script like this:

+ +
// 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"
+}, "*");
+ +

This code just creates some variables x and y using window.eval() and eval(),  logs their values, and then messages the page.

+ +

On receiving the message, the page script logs the same variables:

+ +
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, this produces output like this:
+
+ 
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, this produces output like this:
+
+ 
In content script, window.x: undefined
+In content script, window.y: 2
+In page script, window.x: 1
+In page script, window.y: undefined
+
+
+ +

The same applies to setTimeout(), setInterval(), and Function().

+ +
+

Be very careful when running code in the context of the page! 

+ +

The page's environment is controlled by potentially malicious web pages, which can redefine objects you interact with to behave in unexpected ways:

+ +
// page.js redefines console.log
+
+let original = console.log;
+
+console.log = function() {
+  original(true);
+}
+
+ + +
// content-script.js calls the redefined version
+
+window.eval('console.log(false)');
+
+
diff --git a/files/id/mozilla/add-ons/webextensions/index.html b/files/id/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..a486f8391c --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,91 @@ +--- +title: WebExtensions +slug: Mozilla/Add-ons/WebExtensions +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/WebExtensions +--- +
{{AddonSidebar}}
+ +

WebExtensions adalah sistem cross-browser untuk mengembangkan browser add-ons. Untuk sebagian besar API tersebut kompatibel dengan extension API yang didukung oleh Google Chrome dan Opera. Ekstensi ditulis untuk browser ini dalam banyak kasus akan berjalan di Firefox atau Microsoft Edge hanya dengan beberapa perubahan. API ini juga sepenuhnya kompatibel dengan multiprocess Firefox.

+ +

Kami juga berniat untuk memperpanjang API untuk mendukung kebutuhan para pengembang, jadi jika Anda memiliki ide, kami akan senang mendengar mereka. Anda dapat menghubungi kami dev-addons mailing list atau #webextensions di IRC.

+ +
+
+

Memulai

+ + + +

Bagaimana

+ + + +

Konsep

+ + + +

Porting

+ + + +

Alur Kerja Firefox

+ + +
+ +
+

Reference

+ + + +

JavaScript APIs

+ +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}
+ +

Manifest keys

+ +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}
+
+
diff --git a/files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..27204f8504 --- /dev/null +++ b/files/id/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,153 @@ +--- +title: WebExtensions Pertama Anda +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +

Dalam artikel ini kita akan mulai menciptakan WebExtension untuk Firefox, dari awal sampai akhir. add-on ini hanya menambahkan garis merah untuk setiap halaman yang dimuat dari "mozilla.org" atau subdomainnya.

+ +

Kode sumber untuk contoh ini ada pada GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Pertama, anda membutuhkan Firefox versi 45 atau lebih baru.

+ + + +

Buat sebuah directory baru dan arahkan kesana:

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

Sekarang buat file baru dengan nama "manifest.json" di dalam folder "borderify". Berikan kode seperti berikut:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Adds a red border to all webpages matching mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

Kunci yang paling menarik di sini adalah content_scripts, yang memberitahu Firefox untuk memuat script ke Halaman web dengan URL yang cocok dengan pola tertentu. Dalam hal ini, Kita akan meminta Firefox untuk memuat script yang di disebut "borderify.js" ke semua halaman HTTP atau HTTPS yang disajikan dari "mozilla.org" atau subdomainnya.

+ + + +
+

Jika anda menggunakan Firefox versi 48 kebawah, Anda juga akan memerlukan key tambahan yang disebut applications:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@example.com",
+    "strict_min_version": "42.0",
+    "strict_max_version": "50.*",
+    "update_url": "https://example.com/updates.json"
+  }
+}
+
+ +

icons/border-48.png

+ +

Add-on harus memiliki ikon. Ini akan ditampilkan di sebelah list add-on di Add-ons Manager. Manifest.json menjanjikan bahwa kita akan memiliki ikon di "icons/border-48.png".

+ +

Membuat sebuah folder "ikon" pada folder "borderify". Simpan ikon dengan nama "border-48.png".  Anda dapat menggunakan salah satu dari contoh kami, yang diambil dari ikon Google Material Design iconset, dan digunakan di bawah ketentuan lisensi Creative Commons Attribution-ShareAlike.

+ +

Jika Anda memilih untuk menggunakan ikon Anda sendiri, itu harus berukuran 48x48 pixel. Anda juga bisa menggunakan ikon 96x96 pixel, untuk display resolusi tinggi, dan jika Anda melakukan hal ini akan ditentukan property 96 milik ikon objek di manifest.json:

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

Atau, Anda bisa menggunakan file SVG, dan itu akan ditingkatkan dengan benar.

+ + + +

borderify.js

+ +

Akhirnya, buat file dengan nama "borderify.js" pada folder "borderify". Berikan kode seperti berikut:

+ +
document.body.style.border = "5px solid red";
+ +

Script ini akan dimuat ke dalam halaman yang cocok dengan pola yang diberikan dalam key content_scripts pada manifest.json. Script memiliki akses langsung ke dokumen, seperti script dimuat oleh halaman itu sendiri.

+ + + +

Trying it out

+ +

Pertama, periksa bahwa Anda memiliki file yang tepat di tempat yang tepat:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Pemasangan

+ +

Buka "about:debugging" di Firefox, klik "Load Temporary Add-on" dan pilih file pada folder add-on anda:

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

Add-on kini akan diinstal, dan akan tetap sampai Anda me-restart Firefox.

+ +

Atau, Anda dapat menjalankan WebExtension dari baris perintah menggunakan web-ext tool.

+ +

Testing

+ +

Sekarang coba kunjungi halaman dengan domain "mozilla.org", dan Anda akan melihat garis merah melingkar pada halaman:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

Jangan mencobanya pada addons.mozilla.org! skrip konten saat ini diblokir pada domain tersebut..

+
+ +

Coba bereksperimen sedikit. Edit script konten untuk mengubah warna garis, atau melakukan sesuatu yang lain untuk konten halaman. Simpan script konten, kemudian muat kembali file add-on dengan mengklik button "Reload" pada about:debugging. Anda dapat melihat perubahan segera.

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Packaging dan publishing

+ +

Bagi orang lain yang akan untuk menggunakan add-on, Anda perlu memaketkan itu dan mengirimkannya ke Mozilla untuk penandaan. Untuk mempelajari lebih lanjut tentang itu, lihat "Publishing your WebExtension".

+ +

Apa berikutnya?

+ +

Sekarang Anda punya ide dari proses pengembangan WebExtension untuk Firefox, coba:

+ + diff --git a/files/id/mozilla/connect/index.html b/files/id/mozilla/connect/index.html new file mode 100644 index 0000000000..e9d3f28280 --- /dev/null +++ b/files/id/mozilla/connect/index.html @@ -0,0 +1,95 @@ +--- +title: Connect with Mozilla +slug: Mozilla/Connect +translation_of: Mozilla/Connect +--- +
+

Aktifkan, menginspirasi dan berkolaborasi untuk membuat Web platform utama yang digunakan untuk menciptakan pengalaman di semua perangkat yang terhubung.

+
+ + +
+
+
+
+

Blog Hacks

+ +

Sebuah sumber daya utama bagi orang untuk mengembangkan Open Web, blog Mozilla Hacks menawarkan berita dan diskusi tentang terbaru dalam teknologi Web dan fitur browser.

+ +
Baca sekarang
+
+
+ +
+
+

Bantuan Q & A

+ +

Diskusikan Web dan Web aplikasi pada Stack Overflow, di mana Anda dapat bertukar pikiran dengan pengembang web lainnya. {{anch ("diskusi Developer", "Cari Q & A di bawah")}}

+ +
Mozilla Q & A pada Stack Overflow
+
+
+ +
+
+

Bergabunglah MDN

+ +

Mendaftar untuk MDN! Anda akan dapat mengedit dokumentasi di sini, membuat profil untuk memamerkan pekerjaan Anda, dan mendapatkan akses ke fitur dari waktu ke waktu seperti yang kita menggulung mereka keluar.

+ +
Bergabung atau masuk
+
+
+
+ +
+

Terhubung dengan Mozilla

+ +

Pengembang menciptakan masa depan dengan membangun layanan dan aplikasi untuk orang di seluruh dunia. Tujuan Hubungan Pengembang Mozilla adalah untuk membantu pengembang untuk menggunakan teknologi web terbuka dan standar untuk berhasil dalam mencapai tujuan mereka. Selain dokumentasi di sini di MDN, kami menawarkan bantuan dan sumber lainnya menuju tujuan ini, melalui berbagai saluran. Kami mengundang Anda untuk menghubungkan, belajar, dan berbagi pengetahuan Anda sendiri.

+ +

Kami menawarkan bantuan melalui Q & A pada Stack Overflow, untuk memecahkan masalah teknis yang spesifik dan tantangan yang mungkin Anda miliki. Kami juga memiliki newsletter menjaga Anda informasi tentang kejadian terbaru dalam adegan web sekitar aplikasi web dan banyak lagi. Langganan Apps & Hacks buletin.

+ +

Kami memiliki banyak rencana dan ide-ide untuk iteratif memperluas Hubungan Pengembang penawaran kami, dan kami ingin Anda terlibat seperti yang kita melakukannya! Jadi, ikuti tag pada Stack Overflow , berlangganan ke blog Hacks , berlangganan newsletter, dan mendaftar untuk sebuah account !

+
+ +
+
+

Q & A pada Stack Overflow Lihat semua Q & A ...

+ +

Kami memiliki Q & A untuk membahas tantangan dan masalah ketika mengembangkan, khususnya untuk Firefox OS dan Open Web di ponsel. Ini tersedia di Stack Overflow di bawah URL mudah http://stackoverflow.com/r/mozilla .

+ + +
Bentuk Stack
+ +

Terbaru Q & A Topik

+
+ +
 
+
+ +

Pengembang pada lokakarya Firefox OS di Madrid.

+ +
+
+

Dimana Mozilla? Lihat peserta dan rincian pada halaman Acara kami ...

+ +

Berikut ini adalah daftar peristiwa di mana perwakilan Mozilla akan berbicara. Pastikan untuk berbicara dengan mereka!

+
+ +
+

Sumber lainnya

+ + +
+
+
+ +

 

diff --git a/files/id/mozilla/firefox/edisi_pengembang/index.html b/files/id/mozilla/firefox/edisi_pengembang/index.html new file mode 100644 index 0000000000..6f3a9a91bf --- /dev/null +++ b/files/id/mozilla/firefox/edisi_pengembang/index.html @@ -0,0 +1,57 @@ +--- +title: Edisi Pengembang +slug: Mozilla/Firefox/Edisi_Pengembang +translation_of: Mozilla/Firefox/Developer_Edition +--- +
{{FirefoxSidebar}}

+ +

Sebuah versi Firefox yang dikhususkan untuk para web developer.

+ +

Unduh Firefox Edisi Pengembang

+ +
+
+
+

Fitur Firefox terbaru

+ +

Firefox Edisi Pengembang menggantikan kanal Aurora pada Proses Rilis Firefox. Seperti Aurora, fitur-fitur baru akan tersedia pada versi ini setiap enam minggu, setelah distabilkan dari Nightly build.

+ +

Dengan menggunakan Edisi Pengembang, anda mendapatkan akses ke fitur peralatan dan platform 12 minggu lebih awal dari rilis Firefox utama.

+ +

Temukan apa yang baru dalam Edisi Pengembang.

+
+ +
+

Peralatan pengembang eksperimental

+ +

Kami akan memasukkan fitur-fitur eksperimental yang belum masuk di versi biasa.

+ +

Sebagai contoh, Edisi Pengembang memasukkan Firefox Tools Adapter, yang dapat membuat anda terhubung dengan peralatan pengembang Firefox ke browser lain seperti Chrome pada Android atau Safari di iOS.

+
+
+ +
+
+

Profil terpisah

+ +

Firefox Edisi Pengembang menggunakan profil terpisah dari versi Firefox lain yang terinstall di komputer anda. Artinya, anda bisa menjalankan Edisi Pengembang bersamaan dengan Firefox versi biasa atau Beta.

+
+ +
+

Dibuat untuk pengembang web

+ +

Kami telah mengatur beberapa pengaturan untuk pengembang web. Sebagai contoh, chrome dan debug remote telah diaktifkan dari awal.

+
+
+ +
+
+

Tema tersendiri

+ +

Termasuk di dalamnya akses cepat ke fitur pengembang.

+
+ +
 
+
+ +

 

diff --git a/files/id/mozilla/firefox/index.html b/files/id/mozilla/firefox/index.html new file mode 100644 index 0000000000..cf3e7acc66 --- /dev/null +++ b/files/id/mozilla/firefox/index.html @@ -0,0 +1,75 @@ +--- +title: Firefox +slug: Mozilla/Firefox +tags: + - Firefox + - Landing + - Mozilla +translation_of: Mozilla/Firefox +--- +
{{FirefoxSidebar}}
+ +

Firefox adalah peramban populer milik Mozilla, tersedia untuk berbagai platforms, termasuk Windows, Mac OS X dan Linux pada desktop dan perangkat mobile Android. Dengan kompatibilitas luas, teknologi Web terbaru dan alat pengembangan yang kuat, Firefox adalah yang terbesar untuk pengguna dan pengembang web.

+ +

Firefox adalah sebuah proyek open sorce, sebagian besar kode ini disumbangkan oleh komunitas besar relawan kami. Di sini Anda akan belajar cara untuk berkontribusi pada proyek Firefox dan Anda juga akan menemukan link ke informasi tentang pembuatan add-ons Firefox, memakai alat pengembang Firefox, dan tugas lainnya.

+ +
+

Pelajari cara membuat add-ons Firefox, cara mengembangkan dan membuat Firefox sendiri, dan cara internal dari Firefox dan subproyek-nya bekerja.

+
+ + + +

+ +

Channel Firefox

+ +

Firefox tersedia dalam lima channel.

+ +

Firefox Nightly

+ +

Each night we build Firefox from the latest code in mozilla-central. These builds are for Firefox developers or those who want to try out the very latest cutting edge features while they're still under active development.

+ +

Download Firefox Nightly

+ +

Firefox Developer Edition

+ +

This is a version of Firefox tailored for developers. Every six weeks, we take the features in Firefox Nightly that are stable enough and create a new version of Firefox Developer Edition. We also add some extra features for developers that are only available in this channel.

+ +

Learn more about Firefox Developer Edition.

+ +

Download Firefox Developer Edition

+ +

Firefox Beta

+ +

After spending six weeks in Firefox Developer Edition, we take the features that are stable enough, and create a new version of Firefox Beta. Firefox Beta builds are for Firefox enthusiasts to test what's destined to become the next released Firefox version.

+ +

Download Firefox Beta

+ +

Firefox

+ +

After stabilizing for another six weeks in Beta, we're ready to ship the new features to hundreds of millions of users in a new release version of Firefox.

+ +

Download Firefox

+ +

Firefox Extended Support Release (ESR)

+ +

Firefox ESR is the long-term support edition of Firefox for desktop for use by organizations including schools, universities, businesses and others who need extended support for mass deployments.

+ +

Learn more about Firefox Extended Support Release.

+ +

Download Firefox ESR

+ +

Firefox profiles

+ +

If you find yourself using multiple Firefox channels—or just multiple configurations—on a regular basis, you should read how to use multiple Firefox profiles by turning Firefox's Profile Manager and other profile management tools to your advantage.

diff --git a/files/id/mozilla/firefox/privacy/index.html b/files/id/mozilla/firefox/privacy/index.html new file mode 100644 index 0000000000..fe82422987 --- /dev/null +++ b/files/id/mozilla/firefox/privacy/index.html @@ -0,0 +1,22 @@ +--- +title: Privacy +slug: Mozilla/Firefox/Privacy +tags: + - NeedsTranslation + - Privacy + - Security + - TopicStub +translation_of: Mozilla/Firefox/Privacy +--- +
{{FirefoxSidebar}}
+ +

This document lists privacy-related documentation.

+ +

{{ ListSubpages () }}

+ +

See also

+ + diff --git a/files/id/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html b/files/id/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html new file mode 100644 index 0000000000..f4415aedc2 --- /dev/null +++ b/files/id/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html @@ -0,0 +1,33 @@ +--- +title: 'Blocked: Storage access requests from trackers' +slug: Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker +--- +
{{FirefoxSidebar}}
+ +

back up from last user

+ +

What went wrong?

+ +

A request to access cookies or storage was blocked because the browser identified it as coming from a tracker and content blocking is enabled.

+ +

The permission can be changed or removed by:

+ + + +

If the blocked resource doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to the relevant element.

+ +

See also

+ + diff --git a/files/id/mozilla/firefox/privacy/storage_access_policy/errors/index.html b/files/id/mozilla/firefox/privacy/storage_access_policy/errors/index.html new file mode 100644 index 0000000000..a1e1f54a75 --- /dev/null +++ b/files/id/mozilla/firefox/privacy/storage_access_policy/errors/index.html @@ -0,0 +1,24 @@ +--- +title: Errors +slug: Mozilla/Firefox/Privacy/Storage_access_policy/Errors +tags: + - Cookies + - Errors + - NeedsTranslation + - Storage + - TopicStub + - storage access policy +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy/Errors +--- +
{{FirefoxSidebar}}
+ +

This page lists the errors that can be raised due to Firefox's anti-tracking functionality, governed by the Storage access policy. You can find further information about them by clicking on the links below:

+ +

A request to access cookies or storage was blocked because

+ + diff --git a/files/id/mozilla/firefox/privacy/storage_access_policy/index.html b/files/id/mozilla/firefox/privacy/storage_access_policy/index.html new file mode 100644 index 0000000000..801d5bfad1 --- /dev/null +++ b/files/id/mozilla/firefox/privacy/storage_access_policy/index.html @@ -0,0 +1,261 @@ +--- +title: 'Storage access policy: Block cookies from trackers' +slug: Mozilla/Firefox/Privacy/Storage_access_policy +tags: + - NeedsTranslation + - Privacy + - TopicStub + - storage access policy + - tracking protection +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy +--- +
{{FirefoxSidebar}}
+ +

Firefox includes a new storage access policy that blocks cookies and other site data from third-party tracking resources. This policy is designed as an alternative to the older cookie policies, which have been available in Firefox for many years. This policy protects against cross-site tracking while minimizing the site breakage associated with traditional cookie blocking. This article explains how the policy works and how you can test it.

+ +

Testing in Firefox

+ +

This cookie policy has been available in Firefox since version 63. This documentation describes the policy that we intend to ship to Firefox Release users, but may not match what is implemented in the current Release version of Firefox. That's because we document new aspects of the policy as soon as they land in Firefox Nightly, our pre-release channel. Firefox Nightly may also contain experimental features that we don't yet plan to ship to Release users; experimental features will not be included in this documentation, but may nevertheless impact the functionality of domains classified as trackers.

+ +

We recommend sites test with Firefox Nightly, as this includes the newest version of our protections. As described above, note that Nightly may include additional protections that end up getting removed or changed before they reach our Release users. We’ll keep this page updated with the newest information as we strengthen our protections.

+ +

These protections are on by default in Nightly. The cookie policy can be enabled in other versions of Firefox through the Content Blocking settings (these steps will vary by version; the linked documentation includes a dropdown to select the appropriate Firefox version).

+ +

Report Broken Sites

+ +

If you find a website broken as a result of this change, file a bug under the Tracking Protection component within the Firefox product on Bugzilla. Alternatively you can report broken sites directly in Firefox by clicking "Report a Problem" in the Content Blocking section of the Control Center (this shortcut may not be available in all versions of Firefox).

+ +

Tracking protection explained

+ +

How does Firefox determine which resources are tracking resources?

+ +

Firefox uses the Tracking Protection list to determine which resources are tracking resources. The Tracking Protection list is maintained by Disconnect. When the list is applied in Firefox, we make two important changes:

+ + + +

Firefox uses the built-in Tracking Protection URL classifier to determine which resources match the tracking protection list. Domains are matched against the list in accordance with the SafeBrowsing v4 specification. Specifically, we check the exact hostname of the resource against the list, as well as the last four hostnames formed by starting with the last five components and successively removing the leading component. Consider the following examples:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hostname on the listHostname of resourceMatched
example.comexample.comYes
example.coma.b.example.comYes
blah.example.comexample.comNo
a.b.example.comc.d.example.comNo
blah.example.comfoo.blah.example.comYes
+ +

What does the storage access policy block?

+ +

The storage access policy blocks resources identified as trackers from accessing their cookies and other site storage when they are loaded in a third-party context. This prevents those resources from retrieving tracking identifiers stored in cookies or site storage and using them to identify users across visits to multiple first parties. Specifically, Firefox does this by imposing the following restrictions:

+ +

Cookies:

+ + + +

DOM Storage:

+ + + +

Messaging and Workers:

+ + + +

DOM Cache:

+ + + +

Browser caches:

+ + + +

Network connections:

+ + + +

What is not blocked by the policy?

+ +
    +
  1. This policy does not currently restrict third-party storage access for resources that are not classified as tracking resources. We may choose to apply additional restrictions to third-party storage access in the future.
    2. +
  2. The restrictions applied by the policy will not prevent third-party scripts classified as tracking resources from accessing storage in the main context of the page. These scripts can continue to use storage scoped to the top-level origin.
    3. +
  3. Origins classified as trackers will have access to their own storage when they are loaded in a first-party context.
    4. +
  4. Cross-origin resources loaded from the same eTLD+1 as the top-level context will still have access to their storage.
    5. +
  5. Origins normally classified as trackers will not be blocked if the top-level page origin is determined to be from the same organization as them.
    6. +
+ +

Storage access grants

+ +

In order to improve web compatibility and permit third-party integrations that require storage access, Firefox will grant storage access scoped to the first party for a particular third-party origin as described in this section. Currently, Firefox includes some web compatibility heuristics that grant storage access to third-party resources classified as trackers when a user interacts with those third parties. We do this when we expect that not granting access would cause the web page to break. We also support an initial implementation of the Storage Access API, through which embedded {{htmlelement("iframe")}}s can request storage access by calling {{domxref("Document.requestStorageAccess()")}}. Although both of these approaches provide the same level of storage access, we recommend third parties switch to using the Storage Access API in order to guarantee their access to storage.

+ +

Automatic storage access upon interaction

+ +

In order to improve web compatibility, Firefox currently includes some heuristics to grant storage access automatically to third parties that receive user interaction. These heuristics are intended to allow some third-party integrations that are common on the web to continue to function. They are intended to be temporary and will be removed in a future version of Firefox. They should not be relied upon for current and future web development.

+ +

Third-party storage access may be granted to resources that have been classified as tracking resources when a user gesture triggers a pop-up window that has opener access to the originating document. When that occurs, there are two possible ways a third-party origin can be granted access:

+ + + +

Scope of storage access

+ +

When storage access is granted, it is scoped to the origin of the opener document or subdomains of that origin. Access that is granted on the subdomain of an origin does not extend to the top-level origin. As an example, if a resource from tracker.example is granted storage access on foo.example.com, then tracker.example will be able to access its cookies on bar.foo.example.com but not example.com. Instead, if tracker.example were granted access on example.com it would be able to access its storage on bar.foo.example.com, foo.example.com, and example.com.

+ +

When storage access is granted to tracker.example on example.com, all resources loaded from tracker.example on any top-level document loaded from example.com are immediately given storage access. This includes all resources loaded in the main context of the page, embedded <iframe>s, and resources loaded within embedded <iframe>s. Storage access is not extended to other resources loaded on example.com (e.g. other-tracker.example), nor to other first parties on which tracker.example is embedded (e.g. example.org).

+ +

Storage access grants extend into the first level of nested contexts, but no further. This means that <iframe>s embedded in the main context of the page and loaded from a domain classified as a tracker will have full access to all storage locations accessible through JavaScript. Similarly, requests for resources loaded in <iframe>s embedded in the main context of the page will have access to HTTP cookies. However, further nested contexts, including but not limited to those from the origin classified as a tracker, will not be granted storage access.

+ +

Consider the following embedding scenarios on a top-level page loaded from example.com on which tracker.example has been granted storage access.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Embeddingtracker.example resource storage access
An image is loaded from tracker.example and embedded in the main context of example.com.HTTP: Yes
+ JS: N/A
example.com embeds an <iframe> from example.org. That <iframe> goes on to load an image from tracker.example.HTTP: Yes
+ JS: N/A
example.com embeds an <iframe> from example.org. That <iframe> goes on to embed an <iframe> from tracker.example.HTTP: Yes
+ JS: No
example.com embeds an <iframe> from tracker.example.HTTP: Yes
+ JS: Yes
example.com embeds an <iframe> from example.com (same origin). The nested <iframe> embeds an <iframe> from tracker.example.HTTP: Yes
+ JS: No
+ +

Storage access expiration

+ +

The storage access grant expires after 30 days. Domains classified as tracking resources may be granted third-party storage access on multiple first parties, and the storage permission for each party expires independently. The above heuristics will also serve to extend the lifetime of a third-party storage permission on origins that have already been granted access.  Each time the heuristic is activated, or a success call to the Storage Access API is made, the pre-existing storage access expiration will be extended by 30 days, counting from the time the previous access was granted.

+ +

Please note that in the future we expect to make changes to how long storage access will remain valid for.  As mentioned before, the way to know that you will be able to use storage as a third-party going forward will be using the Storage Access API.

+ +

Debugging

+ +

We encourage site owners to test their sites, particularly those that rely on third-party content integrations. We’ve added several new features to Firefox to make testing easier.

+ +

Developer Tools notifications

+ +

The Network Monitor in Firefox Developer Tools now includes an indicator for all resource requests that have been classified as tracking resources. This indicator is shown as a shield icon in the domain column. In the sample image below, trackertest.org is classified as a tracking resource, while the request to example.com is not.

+ +

network requests in Firefox devtools indicating which ones are tracking resources with a small shield icon

+ +

Adding custom domains to the Tracking Protection list

+ +

Curious how things will work if a third-party domain on your site were classified as a tracker? We’ve added a preference that allows you to add custom domains to the Tracking Protection URL classifier. To do so:

+ +
    +
  1. Type about:config in your address bar. If you are presented with a page that warns you "This may void your warranty!", click "I accept the risk!"
    2. +
  2. Right click on the next page and click "New" > "String".
    3. +
  3. For the preference name enter "urlclassifier.trackingAnnotationTable.testEntries".
    4. +
  4. For the preference value enter comma separated origins that you’d like to have classified as trackers. E.g. "example.net,example.org".
    5. +
+ +
+

Warning: Be sure to remove these entries after you have finished testing.

+
+ +

FAQ

+ +

This cookie policy has the potential to lead to site breakage, but has been designed to allow common third-party integrations to continue to work while preventing cross-site tracking. In this section we describe the functionality you can expect in different integration scenarios.

+ +

Will this storage access policy block ads from displaying on my website?

+ +

No — this feature only restricts access to cookies and site data that can be used to track users across websites. Blocking tracking identifiers does not prevent the display of advertisements.

+ +

I use a third-party analytics service that is classified as a tracker. Will I still receive analytics data?

+ +

This depends on how the third-party analytics service is implemented. Third-party analytics providers will no longer be able to user their third-party storage to collect data. This means that providers using cookies which are scoped to their third-party domain, or local storage and other site data stored under their origin, will no longer have access to those identifiers across other websites.

+ +

If these services are embedded into the main context of the page, they can continue to use first-party cookies and site storage to track users across page visits on that specific first-party domain.

+ +

I use third-party services for social login, like, and share button integration. Will my users still be able to make use of these services?

+ +

This depends on how the social integration is implemented. We expect that many of the popular social integrations will continue to function as they do under Firefox’s current cookie policy with some minor differences in the user experience.

+ +

A social content provider that is classified as a tracker will not have access to their third-party cookies when the user first visits a new first party. Thus, the user may appear logged out to the service despite being logged in when they visit the provider’s website directly. Depending on the type of integration, the user may have to take some action to interact with the social content provider before the provider is given access to their cookies. For example:

+ + + +

After these interactions, the provider will receive third-party storage access if they prompt the user in a way that is captured by the storage access activation heuristics described above. These providers should consider switching to explicitly request storage access through the Storage Access API as soon as possible. An initial implementation of this API is currently available in Nightly.

+ +

I use third-party pixels and other tools to measure the effectiveness of my ad campaigns. Will I still be able to measure the conversion rate of my ads?

+ +

This depends on how the third party has implemented the measurement tool, but generally ad conversion measurement will be more difficult. Consider the following examples:

+ +
    +
  1. You run an ad on a social media website that is seen several times by a user, but never clicked. That user later visits your website, which includes a conversion tracking tag from the same social media website. This type of conversion is often referred to as a “view-through conversion.” Since the social media website does not have access to their third-party storage, they will not recognize the user as the same user that saw the advertisements on their website and the conversion will not be tracked. We expect that most view-through conversion tracking techniques will no longer work, including those offered by display networks.
    2. +
  2. You run an ad on a display network or social media website that is clicked by a user. That user lands on your website, which includes a conversion tracking tag from the same website that displayed your ad. This type of conversion is often referred to as a “click-through conversion.” Since the social media site or display network will not have access to their third-party storage, they will not recognize the user as the same user that saw the advertisements on their website and the conversion will not be tracked. We expect that this version of click-through conversion will no longer work.
    3. +
  3. You run an ad that appears on a social media website. A user clicks on your advertisement and is taken to a landing page that contains a conversion tracking tag from the third-party network. On the social media website, the network annotates the advertisement landing page URL with a query parameter that signals that the visit was the result of a click on an advertisement. On your website, the display network’s tag checks the URL query parameters and saves any ad tracking parameters to first-party storage. If a user later completes a conversion event, the network’s tag checks first-party storage to determine which click (or clicks) was responsible for the visit. We expect that click-through conversion implemented in this way will continue to work.
    4. +
diff --git a/files/id/mozilla/firefox/releases/index.html b/files/id/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..af6a0b7c7a --- /dev/null +++ b/files/id/mozilla/firefox/releases/index.html @@ -0,0 +1,12 @@ +--- +title: Firefox developer release notes +slug: Mozilla/Firefox/Releases +tags: + - Firefox + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox/Releases +--- +
{{FirefoxSidebar}}

Dibawah ini anda bisa menemukan link ke catatan rilis pengembang untuk setiap rilis Firefox. Catatan yang ditulis dengan cinta ini memberikan detail tentang fitur dan API yang ditambahkan dan di tingkatkan serta bug yang disingkirkan pada setiap versi Firefox. Semuanya ditulis untuk memberikan informasi yang diperlukan oleh pengembang. Terima kasih.

+ +
{{ListSubpages("",1,1,1)}}
diff --git a/files/id/mozilla/gecko/index.html b/files/id/mozilla/gecko/index.html new file mode 100644 index 0000000000..a2fb0f60ab --- /dev/null +++ b/files/id/mozilla/gecko/index.html @@ -0,0 +1,69 @@ +--- +title: Gecko +slug: Mozilla/Gecko +translation_of: Mozilla/Gecko +--- +
+

Gecko adalah nama dari pengatur tata letak yang dikembangkan oleh Proyek Mozilla. It was originally named NGLayout. Gecko's function is to read web content, such as HTML, CSS, XUL, JavaScript, and render it on the user's screen or print it. In XUL-based applications Gecko is used to render the application's user interface as well.

+
+

Gecko di gunakan di banyak aplikasi, termasuk beberapa peramban (browsers), contohnya Firefox, SeaMonkey, dll. (for a complete list, please refer to Wikipedia's article on Gecko.) Products using the same version of Gecko have identical support for standards.

+ + + + + + + +
+

Documentation

+
+
+ Gecko FAQ
+
+ Frequently asked questions about Gecko.
+
+ Gecko DOM reference
+
+ Reference to the DOM.
+
+ Gecko event reference
+
+ Reference to events used within Gecko and Mozilla applications; for web-standard DOM events, see the DOM event reference.
+
+ Gecko versions and application versions
+
+ Versions of Gecko and the applications they're used in.
+
+ Introduction to Layout in Mozilla
+
+ Tech Talk on layout.
+
+ Embedding Mozilla
+
+ Using Gecko in your own application.
+
+ Character sets supported by Gecko
+
+ A list of the character sets supported by Gecko.
+
+ HTML parser threading
+
+ Description of multithreading in the HTML parser.
+
+ {{interwiki('wikimo', 'Gecko:Home_Page', 'Gecko Homepage on MozillaWiki')}}
+
+ Home for the active developers. Roadmaps and more up-to-date resources.
+
+

View All...

+ 		+

Community

+
    +
  • View Mozilla forums... {{DiscussionList("dev-tech-layout", "mozilla.dev.tech.layout")}}
    • +
+ +
+
+ Web Standards, XUL, Embedding Mozilla, Developing Mozilla
+
+
+

 

diff --git a/files/id/mozilla/index.html b/files/id/mozilla/index.html new file mode 100644 index 0000000000..ecbabce71c --- /dev/null +++ b/files/id/mozilla/index.html @@ -0,0 +1,13 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +
+ {{draft}}
+

This will soon be an awesome landing page for Mozilla internals. For now, it's not.

+
+ {{LandingPageListSubpages}}
diff --git a/files/id/mozilla/localization/index.html b/files/id/mozilla/localization/index.html new file mode 100644 index 0000000000..ea5809653c --- /dev/null +++ b/files/id/mozilla/localization/index.html @@ -0,0 +1,30 @@ +--- +title: Pelokalan di Mozilla +slug: Mozilla/Localization +tags: + - ButuhPenerjemahan + - Landing + - Localization + - Mozilla + - NeedsTranslation + - Pelokalan + - Pendaratan + - Penerjemahan + - RintisanTopik + - TopicStub + - Translation + - l10n +translation_of: Mozilla/Localization +--- +

Pelokalan (L10n) adalah proses menerjemahkan antarmuka pengguna sebuah perangkat lunak dari satu bahasa ke bahasa yang lain, dan menyesuaikannya agar sesuai dengan kultur setempat. Semua sumber daya tersedia bagi siapa saja yang berminat dalam aspek teknis untuk terlibat dalam pelokalan, bagi para pengembang dan semua kontributor.

+ +

Lihat pula

+ +
+
Pelokalan MDN
+
Sumber daya ini mencakup pelokalan dokumentasi di MDN.
+
Pelokalan aplikasi
+
Kumpulan dokumen ini secara khusus digunakan untuk pelokalan aplikasi, termasuk aplikasi Firefox OS.
+
L10n
+
Dokumen referensi untuk API L10n yang digunakan Mozilla dalam pelokalan Firefox OS.
+
diff --git a/files/id/mozilla/localization/localizing_with_verbatim/index.html b/files/id/mozilla/localization/localizing_with_verbatim/index.html new file mode 100644 index 0000000000..14e7d665b6 --- /dev/null +++ b/files/id/mozilla/localization/localizing_with_verbatim/index.html @@ -0,0 +1,158 @@ +--- +title: Pelokalan dengan Verbatim +slug: Mozilla/Localization/Localizing_with_Verbatim +translation_of: Mozilla/Localization/Localizing_with_Pontoon +--- +

Verbatim adalah suatu alat berbasis web (khususnya Pootle yang dihosting Mozilla) untuk melokalkan konten web Mozilla. Alat tersebut dapat digunakan untuk melokalkan berbagai proyek Mozilla dan mampu mendukung bahasa apa saja. Panduan ini akan membantu Anda melakukan pelokalan proyek Mozilla pada umumnya. Tutorial yang disediakan di sini akan memberi Anda landasan yang bermanfaat dalam penggunaan Verbatim untuk melokalkan setiap proyek Mozilla yang ingin Anda ikut sertakan dalam upaya komunitas pelokalan Anda. Kita akan membahas proyek-proyek khusus yang sedang menggunakan Verbatim, cara untuk mulai menggunakan Verbatim, dan pekerjaan-pekerjaan yang umumnya dapat diselesaikan dengan Verbatim.

+ +

Mulai menggunakan Verbatim

+ +

Being that it is web-based, localizers must be online to use Verbatim. There are essentially two ways to get started with Verbatim: start a new localization or join an existing localization community's efforts. Either way, you will need to follow these steps to start working on a Verbatim project.

+ + + + + + + + + + + + + + + + + + + + + + +
Start a new localization on VerbatimJoin an existing localization on Verbatim
+
    +
  1. Point your browser to http://localize.mozilla.org. This is where Verbatim is hosted.
    2. +
+ 		+
    +
  1. Point your browser to http://localize.mozilla.org. This is where Verbatim is hosted.
    2. +
+
+
    +
  1. If you have a Mozilla LDAP account, simply sign in using your LDAP credentials. If not, register for an account and sign in once you've completed registration. The links for both are located in the upper right-hand corner of the page.
    2. +
+ 		+
    +
  1. If you have a Mozilla LDAP account, simply sign in using your LDAP credentials. If not, register for an account and sign in once you've completed registration. The links for both are located in the upper right-hand corner of the page.
    2. +
+
+
    +
  1. File a bug using this prefilled bugzilla template. Add your locale code and language name to the description field, as well as any other information you'd like to share. See the following example.
    2. +
+ +
Example: I would like to request that you add the en-US as a new localization in Verbatim. The langauge is English. Also, I like cookies. Lots and lots of cookies. I can easily be motivated by any and all baked goods.
+ 		+
    +
  1. Contact the community to find out which projects they need you to concentrate your efforts on. See the following example for what you could include in your email to the community leaders.
    2. +
+ +
Example: I would like to join your localization efforts on Verbatim for this locale. Where would be the best place for me to begin? Also, I would like to buy you a drink to encourage you to let me join the team!
+
+ +

Now that you're registered and logged in, we'll outline the general translation workflow, using the MDN project page as our example.

+ +

Translating

+ +

First thing's first, you need to find untranslated source strings to translate.

+ +
    +
  1. Navigate to the MDN project page.
    2. +
  2. Select your language from the Overview tab.
    3. +
  3. Now click on the the Translate tab. This tab will display the directories for the MDN user interface.
    4. +
  4. Select the LC Messages directory. This is where the project's .po files containing translatable strings are located. You will now see an overview of each .po file.
    5. +
  5. In the summary column, the number of words untranslated will be shown as a link. Click on that link to be taken directly to the first string that needs to be translated.
    6. +
+ +

Now you're ready to contribute translations and you won't believe how easy it is. Check it out, you can contribute translations in two simple steps:

+ +
    +
  1. Simply type your translation in the box to below the English string
    2. +
  2. Select Suggest. If you have approval permission, select Submit. You will then be taken to the next string that needs translating.
    3. +
  3. Hooray! You're translating! Repeat steps one and two for the remainder of the untranslated strings.
    4. +
+ +
Note: If you come across a string that already has a suggested translation, you can still suggest your own translation if you feel it is more accurate.
+ +

Some extra cool features on Verbatim

+ +

Here are a few additional items about the Verbatim interface that you should be aware of. Some of these can be seen in the screen shot below.

+ +

Translate Tab.png

+ + + +

Additional tasks

+ +

If you are a localizer with approval priviledges, here are a few more tasks that you should be aware of.

+ +

Review suggested translations

+ +
    +
  1. Click on the Review tab. It will show how many strings are waiting for review for each .po file.Review Tab1.png
    2. +
  2. Select Review suggestions to start approving suggestions. It will take you to the first string that needs to be reviewed.
    3. +
  3. You can accept the suggestion by clicking the green checkmark or reject the suggestion by clicking the red X (see the screen shot from the previous section).
    4. +
+ +

It is important to note that only submitted strings will appear in your localized pages. Neither suggestions nor fuzzy strings will appear. Before commiting your final localized product, make sure all strings have been submitted.

+ +

Using VCS on Verbatim

+ +

VCS (Version Control System) is the repository system we use to update the project's strings as well as push your translated content onto the web. The difference between the two tasks is simply a matter of which link to click.

+ +

VCS.pngTo push your strings onto the web and see your changes, simply select the Commit to VCS link underneath each file name. It usually takes about an hour before you can see your changes on the project site.

+ +

To update your .po files with new untranslated strings, simple select the Update from VCS link underneath each file name.

+ +

 

+ +

+Note: Some projects are automatically updated nightly while others require you to manually update them to receive new source content. Be sure to pay close attention to this, as it can alter your workflow.
+ +

Translating Verbatim files with an external application

+ +

While in the Translate tab, you have the option to export the .po and .xliff files and translate the strings with an external application (i.e., a text editor or translation memory tool).

+ +
    +
  1. To download the .po file, select the Download link found underneath each file name. To download the .xliff file, select the Download XLIFF link.
    2. +
  2. Proceed to translate the strings using your selected tool.
    3. +
+ +

Once you've finished your translations, you'll need to upload your file to Verbatim. You can do this from the Translate tab.

+ +
    +
  1. Navigate to the bottom of the files list to the Upload File section.
    2. +
  2. Click on the Browse button and select the file you wish to upload.
    3. +
  3. Select an upload setting from the options provided.
    4. +
  4. Once your upload setting has been selected, click Upload.
    5. +
+ +
+

Important: There have been some problems in the past with community members updating their source strings while others are in the process of localizing the previous updated files. This can cause community members to overlook new source strings, producing untranslated strings in a localized project. Be sure to coordinate these manual updates within your community to avoid this problem.

+
+ +

You're ready to go!

+ +

Whew! You've arrived at the end! Time to take what you've learned and put it to good use spreading Mozilla to everyone in your region. Have fun and let us know if you run into any difficulties. We'll be happy to help in any way we can.

+ +

 

+ +

Back: Quick Start Guide

diff --git a/files/id/mozilla/localization/quick_start_guide/index.html b/files/id/mozilla/localization/quick_start_guide/index.html new file mode 100644 index 0000000000..216207c9c4 --- /dev/null +++ b/files/id/mozilla/localization/quick_start_guide/index.html @@ -0,0 +1,50 @@ +--- +title: Panduan memulai cepat pelokalan +slug: Mozilla/Localization/Quick_start_guide +tags: + - ButuhPenerjemahan + - Guide + - Localization + - Mozilla + - NeedsTranslation + - Panduan + - Pelokalan + - Penerjemahan + - RintisanTopik + - TopicStub + - Translation +translation_of: Mozilla/Localization/Quick_start_guide +--- +

Selamat datang di pelokalan Mozilla (singkatnya L10n)!

+ +

Entah Anda berada di sini untuk memulai pelokalan Anda sendiri dalam proyek Mozilla ataupun untuk bergabung dalam upaya pelokalan yang sedang berlangsung, Anda datang ke tempat yang tepat! Panduan ini memuat semua informasi dasar dan teknis yang Anda perlukan untuk terlibat dalam program L10n Mozilla. Kami akan menunjukkan kepada Anda langkah-langkah untuk memulainya, dari pengaturan awal hingga pengetesan dan perilisan pelokalan Anda sendiri. Dalam prosesnya, Anda akan mempelajari berbagai proyek yang di dalamnya Anda dapat berkontribusi dan semua alat yang digunakan untuk pelokalan.

+ +

Bilamana kita berhadapan dengan kasus-kasus khusus, kita mengambilnya dari proyek Firefox sebagai proyek yang paling banyak dilakukan pelokalan di Mozilla. Dan ketika Anda hampir menyelesaikan panduan ini, Anda seharusnya mampu melakukan perubahan pada pengaturan lokal Firefox Anda dan menyaksikan perubahan pada antarmukanya. Akhir kata, setelah Anda menyelesaikan panduan ini, Anda akan memiliki semua alat yang diperlukan untuk mulai berkontribusi!

+ +

Ingat, panduan ini hanya memuat instruksi seputar aspek teknis L10n Mozilla saja. Kunjungi halaman Proses L10n untuk mempelajari keseluruhan prosesnya.

+ +
+

Pengaturan awal

+Persiapan teknis sebelum melakukan pelokalan.
+ +
+

Tahap penerjemahan

+Tutorial penggunaan alat L10n untuk penerjemahan.
+ +
+

Tahap QA

+Tutorial pengetesan L10n.
+ +
+

Tahap perilisan

+Langkah-langkah mengirimkan pekerjaan pelokalan Anda.
+ +
Keempat tahap ini merupakan sisi teknis dari program L10n. Untuk mempelajari lebih lanjut tentang semua ini, silakan klik salah satu tautan di atas. Untuk mendapatkan gambaran besarnya, kami sarankan Anda memulai dengan boks hijau dan melanjutkannya secara bertahap.
+ +

 

+ +
Note: This guide is written for two types of contributors: those starting a new localization and those joining an existing localization. It is important to know which information applies to which type of contributor. To help you filter through to the most applicable information, note that all information that is unique to those starting a new localization will be in orange font. All information that is unique to those joining an existing localization will be in blue font.
+ +

 

+ +

{{ Next("Localization_Quick_Start_Guide/Initial_setup") }}

diff --git a/files/id/mozilla/localization/quick_start_guide/qa_phase/index.html b/files/id/mozilla/localization/quick_start_guide/qa_phase/index.html new file mode 100644 index 0000000000..0ee69f43e4 --- /dev/null +++ b/files/id/mozilla/localization/quick_start_guide/qa_phase/index.html @@ -0,0 +1,197 @@ +--- +title: Tahap QA +slug: Mozilla/Localization/Quick_start_guide/QA_phase +translation_of: Mozilla/Localization/Quick_start_guide/QA_phase +--- +

Setelah hasil kerja keras anda dalam melokalisasi kami yakin bahwa anda tidak hanya ingin melihat hasil kerja anda tapi juga ingin memastikan bahwa itu tepat! Jika anda tidak begitu awam dengan kode, anda pasti khawatir akan merusak sesuatu (oops!). Sekarang kami akan menuntun anda melakukan test kualitas pekerjaan anda untuk memastikan anda berada di jalur yang tepat.

+ +

Jika anda melokalisasi halaman Mozilla, hasil pekerjaan anda akan ditampilkan segera setelah anda menyelesaikannya tanpa membutuhkan paket bahasa. Seperti halnya kasus ini, bagian dari pedoman ini tidak sepenuhnya dapat di aplikasikan oleh anda. Silahkan tekan tombol Next pada bagian paling bawah laman jika anda ingin melewati.

+ +

Untuk melihat hasil pekerjaan anda di Firefox (atau dalam aplikasi Mozilla yang lain), anda butuh paket bahasa yang terinstal pada direktori anda.

+ +

Manual & automated builds

+ +

Dengan menekan tombol, beberapa alat L10n (seperti Narro and Koala) secara otomatis membuat paket bahasa untuk anda. Jika anda menggunakan salah satu dari alat tersebut, silahkan menuju ke bagian Melihat pekerjaan anda, Sekarang mari menuju ke pembuatan paket bahasa anda sendiri secara manual.

+ +
Note: Remember all of those pre-requisite tools we asked you to install in the initial setup? Here's where you'll need almost all of them. If you haven't installed them yet, now is the time to do it.
+ +

Persiapan

+ +

Kita akan menggunakan file direktori berikut sebagai contoh:

+ +
your working directory (root)/
+    mozilla-aurora (en-US source, pulled from http://hg.mozilla.org/releases/mozilla-aurora  )/
+    l10n-central (directory for L10n directories, one per L10n; often referred to as "l10n base")/
+       your-locale-code (a directory with your L10n files, in this example we'll use x-testing)
+
+Example: root/mozilla-aurora & root/l10n-central/x-testing
+
+ +

Additionally, you will need to c

+ +

Please either follow the above structure closely or adjust the commands below according to your custom setup.

+ +

To copy this file to the appropriate directory, do the following:

+ +
    +
  1. Navigate to your working directory from your command-line terminal (i.e., where you created the folder structure described above).
    2. +
  2. Enter the following commands:
    3. +
+ +
mkdir -p l10n-central/x-testing/toolkit/
+
+cp mozilla-aurora/toolkit/locales/en-US/defines.inc l10n-central/x-testing/toolkit/defines.inc
+
+ +

Tah-dah! Copied!

+ +

Finally, you will need a file called .mozconfig to proceed with manual builds. This file contains the necessary build instructions.

+ +

To create and configure this file, follow these instructions:

+ +
    +
  1. Update the Mozilla source code:
    2. +
+ +

$ cd mozilla-aurora
+ $ hg pull -u

+ +
    +
  1. Enter the following command to create the .mozconfig file: $ nano -w .mozconfig
    2. +
  2. Enter the following lines in your .mozconfig file:
    3. +
+ +
mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../firefox-build
+ac_add_options --disable-compile-environment
+ac_add_options --with-l10n-base=../l10n-central # path relative to MOZ_OBJDIR
+ac_add_options --enable-application=[browser or mail]
+
+ +

You will need to specify which application you're localizing in the fourth line (e.g., for Firefox, that's browser, Thunderbird would be mail).

+ +
    +
  1. Enter the following command to perform the configuration: $ mach configure
    2. +
  2. Once your command-line finishes spitting out the config command's output, navigate to the newy created directory: $ cd ../firefox-build/browser/locales
    3. +
+ +

Now you're ready to build! At this point you can choose between two build options. You can either:

+ + + +

Visit the links above to learn how to make these testing builds.

+ +

Testing your L10n & seeing your work

+ +

Now that you have your langpack or L10n repack, let's discuss seeing your work and testing it in the application.

+ +

Testing the langpack will put you one step closer to having your localization added to the L10n releases. Follow the steps below to test your localization:

+ +
    +
  1. Install Aurora in your preferred language.
    2. +
  2. Install the .xpi langpack you just created (or exported).
    3. +
  3. Set your language using the Quick Locale Switcher or Locale Switcher add-ons by navigating to Tools->Language->Your localization's language code.
    4. +
  4. Restart your browser and start testing!
    5. +
+ +

Now you should be able to see all of your work up to this point. Click here for guidelines on how to test your localization.

+ +

Don't lose your work!

+ +

You're work is SO important! We would really hate to see you lose any of it. After you test your localization, you should send it to a remote repository, which will serve as a backup for your work and will let others follow your progress. We're going to go through the process below.

+ +

The official localization teams use repositories at hg.mozilla.org. Before a team becomes official, we like to get the localizers comfortable with the Hg commands that allow for cloning, pulling, committing, and pushing work to an experimental repository.  We use a web service called Bit Bucket to start the learning process.

+ +
Note: You must have Mercurial configured before you begin. That step is back on the initial setup page. If you haven't done that yet, don't worry, we'll wait for you!
+ +

Pushing to your repository

+ +

There are a couple of things you should take note of before you push to your repository:

+ + + +

The instructions below will help you learn how to use your Hg repository.

+ +
    +
  1. After your new repository is created by the l10n-drivers, please visit the URL for your repo. We'll use x-testing here for our example. You can do this by entering the following URL into your browser: http://hg.mozilla.org/l10n-central/x-testing
    2. +
  2. Now, navigate to your locale's directory on your local machine.
    3. +
+ +

If you're using Koala, this should be located at /path/to/your/koala.project/locale/3.6/x-testing, otherwise, it should be located at /path/to/your/working_dir/l10n_base/x-testing.

+ +

In this directory, you should have an hg repository. You might have created it yourself by running hg init or hg clone or you might have had it created by Koala when you were setting up a new localization project. Also at this point, you shouldn't have any uncommitted changes (i.e., running the hg status command should show nothing). Let's see what the last revision in this repository is.

+ +
    +
  1. Enter the following command: $ hg log -l 1
    2. +
+ +

You should see an output similar to the one below:

+ +
changeset:   0:7c543e8f3a6a
+tag:         tip
+user:        Your Name <email@example.com>
+date:        Mon Nov 23 18:08:25 2009 +0100
+summary:     Added search bar strings
+
+ +
    +
  1. Now compare the local repository on your machine with the remote Hg repository by entering this command: $ hg outgoing http://hg.mozilla.org/l10n-central/x-testing
    2. +
+ +

The hg outgoing command compares the two repositories and lists all changesets that are present locally, but not in the remote repository. These changesets will need to be "pushed" to the remote repository. You can expect to see output like this:

+ +
comparing with http://hg.mozilla.org/l10n-central/x-testing
+searching for changes
+
+changeset:   0:7c543e8f3a6a
+tag:         tip
+user:        Your Name <email@example.com>
+date:        Mon Nov 23 18:08:25 2009 +0100
+summary:     Added search bar strings
+
+ +
    +
  1. Let's now push this changeset. Enter the following command: hg push http://hg.mozilla.org/l10n-central/x-testing
    2. +
  2. Mercurial will connect to your repo and ask you to provide your account information (i.e., the username and the password).
    3. +
+ +
real URL is http://hg.mozilla.org/l10n-central/x-testing
+pushing to http://hg.mozilla.org/l10n-central/x-testing
+searching for changes
+http authorization required
+realm: hg.mozilla.org HTTP
+user: your_id
+password:
+
+ +

After you enter your account information, the changeset will be pushed.

+ +
adding changesets
+adding manifests
+adding file changes
+added 1 changesets with 2 changes to 2 files
+bb/acl: your_id is allowed. accepted payload.
+quota: 979.7 KB in use, 150.0 MB available (0.64% used)
+
+ +

Your changeset has been successfully pushed to your repository!

+ +

As you begin to move through your translations, you should commit the changes locally and push your work to this experimental repository. For instance, if you have finished translating all the .dtd and .properties files in your x-testing/browser/chrome/browser/ directory, then you should run these commands:

+ +
$ hg status
+$ hg commit -m "Translated browser/chrome/browser/"
+$ hg outgoing
+$ hg push http://hg.mozilla.org/l10n-central/x-testing
+ +

Note that due to the distributed nature of Hg, hg commit saves the changes locally (i.e., in your computer's Hg repository). You can see the history of commits with hg log. After doing hg commit, you still need to send the changes to the remote repository. This is where hg push comes in. This sends your commits to the remote repository.

+ +

Now you're ready to proceed to the release phase!

+ +

 

+ +

{{ PreviousNext("Localization_Quick_Start_Guide/Translation_phase", "Localization_Quick_Start_Guide/Release_phase") }}

diff --git a/files/id/mozilla/localization/web_localizability/index.html b/files/id/mozilla/localization/web_localizability/index.html new file mode 100644 index 0000000000..e4ff426a11 --- /dev/null +++ b/files/id/mozilla/localization/web_localizability/index.html @@ -0,0 +1,33 @@ +--- +title: Kemampulokalan Web +slug: Mozilla/Localization/Web_Localizability +tags: + - Internationalization + - Localizability + - Localization + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Mozilla/Localization/Web_Localizability +--- +

Kemampulokalan (atau singkatnya l12y) adalah karakteristik yang terkandung dalam suatu aplikasi atau konten yang memungkinkan untuk dilakukan pelokalan. Daftar berikut ini berisi tautan ke halaman yang menjabarkan langkah-langkah untuk membuat konten web dapat dilokalkan.  Dokumentasi dibagi menjadi 4 bagian:

+ +
    +
  1. How to create localizable content.
    2. +
  2. How to choose the right localization format.
    3. +
  3. How to create localizable web applications.
    4. +
  4. How to set up the infrastructure for localization.
    5. +
+ +

Why localizability is important

+ +

There are many reasons why you should start thinking about making your web app localizable as soon as possible.

+ +
    +
  1. You will make localizer's life easier, for which they will be grateful.
    2. +
  2. You will have quality content, localized and adapted to the needs of the local market.
    3. +
  3. Extending you web app to support new languages will be easy.
    4. +
  4. The content will be easier to maintain and update.
    5. +
  5. You will end up writing more semanticly-correct code, which is good for your SEO.
    6. +
  6. By reviewing your content and code for l12y, you will find and fix bugs in your original language too.
    7. +
diff --git a/files/id/mozilla/mercurial/basics/index.html b/files/id/mozilla/mercurial/basics/index.html new file mode 100644 index 0000000000..e3b797d0f2 --- /dev/null +++ b/files/id/mozilla/mercurial/basics/index.html @@ -0,0 +1,60 @@ +--- +title: Dasar-dasar Mercurial +slug: Mozilla/Mercurial/Basics +translation_of: Mozilla/Mercurial/Basics +--- +

Saya ingin berbagi pengetahuan denganmu tentang Mercurial yang mungkin dapat melindungimu dari frustasi. Halaman ini memang sinis dan survival-oriented. Tetapi saya masih menganggap Mercurial sedikit lebih baik dari pada CVS. —jorendorff 16:06, 12 May 2008 (PDT)

+ +

 

+ +

Expectations

+ +

Mercurial bukan CVS. Perintah-perintahnya tidak sama. The konsepnya tidak sama. Bagaimana Mercurial berbeda dengan CVS?

+ +

Sepanan ini sudah terisi. Anda dapat menembak dirimu sendiri. Anda dapat kehilangan pekerjaan. Perkakasa sudah mencoba melindungi Anda , tetapi kecelakan tetap dapat terjadi. Ada dua kesalahan umum: (a) Anda menjalankan perintah tanpa mengetahui apa yang akan dilakukan oleh perintah tersebut; (b) Anda melakukan hg commitatau hg qrefresh dengan salah paham pada status direktori kerja Anda. Oleh karena itu tanpa sengaja Anda membuat commit pada perubahan yang sebenarnya tidak ingin Anda buat commit; atau tanpa sengaka Anda membuat commit sebuah merge yang rusak; dlsb. Seringkali kesalahan seperti ini tidak langsung ketahuan.

+ +

Forewarned is forearmed. Don't do these things. Don't run commands without knowing what they're going to do—hg help is your friend. Don't commit without diffing and thinking. And don't let yourself get into "play mode" and stop paying attention to the fact that what you're playing with is your own uncommitted work.

+ +

Mercurial is not magic dust. Mercurial is flexible, powerful, and fun. It lets you attempt stuff you never would have tried in CVS. But of course not everything turns out to have been a good idea. (For example, we tried sharing patch queues. It sort of sucked.)

+ +

Avoiding trouble

+ +

Use the latest stable release of Mercurial.

+ +

Learn how to get your bearings. Use read-only commands (like hg status, hg head, hg parents, hg log, hg diff, hg outgoing) to check the status of your repository. This is a key skill.

+ +

Configure a merge program and make sure you know how to use it. DO IT NOW. Otherwise you will likely screw up your repository at some point.

+ +

Mercurial doesn't leave conflict markers in your files; instead, it wants you to fix the conflicts immediately, using a merge program (like kdiff3) which it can launch for you.

+ +

This can be error-prone. By default, Mercurial uses the first merge program it finds on your system, and merge programs can have a learning curve. Mercurial does not do a good job of detecting busted merges and refusing to proceed, so just by closing a window you can unwittingly put yourself in a bad state. Bad merges may lead to seemingly inexplicable Mercurial behavior in the future.

+ +

If a merge fails, make sure Mercurial knows that it has failed. When you're first learning the ropes, merges often go wrong. You might see this message:

+ +
0 files updated, 0 files merged, 0 files removed, 1 files unresolved
+There are unresolved merges, you can redo the full merge using:
+  hg update -C 2
+  hg merge 1
+
+ +

This means some conflicts weren't resolved during the merge. If you don't know exactly what they are and how to fix them, use that hg update -C command to tell Mercurial that you've given up on that merge.

+ +

If you don't, Mercurial won't know, and the next time you commit, it'll make a merge changeset. This is bad. The result can look a lot like accidentally destroying a bunch of work, actually, but the damage can be undone.

+ +

If hg parents shows two parents, you're merging.

+ +

If you use Mercurial Queues, back up your work. hg qrefresh destructively replaces the old patch with the new one! Use hg qinit -c to create a separate backup repository for your patches and hg commit --mq -m backup regularly.

+ +

Don't use Mercurial Queues in a repository that someone might pull from since applied (non-public) patches would also be pulled.

+ +

Recovering

+ +

Oops! Mercurial cut off your arm!

+ +

Don't randomly try stuff to see if it'll magically fix it. Remember what you stand to lose, and set down the chainsaw while you still have one good arm.

+ +

Get help on IRC. Try #hg or #developers on Mozilla IRC or #mercurial on freenode.

+ +

 

+ +

{{ languages( { "es": "es/Lo_b\u00e1sico_de_Mercurial", "fr": "fr/Les_bases_de_Mercurial", "ja": "ja/Mercurial_basics" } ) }}

diff --git a/files/id/mozilla/mercurial/index.html b/files/id/mozilla/mercurial/index.html new file mode 100644 index 0000000000..3e940e7690 --- /dev/null +++ b/files/id/mozilla/mercurial/index.html @@ -0,0 +1,45 @@ +--- +title: Mercurial +slug: Mozilla/Mercurial +tags: + - Developing Mozilla + - Mercurial + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Mercurial +--- +

 

+ +
+

Please refer to Mercurial For Mozillians at ReadTheDocs for current best-practices around Mercurial, including many helpful extra tools and guidelines that make using Mercurial fast and easy.

+
+ +

Mercurial (also known as "hg"), is the distributed version control software used for the development of Firefox, Thunderbird, and the shared Gecko core. It replaced CVS after Mozilla 1.9 was branched.

+ +

hg is the Mercurial command-line tool, Hg being the chemical symbol for the element mercury.

+ +

Installation, configuration, and getting the source

+ +

See Installing Mercurial for installation and configuration tips.

+ +

See Getting Mozilla Source Code Using Mercurial for getting a tree to build.

+ +

Learning to use Mercurial

+ +

If you are new to Mercurial, you should start with the official guide.

+ +

Then, move on to Mercurial basics and Mercurial FAQ and the version control tool docs for Mozilla-centric Mercurial information.

+ +

Further reading

+ +

The Mercurial tag lists the Mercurial-related articles on MDN.

+ +

And on wiki.mozilla.org, these helpful pages:

+ + + +

{{ languages( { "es": "es/Mercurial", "fr": "fr/Mercurial", "ja": "ja/Mercurial" } ) }}

diff --git a/files/id/mozilla/persona/index.html b/files/id/mozilla/persona/index.html new file mode 100644 index 0000000000..529d510e4d --- /dev/null +++ b/files/id/mozilla/persona/index.html @@ -0,0 +1,126 @@ +--- +title: Persona +slug: Mozilla/Persona +translation_of: Archive/Mozilla/Persona +--- +
+

Tetap berhubungan atau dapatkan bantuan!

+ +

Ikuti blog kami, bergabung dalam milis kami, atau cari kami dalam #identity di IRC.

+
+ +

Mozilla Persona adalah Sistem otentikasi yang sepenuhnya aman dan desentralisasi untuk web berdasarkan pada protokol BrowserID. Untuk memastikan Persona berkerja dimana saja dan untuk siapa saja, Mozilla saat ini mengoperasikan serangkaian kecil optional, centralized services yang terkait dengan Persona.

+ +

Mengapa Anda seharusnya menggunakan Persona pada situs web anda?

+ +
    +
  1. Persona sepenuhnya menghilangkan password situs-spesifik, membebaskan pengguna dan situs jejaring dari beban dalam menciptakan, mengatur, dan menyimpan kata sandi dengan aman.
    2. +
  2. Persona mudah digunakan. Hanya dengan dua kali klik pengguna Persona dapat masuk kedalam sebuah situs baru seperti Voost atau The Times Crossword, melewati kesulitan yang berhubungan dengan pembuatan akun.
    3. +
  3. Persona mudah diimplementasikan. Pengembang dapat menambah Persona kedalam sebuah situs hanya dalam semalam.
    4. +
  4. Yang terbaik dari semuanya, tidak adanya ketergantungan. Pengembang mendapat alamat-alamat surel yang telah diverifikasi dari semua pengguna mereka, dan pengguna situs dapat menggunakan surel apapun dengan Persona.
    5. +
  5. Persona dibuat dengan protokol BrowserID. Sekali penyedia peramban populer menggunakan BrowserID, mereka tidak perlu lagi ke Mozilla untuk log in.
    6. +
+ +

Baca Memulai!

+ +
Note: Persona sedang dalam pengembangan. ikuti blog kami untuk menemukan fitur-fitur baru, atau bergabunglah dengan milis kami dan tawarkan umpan-balik anda!
+ +

Gunakan Persona untuk laman anda

+ + + + + + + + + + + + +
+

Memulai

+ +
+
Kenapa Persona?
+
Pelajari tentang alasan Persona untuk pendukung dalam laman anda, dan bandingkan dengan sistem identitas otentikasi lainnya.
+
Pengaturan cepat
+
Pedoman cepat bagaimana cara untuk menambahkan Persona dalam laman/website anda.
+
+ 		+

Persona API

+ +
+
Referensi navigator.id API
+
Referensi untuk the navigator.id object, yang mana web developers dapat gunakan untuk memadukan Persona kedalam laman.
+
Verifikasi API
+
Referensi untuk remote verification API hosted at https://verifier.login.persona.org/verify.
+
+
+

Panduan

+ +
+
Perhatian Keamanan
+
Latihan dan Teknik untuk memastikan Persona anda aman.
+
Kococokan Peramban (Browser)
+
Pelajari dengan cermat peramban/browser mana yang mendukung Persona.
+
Internasionalisasi
+
Pelajari bagaimana Persona menangani Bahasa yang berbeda.
+
+ 		+
+
Pustaka dan plugins
+
Temukan pustaka Drop-in untuk Bahasa pemrograman favorit, web framework, blog, atau sistem konten manajemen anda.
+
Persona cookbook
+
Contoh kode sumber/source code untuk laman Persona. Termasuk snippets dalam C# (MVC3), PHP, Node.JS, dan lainnya.
+
Branding resources
+
Tombol Sign in dan gambar lainnya untuk membantu menampilkan Persona kepada anda.
+
+
+ + + + + + + + +
+

Informasi untuk penyedia layanan identitas

+ +

Jika anda penyedia layanan surel atau layanan penyedia Identitas lainnya, Periksa tautan/link dibawah ini untuk mempelajari bagaimana menjadi penyedia layanan Identitas untuk Persona.

+ +
+
Ringkasan IdP
+
Gambaran Persona Identity Providers.
+
Implementasi IdP
+
Pedoman teknis terinci untuk menjadi idP (Penyedia layanan Identitas).
+
Tips Pengembangan
+
Kumpulan tips dan trik yang berguna saat mengembangkan penyedia identitas baru.
+
.well-known/browserid
+
Ringkasan setruktur dan tujuan dari .well-known/browserid file, yang mana IdPs gunakan untuk meyatakan dukungannya.
+
+ 		+

Proyek Persona

+ +
+
Istilah
+
Definisi istilah BrowserID and Persona.
+
FAQ
+
Jawaban untuk pertanyaan umum.
+
Ringkasan Protokol
+
Ringkasan teknik menengah yang mendasar dari BrowserID protocol.
+
Keriptografi
+
lihat konsep kriptografi dibalik Persona dan BrowserID.
+
Sepesifikasi
+
Detail teknis mendalam langsung sisini.
+
Laman Persona
+
To get Persona going, we're hosting three services at https://login.persona.org: a fallback Identity Provider, a portable implementation of the {{ domxref("navigator.id") }} APIs, and an identity assertion verification service.
+
Kode sumber Persona
+
The code behind the Persona website lives in a repository on GitHub. Patches welcome!
+
+
+ +

 

+ +
 
diff --git a/files/id/mozilla/projects/index.html b/files/id/mozilla/projects/index.html new file mode 100644 index 0000000000..c1e43934a2 --- /dev/null +++ b/files/id/mozilla/projects/index.html @@ -0,0 +1,14 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +

{{ draft() }}

+

Below you'll find links to documentation about various Mozilla projects; these are often parts of Firefox or other products, but may also be used in other projects as well.

+

{{ LandingPageListSubpages() }}

diff --git a/files/id/mozilla/projects/nss/index.html b/files/id/mozilla/projects/nss/index.html new file mode 100644 index 0000000000..3f7f3ed094 --- /dev/null +++ b/files/id/mozilla/projects/nss/index.html @@ -0,0 +1,180 @@ +--- +title: Network Security Services +slug: Mozilla/Projects/NSS +translation_of: Mozilla/Projects/NSS +--- +

Keamanan Jaringan Layanan (NSS) adalah satu set perpustakaan yang dirancang untuk mendukung pengembangan cross-platform dari klien dan server aplikasi keamanan-diaktifkan. Aplikasi yang dibangun dengan NSS dapat mendukung SSL v2 dan v3, TLS, PKCS # 5, PKCS # 7, PKCS # 11, # 12 PKCS, S / MIME, sertifikat X.509 v3, dan standar keamanan lainnya.

+ +

Untuk informasi rinci tentang standar yang didukung, lihat Ikhtisar NSS. Untuk daftar pertanyaan yang sering diajukan, lihat FAQ.

+ +

NSS tersedia di bawah Mozilla Public License. Untuk informasi tentang men-download NSS rilis sebagai file tar, melihat Unduh PKI Sumber.

+ +

Jika Anda seorang pengembang dan ingin berkontribusi NSS, Anda mungkin ingin membaca dokumen ikhtisar highlevel rincian internal NSS dan memulai dengan NSS.

+ + + + + + + + +
+

Dokumentasi

+ +

Informasi latar belakang

+ +
+
Ikhtisar NSS
+
Memberikan ringkasan singkat dari NSS dan kemampuannya.
+
NSS FAQ
+
Menjawab pertanyaan dasar tentang NSS.
+
Pengantar Kriptografi Public-Key
+
Menjelaskan konsep dasar kriptografi kunci publik yang mendasari NSS.
+
Pengantar SSL
+
Memperkenalkan protokol SSL, termasuk informasi tentang cipher kriptografi didukung oleh SSL dan langkah-langkah yang terlibat dalam jabat tangan SSL.
+
+ +

Mulai

+ +
+
NSS Pers
+
Halaman ini berisi informasi tentang rilis saat ini dan masa lalu dari NSS.
+
Dapatkan kode sumber dan Membangun
+
Petunjuk tentang bagaimana membangun NSS pada platform yang didukung berbeda.
+
Dapatkan Mozilla Source Code Menggunakan Mercurial
+
Informasi tentang dengan bekerja sama dengan Mercurial.
+
Dapatkan Mozilla Source Code Menggunakan CVS (usang)
+
Old usang dokumentasi CVS.
+
+ +

NSS API

+ +
+
Pengantar Keamanan Jaringan
+
Memberikan gambaran tentang perpustakaan NSS dan apa yang perlu Anda ketahui untuk menggunakannya.
+
Fungsi NSS Umum
+
Merangkum diekspor oleh perpustakaan NSS bersama API.
+
NSS Referensi
+
API yang digunakan untuk memanggil operasi SSL.
+
Pedoman API NSS
+
Menjelaskan bagaimana perpustakaan dan kode diatur, dan pedoman untuk mengembangkan kode (konvensi penamaan, penanganan error, benang pengaman, dll)
+
NSS Catatan Teknis
+
Link ke NSS catatan teknis, yang menyediakan informasi terbaru tentang fitur NSS baru dan dokumentasi tambahan untuk topik-topik lanjutan dalam pemrograman dengan NSS.
+
+ +

Alat, pengujian, dan rincian teknis lainnya

+ +
+
Membangun Petunjuk untuk NSS
+
Jelaskan bagaimana untuk memeriksa dan membangun NSS rilis.
+
+ +
+
NSS Tutorial Pengembang
+
Bagaimana membuat perubahan di NSS. Coding gaya, menjaga kompatibilitas ABI.
+
+ +
+
NSS Alat
+
Alat untuk mengembangkan, debugging, dan mengelola aplikasi yang menggunakan NSS.
+
Contoh Kode
+
Menunjukkan bagaimana NSS dapat digunakan untuk operasi kriptografi, penanganan sertifikat, SSL, dll
+
NSS 3.2 Uji Suite
+
Versi diarsipkan. Menjelaskan bagaimana menjalankan tes NSS standar.
+
NSS Laporan Kinerja
+
Versi diarsipkan. Link laporan kinerja untuk NSS 3.2 dan rilis berikutnya.
+
Enkripsi Teknologi Tersedia dalam NSS 3.11
+
Versi diarsipkan. Mencantumkan algoritma kriptografi yang digunakan oleh NSS 3.11.
+
NSS 3.1 loadable Sertifikat Akar
+
Versi diarsipkan. Menjelaskan skema untuk sertifikat CA memuat akar.
+
cert7.db
+
Versi diarsipkan. Format Umum database cert7.db.
+
+ +

PKCS # 11 informasi

+ + + +
+
+ +

CA sertifikat pre-loaded ke NSS

+ + + +
+
+ +

NSS dibangun di atas Netscape Portabel Runtime (NSPR)

+ +
+
Netscape Portabel Runtime
+
Halaman proyek NSPR.
+
NSPR Referensi
+
NSPR dokumentasi API.
+
+ +

informasi tambahan

+ + + +

Pengujian

+ + + +

Perencanaan

+ +

Informasi tentang perencanaan NSS dapat ditemukan di wiki.mozilla.org, termasuk:

+ + + 		+

Masyarakat

+ +
    +
  • Lihat forum Mozilla Keamanan ...
    • +
+ +

{{DiscussionList ("dev-keamanan", "mozilla.dev.security")}}

+ +
    +
  • Lihat forum Mozilla Kriptografi ...
    • +
+ +

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

+ + + + +
+ +

 

diff --git a/files/id/mozilla/projects/rhino/index.html b/files/id/mozilla/projects/rhino/index.html new file mode 100644 index 0000000000..8396dc5c22 --- /dev/null +++ b/files/id/mozilla/projects/rhino/index.html @@ -0,0 +1,25 @@ +--- +title: Rhino +slug: Mozilla/Projects/Rhino +tags: + - JavaScript + - Mozilla + - NeedsUpdate + - Rhino +translation_of: Mozilla/Projects/Rhino +--- +

Image:rhino.jpg

+ +

Rhino adalah implementasi sumber-terbuka dari JavaScript yang ditulis keseluruhannya dalam bahasa pemrograman Java. Ini biasanya disisipkan di aplikasi Java untuk memberikan fasilitas scripting pada pengguna. Rhino telah disisipkan di J2SE 6 sebagai mesin scripting utama.

+ +

Unduh Rhino

+ +

Bagaimana mendapatkan sumber dan binari. 

+ +

Dokumentasi Rhino

+ +

Informasi tentang Rhino bagi penulis script dan yang menyisipkannya.

+ +

Bantuan Rhino

+ +

Beberapa sumber jika anda mengalami kebuntuan.

diff --git a/files/id/pengembangan_web/index.html b/files/id/pengembangan_web/index.html new file mode 100644 index 0000000000..1033bba848 --- /dev/null +++ b/files/id/pengembangan_web/index.html @@ -0,0 +1,78 @@ +--- +title: Pengembangan Web +slug: Pengembangan_Web +translation_of: Web/Guide +--- +

Pengembangan web terdiri dari semua aspek dalam mengembangkan sebuah situs web atau aplikasi web

+ +

Pelajari cara membuat apapun dari situs web sederhana sampai yang kompleks , situs web yang sangat interaktif dengan menggunakan teknologi Web terbaru yang dapat anda temukan dari berbagai artikel di sini

+ + + + + + + + +
+

Topik Dokumentasi

+ +

Teknologi

+ +
+
Pengantar Ke Pengembangan Web
+
Sebuah paduan untuk belajar bagaimana mengembangkan Web .
+
HTML
+
HyperText Markup Language merupakan bahasa dasar untuk membuat halaman web dan dokumen lain yang di tampilkan di browser.
+
CSS
+
Cascading Style Sheets memungkinkan untuk mengatur tata letak dan desain halaman Web.
+
JavaScript
+
JavaScript merupakan bahasa scripting yang umum digunakan untuk membangun aplikasi web; juga di gunakan pada pengembangan perangkat lunak berbasis Mozilla.
+
DOM
+
The Document Object Model is an API for HTML and XML documents, providing a structural representation of the document that you can modify in order to alter its visual presentation.
+
AJAX
+
Asynchronous JavaScript and XML isn't so much a technology as a combination of technologies; using JavaScript and other modern web technologies together to create dynamic web applications.
+
XHTML
+
Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.
+
SVG
+
Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.
+
+ +

Strategi

+ +
+
Web standar
+
Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.
+
Desain Web Responsive
+
Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.
+
Writing forward-compatible websites
+
Best practices for creating websites that do not break when browsers are updated.
+
Pengembangan Web Mobile
+
Developing sites for be viewed on mobile devices involves some unique approaches that may not be familiar to those accustomed to developing for desktop browsers.
+
Pengembang Mozilla Web  FAQ
+
Frequently asked questions from Web developers. With answers!
+
+ +

Lihat Semua...

+ 		+

Komunitas

+ + + +

Alat

+ + + +

Lihat Semua...

+
+ +

 

diff --git a/files/id/sandbox/index.html b/files/id/sandbox/index.html new file mode 100644 index 0000000000..7d1668aea0 --- /dev/null +++ b/files/id/sandbox/index.html @@ -0,0 +1,201 @@ +--- +title: Sandbox +slug: Sandbox +translation_of: Sandbox +--- +

This is a page

+ +
+
Sample HTML Content
+
+
+ +

{{EmbedLiveSample('file')}}

+ +

coucou les amis

+ +

HTML

+ +
Sample HTML Content
+ +

CSS Content

+ +
Sample CSS Content
+ +

JavaScript Content

+ +
Sample JavaScript Content
+ +

Result

+ +

{{ EmbedLiveSample('asdfghjk') }}

+ + + +
<html>
+</html>
+ + + + + +

CSS Content

+ +
@ Compteur de style fisheye {
+  système: cyclique;
+  symboles: ◉;
+
+ +
+


+ <h1>CSS font-family</h1>
+ <p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
+ <p class="sansserif">This is a paragraph, shown in the Arial font.</p>

+
+ +

+}
+
+.liste {
+    list-style: fisheye, cercle;
+}
+ +

Hello World

+ +

HTML

+ +
<p>Hello World</p>
+ +

{{EmbedLiveSample ( 'Linux is life')}}

+ +

Linux logo

+ +

logo couleur MDN (bleu)

+ + + +

Des trucs

+ +
+

Une note 

+ +
+

Un avertissement dans une note

+ +
+

Une note dans un avertissement dans une note

+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+
+
+
+
+
+
+
+
+ + + +
+

une autre note

+ +
+

Une note dans une note

+
+ +

This is an example of how to use the MDN!

+
+ + + +

π×1=1×π=2π÷π=π\ Pi \ times 1 = 1 \ times \ pi = 2 \ pi \ div \ pi = \ pi

+ +

ππππππ\ Pi \ frac {\ pi} {\ pi} \ frac {\ frac {\ pi} {\ pi}} {\ pi}

+ +

ππππππ\ Pi \ frac {\ pi} {\ pi} \ frac {\ frac {\ pi} {\ pi}} {\ pi}

+ +

∫limjets13e3/XX2réX\ Int \ limits_ {1} ^ {3} \ frac {e ^ 3 / x} {x ^ 2} \, dx

+ +

∫ln(x) dx = x[ln(x) - 1]l\ Int \ limits_ {1} ^ {3} \ frac {e ^ 3 / x} {x ^ 2} \, d+x

+ +

abcdefghijklmnopqrstuvwxyz\alphabet

+ +

πest un nombre irrationnel, et cela est le rapport entre la circonférence d'un cercle à son diamètre. Il est communément approchée comme 3,14159.\ pifacts {3}

+ +

contenu

+ + + +

Test live sample

+ +

HTML Content

+ +
<p>Hello World</p>
+ +

Result

+ +

{{ EmbedLiveSample('Test live sample') }}

+ +

+ +

Focus on a text field

+ +

HTML Content

+ +
<input type="text" id="myTextField" value="Text field.">
+<p></p>
+<button type="button" onclick="focusMethod()">Click me to focus on the text field!</button>
+ +

CSS Content

+ +
Sample CSS Content
+ +

JavaScript Content

+ +
focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}
+ +

Result

+ +

{{ EmbedLiveSample('Focus_on_a_text_field') }}

+ +

Focus on a button

+ +

HTML Content

+ +
<button type="button" id="myButton">Click Me!</button>
+<p></p>
+<button type="button" onclick="focusMethod()">Click me to focus on the button!</button>
+ +

CSS Content

+ +
Sample CSS Content
+ +

JavaScript Content

+ +
focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+ +

Result

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

diff --git a/files/id/tools/accessibility_inspector/index.html b/files/id/tools/accessibility_inspector/index.html new file mode 100644 index 0000000000..ded237c344 --- /dev/null +++ b/files/id/tools/accessibility_inspector/index.html @@ -0,0 +1,196 @@ +--- +title: Accessibility Inspector +slug: Tools/Accessibility_inspector +tags: + - Aksesibilitas + - Alat + - DevTools + - Inspektur Aksesibilitas + - Panduan +translation_of: Tools/Accessibility_inspector +--- +
{{ToolsSidebar}}
+ +

The Accessibility Inspector (Inspektur Akesibilitas) menyediakan sebuah sarana untuk mengakses informasi penting terbuka untuk teknologi bantu di dalam halaman ini lewat pohon aksesibilitas, memperbolehkan anda untuk cek apa yang hilang atau jika tidak butuh perhatian. Artikel ini membawamu melewati fitur utama dari Accessibility Inspector (Inspektur Aksesibilitas) dan bagaimana menggunakannya.

+ +

Sebuah panduan yang (sangat) singkat untuk aksesibilitas

+ +

Accessibility (Aksesibilitas) adalah latihan untuk membuat website anda dapat digunakan oleh sebanyak mungkin orang . Ini berarti mencoba yang terbaik dari kamu untuk tidak mengunci siapapun untuk mengakses informasi karena kecacatan yang mungkin mereka miliki, atau keadaan pribadi seperti perangkat yang mereka gunakan, kecepatan dari koneksi jaringan mereka, atau geografis lokasi mereka atau lokal. Kamu dapat mencari informasi lebih luas di dalam bagian Accessibility (Aksesibilitas)  dalam Dokumen Web MDN.

+ +

Di sini kita terutama berbicara tentang mengekspos informasi kepada orang-orang dengan cacat visual - ini dilakukan melalui accessibility APIs (API aksesibilitas) yang tersedia di dalam web browser, yang memaparkan informasi tentang peran elemen-elemen yang berbeda di halaman Anda (misalnya, apakah mereka hanya teks, atau apakah mereka tombol, tautan, elemen formulir, dll?).

+ +

Semantic DOM elements have roles assigned to them by default that hint at what their purpose is. Sometimes, however, you need to use some non-semantic markup (e.g., {{htmlelement("div")}}s) to build a complex custom control, and the control won't have a default role that reflects its purpose. In such a situation, you can use WAI-ARIA role attributes to provide your own roles.

+ +

Roles and other information exposed by browser accessibility APIs are presented in a hierarchical structure called the accessibility tree. This is a bit like the DOM tree, except that it contains a more limited set of elements and slightly different information about them.

+ +

Assistive technologies like screenreaders use this information to find out what's on a web page, tell their users what's there, and enable them to interact with the page. The Accessibility Inspector also uses this information to provide valuable accessibility debugging capabilities in the DevTools.

+ +

Accessing the Accessibility Inspector

+ +

The Accessibility Inspector is available by default since Firefox 63:

+ +

Accessibility tab in firefox devtools, turned off, with a button labeled Turn On Accessibility Features

+ +

Initially, the DevTools accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the Firefox accessibility engine started already, e.g., you might be a screenreader user or tester). This is because the accessibility engine runs in the background when the accessibility features are turned on. While it’s running, it slows performance and takes up memory; therefore it interferes with the metrics from other panels such as Memory and Performance as well as overall browser performance. For this reason, you should keep it turned off when you aren't specifically using it.

+ +

You can turn the features on using the Turn On Accessibility Features button.

+ +

Once the panel content loads, you can then turn it off again using the Turn Off Accessibility Features button available in the top-left corner, unless you have the accessibility engine running previously to operate a screenreader, in which case this button will be disabled.

+ +
+

Note: If you are using the accessibility features in multiple tabs, turning them off in one tab turns them off in all tabs.

+
+ +

Features of the Accessibility panel

+ +

The enabled accessibility panel looks like so:

+ +

Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labelled Turn Off Accessibility Features

+ +

On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:

+ + + +

On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:

+ + + +
+

Note: The exposed information is the same across all platforms — the inspector exposes Gecko's accessibility tree, rather than information from the platform accessibility layer.

+
+ +

Keyboard controls

+ +

The Accessibility tab is fully keyboard-accessible:

+ + + + + +

You can print the contents of the accessibility tree to json by right-clicking on an entry in the Accessibility tab and selecting Print to JSON:

+ +

+ +

When you do, you will get a new tab with the selected accessibility tree loaded into the JSON viewer:

+ +

+ +

Once opened, you can save or copy the data as necessary. The JSON viewer can also show you the raw JSON data on a separate tab in the viewer.

+ +

Check for accessibility issues

+ +

You can check for accessibility issues by clicking the drop-down menu next to: Check for issues. The available menu items include:

+ + + +

When you one of the menu items, Firefox scans your document for the type of issues you selected. Depending on the size and complexity of your document, this may take a few seconds. When the scan is complete, the left side of the Accessibility Inspector panel displays only the items that have that type of issue. In the right side of the panel, the Checks subpanel lists the specific issue with the selected node. For each type of issue, there is a Learn more link to further information on MDN Web Docs about the issue.

+ +

Check for "all" issues, with "contrast" and "text labels" selected

+ +

The menu items act as toggles. Select the item to view that type of issue; select the item again to clear the display of issues of that type.

+ +

Issues with a particular item are always displayed in the Checks subpanel as you browse the tree. The Check for issues buttons are a quick way to view all and only those items that have issues.

+ + + +

When the accessibility features are turned on, there are a number of useful additional features available in the DevTools, which are detailed below:

+ +

Context menu options

+ +

An extra context menu option is added, both for the general context menu on the web page when right/Ctrl + clicking a UI feature, and the HTML pane of the page inspector when right/Ctrl + clicking a DOM element:

+ +

context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties

+ +

context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties

+ +

When you choose the Inspect Accessibility Properties/Show Accessibility Properties context menu options, the Accessibility tab is immediately opened to show the corresponding accessibility tree item and its properties.

+ +
+

Note: Some DOM elements do not have accessibility properties — in that case, the Inspect Accessibility Properties/Show Accessibility Properties context menu item is grayed out.

+
+ +

Highlighting of UI items

+ +

In the Accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the UI items they relate to, if appropriate. The role and name of the item will be shown in a small information bar along with color contrast information if appropriate. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.

+ +

In the following example, you can see that the image has been highlighted and its role, graphic, name, "Road, Asphalt, Sky, Clouds, Fall", and the color contrast ratio, 3.46, appears in the information bar above it.

+ +

+ +

Color contrast

+ +

Contrast ratio information is particularly useful when you are designing the color palette for your website because if the contrast is not sufficient, readers with visual impairments such as low vision or color blindness will be unable to read the text. See Color contrast for details about recommended contrast ratios.

+ +

For example:

+ +

A screenshot of colour contrast highlighter where text contrast if below the AA WCAG threshold.

+ +

The color contrast in the image above is 2.86, so potentially not enough contrast to make it easy to read. Notice the warning symbol that indicates that the contrast fails to meet the acceptable contrast ratio.

+ +

As of Firefox 65, viewing this information for some foreground text that has a complex background image (e.g. a gradient) gives you a range of color contrast values. For example:

+ +

A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines.

+ +

In this example, the contrast ranges from 4.72 to 5.98. The numbers are followed by AAA and a checkmark in green, indicating that the large text has a contrast ratio of 4.5:1 or more, meeting the criteria for enhanced contrast, or Level AAA.

+ +

See Color contrast for more information on color contrast.

+ +

Accessibility picker

+ +

Like the element picker button on the Page Inspector, the Accessibility tab's element picker button allows you to hover and select UI items on the current page  highlight objects in the accessibility tree.

+ +

The accessibility tab element picker looks slightly different from the Page Inspector HTML pane picker, as shown below:

+ +

highlighted dom inspector picker button, with a tooltip saying Pick an element from the page

+ +

highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page

+ +

When you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the picker is then deactivated. Note, however, that if you hold the Shift key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the Shift key.

+ +

When the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the Esc key.

+ +

Typical use cases

+ +

The Accessibility Inspector is very useful for spotting accessibility problems at a glance. For a start, you can investigate items that don't have a proper text equivalent — images without alt text and form elements without proper labels have a name property of null, for example.

+ +

A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null

+ +

It is also very handy for verifying semantics — you can use the Inspect Accessibility Properties context menu option to quickly see whether an item has the correct role set on it (e.g., whether a button is really a button, or a link is really a link).

+ +

A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null

+ +

See also

+ + diff --git a/files/id/tools/debugger/index.html b/files/id/tools/debugger/index.html new file mode 100644 index 0000000000..c1f0d2c11e --- /dev/null +++ b/files/id/tools/debugger/index.html @@ -0,0 +1,49 @@ +--- +title: Debugger +slug: Tools/Debugger +translation_of: Tools/Debugger +--- +
{{ToolsSidebar}}

The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.

+ +

You can use it to debug code running locally in Firefox or running remotely, for example in a Firefox OS device or Firefox on Android. See remote debugging to learn how to connect the debugger to a remote target.

+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +
+

User Interface Tour

+ +

To find your way around the debugger, here's a quick tour of the UI.

+ +
+

How to

+ +

To find out what you can do with the debugger, see the following how-to guides:

+ +
+ +
+ +
+

Reference

+ +
+ +
diff --git a/files/id/tools/index.html b/files/id/tools/index.html new file mode 100644 index 0000000000..1b8f7b5fa8 --- /dev/null +++ b/files/id/tools/index.html @@ -0,0 +1,189 @@ +--- +title: Alat +slug: Tools +tags: + - Mengembangkan Mozilla + - Panduan + - Pengembangan Web + - 'Pengmbang Web: Alat' +translation_of: Tools +--- +

Uji, ubah, dan debug HTML, CSS, dan JavaScript di desktop dan di ponsel.

+ + + +
+
+
+ +
+

+ +

Untuk alat dan fitur terbaru, cobalah Firefox Edisi Pengembang, Cobalah Firefox Developer Edition.

+ +

Unduh Firefox Developer Edition

+
+
+ +

Peralatan Inti

+ +
+
+

Pemeriksa Laman

+ +

The all-new Inspector panel in Firefox 57.

+ +

Lihat dan ubah konten dan tata letak laman. Visualisasikan banyak aspek laman termasuk box model, animasi dan tata letak grid.

+
+ +
+

Konsol Web

+ +

The all-new Console in Firefox 57.

+ +

Lihat pesan yang dicatat oleh laman web dan interaksi dengan laman menggunaan JavaScript.

+
+
+ +
+
+

Pen-debug   JavaScript

+ +

The all-new Firefox 57 Debugger.html

+ +

Berhenti, melangkah melalui, uji, dan modifikasi JavaScript yang berjalan dalam sebuah laman.

+
+ +
+

Monitor Jaringan

+ +

The Network panel in Firefox 57 DevTools.

+ +

Lihat permintaan jaringan yang dibuat ketika sebuah laman dimuat.

+
+
+ +
+
+

Alat Kinerja

+ +

+ +

Analisa kinerja responsif, JavaScript, dan tata letak situs Anda.

+
+ +
+

Mode Desain Responsif

+ +

Responsive Design mode in Firefox 57.

+ +

Lihat bagaimana situs atau aplikasi Anda akan terlihat dan berperilaku pada perangkat dan jenis jaringan yang berbeda.

+
+
+ +
+

Alat Lainnya

+ +

Alat pengembang ini juga dibuat ke dalam Firefox. Tidak seperti "Alat Inti" di atas, mungkin Anda tidak menggunakannya setiap hari.

+ +
+
+
Memori
+
Cari tahu objek mana yang sedang menyimpan memori yang digunakan.
+
Pemeriksa Penyimpanan
+
Memeriksa kuki, penyimpan lokal, indexedDB, dan Inspect cookies, local storage, indexedDB, dan penyimpanan sesi kini pada sebuah laman.
+
DOM Property Viewer
+
Memeriksa properti DOM laman, fungsi, dan lain-lain.
+
Toolbar Pengembang
+
Sebuah antarmuka command-line untuk alat pengembang.
+
Eyedropper
+
Memilih warna dari laman.
+
Scratchpad
+
Sebuah editor teks yang dibuat ke dalam Firefox yang  memungkinkan Anda menulis dan menjalankan JavaScript
+
Editor Gaya
+
Tinjau dan ubah gaya CSS untuk halaman saat ini.
+
Shader Editor
+
Tinjau dan edit vertex dan fragment shaders yang digunakan oleh WebGL.
+
Editor Audio Web
+
Periksa grafik dari node audio dalam kontek audio, dan modifikasi parameternya.
+
Mengambil tangkapan layar
+
Mengambil sebuah tangkapan layar dari keseluruhan laman atau dari sebuah elemen tunggal.
+
Mengukur sebagian laman
+
Mengukur area tertentu pada sebuah laman web.
+
Rulers (Penggaris)
+
Penggaris sepanjang horizontal dan vertikal pada sebuah laman web.
+
+
+ +
+

Menghubungkan Alat Pengembang

+ +

Jika Anda membuka alat pengembang menggunakan pintasan keyboard atau or item menu yang sama, mereka akan menargetkan dokumen yang telah di-host oleh tab yang sedang aktif. Tetapi Anda bisa memasang alat ke berbagai target lain, juga di dalam peramban saat ini dan di berbagai peramban atau bahkan perangkat yang berbeda.

+ +
+
+
about:debugging
+
Men-debug pengayas, tab konten, dan pekerja yang berjalan di peramban.
+
Menghubungan ke Firefox untuk Android
+
Menghubungkan alat pengembang ke sebuah instance dari Firefox yang berjalan pada sebuah perangkat Android.
+
Menghubungkan ke iframes
+
Menghubungkan alat pengembang ke sebuah iframe tertentu pada laman saat ini
+
Menghubungkan ke peramban lain
+
Menghubungkan alat pengembang ke Chrome pada Android dan Safari pada iOS.
+
+
+ +
+

Men-debug peramban

+ +

Secara default, alat pengembang dilampirkan ke laman web atau aplikasi web. Tetapi Anda bisa juga menghubungkan mereka ke peramban secara keseluruhan. Ini berguna untuk pengembangan peramban dan pengayas.

+ +
+
+
Konsol Peramban
+
Lihat pesan yang dicatat oelh peramban itu dan oleh pengaya, dan jalankan kode JavaScript di linkup peramban.
+
Kotak Perkakas Peramban
+
Menyematkan alat pengembang ke peramban itu sendiri.
+
+
+ +
+

Memperluas  devtools

+ +

Alat pengembang dirancang agar dapat diperluas. Pengaya Firefox dapat mengakses alat pengembang dan komponen yang mereka gunakan untuk memperluas alat yang ada dan menambahkan alat yang baru. Dengan protokol men-debug jarak jauh, Anda dapat menerapkan men-debug klien dan server Anda sendiri, memungkinkan Anda men-debug situs web menggunakan alat Anda sendiri atau untuk men-debug berbagai sasaran menggunakan alat Firefox.

+ +
+
+
Contoh pengaya alat pengembang
+
Gunakan contoh-contoh ini untuk memahami bagaimana untuk menerapkan pengaya alat pengembang.
+
Menambah sebuah panel baru ke alat pengembang
+
Menulis sebuah pengaya yang menambah sebuah panel baru ke Kotak perkakas.
+
Protokol Men-debug Jarak Jauh
+
Protokol digunakan untuk mengkoneksi Alat Firefox Developer Tools untuk sebuah target men-debug seperti instance dari perangkat Firefox atau Firefox OS.
+
Peubah Sumber
+
Sebuah editor kode di buat kedalam Firefox yang bisa disematkan ke pengaya Anda.
+
Antarmuka Debugger
+
Sebuah API yang memungkinkan kode JavaScript mengemati eksekusi dari kode JavaScript yang lain. Alat Pengembang Firefox menggunakan API untuk menerapakan pen-debug JavaScript.
+
Konsol Web keluaran kustom
+
Bagaimana memperluas keluaran dari Konsol Web dan Konsol Peramban.
+
+
+ +
+

Migrasi dari Firebug

+ +

Firebug akan sampai pada akhir masa pakainya (lihat Firebug tinggal di Firefox DevTools untuk lebih jelasnya mengapa), dan kita menghargai bahwa beberapa orang akan merasa migrasi ke set alat pengembang yang kurang terkenal akan menjadi menantang. Untuk memudahkan transisi dari Firebug ke alat pengembang Firefox, kami telah menulis panduan praktis — Migrasi dari Firebug.

+ +
+

Kontribusi

+ +

Jika Anda ingin untuk membantu mengembangkan alat pengembang, sumber daya ini akan membantu Anda untuk memulai.

+ +
+
+
Ikut Terlibat
+
Halaman wiki Mozilla menjelaskan bagaimana caranya untuk terlibat.
+
firefox-dev.tools
+
Sebuah alat yang membantu mencari bugs untuk dikerjakan.
+
+
diff --git a/files/id/tools/page_inspector/how_to/index.html b/files/id/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..2f18038ec9 --- /dev/null +++ b/files/id/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +
{{ToolsSidebar}}

Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.

+ +

{{ ListSubpages () }}

+ +

 

diff --git a/files/id/tools/page_inspector/index.html b/files/id/tools/page_inspector/index.html new file mode 100644 index 0000000000..68f6b614ec --- /dev/null +++ b/files/id/tools/page_inspector/index.html @@ -0,0 +1,53 @@ +--- +title: Page Inspector +slug: Tools/Page_Inspector +tags: + - CSS + - HTML + - Tools + - Web Development +translation_of: Tools/Page_Inspector +--- +
{{ToolsSidebar}}

Gunakan peninjau halaman untuk melihat dan memodifikasi HTML dan CSS dari sebuah halaman.

+ +

Anda bisa melihat atau memeriksa halaman yang telah dimuat pada salinan lokal di firefox, atau pada remote target seperti pada perangkat Firefox OS atau firefox untuk android. Lihat remote debugging untuk mempelajari bagaimana cara menghubungkan developer tools pada sebuah remote target.

+ +
+

Mempelajari Antarmuka Pengguna

+ +

Untuk mengetahui cara menggunakan inspector/Peninjau, berikut tur singkat dari UI.

+ +
+

Paduan

+ +

Untuk mengetahui apasaja yang anda bisa lakukan dengan inspector, lihat paduan berikut:

+ +
+ +
+ +
+

Referensi

+ +
+ +
diff --git a/files/id/tools/remote_debugging/index.html b/files/id/tools/remote_debugging/index.html new file mode 100644 index 0000000000..a917c007b1 --- /dev/null +++ b/files/id/tools/remote_debugging/index.html @@ -0,0 +1,34 @@ +--- +title: Remote Debugging +slug: Tools/Remote_Debugging +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Remote_Debugging +--- +
{{ToolsSidebar}}

You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the Toolbox to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:

+ + + +

Firefox for Android

+ +

Remotely debugging Firefox for Android describes how to connect to Firefox on an Android device over USB.

+ +

Firefox for Metro

+ +

Remotely debugging Firefox for Metro describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.

+ +

Firefox OS

+ +

Using the App Manager includes instructions for connecting the Firefox developer tools to the Firefox OS simulator or to a Firefox OS device.

+ +

Thunderbird

+ +

Remotely debugging Thunderbird explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.

diff --git a/files/id/tools/webide/index.html b/files/id/tools/webide/index.html new file mode 100644 index 0000000000..3cf3b7bf2b --- /dev/null +++ b/files/id/tools/webide/index.html @@ -0,0 +1,458 @@ +--- +title: WebIDE +slug: Tools/WebIDE +translation_of: Archive/WebIDE +--- +
{{ToolsSidebar}}
+

WebIDE is available from Firefox 34 onwards.

+
+ +
+

WebIDE is the replacement for the App Manager. Like the App Manager, it enables you to run and debug Firefox OS apps using the Firefox OS Simulator or a real Firefox OS device.

+ +

However, it also provides an editing environment for you to create and develop Firefox OS apps, including a tree view of all the files in your app with the ability to edit and save them, and two app templates to help you get started.

+ +

Finally, WebIDE enables you to connect the Firefox Developer Tools to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS. See the Remote Debugging page for instructions on how to connect to a specific browser.

+
+ +

With WebIDE, you first set up one or more runtimes. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB, or it could be a Firefox OS Simulator installed on the desktop itself.

+ +

Next, you create an app, or open an existing app. If you're creating a new app you start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside WebIDE, and only use it for debugging.

+ +

Finally, you can install the app in one of the runtimes and run it. You can then open the usual suite of developer tools - the Inspector, Console, JavaScript Debugger and so on - to examine and modify the running app.

+ +

System requirements

+ +

To develop and debug apps using WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.

+ +

You can only use WebIDE for Firefox OS if you're targeting Firefox OS 1.2 or later.

+ +

Opening WebIDE

+ +

There are three ways to open WebIDE:

+ + + +

+ +

Here's what the WebIDE looks like:The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.

+ +

The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.

+ +

From Firefox 36, you can change the font size throughout WebIDE using the standard keyboard shortcuts (use Command instead of Control on OS X):

+ + + +

Setting up runtimes

+ +

Under the "Select Runtime" dropdown, runtimes are grouped into three types:

+ + + +

The first time you click the dropdown, you might not see any runtimes here:

+ +

The rest of this section describes how you can add some runtimes.

+ +

Connecting a Firefox OS device

+ +

Before you can connect a Firefox OS device, there's some setup you have to go through:

+ + + +
+

Linux only:

+ + +
+ +
+

Windows only:

+ + +
+ +

If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":

+ +

+ +

If you don't see your device, see the Troubleshooting page.

+ +

Connecting to Firefox for Android

+ +

From Firefox 36 onwards Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". See the article on connecting to Firefox for Android from WebIDE.

+ +

Before Firefox 36, you can connect to Firefox for Android without using WebIDE at all, or can use WebIDE by setting up a custom remote runtime.

+ +

Adding a Simulator

+ +

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

+ +

This means that in many cases, you don't need a real device to test and debug your app.

+ +

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

+ +

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

+ +

To learn more about the Simulator, see its documentation page.

+ +

Custom runtimes

+ +

Remote runtime

+ +

With a custom remote runtime you can use an arbitrary hostname and port to connect to the remote device.

+ +

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

+ +

This is convenient in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command (example: adb forward tcp:6000 localfilesystem:/data/local/debugger-socket).
+
+ If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward (example: localhost:6000).

+ +

Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB prior to Firefox 36.

+ +

Valence-enabled runtimes

+ +

If you have the Valence add-on installed, you'll see three additional runtimes:

+ + + +

For instructions on how to connect to these runtimes, see the relevant entry in the Remote Debugging page.

+ +

Selecting a runtime

+ +

Once you've set up a runtime you can select it using the "Select Runtime" menu.

+ + + +

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

+ +

Runtime menu items

+ +

When a runtime is selected, the Runtimes dropdown menu has up to five extra items:

+ +
+
Runtime Info
+
Information on the current runtime
+
Permissions Table
+
A table summarising app permissions for the current runtime, indicating, for each API and each app type, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)
+
+ +
+
Device Preferences
+
A table listing, and letting you edit, the preferences that are made available in the runtime via the Preferences service. These are platform-level configuration values exposing the same set of data as Firefox's about:config (but for the device). Because these preferences are highly security-sensitive, you need to disable the DevTools restricted privileges setting before you can modify them.
+
Device Settings (new in Firefox 38/Firefox OS 3)
+
A table listing, and letting you edit, the settings that can be controlled in the Firefox OS Settings app. Most things on the device which have a UI control to change (volume, alarm, etc.) are found in Device Settings. Because these settings are less sensitive than the device preferences, you can modify them without removing the restricted privileges setting. However, since this feature is new in Gecko 38 you need the WebIDE in Firefox 38 and a nightly build of Firefox OS or the Simulator.
+
Screenshot
+
A command to take a screenshot from the runtime.
+
+ +

+ +

 

+ +

Creating and opening apps

+ +

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

+ +

+ +

Create a new app

+ +

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

+ +

+ +

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

+ +

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

+ +

Open a packaged app

+ +

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

+ +

Open a hosted app

+ +

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

+ +

Editing apps

+ +

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

+ +

The app summary page

+ +

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

+ +

+ +

You can always get back to the app summary page by clicking on the root of the tree on the left.

+ +

Manifest validation

+ +

WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

+ +

+ +

Of course, you can edit the manifest.webapp file right in the project editor as well.

+ +

The source editor

+ +

WebIDE uses the CodeMirror source editor.

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

Code completion

+ +

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

+ +

To display autocomplete suggestions in JavaScript press Control + Space:

+ +

+ +

Inline documentation

+ +

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

+ +

+ +

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

+ +

Saving files

+ +

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

+ +

Removing projects

+ +

To remove an app from WebIDE, go to the app summary page and click "Remove Project".

+ +

Running a custom build step

+ +
+

New in Firefox 37.

+
+ +

For some use cases you need to run a custom command before pushing your app to the device. For example, you might want to satisfy JavaScript dependencies or minify CSS, or use WebIDE to develop Gaia apps or Cordova apps, both of which require a custom build step.

+ +

From Firefox 37 you can do this by including a file called "package.json" in the root of your app. This is the same file that's used to package a node.js library, so you might already have one in the root of your project. If you don't, you can create one for this purpose.

+ +

Inside package.json, WebIDE looks for a property called "webide". The table below summarises the syntax of "webide":

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
webide   +

Object containing instructions for WebIDE.

+ +

This may contain two properties, both optional: "prepackage" and "packageDir".

+
 prepackage  +

Specifies a command-line command for WebIDE to run before pushing the app to the runtime.

+ +

This may be a string, in which case the command is just executed as-is, or may be an object which must contain "command", and may contain any of "env", "args", and "cwd".

+
  command +

The command to execute in the command shell.

+ +

For example: "echo".

+
  env +

Any environment variables to set.

+ +

This is specified as an array of strings in the form "NAME=value". For example: ["NAME=world"]

+
  args +

Any arguments to pass along with the command.

+ +

This is specified as an array of strings.

+
  cwd +

The directory from which to run the command.

+ +

This may be absolute or relative to the current directory.

+
 packageDir  +

The directory from which WebIDE should look for the app to push to the runtime.

+ +

Use this if you want the project in WebIDE to be the source from which to build a packaged app. The build step specified in prepackage would place the built app in an output directory, you will specify the output directory in packageDir, and WebIDE will install the app from that output directory rather than the project directory.

+ +

This property is optional, and if it's omitted WebIDE will package the app from the project root, just as if package.json was omitted.

+
+ +

Examples

+ +

A "package.json" to build a Gaia app:

+ +
{
+  "webide": {
+    "prepackage": {
+      "command": "make",
+      "env": ["APP=settings"],
+      "cwd": "../.."
+    },
+    "packageDir": "../../build_stage/settings/"
+  }
+}
+ +

A "package.json" for working with Cordova:

+ +
{
+  "webide": {
+    "prepackage": "cordova prepare",
+    "packageDir": "./platforms/firefoxos/www"
+  }
+}
+ +

Running and debugging apps

+ +

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

+ +

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

+ +

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

+ +

+ +
+

From Firefox 36 onwards, the "Pause" button is replaced with a wrench icon.

+
+ +

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

+ +

Unrestricted app debugging (including certified apps, main process, etc.)

+ +

You can run the debugger against the simulator, b2g desktop, or a real device.

+ +

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:

+ +

+ +


+ However, when connecting to a real device we have a security policy in force:

+ + + +

To remove this restriction:

+ + + +

To disable DevTools restricted privileges, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. The path then differs depending on what you are debugging against:

+ + + +

Now (or after a restart of the B2G desktop client) in WebIDE you should see all the apps on the device.

+ +
+

Note: As indicated above, to enable unrestricted privileges on a real device through WebIDE you'll need a rooted device. There is however a developer setting available in Firefox OS 2.2 onwards called Reset and enable full DevTools — when activated this will wipe all user data (for security reasons), reset the device, and enable unrestricted priviledges on any device.

+
+ +

Monitoring performance

+ +

If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:

+ + + +

Troubleshooting

+ +

If you have any problems working with WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

diff --git a/files/id/tools/webide/troubleshooting/index.html b/files/id/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..d39320049b --- /dev/null +++ b/files/id/tools/webide/troubleshooting/index.html @@ -0,0 +1,117 @@ +--- +title: WebIDE +slug: Tools/WebIDE/Troubleshooting +tags: + - Indonesia +translation_of: Archive/WebIDE/Troubleshooting +--- +
{{ToolsSidebar}}

Connecting a Firefox OS device over USB

+ +

If you're trying to connect a Firefox OS device to WebIDE and it doesn't show up, here are some things you can try:

+ + + +

Connecting a Firefox OS device over Wi-Fi

+ + + +

Connecting to Firefox for Android

+ +

If you're trying to connect to a Firefox instance running on the Android OS and it doesn't show up, here are some things you can try:

+ + + +

Connecting to other browsers (Chrome, Safari)

+ +

WebIDE makes use of Valence (formerly Firefox Tools Adapter) to reach other browsers, like Chrome and Safari. 

+ +

If you are having trouble connecting to these other browsers, check the setup steps and other notes for those browsers on the Valence page.

+ +

Can't debug some apps

+ +

If you are finding that you can't debug certified apps, built-in apps, or apps already installed on a real device, then you may be coming across WebIDE's restricted privileges security policy. To find out more, see the section on Unrestricted app debugging (including certified apps, main process, etc.).

+ +

Unable to load project list

+ +

If you open WebIDE in one version of Firefox, and then downgrade to a previous Firefox version with the same profile, you may see the error "Unable to load project list" when opening WebIDE in the earlier Firefox version.

+ +

This can occur when the storage system that WebIDE uses (IndexedDB) needs to move or restructure its internal files for the newer Firefox version. The project list then becomes effectively inaccessible to older versions of Firefox.

+ +

No data has been lost, but you will need to keep using the newest version of Firefox that was used with your profile to get the project list back.

+ +

If really want to use the older version of Firefox, you can attempt to delete just the project list in the following way, but this is unsupported and could result in the further problems or additional data loss:

+ +
    +
  1. Close Firefox
    2. +
  2. Find your Firefox profile directory
    3. +
  3. Find the storage folder inside the profile directory
    4. +
  4. Under some part of this file tree, there should be files and/or directories that start with 4268914080AsptpcPerjo (a hashed name of the database)
    5. +
  5. Remove any such files and directories
    6. +
  6. Start Firefox and WebIDE again
    7. +
+ +

Enable logging

+ +

You can also enable verbose logging to gather diagnostics:

+ +
    +
  1. Open about:config, and add a new preference called extensions.adbhelper@mozilla.org.sdk.console.logLevel, with the string value all, and set extensions.adbhelper@mozilla.org.debug to true.
    2. +
  2. In the Add-ons Manager, disable and then re-enable the ADB Helper add-on.
    3. +
  3. Open the Browser Console and you'll now see console messages prefixed with adb. If the messages don't mean anything to you, ask for help.
    4. +
+ +

Get help

+ +

Go to the #devtools room on IRC and we will try to help.

diff --git a/files/id/web/api/abstractworker/index.html b/files/id/web/api/abstractworker/index.html new file mode 100644 index 0000000000..cea5a54797 --- /dev/null +++ b/files/id/web/api/abstractworker/index.html @@ -0,0 +1,125 @@ +--- +title: AbstractWorker +slug: Web/API/AbstractWorker +translation_of: Web/API/AbstractWorker +--- +

{{ APIRef("Web Workers API") }}

+ +

Antarmuka AbstractWorker dari abstrak properti Web Workers API  dan method umum untuk semua jenis worker, berupa {{domxref("Worker")}} atau {{domxref("SharedWorker")}}.

+ +

Properti

+ +

Antarmuka AbstractWorker tidak mewarisi properti apapun.

+ +

Event handlers

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Sebuah {{ domxref("EventListener") }} yang dipanggil ketika sebuah {{domxref("ErrorEvent")}} dari tipe error bubbles melalui worker.
+
+ +

Method

+ +

Antarmuka AbstractWorker tidak menjalankan atau mewarisi method apapun.

+ +

Contoh

+ +

Catat bahwa anda tidak ingin menggunakan antarmuka AbstractWorker langsung di dalam kode anda — ketika dipanggil, {{domxref("Worker")}} dan {{domxref("SharedWorker")}} mewarisi propertinya. Pada contoh code snippet menunjukan pembuatan objek {{domxref("Worker")}} menggunakan konstruktor {{domxref("Worker.Worker", "Worker()")}} dan penggunakan dari objek:

+ +
var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+ +

Contoh lengkapnya, lihat:

+ + + +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName("HTML WHATWG", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("Web Workers")}}.
{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("Web Workers")}}Initial definition.
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable()}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Dukungan dasar{{CompatChrome(4)}}{{CompatGeckoDesktop("1.9.1")}}1010.64
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Dukungan dasar4.4{{CompatGeckoMobile("1.9.1")}}1.0.11011.55.1
+
+ +

Lihat Juga

+ + + +

 

diff --git a/files/id/web/api/api_push/index.html b/files/id/web/api/api_push/index.html new file mode 100644 index 0000000000..feae8a7373 --- /dev/null +++ b/files/id/web/api/api_push/index.html @@ -0,0 +1,165 @@ +--- +title: API Push +slug: Web/API/API_Push +translation_of: Web/API/Push_API +--- +
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
+ +

API Push memberikan aplikasi web kemampuan menerima pesan yang didorong oleh peladen ke dalam agen pengguna, baik bila aplikasi berada di permukaan atau baru dimuat. API Push memungkinkan pengembang memberikan pemberitahuan dan pembaruan tak sinkron ke pengguna yang mengizinkan. Hal ini memberikan hasil pendekatan yang lebih baik untuk muatan baru yang terus berubah.

+ +
+

Catatan: Dokumentasi ini melingkupi spesifikasi API Push W3C. Bila Anda mencari dokumentasi untuk mekanisme berpemilik dari Firefox OS, lihat Push Sederhana.

+
+ +

Push concepts and usage

+ +

For an app to receive push messages, it has to have an active service worker. When the service worker is active, it can subscribe to push notifications using {{domxref("PushManager.subscribe()")}}.

+ +

The resulting {{domxref("PushSubscription")}} includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.

+ +

The service worker will be started as necessary to handle incoming push messages, which are delivered to the {{domxref("ServiceWorkerGlobalScope.onpush")}} event handler. This allows apps to react to push messages being received, for example by displaying a notification (using {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

+ +

Each subscription is unique to a service worker.  The endpoint for the subscription is a unique capability URL: knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able to send push messages to your application.

+ +

Activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. Different browsers have different schemes for handling this — there is currently no standard mechanism. Firefox allows a limited number (quota) of push messages to be sent to an application, although Push messages that generate notifications are exempt from this limit. The limit is refreshed each time the site is visited. In comparison, Chrome applies no limit but requires that every push message causes a notification to be displayed.

+ +
+

Note: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires when another is still visible, for a period of three seconds. This handles cases where a burst of notifications is received, and not all generate a visible notification.

+
+ +
+

Note: Chrome currently requires you to set up a project on Google Cloud Messaging to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest with some special parameters to use this service. This restriction will hopefully be removed in the future.

+
+ +

Interfaces

+ +
+
{{domxref("PushEvent")}}
+
Represents a push action sent to the global scope of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.
+
{{domxref("PushManager")}}
+
Provides a way to receive notifications from third-party servers as well as request URLs for push notifications. This interface has replaced functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.
+
{{domxref("PushMessageData")}}
+
Provides access to push data sent by a server, and includes methods to manipulate the received data.
+
{{domxref("PushSubscription")}}
+
Provides a subcription's URL endpoint and allows unsubscription from a push service.
+
+ +

Service worker additions

+ +

The following additions to the Service Worker API have been specified in the Push API spec, to provide an entry point for using Push messages, and  to monitor and respond to push and subscription change events.

+ +
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.
+
{{domxref("ServiceWorkerGlobalScope.onpush")}}
+
An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.
+
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+
An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Push API")}}{{Spec2("Push API")}}Initial definition
+ +

Browser Compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1]{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.

+ +

[2] This is currently not implemented. See the Microsoft Edge status information.

+ +

See also

+ + diff --git a/files/id/web/api/cachestorage/index.html b/files/id/web/api/cachestorage/index.html new file mode 100644 index 0000000000..fdcfe56217 --- /dev/null +++ b/files/id/web/api/cachestorage/index.html @@ -0,0 +1,198 @@ +--- +title: CacheStorage +slug: Web/API/CacheStorage +tags: + - API + - CacheStorage + - Experimental + - Interface + - NeedsTranslation + - Reference + - Service Workers + - ServiceWorker + - TopicStub +translation_of: Web/API/CacheStorage +--- +

{{APIRef("Service Workers API")}}

+ +

The CacheStorage interface represents the storage for {{domxref("Cache")}} objects.

+ +

The interface:

+ + + +

Use {{domxref("CacheStorage.open()")}} to obtain a {{domxref("Cache")}} instance.

+ +

Use {{domxref("CacheStorage.match()")}} to check if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the CacheStorage object tracks.

+ +

You can access CacheStorage through the global {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} property.

+ +
Note: CacheStorage always rejects with a SecurityError on untrusted origins (i.e. those that aren't using HTTPS, although this definition will likely become more complex in the future.) When testing, you can get around this by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the Firefox Devtools options/gear menu.
+ +
Note: {{domxref("CacheStorage.match()")}} is a convenience method. Equivalent functionality to match a cache entry can be implemented by returning an array of cache names from {{domxref("CacheStorage.keys()")}}, opening each cache with {{domxref("CacheStorage.open()")}}, and matching the one you want with {{domxref("Cache.match()")}}.
+ +

Methods

+ +
+
{{domxref("CacheStorage.match()")}}
+
Checks if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the {{domxref("CacheStorage")}} object tracks, and returns a {{jsxref("Promise")}} that resolves to that match.
+
{{domxref("CacheStorage.has()")}}
+
Returns a {{jsxref("Promise")}} that resolves to true if a {{domxref("Cache")}} object matching the cacheName exists.
+
{{domxref("CacheStorage.open()")}}
+
Returns a {{jsxref("Promise")}} that resolves to the {{domxref("Cache")}} object matching the cacheName (a new cache is created if it doesn't already exist.)
+
{{domxref("CacheStorage.delete()")}}
+
Finds the {{domxref("Cache")}} object matching the cacheName, and if found, deletes the {{domxref("Cache")}} object and returns a {{jsxref("Promise")}} that resolves to true. If no {{domxref("Cache")}} object is found, it resolves to false.
+
{{domxref("CacheStorage.keys()")}}
+
Returns a {{jsxref("Promise")}} that will resolve with an array containing strings corresponding to all of the named {{domxref("Cache")}} objects tracked by the {{domxref("CacheStorage")}}. Use this method to iterate over a list of all the {{domxref("Cache")}} objects.
+
+ +

Examples

+ +

This code snippet is from the MDN sw-test example (see sw-test running live.) This service worker script waits for an {{domxref("InstallEvent")}} to fire, then runs {{domxref("ExtendableEvent.waitUntil","waitUntil")}} to handle the install process for the app. This consists of calling {{domxref("CacheStorage.open")}} to create a new cache, then using {{domxref("Cache.addAll")}} to add a series of assets to it.

+ +

In the second code block, we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:

+ +
    +
  1. Check whether a match for the request is found in the CacheStorage. If so, serve that.
    2. +
  2. If not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using {{domxref("Cache.put")}} (cache.put(event.request, response.clone()).)
    3. +
  3. If this fails (e.g. because the network is down), return a fallback response.
    4. +
+ +

Finally, return whatever the custom response ended up being equal to, using {{domxref("FetchEvent.respondWith")}}.

+ +
self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() always resolves
+    // but in case of success response will have value
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // response may be used only once
+        // we need to save clone to put one copy in cache
+        // and serve second one
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});
+
+ +

This snippet shows how the API can be used outside of a service worker context, and uses the await operator for much more readable code.

+ +
// Try to get data from the cache, but fall back to fetching it live.
+async function getData() {
+   const cacheVersion = 1;
+   const cacheName    = `myapp-${ cacheVersion }`;
+   const url          = 'https://jsonplaceholder.typicode.com/todos/1';
+   let cachedData     = await getCachedData( cacheName, url );
+
+   if ( cachedData ) {
+      console.log( 'Retrieved cached data' );
+      return cachedData;
+   }
+
+   console.log( 'Fetching fresh data' );
+
+   const cacheStorage = await caches.open( cacheName );
+   await cacheStorage.add( url );
+   cachedData = await getCachedData( cacheName, url );
+   await deleteOldCaches( cacheName );
+
+   return cachedData;
+}
+
+// Get data from the cache.
+async function getCachedData( cacheName, url ) {
+   const cacheStorage   = await caches.open( cacheName );
+   const cachedResponse = await cacheStorage.match( url );
+
+   if ( ! cachedResponse || ! cachedResponse.ok ) {
+      return false;
+   }
+
+   return await cachedResponse.json();
+}
+
+// Delete any old caches to respect user's disk space.
+async function deleteOldCaches( currentCache ) {
+   const keys = await caches.keys();
+
+   for ( const key of keys ) {
+      const isOurCache = 'myapp-' === key.substr( 0, 6 );
+
+      if ( currentCache === key || ! isOurCache ) {
+         continue;
+      }
+
+      caches.delete( key );
+   }
+}
+
+try {
+   const data = await getData();
+   console.log( { data } );
+} catch ( error ) {
+   console.error( { error } );
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#cachestorage', 'CacheStorage')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.CacheStorage")}}

+ +

See also

+ + diff --git a/files/id/web/api/canvas_api/index.html b/files/id/web/api/canvas_api/index.html new file mode 100644 index 0000000000..0cdd4219fe --- /dev/null +++ b/files/id/web/api/canvas_api/index.html @@ -0,0 +1,172 @@ +--- +title: Canvas API +slug: Web/API/Canvas_API +tags: + - API + - Canvas + - Gambar + - JavaScript + - Referensi +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Ditambahkan di HTML5, elemen HTML {{HTMLElement("canvas")}} dapat digunakan untuk menggambar grafik melalui skrip di JavaScript. Sebagai contoh, dapat digunakan untuk menggambar graf, membuat komposisi foto, mencipta animasi, atau bahkan melakukan pemrosesan atau rendering video secara waktu-nyata .

+ +

Aplikasi Mozilla mendapat dukungan untuk <canvas> sejak Gecko 1.8 (i.e. Firefox 1.5). Elemen tersebut semula dikenalkan oleh Apple untuk Dashboard OS X dan Safari. Internet Explorer mendukung <canvas> sejak versi 9 dan seterusnya; untuk versi awal IE, sebuah halaman dapat secara efektif mendukung <canvas> dengan memasukkan skrip dari proyek Explorer Canvas Google. Google Chrome dan Opera 9 juga mendukung <canvas>.

+ +

Elemen <canvas> juga digunakan oleh WebGL untuk menggambar grafik hardware-accelerated 3D di halaman web.

+ +

Contoh

+ +

Ini hanya cuplikan kode sederhana yang menggunakan metode  {{domxref("CanvasRenderingContext2D.fillRect()")}}.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Edit kode di bawah dan lihat perbaruan perubahannya di kanvas secara waktu-nyata:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Reference

+ +
+ +
+ +

The interfaces related to the WebGLRenderingContext are referenced under WebGL.

+ +

{{domxref("CanvasCaptureMediaStream")}} is related.

+ +

Petunjuk dan tutorial

+ +
+
Tutorial canvas
+
Tutorial komprehensif mengcakup penggunaan sederhana  <canvas> dan fitur lanjutannya.
+
Cuplikan kode: Canvas
+
Beberapa cuplikan kode pengembang berorientasi ekstensi yang melibatkan <canvas>.
+
Demo: ray-caster sederhana
+
Demo animasi ray-tracing menggunakan canvas.
+
Menggambar DOM objects ke canvas
+
Bagaimana menggambar konten DOM, seperti elemen HTML, pada canvas.
+
Memanipulasi video dengan canvas
+
Menggabungkan {{HTMLElement("video")}} dan {{HTMLElement("canvas")}} untuk memanipulasi data video secara real time.
+
+ +

Sumber

+ +

Generik

+ + + +

Librari

+ + + +

Spesifikasi

+ + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}}
+ +

Lihat juga

+ + diff --git a/files/id/web/api/console/index.html b/files/id/web/api/console/index.html new file mode 100644 index 0000000000..05cdba529b --- /dev/null +++ b/files/id/web/api/console/index.html @@ -0,0 +1,278 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - Debugging + - Interface + - NeedsCompatTable + - NeedsTranslation + - Reference + - TopicStub + - console + - web console +translation_of: Web/API/Console +--- +
{{APIRef("Console API")}}
+ +

The Console object provides access to the browser's debugging console (e.g., the Web Console in Firefox). The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.

+ +

The Console object can be accessed from any global object, {{domxref("Window")}} on browsing scopes, {{domxref("WorkerGlobalScope")}}, and its specific variants in workers via property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply console. For example:

+ +
console.log("Failed to open the specified link")
+ +

This page documents the {{anch("Methods")}} available on the Console object and gives a few {{anch("Usage")}} examples.

+ +

{{AvailableInWorkers}}

+ +

Methods

+ +
+
{{domxref("Console.assert()")}}
+
Log a message and stack trace to console if first argument is false.
+
{{domxref("Console.clear()")}}
+
Clear the console.
+
{{domxref("Console.count()")}}
+
Log the number of times this line has been called with the given label.
+
{{domxref("Console.debug()")}}
+
An alias for log() - starting with Chromium 58 this method is a no-op on Chromium browsers.
+
{{domxref("Console.dir()")}} {{Non-standard_inline}}
+
Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.
+
{{domxref("Console.dirxml()")}} {{Non-standard_inline}}
+
+

Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not.

+
+
{{domxref("Console.error()")}}
+
Outputs an error message. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
An alias for error()
+
{{domxref("Console.group()")}}
+
Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().
+
{{domxref("Console.groupCollapsed()")}}
+
Creates a new inline group, indenting all following output by another level; unlike group(), this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call groupEnd().
+
{{domxref("Console.groupEnd()")}}
+
Exits the current inline group.
+
{{domxref("Console.info()")}}
+
Informative logging information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.log()")}}
+
For general output of logging information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.profile()")}} {{Non-standard_inline}}
+
Starts the browser's build-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile.
+
{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
+
Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the Firefox performance tool).
+
{{domxref("Console.table()")}}
+
Displays tabular data as a table.
+
{{domxref("Console.time()")}}
+
Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
+
{{domxref("Console.timeEnd()")}}
+
Stops the specified timer and logs the elapsed time in seconds since its start.
+
{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
+
Adds a marker to the browser's Timeline or Waterfall tool.
+
{{domxref("Console.trace()")}}
+
Outputs a stack trace.
+
{{domxref("Console.warn()")}}
+
Outputs a warning message. You may use string substitution and additional arguments with this method.
+
+ + +

Usage

+ +

Outputting text to the console

+ +

The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.

+ +

There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.

+ +

Outputting a single object

+ +

The simplest way to use the logging methods is to output a single object:

+ +
var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+
+ +

The output looks something like this:

+ +
[09:27:13.475] ({str:"Some text", id:5})
+ +

Outputting multiple objects

+ +

You can also output multiple objects by simply listing them when calling the logging method, like this:

+ +
var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);
+ +

This output will look like this:

+ +
[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+
+ +

Using string substitutions

+ +

Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Substitution stringDescription
%o or %OOutputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
%d or %iOutputs an integer. Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01
%sOutputs a string.
%fOutputs a floating-point value. Formatting is supported, for example  console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10
+ +

Each of these pulls the next argument after the format string off the parameter list. For example:

+ +
for (var i=0; i<5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+
+ +

The output looks like this:

+ +
[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+
+ +

Styling console output

+ +

You can use the "%c" directive to apply a CSS style to console output:

+ +
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+ +
The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.
+ +
 
+ +
+ +
 
+ +
+

Note: Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.

+
+ +
 
+ +
{{h3_gecko_minversion("Using groups in the console", "9.0")}}
+ +

You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call console.group(). The console.groupCollapsed() method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.

+ +
Note: Collapsed groups are not supported yet in Gecko; the groupCollapsed() method is the same as group() at this time.
+ +

To exit the current group, simply call console.groupEnd(). For example, given this code:

+ +
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+
+ +

The output looks like this:

+ +

nesting.png

+ +
{{h3_gecko_minversion("Timers", "10.0")}}
+ +

In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the console object. To start a timer, call the console.time() method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

+ +

For example, given this code:

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+
+ +

will log the time needed by the user to discard the alert box:

+ +

timerresult.png

+ +

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

+ +
Note: It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.
+ +

Stack traces

+ +

The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:

+ +
function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+
+ +

The output in the console looks something like this:

+ +

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Initial definition.
+ +

Notes

+ + + +

See also

+ + + +

Other implementations

+ + diff --git a/files/id/web/api/document/createelement/index.html b/files/id/web/api/document/createelement/index.html new file mode 100644 index 0000000000..0f14c4e8ce --- /dev/null +++ b/files/id/web/api/document/createelement/index.html @@ -0,0 +1,225 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Metode + - Referensi + - createElement +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

Dalam sebuah dokumen HTML, metode document.createElement() membuat elemen HTML yang ditentukan oleh tagName, atau sebuah  {{domxref("HTMLUnknownElement")}} jika tagName tidak dikenali.

+ +
+

Catatan: Dalam sebuah dokumen XUL , ini membuat elemen XUL yang ditentukan. Pada dokumen lain, ini membuat sebuah elemen dengan sebuah namespace URI yang null.

+
+ +

Sintaks

+ +
var element = document.createElement(tagName[, options]);
+
+ +

Parameter

+ +
+
tagName
+
Sebuah string yang menentukan tipe dari elemen yang akan dibuat. {{domxref("Node.nodeName", "nodeName")}} dari elemen dibuat dengan nilai tagName. Jangan menggunakan nama yang memenuhi syarat (seperti "html:a") dengan metode ini. Ketika dipanggil pada sebuah dokumen HTML, createElement() mengubah tagName menjadi lower case sebelum membuat elemen. Pada Firefox, Opera, dan Chrome, createElement(null) bekerja seperti createElement("null").
+
options{{optional_inline}}
+
Sebuah objek opsional ElementCreationOptions berisi sebuah properti tunggal bernama is, yang nilainya adalah nama tag untuk sebuah elemen khusus yang sebelumnya didefinisikan menggunakan customElements.define(). Lihat {{anch("Web component example")}} untuk lebih jelasnya.
+
+ +

Return value

+ +

Element baru.

+ +

Contoh

+ +

Contoh dasar

+ +

Ini membuat sebuah <div> baru dan memasukannya sebelum elemen dengan ID "div1".

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Bekerja dengan elemen||</title>
+</head>
+<body>
+  <div id="div1">Teks di atas telah dibuat secara dinamis.</div>
+</body>
+</html>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement () {
+  // membuat sebuah elemen div baru
+  var newDiv = document.createElement("div");
+  // dan memberikannya sebuah konten
+  var newContent = document.createTextNode("Hi there and greetings!");
+  // menambahkan teks terebut ke div yang baru dibuat
+  newDiv.appendChild(newContent);
+
+  // menambah elemen yang baru dibuat berserta isinya ke dalam DOM
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

{{EmbedLiveSample("Basic_example", 500, 50)}}

+ +

Contoh komponen web

+ +

Contoh cuplikan berikut diambil dari contoh dari expanding-list-web-component kami (lihat juga secara langsung). Dalam kasus ini, elemen khusus kami memperluas {{domxref("HTMLUListElement")}}, yang mewakili elemen {{htmlelement("ul")}}.

+ +
// Membuat sebuah kelas untuk elemen
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Selalu memanggil super dulu di konstruktor
+    super();
+
+    // definisi konstruktor dihilangkan untuk singkatnya
+    ...
+  }
+}
+
+// Mendefinisi elemen baru
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

Jika kita ingin untuk membuat sebuah instance dari elemen ini secara terprogram, kita akan menggunakan sebuah panggilan di sepanjang baris berikut:

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

Elemen baru akan diberikan sebuah atribut is yang nilainya adalah nama tag elemen khusus.

+ +
+

Catatan: Untuk kompabilitas ke belakang untuk versi sebelumnya dari Spesifikasi Elemen khusus, beberapa peramban (browser) akan memungkinkan Anda untuk melewatkan sebuah string di sini bukan pada sebuah objek, yang mana nilai string  adalah nama tag elemen khusus.

+
+ +

Spesifikasi

+ + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Kompabilitas peramban

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FiturChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1][2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
argumen options{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatGeckoDesktop(50)}}[4][5]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FiturAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
argumen options{{CompatVersionUnknown}}{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}[3]
+
+ +

[1] Dimulai dengan Gecko 22.0 {{geckoRelease("22.0")}} createElement() tidak lagi menggunakan antarmuka {{domxref("HTMLSpanElement")}} ketika argumennya adalah "bgsounds", "multicol", atau "image".  Sebagai gantinya, HTMLUnknownElement digunakan untuk "bgsound" dan "multicol" dan {{domxref("HTMLElement")}} HTMLElement digunakan untuk "image".

+ +

[2] Implementasi Gecko dari createElement tidak sesuai dengan spesifikasi DOM untuk dokumen XUL dan XHTML: localName dan namespaceURI tidak diatur ke null pada elemen yang dibuat. Lihat {{ Bug(280692) }} untuk lebih jelasnya.

+ +

[3] Pada versi sebelumnya dari spesifikasi, argumen ini hanyalah sebuah string yang nilainyaadalah nama tag elemen khusus. Misalnya bisa saja document.createElement("button", "custom-button") daripada document.createElement("button", {is: "custom-button"}). Demi kompabilitas ke belakang, Chrome menerima kedua bentuk tersebut, meskipun bentuk string sudah usang.

+ +

[4] Liat [3] di atas: seperti Chrome, Firefox menerima string, bukan sebuah objek di sini, tetapi hanya dari versi 51 dan seterusnya. Pada versi 50, options harus sebuah objek.

+ +

[5] Untuk eksperimen dengan elemen khusus di Firefox, Anda harus mengatur preferensi dom.webcomponents.enabled dan dom.webcomponents.customelements.enabled menjadi true.

+ +

Catatan Quantum CSS

+ + + +

Lihat juga

+ + diff --git a/files/id/web/api/document/index.html b/files/id/web/api/document/index.html new file mode 100644 index 0000000000..08e82db4cc --- /dev/null +++ b/files/id/web/api/document/index.html @@ -0,0 +1,576 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Document +--- +
{{APIRef}}
+ +
 
+ +

The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree. The DOM tree includes elements such as {{HTMLElement("body")}} and {{HTMLElement("table")}}, among many others. It provides functionality which is global to the document, such as obtaining the page's URL and creating new elements in the document.

+ +

{{inheritanceDiagram}}

+ +

The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents, served with the text/html content type, also implement the {{domxref("HTMLDocument")}} interface, wherease SVG documents implement the {{domxref("SVGDocument")}} interface.

+ +

Properties

+ +

This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.

+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
Provides access to all elements with an id. This is a legacy, non-standard interface and you should use the {{domxref("document.getElementById()")}} method instead.
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
Used with {{domxref("Document.load")}} to indicate an asynchronous request.
+
{{domxref("Document.characterSet")}} {{readonlyinline}}
+
Returns the character set being used by the document.
+
{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}
+
Alias of {{domxref("Document.characterSet")}}. Use this property instead.
+
{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}
+
Indicates whether the document is rendered in quirks or strict mode.
+
{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}
+
Returns the Content-Type from the MIME Header of the current document.
+
{{domxref("Document.doctype")}} {{readonlyinline}}
+
Returns the Document Type Definition (DTD) of the current document.
+
{{domxref("Document.documentElement")}} {{readonlyinline}}
+
Returns the {{domxref("Element")}} that is a direct child of the document. For HTML documents, this is normally the HTML element.
+
{{domxref("Document.documentURI")}} {{readonlyinline}}
+
Returns the document location as a string.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
Should return a {{domxref("DOMConfiguration")}} object.
+
{{domxref("Document.fullscreen")}} {{obsolete_inline}}
+
true when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.
+
{{domxref("Document.hidden")}} {{readonlyinline}}
+
…
+
{{domxref("Document.implementation")}} {{readonlyinline}}
+
Returns the DOM implementation associated with the current document.
+
{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}
+
Alias of {{domxref("Document.characterSet")}}. Use this property instead.
+
{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}
+
Returns the name of the style sheet set that was last enabled. Has the value null until the style sheet is changed by setting the value of {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
Returns a {{jsxref("Boolean")}} that is true only if this document is synthetic, such as a standalone image, video, audio file, or the like.
+
{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
The element that's currently in full screen mode for this document.
+
{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true if calling {{domxref("Element.mozRequestFullscreen()")}} would succeed in the curent document.
+
{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}
+
Returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document.
+
{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}
+
Returns the preferred style sheet set as specified by the page author.
+
{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}
+
Returns a reference to the {{domxref("Element")}} that scrolls the document.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
Returns which style sheet set is currently in use.
+
{{domxref("Document.styleSheets")}} {{readonlyinline}}
+
Returns a list of the style sheet objects on the current document.
+
{{domxref("Document.styleSheetSets")}} {{readonlyinline}}
+
Returns a list of the style sheet sets available on the document.
+
{{domxref("Document.timeline")}} {{readonlyinline}}
+
…
+
{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}
+
…
+
{{domxref("Document.URL")}} {{readonlyinline}}
+
Returns ...
+
{{domxref("Document.visibilityState")}} {{readonlyinline}}
+
…
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
Returns the encoding as determined by the XML declaration.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
Returns true if the XML declaration specifies the document to be standalone (e.g., An external part of the DTD affects the document's content), else false.
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
Returns the version number as specified in the XML declaration or "1.0" if the declaration is absent.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +

{{page("/en-US/docs/Web/API/ParentNode","Properties")}}

+ +

Extension for HTML document

+ +

The Document interface for HTML documents inherits from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents.

+ +
+
{{domxref("Document.activeElement")}} {{readonlyinline}}
+
Returns the currently focused element.
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Returns or sets the color of active links in the document body.
+
{{domxref("Document.anchors")}}
+
Returns a list of all of the anchors in the document.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Returns an ordered list of the applets within a document.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
Gets/sets the background color of the current document.
+
{{domxref("Document.body")}}
+
Returns the {{HTMLElement("body")}} element of the current document.
+
{{domxref("Document.cookie")}}
+
Returns a semicolon-separated list of the cookies for that document or sets a single cookie.
+
{{domxref("Document.defaultView")}} {{readonlyinline}}
+
Returns a reference to the window object.
+
{{domxref("Document.designMode")}}
+
Gets/sets the ability to edit the whole document.
+
{{domxref("Document.dir")}} {{readonlyinline}}
+
Gets/sets directionality (rtl/ltr) of the document.
+
{{domxref("Document.domain")}} {{readonlyinline}}
+
Returns the domain of the current document.
+
{{domxref("Document.embeds")}} {{readonlyinline}}
+
Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.
+
{{domxref("document.fgColor")}} {{Deprecated_inline}}
+
Gets/sets the foreground color, or text color, of the current document.
+
{{domxref("Document.forms")}} {{readonlyinline}}
+
Returns a list of the {{HTMLElement("form")}} elements within the current document.
+
{{domxref("Document.head")}} {{readonlyinline}}
+
Returns the {{HTMLElement("head")}} element of the current document.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
Gets/sets the height of the current document.
+
{{domxref("Document.images")}} {{readonlyinline}}
+
Returns a list of the images in the current document.
+
{{domxref("Document.lastModified")}} {{readonlyinline}}
+
Returns the date on which the document was last modified.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of hyperlinks in the document.
+
{{domxref("Document.links")}} {{readonlyinline}}
+
Returns a list of all the hyperlinks in the document.
+
{{domxref("Document.location")}} {{readonlyinline}}
+
Returns the URI of the current document.
+
{{domxref("Document.plugins")}} {{readonlyinline}}
+
Returns a list of the available plugins.
+
{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}
+
Returns loading status of the document.
+
{{domxref("Document.referrer")}} {{readonlyinline}}
+
Returns the URI of the page that linked to this page.
+
{{domxref("Document.scripts")}} {{readonlyinline}}
+
Returns all the {{HTMLElement("script")}} elements on the document.
+
{{domxref("Document.title")}}
+
Sets or gets title of the current document.
+
{{domxref("Document.URL")}} {{readonlyInline}}
+
Returns the document location as a string.
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of visited hyperlinks.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns the width of the current document.
+
+ +

Event handlers

+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.
+
{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("afterscriptexecute")}} event.
+
{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("beforescriptexecute")}} event.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.
+
{{domxref("Document.oncopy")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("copy")}} event.
+
{{domxref("GlobalEventHandlers.oncuechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.
+
{{domxref("Document.oncut")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("cut")}} event.
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrag")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragexit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrop")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondurationchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onemptied")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.
+
{{domxref("GlobalEventHandlers.onended")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.
+
{{domxref("Document.onfullscreenchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.
+
{{domxref("Document.onfullscreenerror")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninput")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninvalid")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadeddata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousewheel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpause")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.
+
{{domxref("Document.onpaste")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("paste")}} event.
+
{{domxref("GlobalEventHandlers.onplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplaying")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerdown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
Represents the event handling code for the {{event("pointerlockchange")}} event.
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
Represetnts the event handling code for the {{event("pointerlockerror")}} event.
+
{{domxref("GlobalEventHandlers.onpointermove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointercancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onprogress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onratechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
Represents the event handling code for the {{event("readystatechange")}} event.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeked")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeking")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselectstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectstart")}} event is raised.
+
{{domxref("Document.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onstalled")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsuspend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontimeupdate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.
+
{{domxref("GlobalEventHandlers.onvolumechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onwaiting")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.
+
{{domxref("Document.onwheel")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("wheel")}} event.
+
+ +

Methods

+ +

This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.

+ +
+
{{domxref("Document.adoptNode()")}}
+
Adopt node from an external document.
+
{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}
+
See {{domxref("Window.captureEvents")}}.
+
{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}
+
Gets the {{domxref("CaretPosition")}} at or near the specified coordinates.
+
{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}
+
Gets a {{Domxref("Range")}} object for the document fragment under the specified coordinates.
+
{{domxref("Document.createAttribute()")}}
+
Creates a new {{domxref("Attr")}} object and returns it.
+
{{domxref("Document.createAttributeNS()")}}
+
Creates a new attribute node in a given namespace and returns it.
+
{{domxref("Document.createCDATASection()")}}
+
Creates a new CDATA node and returns it.
+
{{domxref("Document.createComment()")}}
+
Creates a new comment node and returns it.
+
{{domxref("Document.createDocumentFragment()")}}
+
Creates a new document fragment.
+
{{domxref("Document.createElement()")}}
+
Creates a new element with the given tag name.
+
{{domxref("Document.createElementNS()")}}
+
Creates a new element with the given tag name and namespace URI.
+
{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}
+
Creates a new entity reference object and returns it.
+
{{domxref("Document.createEvent()")}}
+
Creates an event object.
+
{{domxref("Document.createNodeIterator()")}}
+
Creates a {{domxref("NodeIterator")}} object.
+
{{domxref("Document.createProcessingInstruction()")}}
+
Creates a new {{domxref("ProcessingInstruction")}} object.
+
{{domxref("Document.createRange()")}}
+
Creates a {{domxref("Range")}} object.
+
{{domxref("Document.createTextNode()")}}
+
Creates a text node.
+
{{domxref("Document.createTouch()")}}
+
Creates a {{domxref("Touch")}} object.
+
{{domxref("Document.createTouchList()")}}
+
Creates a {{domxref("TouchList")}} object.
+
{{domxref("Document.createTreeWalker()")}}
+
Creates a {{domxref("TreeWalker")}} object.
+
{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}
+
Returns the topmost element at the specified coordinates. 
+
{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}
+
Returns an array of all elements at the specified coordinates.
+
{{domxref("Document.enableStyleSheetsForSet()")}}
+
Enables the style sheets for the specified style sheet set.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Release the pointer lock.
+
{{domxref("Document.getAnimations()")}} {{experimental_inline}}
+
Returns an array of all {{domxref("Animation")}} objects currently in effect whose target elements are descendants of the document.
+
{{domxref("Document.getElementsByClassName()")}}
+
Returns a list of elements with the given class name.
+
{{domxref("Document.getElementsByTagName()")}}
+
Returns a list of elements with the given tag name.
+
{{domxref("Document.getElementsByTagNameNS()")}}
+
Returns a list of elements with the given tag name and namespace.
+
{{domxref("Document.importNode()")}}
+
Returns a clone of a node from an external document.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
Replaces entities, normalizes text nodes, etc.
+
{{domxref("Document.registerElement()")}} {{experimental_inline}}
+
Registers a web component.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Releases the current mouse capture if it's on an element in this document.
+
{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
See {{domxref("Window.releaseEvents()")}}.
+
{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
See {{domxref("Window.routeEvent()")}}.
+
{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Allows you to change the element being used as the background image for a specified element ID.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +
+
{{domxref("document.getElementById","document.getElementById(String id)")}}
+
Returns an object reference to the identified element.
+
{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns the first Element node within the document, in document order, that matches the specified selectors.
+
{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns a list of all the Element nodes within the document that match the specified selectors.
+
+ +

The Document interface is extended with the {{domxref("XPathEvaluator")}} interface:

+ +
+
{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}
+
Compiles an XPathExpression which can then be used for (repeated) evaluations.
+
{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}
+
Creates an {{domxref("XPathNSResolver")}} object.
+
{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
Evaluates an XPath expression.
+
+ +

Extension for HTML documents

+ +

The Document interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents:

+ +
+
{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.
+
{{domxref("document.close()")}}
+
Closes a document stream for writing.
+
{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}
+
On an editable document, executes a formating command.
+
{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}
+
Returns a list of elements with the given name.
+
{{domxref("document.getSelection()")}}
+
Returns a {{domxref("Selection")}} object related to text selected in the document.
+
{{domxref("document.hasFocus()")}}
+
Returns true if the focus is currently located anywhere inside the specified document.
+
{{domxref("document.open()")}}
+
Opens a document stream for writing.
+
{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}
+
Returns true if the formating command can be executed on the current range.
+
{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}
+
Returns true if the formating command is in an indeterminate state on the current range.
+
{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}
+
Returns true if the formating command has been executed on the current range.
+
{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}
+
Returns true if the formating command is supported on the current range.
+
{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}
+
Returns the current value of the current range for a formating command.
+
{{domxref("document.write","document.write(String text)")}}
+
Writes text in a document.
+
{{domxref("document.writeln","document.writeln(String text)")}}
+
Writes a line of text in a document.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectstart and onselectionchange.
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Turn the {{domxref("HTMLDocument")}} interface into a Document extension.
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Define the {{domxref("XPathEvaluator")}} interface which extend document.
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Extend the Document interface
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Extend the Document interface
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Extend the Document interface
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extend the Document interface
+ +

Browser compatibility notes

+ +

Firefox notes

+ +

Mozilla defines a set of non-standard properties made only for XUL content:

+ +
+
{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Returns the {{HTMLElement("script")}} element that is currently executing.
+
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+
(Mozilla add-ons only!) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).
+
{{domxref("document.popupNode")}}
+
Returns the node upon which a popup was invoked.
+
{{domxref("document.tooltipNode")}}
+
Returns the node which is the target of the current tooltip.
+
+ +

Mozilla also define some non-standard methods:

+ +
+
{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}
+
Use the {{domxref("Element.getBoundingClientRect()")}} method instead.
+
{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}
+
Loads a XUL overlay dynamically. This only works in XUL documents.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
+ +

Internet Explorer notes

+ +

Microsoft defines some non-standard properties:

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.
+
Internet Explorer does not support all methods from the Node interface in the Document interface:
+
+ +
+
{{domxref("document.contains")}}
+
As a work-around, document.body.contains() can be used.
+
+ +

 

diff --git a/files/id/web/api/document/links/index.html b/files/id/web/api/document/links/index.html new file mode 100644 index 0000000000..4a2d6a5a1b --- /dev/null +++ b/files/id/web/api/document/links/index.html @@ -0,0 +1,101 @@ +--- +title: Document.links +slug: Web/API/Document/links +tags: + - API + - Document + - Property + - Reference +translation_of: Web/API/Document/links +--- +

{{ APIRef("DOM") }}

+ +

Properti links mengembalikan sebuah collection dari semua elemen {{HTMLElement("area")}} dan elemen {{HTMLElement("a")}} pada sebuah dokumen dengan sebuah nilai pada atribut href .

+ +

Sintaks

+ +
nodeList = document.links
+
+ +

Contoh

+ +
var links = document.links;
+for(var i = 0; i < links.length; i++) {
+  var linkHref = document.createTextNode(links[i].href);
+  var lineBreak = document.createElement("br");
+  document.body.appendChild(linkHref);
+  document.body.appendChild(lineBreak);
+}
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}{{Spec2("DOM2 HTML")}}Initial definition
+ +

Kompabilitas browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/id/web/api/document/write/index.html b/files/id/web/api/document/write/index.html new file mode 100644 index 0000000000..ac3912c415 --- /dev/null +++ b/files/id/web/api/document/write/index.html @@ -0,0 +1,77 @@ +--- +title: Document.write() +slug: Web/API/Document/write +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/write +--- +
{{ ApiRef("DOM") }}
+ +

Menuliskan teks string ke sebuah dokumen stream yang dibuka dengan document.open().

+ +
Catatan: ketika document.write menulis ke dokumen stream, memanggil document.write pada sebuah dokumen tertutup (termuat), dokumen secara otomatis memanggil document.open, yang akan menghapus dokumen.
+ +

Sintaks

+ +
document.write(markup);
+
+ +

markup merupakan sebuah string yang berisi teks untuk ditulis ke dalam dokumen.

+ +

Contoh

+ +
<html>
+
+<head>
+<title>write example</title>
+
+<script>
+
+function newContent()
+{
+alert("load new content");
+document.open();
+document.write("<h1>Out with the old - in with the new!</h1>");
+document.close();
+}
+
+</script>
+</head>
+
+<body onload="newContent();">
+<p>Some original document content.</p>
+</body>
+</html>
+
+ +

Catatan

+ +

Menulis ke sebuah dokumen yang telah dimuat tanpa memanggil document.open() akan secara otomatis melakukan panggilan document.open. Setelah selesai menulis, disarankan untuk memanggil document.close(), untuk meminta browser untuk menyelesaikan memuat halaman. Teks yang anda tulis akan di parse ke dalam stuktur model dokumen tersebut. Pada contoh diatas, elemen h1 menjadi sebuah node pada document.

+ +

Jika pemanggilan document.write() merpakan embeded pada inline tag html <script> tag, maka tidak akan memanggil document.open(). Sebagai contoh:

+ +
<script>
+  document.write("<h1>Main title</h1>")
+</script>
+
+ +
Catatan: document.write an document.writeln tidak berfungsi di dokumen XHTML ( anda akan mendapat peringatan "Operation is not supported" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] error pada konsole). Ini terjadi ketika membuka sebuah file lokal dengan ekstensi file .xhtml atau dokumen lain yang disajikan dengan MIME type application/xhtml+xml . Informasi lengkap tersedia di W3C XHTML FAQ.
+ +
Catatan: document.write pada script deferred atau asynchronous akan diabaikan, dan anda mendapatkan peringatan error "A call to document.write() from an asynchronously-loaded external script was ignored" pada konsole.
+ +

Spesifikasi

+ + + +

Lihat juga

+ + diff --git a/files/id/web/api/event/currenttarget/index.html b/files/id/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..f44c5d54a9 --- /dev/null +++ b/files/id/web/api/event/currenttarget/index.html @@ -0,0 +1,127 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - API + - DOM + - Gecko + - events +translation_of: Web/API/Event/currentTarget +--- +

{{APIRef("DOM")}}

+ +

Mengidentifikasi event untuk target saat ini, seperti ketika event melalui DOM. Event tersebut selalu mengacu kepada lemen yang terikat dengan event handler, sebagai lawan dari event.target yang mana mengidentifikasi elemen ketika event tersebut terjadi.

+ +

Contoh

+ +

event.currentTarget sangat menarik untuk digunakan ketika menyatukan event handler yang sama ke beberapa element.

+ +
function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  console.log(e.currentTarget);
+  // Ketika fungsi digunakan seperti event handler: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i < ps.length; i++){
+  // console: print the clicked <p> element
+  ps[i].addEventListener('click', hide, false);
+}
+// console: print <body>
+document.body.addEventListener('click', hide, false);
+
+// click dan paragraph akan menghilang
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM4")}} 
{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}{{Spec2("DOM3 Events")}} 
{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}{{Spec2("DOM2 Events")}}Definisi awal
+ +

Kesesuaian browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}10.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}10.0
+
+ +

[1] Dalam Internet Explorer 6 sampai 8, event modelnya berbeda. Event listener(s) nya terikat dengan metode non-standard {{domxref("EventTarget.attachEvent")}}. Dalam model ini, tidak ada yang setara dengan event.currentTarget dan this adalah objek global. Satu solusin untuk meniru fitur event.currentTarget adalah dengan cara membungkus handler anda di dalam fungsi memanggil handler tersebut menggunakan Function.prototype.call dengan elemen sebagai argumen awal. Dengan cara ini, this akan menampilkan hasil yang diharapkan.

+ +

Lihat juga

+ +

Perbandingan dari Event Targets

diff --git a/files/id/web/api/event/index.html b/files/id/web/api/event/index.html new file mode 100644 index 0000000000..952082247b --- /dev/null +++ b/files/id/web/api/event/index.html @@ -0,0 +1,149 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - Event + - Interface + - Reference +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

Antarmuka Event mewakili setiap event pada DOM. mengandung properti umum dan method ke setiap event.

+ +

Banyak sekali antarmuka lain yang menginplementasikan antarmuka Event, baik secara langsung atau dengan mengimplementsikan antarmuka lain dimana diantaranya:

+ +
+ +
+ +

Konstruktor

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Membuat sebuah object Event
+
+ +

Properti

+ +

Antarmuka ini tidak mewarisi properti manapun.

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
Sebuah boolean yang menunjukan apakah event bubbles melalui DOM atau tidak.
+
{{domxref("Event.cancelBubble")}} {{non-standard_inline}}
+
Alternatif non-standar untuk {{domxref("Event.stopPropagation()")}}.
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
Sebuah boolean yang menunjukan apakah event bisa dibatalkan.
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
Sebuah referensi untuk target terdaftar saat ini untuk event.
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
Menunjukan apakah {{domxref("event.preventDefault()")}} telah dipanggil pada event atau belum.
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
Menunjukan fase aliran event yang sedang diproses.
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
Eksplisit target dari event (Mozilla-specific).
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
Target dari event, sebelum penargetan ulang lain (Mozilla-specific).
+
{{domxref("Event.returnValue")}} {{non-standard_inline}}
+
Alternatif nonstandard untuk {{domxref("Event.preventDefault()")}} dan {{domxref("Event.defaultPrevented")}}. (spesifik Internet Explorer lama)
+
{{domxref("Event.srcElement")}} {{non-standard_inline}}
+
Alias nonstandard untuk {{domxref("Event.target")}}. (spesifik Internet Explorer lama)
+
{{domxref("Event.target")}} {{readonlyinline}}
+
Sebuah referensi untuk target dimana event pertama kali dikirimkan.
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
Waktu ketika event dibuat.
+
{{domxref("Event.type")}} {{readonlyinline}}
+
Nama dari event (case-insensitive).
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
Menunjukan apakah event di terima browser atau tidak (mis. ketika user klik) atau dengan sebuah script (menggunakan sebuah method event buatan, seperti event.initEvent)
+
+ +

Method

+ +

Antarmuka ini tidak mewarisi method manapun.

+ +
+
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
+
Menginisialisasi nilai dari Event yang dibuat. Jika event telah dikirimkan, method ini tidak akan digunakan.
+
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Mencegah event agar tidak menggelegak. Usang, gunakan {{domxref("event.stopPropagation")}} sebagai gantinya.
+
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Usang, gunakan {{domxref("event.stopPropagation")}} sebagai gantinya.
+
{{domxref("Event.preventDefault()")}}
+
Membatalkan event event (jika cancelable).
+
{{domxref("Event.stopImmediatePropagation()")}}
+
Khusus untuk event ini, tidak ada listener lain yang akan dipanggil. Baik yang ada pada elemen yang sama, maupunyang ada pada elemen yang akan di lalui nantinya (pada fase capture, misalnya)
+
{{domxref("Event.stopPropagation()")}}
+
Menghentikan penyebaran events lebih jauh pada DOM.
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
Non-standard. Mengembailkan nilai dari {{domxref("Event.defaultPrevented")}}. Gunakan {{domxref("Event.defaultPrevented")}} sebagai gantinya.
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/api/event/target/index.html b/files/id/web/api/event/target/index.html new file mode 100644 index 0000000000..52397c0827 --- /dev/null +++ b/files/id/web/api/event/target/index.html @@ -0,0 +1,90 @@ +--- +title: Event.target +slug: Web/API/Event/target +translation_of: Web/API/Event/target +--- +
{{ApiRef("DOM")}}
+ +

The target property of the {{domxref("Event")}} interface is a reference to the object onto which the event was dispatched. It is different from {{domxref("Event.currentTarget")}} when the event handler is called during the bubbling or capturing phase of the event.

+ +

Syntax

+ +
var theTarget = event.target;
+ +

Value

+ +

{{domxref("EventTarget")}}

+ +

Example

+ +

Properti event.target dapat digunakan untuk mengimplementasikan event delegation.

+ +
// Membuat sebuah list
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target refers to the clicked <li> element
+  // This is different than e.currentTarget which would refer to the parent <ul> in this context
+  e.target.style.visibility = 'hidden';
+}
+
+// Attach the listener to the list
+// It will fire when each <li> is clicked
+ul.addEventListener('click', hide, false);
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Event.target")}}

+ +

Compatibility notes

+ +

On IE 6-8 the event model is different. Event listeners are attached with the non-standard {{domxref('EventTarget.attachEvent()')}} method. In this model, the event object has a {{domxref('Event.srcElement')}} property, instead of the target property, and it has the same semantics as Event.target.

+ +
function hide(e) {
+  // Support IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+
+ +

See also

+ + diff --git a/files/id/web/api/fetch_api/index.html b/files/id/web/api/fetch_api/index.html new file mode 100644 index 0000000000..ad64ee4558 --- /dev/null +++ b/files/id/web/api/fetch_api/index.html @@ -0,0 +1,88 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +translation_of: Web/API/Fetch_API +--- +
{{DefaultAPISidebar("Fetch API")}}
+ +

Fetch Data API menyediakan antarmuka untuk pemanggilan sumber daya data(termasuk di seluruh jaringan). Ini akan terasa familiar bagi siapa saja yang telah menggunakan {{DOMxRef("XMLHttpRequest")}}, tetapi untuk API yang terbaru menyediakan serangkaian fitur yang lebih kuat dan fleksibel.

+ +

Konsep dan Penggunaan

+ +

"Fetch" / pengambilan resource data menyediakan definisi umum yaitu objek{{DOMxRef("Request")}} dan {{DOMxRef("Response")}} atau permintaan dan tanggapan(dan hal-hal lain yang kaitannya dengan permintaan jaringan/"HTTP"). Ini akan memungkinkan "request" dan "response" tersebut untuk digunakan di mana pun mereka dibutuhkan di waktu selanjutnya, apakah itu untuk pekerja layanan/service workers(biasanya PWA), Cache API dan hal-hal serupa lainnya yang menangani atau mengubah permintaan dan tanggapan, ataupun juga segala jenis kasus penggunaan yang mungkin mengharuskan Anda untuk menghasilkan response/tanggapan Anda sendiri secara terprogram (baca aja:scr otomatis).

+ +

Ini juga memberikan definisi untuk konsep yang berhubungan dengan request dan response seperti halnya : CORS dan sumber semantik header HTTP, yang menggantikan definisi mereka yang terpisah di topik lain (bukan disini bahasannya/beda topik).

+ +

Untuk membuat permintaan dan mengambil sumber daya data, bisa menggunakan metode {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} ini. Metode ini diimplementasikan dalam beberapa antarmuka aplikasi, khususnya pada {{DOMxRef("Window")}} dan {{DOMxRef("WorkerGlobalScope")}}. Ini membuatnya tersedia dalam hampir semua konteks yang mana anda mungkin menginginkan untuk mengambil sumber data / resource nya.

+ +

Metode fetch() mengambil satu argumen yang wajib disertakan, path(sbg gambaran kalau di html : tag a dg atribut href) ke sumber data yang anda inginkan untuk mengambilnya. Hal ini mampu untuk mengembalikan hasil/return {{DOMxRef("Promise")}} yang memutuskan ke {{DOMxRef("Response")}} kepada permintaan itu sendiri, apakah hal tersebut berhasil atau tidak pada saat terjadi response/tanggapan sumber data. Anda juga bisa secara opsional mengirimkan objek pilihan initsebagai argumen keduanya (lihat {{DOMxRef("Request")}}).

+ +

Setelah {{DOMxRef("Response")}} telah dipanggil, ada sejumlah metode yang tersedia untuk menentukan apa saja konten tubuh(pikirkan pada elemen html) dan bagaimana penanganannya (lihat {{DOMxRef("Body")}}).

+ +

Anda juga bisa membuat permintaan dan response secara langsung menggunakan {{DOMxRef("Request.Request", "Request()")}}dan konstruktor {{DOMxRef("Response.Response", "Response()")}}, namun Anda tidak bisa melakukan ini secara langsung. Malahan, ini lebih cenderung sebagai hasil dari aksi yang dilakukan oleh API yang lainnya (misalnya, {{DOMxRef("FetchEvent.respondWith()")}} dari service workers (kalo loe yang main teknologinya PWA pasti tau coy)).

+ +
+

Catatan : Cari tahu lebih lanjut mengenai penggunaan fitur Fetch API di cara menggunakan fetch , dan pelajari konsepnya di konsep dasar fetch .

+
+ +

Batalkan fetch

+ +

Web browser sudah mulai menambahkan dukungan eksperimental untuk antarmuka {{DOMxRef("AbortController")}} dan {{DOMxRef("AbortSignal")}}(alias API Abort), yang memungkinkan operasi seperti Fetch dan XHR untuk dibatalkan apabila mereka belum selesai secara sempurna dipanggil. Lihat halaman antarmuka untuk detail lebih lanjut.

+ +

Browsers have started to add experimental support for the {{DOMxRef("AbortController")}} and {{DOMxRef("AbortSignal")}} interfaces (aka The Abort API), which allow operation

+ +

 

+ +

Antarmuka metode Fetch

+ +
+
WindowOrWorkerGlobalScope.fetch()
+
Metode fetch() yang digunakan untuk mengambil sumber data.
+
Headers
+
Merupakan header respons / permintaan, memungkinkan Anda untuk menanyakannya(query) dan mengambil tindakan yang berbeda dimana ini tergantung pada hasilnya.
+
Request
+
Merupakan permintaan sumber data.
+
Response
+
Merupakan respons terhadap permintaan.
+
+ +

Fetch mixin

+ +
+
{{DOMxRef("Body")}}
+
Menyediakan metode yang berkaitan dengan konten pada respons / permintaan, memungkinkan Anda untuk menyatakan jenis kontennya dan bagaimana penanganannya.
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + +
SpesifikasiStatusKeterangan
{{SpecName("Fetch")}}{{Spec2("Fetch")}}Definisi awal
+ +

Kompatibilitas Browser

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Lihat juga untuk 

+ + diff --git a/files/id/web/api/index.html b/files/id/web/api/index.html new file mode 100644 index 0000000000..bbbaf07d0a --- /dev/null +++ b/files/id/web/api/index.html @@ -0,0 +1,12 @@ +--- +title: Referensi API Web +slug: Web/API +tags: + - API + - Develop + - Web API +translation_of: Web/API +--- +

Saat menulis kode untuk Web menggunakan JavaScript, ada banyak API yang tersedia. Berikut adalah daftar semua antarmuka (atau dengan kata lain, tipe objek) yang dapat digunakan ketika mengembangkan aplikasi atau situs web.

+ +
{{APIListAlpha}}
diff --git a/files/id/web/api/mobile_connection_api/index.html b/files/id/web/api/mobile_connection_api/index.html new file mode 100644 index 0000000000..7b5462e2ef --- /dev/null +++ b/files/id/web/api/mobile_connection_api/index.html @@ -0,0 +1,149 @@ +--- +title: Mobile Connection +slug: Web/API/Mobile_Connection_API +translation_of: Archive/B2G_OS/API/Mobile_Connection_API +--- +

{{ draft }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Summary

+

This API has 2 purposes:

+ +

As this API can access functionalities that can have an impact on the mobile plan subscribed by the user (some of the functionalities can cost money to use or can damage the ICC), it is restricted to certified applications only.

+

The main entry point for this API is the {{domxref("window.navigator.mozMobileConnection","navigator.mozMobileConnection")}} property which is an instance of the {{domxref("MozMobileConnection")}} interface.

+

State of mobile connection

+

The state of the mobile connection is divided in two: on the one hand the voice connection, on the other hand the data connection. The data related to each type of connection are accessible through the {{domxref("MozMobileConnection.voice")}} and {{domxref("MozMobileConnection.data")}} properties which both return a {{domxref("MozMobileConnectionInfo")}} object.

+

Those objects give access to all information related to the quality of the network (signal strength, quality of the signal, position of the network's cells, restricted usage, roaming, etc.), and related to the carrier operating the network.

+
var cnx = navigator.mozMobileConnection;
+
+console.log("The voice operator is " + cnx.voice.network.longName);
+
+if (cnx.voice.connected) {
+  console.log("The signal has a strength of " + (+cnx.voice.relSignalStrength) + "%");
+} else {
+  console.log("The state of the connection is: " + cnx.voice.state);
+}
+
+

ICC Functionalities

+

The functionalities available for the ICC can be divided into two categories: the management of the ICC itself and the use of the integrated command available within the STK (SIM Application Toolkit).

+

Basic actions

+

The {{domxref("MozMobileConnection")}} provides a set of methods to deal with common behaviors on ICCs.

+
+

Note: All original methods from the MozMobileConnection interface are fully asynchronous. They all return a {{domxref("DOMRequest")}} object which has an onsuccess and onerror event handler to handle the success or failure of the method call.

+
+

Card lock

+

As long as a card is locked, a user is unable to use it to reach its mobile network. It's possible to manage the card lock with the {{domxref("MozMobileConnection.getCardLock","getCardLock()")}}, {{domxref("MozMobileConnection.setCardLock","setCardLock()")}}, and {{domxref("MozMobileConnection.unlockCardLock","unlockCardLock()")}} methods.

+

If {{domxref("MozMobileConnection.getCardLock","getCardLock()")}} allows to get some detailed information about the lock, it's also possible to have quick info about the lock through {{domxref("MozMobileConnection.cardState")}} which returns a string representing the current state of the lock.

+
+

Note: Even if the state change requests are successfully handled, it does not mean that the operations are necessarily successful. For that reason, any change in the card state is tracked independently through events:

+ +
+
var cnx = navigator.mozMobileConnection;
+
+function unlockCard() {
+  var unlockOptions = {
+    lockType: "pin",
+    pin     : prompt("Please, enter your PIN")
+  }
+
+  var unlock = cnx.unlockCardLock(unlockOptions);
+
+  unlock.onsuccess = function () {
+    console.log("The card has successfully handled the PIN number.");
+
+    if (this.result.success === false) {
+      if (this.result.retryCount > 0) {
+        console.log("But you mistyped your PIN, you have " + this.result.retryCount + " tries left.");
+      } else {
+        console.log("But your card is hard locked, you need to contact your carrier to get a special unlocking code.");
+      }
+    }
+  }
+
+  unlock.onerror = function () {
+    console.log("Hu! Something goes very wrong!")
+  }
+}
+
+cnx.addEventListener('icccardlockerror', function () {
+  // In case of error, ask the user for his PIN again
+  unlockCard();
+});
+
+cnx.addEventListener('cardsatechange', function () {
+  // In case the card state change and required to be unlocked
+  if (cnx.cardState === 'pinRequired') {
+    unlockCard();
+  }
+}
+
+// First call to unlockCard if required
+if (cnx.cardState === 'pinRequired') {
+  unlockCard();
+}
+
+

MMI Messages

+

MMI messages are human understandable code that, once typed with a phone keyboard, allow to trigger specific action from the RIL or get response from the network through a USSD request. A common example is typing a short code to get the IMEI phone number.

+

Such messages are sent using the {{domxref("MozMobileConnection.sendMMI()")}} method (and can be canceled with {{domxref("MozMobileConnection.cancelMMI","cancelMMI()")}}). Even if it will return a {{domxref("DOMRequest")}} object, the response to such messages are handled in two ways:

+ +
var cnx = navigator.mozMobileConnection;
+
+cnx.addEventHandler('ussdreceived', function (evt) {
+  console.log('Network message: ' + evt.data.message);
+});
+
+var MMIRequest = cnx.sendMMI(prompt('Provide a valid MMI'));
+
+MMIRequest.onerror = function() {
+  console.log("Mmmh... Something goes wrong.");
+}
+
+

Call forwarding options

+

Call forwarding options allow to define how a call can or cannot be forwarded to another phone number.

+

Those options are handled with the {{domxref("MozMobileConnection.getCallForwardingOption","getCallForwardingOption()")}} and {{domxref("MozMobileConnection.setCallForwardingOption","setCallForwardingOption()")}} methods.

+
var options = {
+  action      : MozMobileCFInfo.CALL_FORWARD_ACTION_ENABLE,
+  reason      : MozMobileCFInfo.CALL_FORWARD_REASON_UNCONDITIONAL,
+  serviceClass: MozMobileConnectionInfo.ICC_SERVICE_CLASS_VOICE,
+  number      : prompt('To which phone number would you wish to forward the calls?'),
+  timeSeconds : 5
+};
+
+var setOption = navigator.mozMobileConnection.setCallForwardingOption(options);
+
+setOption.onsuccess = function () {
+  console.log('Options successfully set');
+}
+
+setOption.onerror = function () {
+  console.log('Unable to set options: ' + this.error.name);
+}
+
+

STK commands

+

The STK commands depend on many factors (carriers, chips model, etc.) but can always be accessed through the {{domxref("MozMobileConnection.icc")}} property which returns a {{domxref("MozIccManager")}} object.

+
+

Warning: It's recommended to use the STK command only if you already know exactly what you are doing, as a misusage can damage the chip and make it unusable.

+
+

Specification

+

Not part of any specification.

+

See also

+ diff --git a/files/id/web/api/navigator/index.html b/files/id/web/api/navigator/index.html new file mode 100644 index 0000000000..9d40d2eee4 --- /dev/null +++ b/files/id/web/api/navigator/index.html @@ -0,0 +1,149 @@ +--- +title: Navigator +slug: Web/API/Navigator +tags: + - API + - HTML DOM + - HTML-DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - Web Performance +translation_of: Web/API/Navigator +--- +

{{ apiref() }}

+ +

Antarmuka Navigator mewakili negara dan identitas pengguna. Memungkinkan script untuk melakukan query dan mendaftarkan diri untuk melakukan suatu aktivitas.

+ +

Objek Navigator dapat dipanggil menggunakan properti {{domxref("Window.navigator")}}.

+ +

Properti

+ +

Bukan turunan dari properti manapun, namun menginplementasikan yang didefinisikan di  {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorStorageUtils")}}, {{domxref("NavigatorCookies")}}, {{domxref("NavigatorConcurrentHardware")}}, {{domxref("NavigatorPlugins")}}, dan {{domxref("NavigatorUserMedia")}}.

+ +

Standard

+ +
+
{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}{{experimental_inline}}
+
Mengembalikan sebuah array yang berisi setiap objek {{domxref("VRDisplay")}} yang menyajikan ({{domxref("VRDisplay.ispresenting")}} adalah true).
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}
+
Mengembalikan internal nama "code" browser. Jangan mengandalkan properti ini untuk mengembalikan nilai yang benar.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}
+
Mengembalikan  {{domxref("DOMString")}} dengan nama official dari browser. Jangan mengandalkan properti ini untuk mengembalikan nilai yang benar.
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}
+
Mengembalikan versi browser sebagai {{domxref("DOMString")}}. Jangan mengandalkan properti ini untuk mengembalikan nilai yang benar.
+
{{domxref("Navigator.battery")}} {{readonlyInline}}
+
Mengembalikan objek {{domxref("BatteryManager")}} yang memberikan informasi tentang status isi baterai.
+
{{domxref("Navigator.connection")}} {{readonlyInline}}{{experimental_inline}}
+
Menyediakan sebuah objek {{domxref("NetworkInformation")}} yang berisi informasi tentang koneksi jaringan pada perangkat.
+
{{domxref("Navigator.geolocation")}} {{readonlyInline}}
+
Mengembalikan objek {{domxref("Geolocation")}} yang memungkinkan untuk mengakses lokasi perangkat.
+
{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readOnlyInline}}
+
Mengembalikan jumlah inti logical processor yag tersedia.
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Mengembalikan {{domxref("DOMString")}} berdasarkan bahasa yang digunakan, biasanya bahasa UI pada browser. Nilai null akan dikembalikan jika tidak diketahui.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Mengembalikan sebuah array dari {{domxref("DOMString")}} berdasarkan bahasa yang diketahui pengguna, berdasarkan pengaturan.
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Mengembalikan daftar {{domxref("MimeTypeArray")}} dari tipe MIME yang didukung oleh browser.
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Mengembalikan sebuah {{domxref("Boolean")}} yang menunjukan apakah browser dalam keadaan online.
+
{{domxref("Navigator.oscpu")}}
+
Mengembalikan sebuah string berdasarkan sistem operasi.
+
{{domxref("Navigator.permissions")}} {{readonlyinline}}{{experimental_inline}}
+
Mengembalikan objek {{domxref("Permissions")}} yang dapat digunakan untuk query dan membaharui status izin dari APIs yang di cakup di Permissions API.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}
+
Always returns 'Gecko', on any browser. This property is kept only for compatibility purpose.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Returns the user agent string for the current browser.
+
{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}
+
Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the associated document.
+
+ +

Non-standard

+ +
+

Firefox OS devices adds more non-standard properties. You can consult them on the Firefox OS Navigator extensions article.

+
+ +

{{domxref("Navigator.buildID")}} {{non-standard_inline}}

+ +
+
Returns the build identifier of the browser (e.g., "2006090803").
+
{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}
+
Returns a boolean indicating whether cookies are enabled in the browser or not.
+
{{domxref("Navigator.credentials")}} {{non-standard_inline}}
+
Returns the {{domxref("CredentialsContainer")}} interface which exposes methods to request credentials and notify the user agent when interesting events occur such as successful sign in or sign out. 
+
{{domxref("Navigator.doNotTrack")}} {{non-standard_inline}}
+
Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.
+
{{domxref("Navigator.id")}} {{non-standard_inline}}
+
Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for BrowserID to your web site.
+
{{domxref("Navigator.mediaDevices")}} {{non-standard_inline}}
+
Returns a reference to the {{domxref("MediaDevices")}} interface.
+
{{domxref("Navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}
+ {{domxref("Navigator.webkitNotification")}}
+
Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.
+
{{domxref("Navigator.mozSocial")}} {{non-standard_inline}}
+
The Object, returned by the navigator.mozSocial property, is available within the social media provider's panel to provide functionality it may need.
+
{{domxref("Navigator.presentation")}} {{non-standard_inline}}
+
Returns a reference to the {{domxref("Presentation")}} API.
+
{{domxref("Navigator.productSub")}} {{non-standard_inline}}
+
Returns the build number of the current browser (e.g., "20060909").
+
{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}
+
Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".
+
{{domxref("Navigator.standalone")}} {{non-standard_inline}}
+
Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.
+
{{domxref("Navigator.vendor")}} {{non-standard_inline}}
+
Returns the vendor name of the current browser (e.g., "Netscape6").
+
{{domxref("Navigator.vendorSub")}} {{non-standard_inline}}
+
Returns the vendor version number (e.g. "6.1").
+
{{domxref("Navigator.webkitPointer")}} {{non-standard_inline}}
+
Returns a PointerLock object for the Mouse Lock API.
+
+ +

Methods

+ +

Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NavigatorStorageUtils")}}.

+ +

Standard

+ +
+
{{domxref("Navigator.getVRDisplays()")}} {{experimental_inline}}
+
Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR devices connected to the computer.
+
{{domxref("Navigator.getUserMedia", "NavigatorUserMedia.getUserMedia()")}}
+
After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.
+
{{domxref("Navigator.registerContentHandler()")}}
+
Allows web sites to register themselves as a possible handler for a given MIME type.
+
{{domxref("Navigator.registerProtocolHandler()")}}
+
Allows web sites to register themselves as a possible handler for a given protocol.
+
{{domxref("Navigator.requestMediaKeySystemAccess()")}} {{experimental_inline}}
+
Returns a {{jsxref("Promise")}} for a MediaKeySystemAccess object.
+
{{domxref("Navigator.sendBeacon()")}}{{experimental_inline}}
+
Used to asynchronously transfer small HTTP data from the User Agent to a web server.
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}
+
Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2.
+
{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}
+
Causes vibration on devices with support for it. Does nothing if vibration support isn't available.
+
+ +

Non-standard

+ +
+

Firefox OS devices adds more non-standard methods. You can consult them on the Firefox OS Navigator extensions article.

+
+ +

{{domxref("Navigator.mozIsLocallyAvailable()")}} {{non-standard_inline}}

+ +
+
Lets code check to see if the document at a given URI is available without using the network.
+
{{domxref("Navigator.mozPay()")}} {{non-standard_inline}}
+
Allows in-app payment.
+
diff --git a/files/id/web/api/navigator/mediadevices/index.html b/files/id/web/api/navigator/mediadevices/index.html new file mode 100644 index 0000000000..b51d697dd9 --- /dev/null +++ b/files/id/web/api/navigator/mediadevices/index.html @@ -0,0 +1,47 @@ +--- +title: Navigator.mediaDevices +slug: Web/API/Navigator/mediaDevices +translation_of: Web/API/Navigator/mediaDevices +--- +
{{APIRef("Media Capture and Streams")}}
+ +

The Navigator.mediaDevices read-only property returns a {{domxref("MediaDevices")}} object, which provides access to connected media input devices like cameras and microphones, as well as screen sharing.

+ +

Syntax

+ +
var mediaDevices = navigator.mediaDevices;
+
+ +

Return value

+ +

The {{domxref("MediaDevices")}} singleton object. Usually, you just use this object's members directly, such as by calling {{domxref("navigator.mediaDevices.getUserMedia()")}}.

+ +

Spesifikasi

+ + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('Media Capture', '#mediadevices', 'NavigatorUserMedia.mediaDevices')}}{{Spec2('Media Capture')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Navigator.mediaDevices")}}

+ +

Lihat juga

+ + diff --git a/files/id/web/api/navigator/serviceworker/index.html b/files/id/web/api/navigator/serviceworker/index.html new file mode 100644 index 0000000000..2599ecf9a2 --- /dev/null +++ b/files/id/web/api/navigator/serviceworker/index.html @@ -0,0 +1,101 @@ +--- +title: Navigator.serviceWorker +slug: Web/API/Navigator/serviceWorker +tags: + - API + - Reference + - Service Worker +translation_of: Web/API/Navigator/serviceWorker +--- +

{{APIRef("Service Workers API")}}

+ +

Navigator.serviceWorker adalah properti yang hanya bisa dibaca, mengembalikan objek {{domxref("ServiceWorkerContainer")}} untuk dokumen terkait, yang memberikan akses untuk registrasi, penghapusan, upgrade, dan berkomunikasi dengan {{domxref("ServiceWorker")}}.

+ +

Sintaks

+ +
var workerContainerInstance = navigator.serviceWorker;
+
+ +

Nilai

+ +

{{domxref("ServiceWorkerContainer")}}.

+ +

Spesifikasi

+ + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('Service Workers', '#navigator-service-worker', 'navigator.serviceWorker')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Dukungan dasar{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FiturAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Dukungan dasar{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Service workers (dan Push) telah di non-aktifkan di Firefox 45 Extended Support Release (ESR.)

+ +

Lihat Juga

+ + diff --git a/files/id/web/api/service_worker_api/index.html b/files/id/web/api/service_worker_api/index.html new file mode 100644 index 0000000000..345f183563 --- /dev/null +++ b/files/id/web/api/service_worker_api/index.html @@ -0,0 +1,283 @@ +--- +title: Service Worker API +slug: Web/API/Service_Worker_API +tags: + - API + - Landing + - NeedsTranslation + - Offline + - Overview + - Reference + - Service Workers + - TopicStub + - Workers +translation_of: Web/API/Service_Worker_API +--- +
+

{{ServiceWorkerSidebar}}

+ +

{{ SeeCompatTable() }}

+ +

Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.

+
+ +

Service worker concepts and usage

+ +

A service worker is an event-driven worker registered against an origin and a path. It takes the form of a JavaScript file that can control the web page/site it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not available.)

+ +

A service worker is run in a worker context: it therefore has no DOM access, and runs on a different thread to the main JavaScript that powers your app, so it is not blocking. It is designed to be fully async; as a consequence, APIs such as synchronous XHR and localStorage can't be used inside a service worker.

+ +

Service workers only run over HTTPS, for security reasons. Having modified network requests wide open to man in the middle attacks would be really bad.

+ +
+

Note: Service Workers win over previous attempts in this area such as AppCache because they don't make assumptions about what you are trying to do and then break when those assumptions are not exactly right; you have granular control over everything.

+
+ +
+

Note: Service workers make heavy use of promises, as generally they will wait for responses to come through, after which they will respond with a success or failure action. The promises architecture is ideal for this.

+
+ +

Registration

+ +

A service worker is first registered using the {{domxref("ServiceWorkerContainer.register()")}} method. If successful, your service worker will be downloaded to the client and attempt installation/activation (see below) for URLs accessed by the user inside the whole origin, or inside a subset specified by you.

+ +

Download, install and activate

+ +

At this point, your service worker will observe the following lifecycle:

+ +
    +
  1. Download
    2. +
  2. Install
    3. +
  3. Activate
    4. +
+ +

The service worker is immediately downloaded when a user first accesses a service worker–controlled site/page.

+ +

After that it is downloaded every 24 hours or so. It *may* be downloaded more frequently, but it must be downloaded every 24h to prevent bad scripts from being annoying for too long.

+ +

Installation is attempted when the downloaded file is found to be new — either different to an existing service worker (byte-wise compared), or the first service worker encountered for this page/site.

+ +

If this is the first time a service worker has been made available, installation is attempted, then after a successful installation it is activated.

+ +

If there is an existing service worker available, the new version is installed in the background, but not yet activated — at this point it is called the worker in waiting. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates (becoming the active worker).

+ +

You can listen out for the {{domxref("InstallEvent")}}; a standard action is to prepare your service worker for usage when this fires, for example by creating a cache using the built in storage API, and placing assets inside it that you'll want for running your app offline.

+ +

There is also an activate event. The point where this event fires is generally a good time to clean up old caches and other things associated with the previous version of your service worker.

+ +

Your service worker can respond to requests using the {{domxref("FetchEvent")}} event. You can modify the response to these requests in any way you want, using the {{domxref("FetchEvent.respondWith") }} method.

+ +
+

Note: Because oninstall/onactivate could take a while to complete, the service worker spec provides a waitUntil method that, when called oninstall or onactivate, passes a promise. Functional events are not dispatched to the service worker until the promise successfully resolves.

+
+ +

For a complete tutorial to show how to build up your first basic example, read Using Service Workers.

+ +

Other use case ideas

+ +

Service workers are also intended to be used for such things as:

+ + + +

In the future, service workers will be able to do a number of other useful things for the web platform that will bring it closer towards native app viability. Interestingly, other specifications can and will start to make use of the service worker context, for example:

+ + + +

Interfaces

+ +
+
{{domxref("Cache") }}
+
Represents the storage for {{domxref("Request")}} / {{domxref("Response")}} object pairs that are cached as part of the {{domxref("ServiceWorker")}} life cycle.
+
{{domxref("CacheStorage") }}
+
Represents the storage for {{domxref("Cache")}} objects. It provides a master directory of all the named caches that a {{domxref("ServiceWorker")}} can access and maintains a mapping of string names to corresponding {{domxref("Cache")}} objects.
+
{{domxref("Client") }}
+
Represents the scope of a service worker client. A service worker client is either a document in a browser context or a {{domxref("SharedWorker")}}, which is controlled by an active worker.
+
{{domxref("Clients") }}
+
Represents a container for a list of {{domxref("Client")}} objects; the main way to access the active service worker clients at the current origin.
+
{{domxref("ExtendableEvent") }}
+
Extends the lifetime of the install and activate events dispatched on the {{domxref("ServiceWorkerGlobalScope")}} as part of the service worker lifecycle. This ensures that any functional events (like {{domxref("FetchEvent")}}) are not dispatched to the {{domxref("ServiceWorker")}} until it upgrades database schemas, deletes outdated cache entries, etc.
+
{{domxref("ExtendableMessageEvent") }}
+
The event object of a {{event("message_(ServiceWorker)","message")}} event fired on a service worker (when a channel message is received on the {{domxref("ServiceWorkerGlobalScope")}} from another context) — extends the lifetime of such events.
+
{{domxref("FetchEvent") }}
+
The parameter passed into the {{domxref("ServiceWorkerGlobalScope.onfetch")}} handler, FetchEvent represents a fetch action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}. It contains information about the request and resulting response, and provides the {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} method, which allows us to provide an arbitrary response back to the controlled page.
+
{{domxref("InstallEvent") }}
+
The parameter passed into the {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} handler, the InstallEvent interface represents an install action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}. As a child of {{domxref("ExtendableEvent")}}, it ensures that functional events such as {{domxref("FetchEvent")}} are not dispatched during installation. 
+
{{domxref("Navigator.serviceWorker") }}
+
Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the associated document.
+
{{domxref("NotificationEvent") }}
+
The parameter passed into the {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}} handler, the NotificationEvent interface represents a notification click event that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}.
+
{{domxref("ServiceWorker") }}
+
Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same ServiceWorker object.
+
{{domxref("ServiceWorkerContainer") }}
+
Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.
+
{{domxref("ServiceWorkerGlobalScope") }}
+
Represents the global execution context of a service worker.
+
{{domxref("ServiceWorkerMessageEvent")}}
+
Contains information about an event sent to a {{domxref("ServiceWorkerContainer")}} target. 
+
{{domxref("ServiceWorkerRegistration") }}
+
Represents a service worker registration.
+
{{domxref("SyncEvent")}} {{non-standard_inline}}
+
+

The SyncEvent interface represents a sync action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a ServiceWorker. 

+
+
{{domxref("SyncManager")}} {{non-standard_inline}}
+
Provides an interface for registering and listing sync registrations.
+
{{domxref("WindowClient") }}
+
Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of {{domxref("Client")}} object, with some additional methods and properties available.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
{{ CompatibilityTable() }}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{ CompatNo() }}24{{ CompatNo() }}
install/activate events{{ CompatChrome(40.0) }}{{ CompatGeckoDesktop("44.0") }}[1]{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
fetch event/request/
+ respondWith()		{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
caches/cache +

{{CompatChrome(42.0)}}

+ 		{{ CompatGeckoDesktop("39.0") }}[1]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support {{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
 install/activate events{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
fetch event/request/
+ respondWith()		{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
caches/cache{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("39.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)

+ +

See also

+ + diff --git a/files/id/web/api/service_worker_api/using_service_workers/index.html b/files/id/web/api/service_worker_api/using_service_workers/index.html new file mode 100644 index 0000000000..b88643f6ed --- /dev/null +++ b/files/id/web/api/service_worker_api/using_service_workers/index.html @@ -0,0 +1,539 @@ +--- +title: Menggunakan Service Workers +slug: Web/API/Service_Worker_API/Using_Service_Workers +tags: + - Paduan + - ServiceWorker + - dasar +translation_of: Web/API/Service_Worker_API/Using_Service_Workers +--- +

{{ServiceWorkerSidebar}}

+ +

{{ SeeCompatTable() }}

+ +
+

Artikel ini memberikan informasi mengenai cara memulai dan menggunakan Service Workers, Termasuk arsitektur dasar, mendaftarkan service worker, penginstalan dan proses aktivasi service worker, memperbaharui service worker, kontrol cache dan custom response, Semuanya dalam konteks aplikasi sederhana dengan fungsi offline. 

+
+ +

Premis Service Workers

+ +

Salah satu masalah utama yang dialami pengguna web selama bertahun - tahun adalah hilangnya konektivitas. Bahkan aplikasi terbaik didunia sekalipun akan memberikan pengalaman pengguna yang buruk jika tidak bisa di muat atau di download. Berbagai upaya menciptakan teknologi telah dilakukan untuk memecahkan masalah tersebut, Agar halaman Offline dapat digunakan, dan beberapa masalah telah diselesaikan.Tapi masalah utamanya masih belum ada mekanisame kontrol yang terbaik untuk semua permintaan aset cache dan kostum jaringan.
+
+ Pada upaya sebelumnya — AppCache — dilihat sebagai ide yang bagus karena disana anda juga bisa menentukan aset untuk dicache dengan mudah. Namun, itu membuat asumsi tentang ketika anda mencoba dan kemudian pecah dengan mengerikan ketika aplikasi anda tidak mengikuti asumsi premis. Baca artikel Jake Archibald's Application Cache is a Douchebag untuk lebih detail.

+ +
+

Catatan: Pada firefox 44, ketika AppCache digunakan untuk menyediakan layanan offline untuk suatu halaman, pesan peringatan sekarang akan ditampilkan di console menyarankan pengembang untuk menggunakan Service workers  ({{bug("1204581")}}.)

+
+ +

Service worker seharusnya telah memecahkan masalah ini. Syntax pada service worker lebih kompleks di bandingkan AppCache, tapi kesamaanya adalah anda bisa menggunkan javascript untuk mengontrol AppCache anda secara tersirat dengan derajat grunality yang lebih bagus, memungkinkan anda untuk menangani masalah ini dan banyak lagi. Dengan menggunakan Service worker anda bisa mengatur aplikasi untuk menggunakan aset utama, sehingga memberikan pengalaman utama bahkan saat offline, sebelum mendapatkan lebih banyak data dari jaringan (biasa disebut sebagai Offline First). Ini sudah tersedia dengan aplikasi asli, yang merupakan salah satu alasan utama aplikasi asli sering dipilih lebih dari aplikasi web.

+ +

Persiapan bermain dengan service worker

+ +

Banyak fitur service worker saat ini telah di aktifkan secara default pada browser versi terbaru yang mendukung. Tapi jika anda menemui kode demo tidak bekerja pada versi browser anda, mungkin anda perlu mengaktifkan preferensi:

+ + + +

Anda perlu menyajikan kode dengan menggunakan HTTPS — Service Workers dibatasi dengan hanya dapat di jalankan pada HTTPS untuk alasan keamanan. Github merupakan salah satu tempat yang di sarankan untuk bereksperimen, karena mendukung HTTPS.

+ +

Arsitektur dasar

+ +

Dengan service workers, langkah - langkah umum berikut perlu diamati untuk konfigurasi dasar:

+ +
    +
  1. URL service worker diambil di daftarkan melalui {{domxref("serviceWorkerContainer.register()")}}.
    2. +
  2. Jika sukses, service worker dijalankan di {{domxref("ServiceWorkerGlobalScope") }}; pada dasarnya ini merupakan hal yang sepesial dari konteks worker, menjalankan tread script utama untuk pengeksekusian, tanpa dukungan akses DOM.
    3. +
  3. Sekarang service worker telah siap untuk memproses event.
    4. +
  4. Instalasai service worker dicoba ketika service worker mengontrol halaman yang diakses setelah dan sebelumnya. Even Install akan selalu di kirim pertama kali ke service workerr ( ini bisa digunakan untuk memulai proses untuk mengumpulkan IndexedDB, dan mencache aset situs). Sama halnya seperti prosedur penginstalan asli atau aplikasi firefox OS — memungkinkan semuanya tersedia untuk digunakan secara offline.
    5. +
  5. Ketika handler oninstall selesai, service worker ditetapkan untuk diinstall.
    6. +
  6. Selanjutnya adalah aktivasi. Ketika service worker terinstall, selanjutnya akan menerima event activate. Penggunaan utama dari onactivate adalah untuk membersihkan sumberdaya yang digunakan pada versi sebelumnya.
    7. +
  7. Service Worker sekarang dapat mengontrol halaman, tapi hanya yang di buka setelah register() telah sukses. misal dokumen mulai aktif dengan atau tanpa Service Worker dan menjaganya selama masih digunakan. Jadi dokumen harus di muat ulang agar benar - benar terkontrol.
    8. +
+ +

+ +

Grafik dibawah menunjukan ringkasan dari event yang tersedia pada service worker:

+ +

install, activate, message, fetch, sync, push

+ +

Promis

+ +

Promis adalah mekanisme yang sebagian besar digunakan untuk menjalankan operasi secara asinkron, dengan bergantung pada pencapaian satu dan lainnya. Ini merupakan pusat dari cara kerja service workers.
+
+ Promis bisa digunakan untuk melakukan banyak hal, tapi untuk saat ini, yang perlu anda tahu adalah jika sesuatu yang mengembalikan promise, anda bisa menambahkan.then() di akhir dan menambahkan callback di dalamnya untuk mengetahui apakah berhasil, gagal da lainnya., atau anda bisa menambahkan .catch() di akhir jika anda ingin menambahkan calback status gagal.

+ +

Mari bandingkan kesamaan struktur callback tradisional synchronous dan promise asynchronous.

+ +

sync

+ +
try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}
+ +

async

+ +
myFunction().then(function(value) {
+  console.log(value);
+  }).catch(function(err) {
+  console.log(err);
+});
+ +

Pada contoh pertama, kita perlu mengunggu myFunction() untuk dijalankan dan mengembalikan nilai sebelum kode lain bisa dijalankan. Pada contoh kedua, myFunction() mengembalikan promise untuk nilai, kemudian semua kode dapat di bawa untuk dapat dijalankan. Ketika promise diselesaikan, kode didalamnya bisa dijalankan secara asynchronously.
+
+ Sebagai contoh nyata — jika kita ingin memuat gambar secara dinamic, tapi kita ingin memastikan bahwa gambar tersebut di muat terlebih dahulu sebelum di tampilkan? Hal standar ini yang ingin dilakukan, tapi ini akan sedikit sulit. Kita bisa mengunakan .onload untuk hanya menampilkan gambar setelah di muat, tapi bagaimana dengan event yang memulai sebelum kita memulai melacaknya ? kita bisa mencoba melakukannya dengan menggunakan.complete, tapi ini tetap tidak foolproof, dan bagaimana dengan lebih dari satu gambar? Dan, ummm, ini tetap synchronous, Jadi di blok di tread utama.
+
+ Gantinya, kita bisa membuat promis kita sendiri untuk mengatasi kasus seperi ini. (Lihat contoh Promises test untuk kode sumber, atau Lihat cara kerja secara live.)

+ +

{{note("Implementasi service worker akan mengutamakan menggunakan caching dan onfetch daripada XMLHttpRequest API. Fitur tersebut tidak di gunakan disini jadi anda hanya fokus pada penggunaan Promises.")}}

+ +
function imgLoad(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('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}
+ +

Kita mengembalikan promis baru menggunakan konstruktor Promise(), di mana menggunakan argumen sebagai fungsi callback dengan parameter resolve dan reject. DImanapung di fungsi, kita perlu mendefinisikan apa yang terjadi untuk promise yang diselesaikan secara sukses atau ditolak — pada kasus ini mengembalikan status 200 OK atau tidak — dan kemudian memanggil  resolve ketika sukses, atau reject jika gagal. Semua konten dari fungsi ini adalah perangkat dasar XHR, jadi kita tidak perlu khawatir untuk saat ini.

+ +

Ketika memanggil fungsi imgLoad(), kita memanggilnya dengan menggunakan url gambar yang akan dimuat, seperti yang kita harapkan, namun kodenya sedikit berbeda:

+ +
var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});
+ +

Pada akhir pemanggilan fungsi, kita menggabungkan promise method then(), dimana terdiri dari dua fungsi — yang pertama akan di eksekusi ketika promise berhasil di selesaikan, dan yang kedua akan dipanggil ketika promise di tolak. Pada penyelesaian kasus, kita menampilkan gambar di dalam myImage dan menambahkannya ke body (dengan argumen request.response yang berada di dalam method resolve); pada kasus ditolak kita mengembalikan error di console.

+ +

Semua terjadi secara asynchronously.

+ +
+

Catatan: Anda juga bisa menggabungkan panggilan promise secara bersamaan, Misal:
+ myPromise().then(success, failure).then(success).catch(failure);

+
+ +
+

Catatan: Anda bisa mendapatkan lebih banyak informasi tentang promise dengan membaca tulisan Jake Archibald’s excellent JavaScript Promises: there and back again.

+
+ +

Demo service workers

+ +

Sebagai demonstrasi hanya sekedar dasar pendaftaran dan penginstalan service worker, kita membuat sebuah demo sederhana dengan nama sw-test, berupa galeri gambar Star wars Lego. Mengunakan fungsi dengan promise untuk membaca data gambar dari sebuah objek JSON dan memuat gambar menggunakan Ajax, Sebelum menamilkan gambar pada halaman. Kita akan semuanya tetap simple dan statis untuk saat ini. Di sini pendaftaran, instalasi, dan akativasi sebuah service worker, dan ketika semua spec di dukung oleh browsers maka semua file yang diperukan akan dicache untuk di muat secara offline!

+ +


+
+
+ Anda bisa melihat source code di GitHub, dan Melihat contoh secara live. The one bit we’ll call out here is the promise (see app.js lines 17-42), which is a modified version of what you read about above, in the Promises test demo. It is different in the following ways:

+ +
    +
  1. In the original, we only passed in a URL to an image we wanted to load. In this version, we pass in a JSON fragment containing all the data for a single image (see what they look like in image-list.js). This is because all the data for each promise resolve has to be passed in with the promise, as it is asynchronous. If you just passed in the url, and then tried to access the other items in the JSON separately when the for() loop is being iterated through later on, it wouldn’t work, as the promise wouldn’t resolve at the same time as the iterations are being done (that is a synchronous process.)
    2. +
  2. We actually resolve the promise with an array, as we want to make the loaded image blob available to the resolving function later on in the code, but also the image name, credits and alt text (see app.js lines 26-29). Promises will only resolve with a single argument, so if you want to resolve with multiple values, you need to use an array/object.
    3. +
  3. To access the resolved promise values, we then access this function as you’d then expect (see app.js lines 55-59.) This may seem a bit odd at first, but this is the way promises work.
    4. +
+ +

Enter Service workers

+ +

Now let’s get on to service workers!

+ +

Mendaftarkan worker

+ +

The first block of code in our app’s JavaScript file — app.js — is as follows. This is our entry point into using service workers.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
+    // registration worked
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch(function(error) {
+    // registration failed
+    console.log('Registration failed with ' + error);
+  });
+};
+ +
    +
  1. The outer block performs a feature detection test to make sure service workers are supported before trying to register one.
    2. +
  2. Next, we use the {{domxref("ServiceWorkerContainer.register()") }} function to register the service worker for this site, which is just a JavaScript file residing inside our app (note this is the file's URL relative to the origin, not the JS file that references it.)
    3. +
  3. The scope parameter is optional, and can be used to specify the subset of your content that you want the service worker to control. In this case, we have specified '/sw-test/', which means all content under the app's origin. If you leave it out, it will default to this value anyway, but we specified it here for illustration purposes.
    4. +
  4. The .then() promise function is used to chain a success case onto our promise structure.  When the promise resolves successfully, the code inside it executes.
    5. +
  5. Finally, we chain a .catch() function onto the end that will run if the promise is rejected.
    6. +
+ +

This registers a service worker, which runs in a worker context, and therefore has no DOM access. You then run code in the service worker outside of your normal pages to control their loading.
+
+ A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it. Bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesn’t get its own unique worker.

+ +
+

Note: Your service worker functions like a proxy server, allowing you to modify requests and responses, replace them with items from its own cache, and more.

+
+ +
+

Note: One great thing about service workers is that if you use feature detection like we’ve shown above, browsers that don’t support service workers can just use your app online in the normal expected fashion. Furthermore, if you use AppCache and SW on a page, browsers that don’t support SW but do support AppCache will use that, and browsers that support both will ignore the AppCache and let SW take over.

+
+ +

Kenapa service worker saya gagal didaftarkan?

+ +

Hal tersebut bisa terjadi karena alasan berikut:

+ +
    +
  1. Anda tidak menjalankan aplikasi dari HTTPS.
    2. +
  2. Path dari file service worker anda tidak ditulis dengan benar — seharusnya di tulis relatif terhadap origin, bukan root dari direktori aplikasi anda. Pada contoh, worker berada di https://mdn.github.io/sw-test/sw.js, dan root aplikasi di https://mdn.github.io/sw-test/. Namun path harus ditulis /sw-test/sw.js, bukan /sw.js.
    3. +
  3. The service worker being pointed to is on a different origin to that of your app. This is also not allowed.
    4. +
+ +

+ +

Also note:

+ + + +

Install dan activasi: mengumpulkan cache

+ +

Setelah service worker anda terdaftar, browser akan menginstall dan mengaktifkan service worker untuk halaman/situs anda.
+
+ Event instal dijalankan ketika install selesai dengan sukses. Event install biasanya digunakan oleh browser untuk mengumpulkan cache offline dari aset yang akan digunakan untuk menjalankan aplikasi anda secara offline. Untuk melakukannya, kita menggunakan Storage API dari Service Worker — {{domxref("cache")}} —  global pada service worker yang memungkinkan kita menympan aset yang diterima dari response, dan di sandikan berdasarkan request. API ini sama halnya dengan cache pada browser umumnya, tapi lebih spesifik ke domain. Ini persis hinga anda tidak menginginkan — anda punya kontrol penuh.

+ +
+

Note: The Cache API is not supported in every browser. (See the {{anch("Browser support")}} section for more information.) If you want to use this now, you could consider using a polyfill like the one available in Google's Topeka demo, or perhaps store your assets in IndexedDB.

+
+ +

Let’s start this section by looking at a code sample — this is the first block you’ll find in our service worker:

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+ +
    +
  1. Here we add an install event listener to the service worker (hence this), and then chain a {{domxref("ExtendableEvent.waitUntil()") }} method onto the event — this ensures that the Service Worker will not install until the code inside waitUntil() has successfully occurred.
    2. +
  2. Inside waitUntil() we use the caches.open() method to create a new cache called v1, which will be version 1 of our site resources cache. This returns a promise for a created cache; once resolved, we then call a function that calls addAll() on the created cache, which for its parameter takes an array of origin-relative URLs to all the resources you want to cache.
    3. +
  3. If the promise is rejected, the install fails, and the worker won’t do anything. This is ok, as you can fix your code and then try again the next time registration occurs.
    4. +
  4. After a successful installation, the service worker activates. This doesn’t have much of a distinct use the first time your service worker is installed/activated, but it means more when the service worker is updated (see the {{anch("Updating your service worker") }} section later on.)
    5. +
+ +
+

Note: localStorage works in a similar way to service worker cache, but it is synchronous, so not allowed in service workers.

+
+ +
+

Note: IndexedDB can be used inside a service worker for data storage if you require it.

+
+ +

Custom responses to requests

+ +

Now you’ve got your site assets cached, you need to tell service workers to do something with the cached content. This is easily done with the fetch event.

+ +

+ +

A fetch event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, and any resources referenced in those documents (for example if index.html makes a cross origin request to embed an image, that still goes through its service worker.)

+ +

You can attach a fetch event listener to the service worker, then call the respondWith() method on the event to hijack our HTTP responses and update them with your own magic.

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // magic goes here
+  );
+});
+ +

We could start by simply responding with the resource whose url matches that of the network request, in each case:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request);
+  );
+});
+ +

caches.match(event.request) allows us to match each resource requested from the network with the equivalent resource available in the cache, if there is a matching one available. The matching is done via url and vary headers, just like with normal HTTP requests.

+ +

Let’s look at a few other options we have when defining our magic (see our Fetch API documentation for more information about {{domxref("Request")}} and {{domxref("Response")}} objects.)

+ +
    +
  1. +

    The {{domxref("Response.Response","Response()")}} constructor allows you to create a custom response. In this case, we are just returning a simple text string:

    + + 
    new Response('Hello from your friendly neighbourhood service worker!');
    +
    2. +
  2. +

    This more complex Response below shows that you can optionally pass a set of headers in with your response, emulating standard HTTP response headers. Here we are just telling the browser what the content type of our synthetic response is:

    + + 
    new Response('
    + +

    Hello from your friendly neighbourhood service worker!

    + ', { headers: { 'Content-Type': 'text/html' } })
    3. +
  3. +

    If a match wasn’t found in the cache, you could tell the browser to simply {{domxref("GlobalFetch.fetch","fetch")}} the default network request for that resource, to get the new resource from the network if it is available:

    + + 
    fetch(event.request)
    +
    4. +
  4. +

    If a match wasn’t found in the cache, and the network isn’t available, you could just match the request with some kind of default fallback page as a response using {{domxref("CacheStorage.match","match()")}}, like this:

    + + 
    caches.match('/fallback.html');
    +
    5. +
  5. +

    You can retrieve a lot of information about each request by calling parameters of the {{domxref("Request")}} object returned by the {{domxref("FetchEvent")}}:

    + + 
    event.request.url
+event.request.method
+event.request.headers
+event.request.body
    +
    6. +
+ +

Recovering failed requests

+ +

So caches.match(event.request) is great when there is a match in the service worker cache, but what about cases when there isn’t a match? If we didn’t provide any kind of failure handling, our promise would reject and we would just come up against a network error when a match isn’t found.

+ +

Fortunately service workers’ promise-based structure makes it trivial to provide further options towards success. We could do this:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request);
+    })
+  );
+});
+ +

If the promise rejects, the catch() function returns the default network request for the resource instead, meaning that those who have network available can just load the resource from the server.

+ +

If we were being really clever, we would not only request the resource from the network; we would also save it into the cache so that later requests for that resource could be retrieved offline too! This would mean that if extra images were added to the Star Wars gallery, our app could automatically grab them and cache them. The following would do the trick:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});
+ +

Here we return the default network request with return fetch(event.request), which returns a promise. When this promise is resolved, we respond by running a function that grabs our cache using caches.open('v1'); this also returns a promise. When that promise resolves, cache.put() is used to add the resource to the cache. The resource is grabbed from event.request, and the response is then cloned with response.clone() and added to the cache. The clone is put in the cache, and the original response is returned to the browser to be given to the page that called it.

+ +

Why? This is because request and response streams can only be read once.  In order to return the response to the browser and put it in the cache we have to clone it. So the original gets returned to the browser and the clone gets sent to the cache.  They are each read once.

+ +

The only trouble we have now is that if the request doesn’t match anything in the cache, and the network is not available, our request will still fail. Let’s provide a default fallback so that whatever happens, the user will at least get something:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});
+ +

We have opted for this fallback image because the only updates that are likely to fail are new images, as everything else is depended on for installation in the install event listener we saw earlier.

+ +

Updated code pattern suggestion

+ +

This uses more standard promise chaining and returns the response to the document without having to wait for caches.open() to resolve:

+ +
this.addEventListener('fetch', function(event) {
+  var response;
+  event.respondWith(caches.match(event.request).catch(function() {
+    return fetch(event.request);
+  }).then(function(r) {
+    response = r;
+    caches.open('v1').then(function(cache) {
+      cache.put(event.request, response);
+    });
+    return response.clone();
+  }).catch(function() {
+    return caches.match('/sw-test/gallery/myLittleVader.jpg');
+  }));
+});
+ +

Membaharui service worker

+ +

If your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates.

+ +

You’ll want to update your install event listener in the new service worker to something like this (notice the new version number):

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+
+             …
+
+              // include other new resources for the new version...
+      ]);
+    });
+  );
+});
+ +

While this happens, the previous version is still responsible for fetches. The new version is installing in the background. We are calling the new cache v2, so the previous v1 cache isn't disturbed.

+ +

When no pages are using the current version, the new worker activates and becomes responsible for fetches.

+ +

Deleting old caches

+ +

You also get an activate event. This is a generally used to do stuff that would have broken the previous version while it was still running, for example getting rid of old caches. This is also useful for removing data that is no longer needed to avoid filling up too much disk space — each browser has a hard limit on the amount of cache storage that a given service worker can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin.  The browser will generally delete all of the data for an origin or none of the data for an origin.

+ +

Promises passed into waitUntil() will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first fetch event on the new cache.

+ +
this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+ +

Dev tools

+ +

Chrome has chrome://inspect/#service-workers, which shows current service worker activity and storage on a device, and chrome://serviceworker-internals, which shows more detail and allows you to start/stop/debug the worker process. In the future they will have throttling/offline modes to simulate bad or non-existent connections, which will be a really good thing.

+ +

Firefox has also started to implement some useful tools related to service workers:

+ + + +

Spesifikasi

+ + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('Service Workers', '')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Dukungan dasar{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("33.0") }}[1]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Dukungan dasar{{CompatNo}}{{CompatChrome(40.0)}}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{CompatNo}}{{ CompatVersionUnknown() }}{{CompatNo}}
+
+ +

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)

+ +

Lihat juga

+ + diff --git a/files/id/web/api/serviceworker/index.html b/files/id/web/api/serviceworker/index.html new file mode 100644 index 0000000000..26787c6031 --- /dev/null +++ b/files/id/web/api/serviceworker/index.html @@ -0,0 +1,157 @@ +--- +title: ServiceWorker +slug: Web/API/ServiceWorker +tags: + - API + - Draft + - Offline + - Referensi + - ServiceWorker +translation_of: Web/API/ServiceWorker +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

Antarmuka ServiceWorker dari ServiceWorker API menyediakan referensi kepada service worker. Konteks multi browsing (mis. halaman, pekerja, dll.) dapat dikaitkan dengan service worker yang sama, masing - masing melalui objek ServiceWorker tersendiri.

+ +

Objek ServiceWorker tersedia di properti {{domxref("ServiceWorkerRegistration.active")}} , dan properti {{domxref("ServiceWorkerContainer.controller")}}  — ini adalah service worker yang aktif dan mengontrol halaman (service worker telah sukses terdaftar, dan halaman yang di kontrol telah di muat kembali.)

+ +

Antarmuka ServiceWorker terbagi sebagai rangkaian siklus event — install dan activate — dan fungsional event termasuk fetch. Objek ServiceWorker memiliki keterkaitan {{domxref("ServiceWorker.state")}}, berdasarkan siklusnya.

+ +

Properti

+ +

Antarmuka ServiceWorker mewarisi properti dari induknya, {{domxref("Worker")}}.

+ +
+
{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}
+
Mengembalikan serialisasi script URL ServiceWorker didefinisikan sebagai bagian dari {{domxref("ServiceWorkerRegistration")}}. URL harus dari origin yang sama dengan dokumen yang mendaftarkan ServiceWorker.
+
{{domxref("ServiceWorker.state")}} {{readonlyinline}}
+
Mengembalikan status keadaan service worker. Akan mengembalikan salah satu dari nilai berikut: installing, installed, activating, activated, atau redundant.
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}
+
Properti {{domxref("EventListener")}} dipanggil setiap kali event type statechange di jalankan; Pada dasarnya dijalankan setiap ada perubahan pada {{domxref("ServiceWorker.state")}}.
+
+ +

Method

+ +

Antarmuka ServiceWorker mewarisi method dari induknya, {{domxref("Worker")}}, dengan pengecualian {{domxref("Worker.terminate")}} — tidak harus dapat diakses dari service workers.

+ +

Contoh

+ +

Ini adalah potongan kode dari service worker registration-events sample (live demo). Kode memperhatikan setiap perubahan di {{domxref("ServiceWorker.state")}} dan mengembalikan nilainya.

+ +
if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('service-worker.js', {
+        scope: './'
+    }).then(function (registration) {
+        var serviceWorker;
+        if (registration.installing) {
+            serviceWorker = registration.installing;
+            document.querySelector('#kind').textContent = 'Menginstall';
+        } else if (registration.waiting) {
+            serviceWorker = registration.waiting;
+            document.querySelector('#kind').textContent = 'Mengunggu';
+        } else if (registration.active) {
+            serviceWorker = registration.active;
+            document.querySelector('#kind').textContent = 'Aktif';
+        }
+        if (serviceWorker) {
+            // logState(serviceWorker.state);
+            serviceWorker.addEventListener('statechange', function (e) {
+                // logState(e.target.state);
+            });
+        }
+    }).catch (function (error) {
+        // Terjadi kesalahan saat mendaftarkan. File service-worker.js
+        // mungkin tidak tersedia atau terdapat sintaks yang error.
+    });
+} else {
+    // Browser ini tidak mendukung service worker.
+}
+ +

Spesifikasi

+ + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('Service Workers', '#service-worker-obj', 'ServiceWorker')}}{{Spec2('Service Workers')}}Definisi inisial
+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Dukungan dasar{{CompatChrome(40.0)}}{{CompatGeckoDesktop("44.0")}}[1]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FiturAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Dukungan dasar{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("44.0")}}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}
+
+ +

[1] Service workers (dan Push) telah di nonaktifkan di Firefox 45 Extended Support Release (ESR.)

+ +

See also

+ + diff --git a/files/id/web/api/serviceworkercontainer/index.html b/files/id/web/api/serviceworkercontainer/index.html new file mode 100644 index 0000000000..ab3f71a543 --- /dev/null +++ b/files/id/web/api/serviceworkercontainer/index.html @@ -0,0 +1,132 @@ +--- +title: ServiceWorkerContainer +slug: Web/API/ServiceWorkerContainer +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - Service worker API + - ServiceWorkerContainer + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerContainer +--- +

{{APIRef("Service Workers API")}}

+ +

The ServiceWorkerContainer interface of the Service Worker API provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.

+ +

Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.

+ +

Properties

+ +
+
{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}
+
Returns a {{domxref("ServiceWorker")}} object if its state is activated (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns null during a force-refresh request (Shift + refresh) or if there is no active worker.
+
+ +
+
{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}
+
Provides a way of delaying code execution until a service worker is active. It returns a {{jsxref("Promise")}} that will never reject, and which waits indefinitely until the {{domxref("ServiceWorkerRegistration")}} associated with the current page has an {{domxref("ServiceWorkerRegistration.active")}} worker. Once that condition is met, it resolves with the {{domxref("ServiceWorkerRegistration")}}.
+
+ +

Events

+ +
+
controllerchange
+
Occurs when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active","active")}} worker.
+ Also available via the {{domxref("ServiceWorkerContainer.oncontrollerchange")}} property.
+
error
+
Fired whenever an error occurs in the associated service workers.
+ Also available via the {{domxref("ServiceWorkerContainer.onerror")}} property.
+
message
+
Occurs when incoming messages are received by the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)
+ Also available via the {{domxref("ServiceWorkerContainer.onmessage")}} property.
+
+ +

Methods

+ +
+
{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} 
+
Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given scriptURL.
+
{{domxref("ServiceWorkerContainer.getRegistration()")}}
+
Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope matches the provided document URL.  The method returns a {{jsxref("Promise")}} that resolves to a {{domxref("ServiceWorkerRegistration")}} or undefined. 
+
{{domxref("ServiceWorkerContainer.getRegistrations()")}}
+
Returns all {{domxref("ServiceWorkerRegistration")}} objects associated with a ServiceWorkerContainer in an array.  The method returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("ServiceWorkerRegistration")}}. 
+
{{domxref("ServiceWorkerContainer.startMessages()")}}
+
explicitly starts the flow of messages being dispatched from a service worker to pages under its control (e.g. sent via {{domxref("Client.postMessage()")}}). This can be used to react to sent messages earlier, even before that page's content has finished loading.
+
+ +

Examples

+ +

The example below first checks to see if the browser supports service workers. If supported, the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.

+ +
if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker registration succeeded:', registration);
+
+    // At this point, you can optionally do something
+    // with registration. See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
+  }).catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+
+  // Independent of the registration, let's also display
+  // information about whether the current page is controlled
+  // by an existing service worker, and when that
+  // controller changes.
+
+  // First, do a one-off check if there's currently a
+  // service worker in control.
+  if (navigator.serviceWorker.controller) {
+    console.log('This page is currently controlled by:', navigator.serviceWorker.controller);
+  }
+
+  // Then, register a handler to detect when a new or
+  // updated service worker takes control.
+  navigator.serviceWorker.oncontrollerchange = function() {
+    console.log('This page is now controlled by:', navigator.serviceWorker.controller);
+  };
+} else {
+  console.log('Service workers are not supported.');
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#serviceworkercontainer', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.ServiceWorkerContainer")}}

+
+ +

See also

+ + diff --git a/files/id/web/api/serviceworkerregistration/index.html b/files/id/web/api/serviceworkerregistration/index.html new file mode 100644 index 0000000000..6ce1b3c033 --- /dev/null +++ b/files/id/web/api/serviceworkerregistration/index.html @@ -0,0 +1,245 @@ +--- +title: ServiceWorkerRegistration +slug: Web/API/ServiceWorkerRegistration +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - ServiceWorkerRegistration + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerRegistration +--- +
+
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+
+ +

The ServiceWorkerRegistration interface of the ServiceWorker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin.

+ +

The lifetime of a service worker registration is beyond that of the ServiceWorkerRegistration objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active ServiceWorkerRegistration objects.

+ +
+

Note: This feature is available in Web Workers.

+
+ +

Properties

+ +

Also implements properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}
+
Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.
+
{{domxref("ServiceWorkerRegistration.installing")}} {{readonlyinline}}
+
Returns a service worker whose state is installing. This is initially set to null.
+
{{domxref("ServiceWorkerRegistration.waiting")}} {{readonlyinline}}
+
Returns a service worker whose state is installed. This is initially set to null.
+
{{domxref("ServiceWorkerRegistration.active")}} {{readonlyinline}}
+
Returns a service worker whose state is either activating or activated. This is initially set to null. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the scope option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)
+
{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes.
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.
+
{{domxref("ServiceWorkerRegistration.sync")}} {{non-standard_inline}} {{readonlyinline}} 
+
Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}
+
An EventListener property called whenever an event of type updatefound is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.
+
+ +

Methods

+ +

Also implements methods from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("ServiceWorkerRegistration.getNotifications()")}}
+
Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.
+
{{domxref("ServiceWorkerRegistration.showNotification()")}}
+
Displays the notification with the requested title.
+
{{domxref("ServiceWorkerRegistration.update()")}}
+
Checks the server for an updated version of the service worker without consulting caches.
+
{{domxref("ServiceWorkerRegistration.unregister()")}}
+
Unregisters the service worker registration and returns a promise (see {{jsxref("Promise")}}). The service worker will finish any ongoing operations before it is unregistered.
+
+ +

Examples

+ +

This code snippet is from the service worker registration-events sample (live demo). The code checks to see if the browser supports service workers and if there's currently a service worker handling requests on this page for the current navigation.

+ +

Any new service workers are registered; if there's an existing service worker, the code overrides its default scope so that the registration applies to the current directory and everything underneath it. The example also reports any registration failures.

+ +
if ('serviceWorker' in navigator) {
+  document.querySelector('#availability').innerText = 'are';
+  document.querySelector('#controlled').innerText = navigator.serviceWorker.controller ? 'is' : 'is not';
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function(registration) {
+    document.querySelector('#register').textContent = 'succeeded';
+  }).catch(function(error) {
+    document.querySelector('#register').textContent = 'failed: ' + error;
+  });
+} else {
+  document.querySelector('#availability').innerText = 'are not';
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}{{Spec2('Service Workers')}}Initial definition.
{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}{{Spec2('Push API')}}Adds the {{domxref("PushManager","pushManager")}} property.
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.
{{SpecName('Background Sync')}}{{Spec2('Background Sync')}}Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Available in web workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("44.0")}}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
getNotifications(), showNotification(){{CompatVersionUnknown}}{{CompatGeckoDesktop("46.0")}}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
sync property{{CompatChrome(49.0)}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}
Available in web workers{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("44.0")}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
getNotifications(), showNotification(){{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("46.0")}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
sync property{{CompatNo}}{{CompatNo}}     {{CompatChrome(49.0)}}
+
+ +

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)

+ +

See also

+ + diff --git a/files/id/web/api/serviceworkerregistration/pushmanager/index.html b/files/id/web/api/serviceworkerregistration/pushmanager/index.html new file mode 100644 index 0000000000..57f61c1375 --- /dev/null +++ b/files/id/web/api/serviceworkerregistration/pushmanager/index.html @@ -0,0 +1,130 @@ +--- +title: ServiceWorkerRegistration.pushManager +slug: Web/API/ServiceWorkerRegistration/pushManager +tags: + - API + - Property + - Push + - PushManager + - ServiceWorker +translation_of: Web/API/ServiceWorkerRegistration/pushManager +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

Properti pushManager dari interface {{domxref("ServiceWorkerRegistration")}}  Mengembalikan sebuah referensi ke Interface {{domxref("PushManager")}} untuk mengatur push subscriptions; termasuk dukungan untuk berlangganan, mendapatkan langganan yang aktif, dan mengakses izin status push.

+ +

Sintaks

+ +
myPushManager = ServiceWorker.pushManager
+
+ +

Value

+ +

Objek {{domxref("PushManager")}}.

+ +

Contoh

+ +
this.onpush = function(event) {
+  console.log(event.data);
+  // Dari sini kita bisa menyimpan data ke IndexedDB, mengirimnya ke setiap
+  // jendela yang terbuka, menampilkan notifikasi, dsb.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // Detail langganan push dibutuhkan aplikasi
+        // server kini tersedia, dan dapat di kirimkan menggunakan,
+        // XMLHttpRequest misalnya.
+      }, function(error) {
+        // Pada saat pengembangan menampilkan log ke konsole sangatlah membantu
+        // Di lingkungan produksi juga dapat bermanfaat untuk mengirimkan
+        // informasi error kembali ke aplikasi server.
+        console.log(error);
+      }
+    );
+  });
+ +

Spesifikasi

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Push API', '#pushmanager-interface', 'PushManager')}}{{Spec2('Push API')}}Initial definition.
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

[1] Service workers (dan Push) telah dinonaktifkan di Firefox 45 Extended Support Release (ESR.)

+ +

Lihat Juga

+ + diff --git a/files/id/web/api/speechsynthesis/index.html b/files/id/web/api/speechsynthesis/index.html new file mode 100644 index 0000000000..78a50f3f47 --- /dev/null +++ b/files/id/web/api/speechsynthesis/index.html @@ -0,0 +1,151 @@ +--- +title: SpeechSynthesis +slug: Web/API/SpeechSynthesis +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Reference + - SpeechSynthesis + - TopicStub + - Web Speech API + - speech + - synthesis +translation_of: Web/API/SpeechSynthesis +--- +

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

+ +

The SpeechSynthesis interface of the Web Speech API is the controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.

+ +

Properties

+ +

SpeechSynthesis also inherits properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}
+
A {{domxref("Boolean")}} that returns true if the SpeechSynthesis object is in a paused state.
+
{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}
+
A {{domxref("Boolean")}} that returns true if the utterance queue contains as-yet-unspoken utterances.
+
{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}
+
A {{domxref("Boolean")}} that returns true if an utterance is currently in the process of being spoken — even if SpeechSynthesis is in a paused state.
+
+ +
+
+ +

Methods

+ +

SpeechSynthesis also inherits methods from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechSynthesis.cancel()")}}
+
Removes all utterances from the utterance queue.
+
{{domxref("SpeechSynthesis.getVoices()")}}
+
Returns a list of {{domxref("SpeechSynthesisVoice")}} objects representing all the available voices on the current device.
+
{{domxref("SpeechSynthesis.pause()")}}
+
Puts the SpeechSynthesis object into a paused state.
+
{{domxref("SpeechSynthesis.resume()")}}
+
Puts the SpeechSynthesis object into a non-paused state: resumes it if it was already paused.
+
{{domxref("SpeechSynthesis.speak()")}}
+
Adds an {{domxref("SpeechSynthesisUtterance", "utterance")}} to the utterance queue; it will be spoken when any other utterances queued before it have been spoken.
+
+ +

Events

+ +

Listen to this event using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
voiceschanged
+
Fired when the list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed.
+ Also available via the onvoiceschanged property.
+
+ +

Examples

+ +

In our basic Speech synthesiser demo, we first grab a reference to the SpeechSynthesis controller using window.speechSynthesis. After defining some necessary variables, we retrieve a list of the voices available using {{domxref("SpeechSynthesis.getVoices()")}} and populate a select menu with them so the user can choose what voice they want.

+ +

Inside the inputForm.onsubmit handler, we stop the form submitting with preventDefault(),  create a new {{domxref("SpeechSynthesisUtterance")}} instance containing the text from the text {{htmlelement("input")}}, set the utterance's voice to the voice selected in the {{htmlelement("select")}} element, and start the utterance speaking via the {{domxref("SpeechSynthesis.speak()")}} method.

+ +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+
+function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i < voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}
+
+populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i < voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);
+
+  inputTxt.blur();
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Speech API', '#tts-section', 'SpeechSynthesis')}}{{Spec2('Web Speech API')}} 
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.SpeechSynthesis")}}

+
+ +

See also

+ + diff --git a/files/id/web/api/speechsynthesis/onvoiceschanged/index.html b/files/id/web/api/speechsynthesis/onvoiceschanged/index.html new file mode 100644 index 0000000000..3a5a3f799c --- /dev/null +++ b/files/id/web/api/speechsynthesis/onvoiceschanged/index.html @@ -0,0 +1,74 @@ +--- +title: Kk +slug: Web/API/SpeechSynthesis/onvoiceschanged +translation_of: Web/API/SpeechSynthesis/onvoiceschanged +--- +
{{APIRef("Web Speech API")}}{{SeeCompatTable}}
+ +

The onvoiceschanged property of the {{domxref("SpeechSynthesis")}} interface represents an event handler that will run when the list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the voiceschanged event fires.)

+ +

This may occur when speech synthesis is being done on the server-side and the voices list is being determined asynchronously, or when client-side voices are installed/uninstalled while a speech synthesis application is running.

+ +

Syntax

+ +
speechSynthesisInstance.onvoiceschanged = function() { ... };
+
+ +

Examples

+ +

This could be used to populate a list of voices that the user can choose between when the event fires (see our Speak easy synthesis demo.) Note that Firefox doesn't support it at present, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the bottom if statement seen below.

+ +
var voices = [];
+
+function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i < voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}
+
+populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Speech API', '#dom-speechsynthesis-onvoiceschanged', 'onvoiceschanged')}}{{Spec2('Web Speech API')}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.SpeechSynthesis.onvoiceschanged")}}

+
+ +

See also

+ + diff --git a/files/id/web/api/storage/index.html b/files/id/web/api/storage/index.html new file mode 100644 index 0000000000..2231fe2bd8 --- /dev/null +++ b/files/id/web/api/storage/index.html @@ -0,0 +1,100 @@ +--- +title: Storage +slug: Web/API/Storage +translation_of: Web/API/Storage +--- +
{{APIRef("Web Storage API")}}
+ +

The Storage interface of the Web Storage API provides access to a particular domain's session or local storage. It allows, for example, the addition, modification, or deletion of stored data items.

+ +

To manipulate, for instance, the session storage for a domain, a call to {{domxref("Window.sessionStorage")}} is made; whereas for local storage the call is made to {{domxref("Window.localStorage")}}.

+ +

Properties

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
Returns an integer representing the number of data items stored in the Storage object.
+
+ +

Methods

+ +
+
{{domxref("Storage.key()")}}
+
When passed a number n, this method will return the name of the nth key in the storage.
+
+ +
+
{{domxref("Storage.getItem()")}}
+
When passed a key name, will return that key's value.
+
{{domxref("Storage.setItem()")}}
+
When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.
+
{{domxref("Storage.removeItem()")}}
+
When passed a key name, will remove that key from the storage.
+
{{domxref("Storage.clear()")}}
+
When invoked, will empty all keys out of the storage.
+
+ +

Examples

+ +

Here we access a Storage object by calling localStorage. We first test whether the local storage contains data items using !localStorage.getItem('bgcolor'). If it does, we run a function called setStyles() that grabs the data items using {{domxref("Storage.getItem()")}} and uses those values to update page styles. If it doesn't, we run another function, populateStorage(), which uses {{domxref("Storage.setItem()")}} to set the item values, then runs setStyles().

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+}
+setStyles();
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Note: To see this running as a complete working example, see our Web Storage Demo.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.Storage")}}

+ +

See also

+ + diff --git a/files/id/web/api/webgl_api/index.html b/files/id/web/api/webgl_api/index.html new file mode 100644 index 0000000000..3450359705 --- /dev/null +++ b/files/id/web/api/webgl_api/index.html @@ -0,0 +1,235 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - Referensi + - WebGL +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +
+

WebGL (Web Graphics Library) merupakan JavaScript API untuk merender grafik interaktif dalam bentuk 3D dan 2D pada setiap web browser yang kompitable tanpa menggunakan plug-in. WebGL juga memperkenalkan sebuah API yang berkaitan erat dengan OpenGL ES 2.0 yang dapat digunakan di elemen {{HTMLElement("canvas")}} HTML5.

+
+ +

Dukungan WebGL telah tersedia di Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ dan Internet Explorer 11+; namum, perangkat pengguna juga harus memiliki perangkat keras yang mendukung fitur ini.

+ +

Elemen {{HTMLElement("canvas")}} juga digunakan oleh Canvas 2D untuk menggambar grafik 2D pada halaman web.

+ +

Referensi

+ +

Standar Antarmuka

+ +
+ +
+ +

Ekstensi

+ +
+ +
+ +

Event

+ + + +

Tipe dan konstanta

+ + + +

Paduan dan tutorial

+ + + +

Tutorial lanjutan

+ + + +

Sumber

+ + + +

Pustaka

+ + + +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Initial definition. Based on OpenGL ES 2.0
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Builds on top of WebGL1. Based on OpenGL ES 3.0.
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}} 
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}} 
+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("2.0")}}91112[1]5.1[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Chrome for AndroidIE MobileOpera MobileSafari Mobile
Basic support425[1]{{CompatNo}}12[1]8.1
+
+ +

[1]  Implementasi dari fitur ini adalah eksperimental.

+ +

Catatan kompabilitas

+ +

Selain browser, GPU sendiri juga dibutuhkan untuk mendukung fitur ini. Contohnya, S3 Texture Compression (S3TC) hanya tersedia di tablet berbasis Tegra. Hampir setiap browser membuat konteks WebGL tersedia dari nama konteks webgl, tapi untuk yang lebih lama juga memerlukan experimental-webgl. Selain itu , nantinya WebGL 2 sepenuhnya kompitable dengan yang sebelumnya dan akan memiliki nama konteks webgl2.

+ +

Catatan Gecko

+ +

Pengujian dan debungging WebGL

+ +

Dimulai dari Gecko 10.0 {{geckoRelease("10.0")}}, disana tersedia dua pengaturan yang memungkinkan anda mengontrol kemampuan WebGL untuk keperluan percobaan:

+ +
+
webgl.min_capability_mode
+
Properti Boolean yang, jika true, mengaktifkan mode kemampuan minimum. Pada mode ini, WebGL hanya diatur untuk mendukung fitur pengaturan minimum dan kemampuan yang dibutuhkan oleh spesifikasi WebGL. Memungkinkan anda untuk memastikan bahwa kode WebGL anda akan bekerja untuk setiap perangkat atau browser, tergantung dari kemampuan mereka. Nilai defaultnya adalah false.
+
webgl.disable_extensions
+
Properti Boolean yang, jika true, menonaktifkan semua ekstensi WebGL. Nilai defaultnya false.
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/api/webrtc_api/index.html b/files/id/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..6d9aa7392c --- /dev/null +++ b/files/id/web/api/webrtc_api/index.html @@ -0,0 +1,185 @@ +--- +title: WebRTC API +slug: Web/API/WebRTC_API +translation_of: Web/API/WebRTC_API +--- +
{{APIRef("WebRTC")}}
+ +

WebRTC (Web Real-Time Communications) merupakan teknologi yang memungkinkan situs dan aplikasi berbasis web menangkap dan mengirimkan audio atau video, serta bertukar data antar peramban web tanpa memerlukan adanya perantara. Kumpulan standar di dalam WebRTC membuat pertukaran data dan telekonferensi secara peer-to-peer dapat terjadi tanpa perlu memasang plugins atau aplikasi pihak ketiga.

+ +

WebRTC terdiri dari berbagai API dan protokol yang saling terkait sehingga dapat bekerja sebagaimana mestinya. Dokumentasi ini akan membantu anda untuk memahami dasar-dasar WebRTC, bagaimana mengatur dan menggunakan sambungan data dan media, serta hal lainnya.

+ +

Konsep dan cara penggunaan WebRTC

+ +

WebRTC memiliki beberapa fungsi, begitu halnya juga dengan Media Capture and Streams ({{domxref("MediaDevices")}}) API. Keduanya menghadirkan kemampuan multimedia di dalam web, misalnya audio dan video conferencing, pertukaran file, identity management, serta interaksi pada jaringan telepon dengan cara mengirimkan sinyal {{Glossary("DTMF")}}. Sambungan antar peer dapat terbentuk tanpa plugins tambahan, dan sering kali dapat terbentuk tanpa memerlukan server perantara.

+ +

Sambungan antar peer dibuat menggunakan - dan direpresentasikan oleh - {{domxref("RTCPeerConnection")}}. Ketika sebuah sambungan telah terbentuk dan terbuka, stream media ({{domxref("MediaStream")}}) atau channel data ({{domxref("RTCDataChannel")}}) dapat ditambahkan ke dalam sambungan peer.

+ +

Stream media terdiri dari beberapa track media, yang direpresentasikan oleh sebuah objek {{domxref("MediaStreamTrack")}}, yang berisi salah satu tipe media, yaitu audio, video, dan teks (misalnya subtitle atau nama judul). Umumnya stream terdiri dari setidaknya satu track audio bahkan juga satu track video, dan dapat digunakan untuk mengirim dan menerima media secara live atau dapat berupa rekaman media (misalnya streaming film).

+ +

Anda juga dapat menggunakan sambungan antar peer untuk bertukar sembarang data biner menggunakan {{domxref("RTCDataChannel")}}. Sambungan ini dapat digunakan untuk informasi back-channel, metadata, gaming, file transfer, bahkan sebagai jalur utama pertukaran data.

+ +

artikel ini memerlukan informasi yang lebih lanjut serta tautan untuk panduan dan tutorial yang relevan

+ +

WebRTC interfaces

+ +

Because WebRTC provides interfaces that work together to accomplish a variety of tasks, we have divided up the interfaces in the list below by category. Please see the sidebar for an alphabetical list.

+ +

Connection setup and management

+ +

These interfaces are used to set up, open, and manage WebRTC connections.

+ +
+
{{domxref("RTCPeerConnection")}}
+
Represents a WebRTC connection between the local computer and a remote peer. It is used to handle efficient streaming of data between the two peers.
+
{{domxref("RTCDataChannel")}}
+
Represents a bi-directional data channel between two peers of a connection.
+
{{domxref("RTCDataChannelEvent")}}
+
Represents events that occur while attaching a {{domxref("RTCDataChannel")}} to a {{domxref("RTCPeerConnection")}}. The only event sent with this interface is {{event("datachannel")}}.
+
{{domxref("RTCSessionDescription")}}
+
Represents the parameters of a session. Each RTCSessionDescription consists of a description type indicating which part of the offer/answer negotiation process it describes and of the SDP descriptor of the session.
+
{{domxref("RTCStatsReport")}}
+
Provides information detailing statistics for a connection or for an individual track on the connection; the report can be obtained by calling {{domxref("RTCPeerConnection.getStats()")}}.
+
{{domxref("RTCIceCandidate")}}
+
Represents a candidate internet connectivity establishment (ICE) server for establishing an {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCIceTransport")}}
+
Represents information about an internet connectivity establishment (ICE) transport.
+
{{domxref("RTCPeerConnectionIceEvent")}}
+
Represents events that occurs in relation to ICE candidates with the target, usually an {{domxref("RTCPeerConnection")}}. Only one event is of this type: {{event("icecandidate")}}.
+
{{domxref("RTCRtpSender")}}
+
Manages the encoding and transmission of data for a {{domxref("MediaStreamTrack")}} on an {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCRtpReceiver")}}
+
Manages the reception and decoding of data for a {{domxref("MediaStreamTrack")}} on an {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCTrackEvent")}}
+
Indicates that a new incoming {{domxref("MediaStreamTrack")}} was created and an associated {{domxref("RTCRtpReceiver")}} object was added to the {{domxref("RTCPeerConnection")}} object.
+
+ +

Identity and security

+ +

The WebRTC API includes a number of interfaces to manage security and identity.

+ +
+
{{domxref("RTCIdentityProvider")}}
+
Enables a user agent is able to request that an identity assertion be generated or validated.
+
{{domxref("RTCIdentityAssertion")}}
+
Represents the identity of the a remote peer of the current connection. If no peer has yet been set and verified this interface returns null. Once set it can't be changed.
+
{{domxref("RTCIdentityProviderRegistrar")}}
+
Registers an  identity provider (idP).
+
{{domxref("RTCIdentityEvent")}}
+
Represents an identity assertion generated by an identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. The only event sent with this type is {{event("identityresult")}}.
+
{{domxref("RTCIdentityErrorEvent")}}
+
Represents an error associated with the identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. Two events are sent with this type: {{event("idpassertionerror")}} and {{event("idpvalidationerror")}}.
+
{{domxref("RTCCertificate")}}
+
Represents a certificate that an {{domxref("RTCPeerConnection")}} uses to authenticate.
+
+ +

Telephony

+ +

These interfaces are related to interactivity with public-switched telephone networks (PTSNs).

+ +
+
{{domxref("RTCDTMFSender")}}
+
Manages the encoding and transmission of dual-tone multi-frequency (DTMF) signaling for an {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCDTMFToneChangeEvent")}}
+
Indicates an occurrence of a of dual-tone multi-frequency (DTMF). This event does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated).
+
+ +

Guides

+ +
+
Introduction to WebRTC protocols
+
This article introduces the protocols on top of which the WebRTC API is built.
+
WebRTC connectivity
+
A guide to how WebRTC connections work and how the various protocols and interfaces can be used together to build powerful communication apps.
+
Lifetime of a WebRTC session
+
WebRTC lets you build peer-to-peer communication of arbitrary data, audio, or video—or any combination thereof—into a browser application. In this article, we'll look at the lifetime of a WebRTC session, from establishing the connection all the way through closing the connection when it's no longer needed.
+
Signaling and two-way video calling
+
A tutorial and example which turbs a WebSocket-based chat system created for a previous example and adds support for opening video calls among participants. The chat server's WebSocket connection is used for WebRTC signaling.
+
Using WebRTC data channels
+
This guide covers how you can use a peer connection and an associated {{domxref("RTCDataChannel")}} to exchange arbitrary data between two peers.
+
Using DTMF with WebRTC
+
WebRTC's support for interacting with gateways that link to old-school telephone systems includes support for sending DTMF tones using the {{domxref("RTCDTMFSender")}} interface. This guide shows how to do so.
+
+ +

Tutorials

+ +
+
Improving compatibility using WebRTC adapter.js
+
The WebRTC organization provides on GitHub the WebRTC adapter to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.
+
Taking still photos with WebRTC
+
This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.
+
A simple RTCDataChannel sample
+
The {{domxref("RTCDataChannel")}} interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the WebSocket API, so that the same programming model can be used for each.
+
+ +

Resources

+ +

Protocols

+ +

WebRTC-proper protocols

+ + + + + + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebRTC 1.0')}}{{Spec2('WebRTC 1.0')}}The initial definition of the API of WebRTC.
{{SpecName('Media Capture')}}{{Spec2('Media Capture')}}The initial definition of the object conveying the stream of media content.
{{SpecName('Media Capture DOM Elements')}}{{Spec2('Media Capture DOM Elements')}}The initial definition on how to obtain stream of content from DOM Elements
+ +

In additions to these specifications defining the API needed to use WebRTC, there are several protocols, listed under resources.

+ + + + diff --git a/files/id/web/api/window/getselection/index.html b/files/id/web/api/window/getselection/index.html new file mode 100644 index 0000000000..274aa85b2d --- /dev/null +++ b/files/id/web/api/window/getselection/index.html @@ -0,0 +1,100 @@ +--- +title: Window.getSelection() +slug: Web/API/Window/getSelection +tags: + - API + - API Pilihan + - DOM + - Metode + - Pilihan + - Refrensi + - Window +translation_of: Web/API/Window/getSelection +--- +
{{ ApiRef() }}
+ +

Window.getSelection() adalah metode {{domxref("Selection")}} yang menggambarkan teks yang ditandai oleh pengguna atau posisi sekarang.

+ +

Syntak

+ +
selection = window.getSelection();
+ +

Hasil Output

+ +

Objek {{domxref("Selection")}}

+ +

Ketika berganti ke string, lebih baik menggunakan string kosong ("") atau menggunakan {{domxref("Selection.toString()")}}, hasil output adalah teks yang dipilih.

+ +

Ketika memanggil sebuah {{htmlelement("iframe")}} ini tidak akan ditampilkan (misalnya display: none telah diatur) Firefox akan menampilkan null, sedangkan browser lain akan menampilkan objek {{domxref("Selection")}} dengan {{domxref("Selection.type")}} yang diatur ke None.

+ +

Contoh

+ +
function foo() {
+    var selObj = window.getSelection();
+    alert(selObj);
+    var selRange = selObj.getRangeAt(0);
+    // do stuff with the range
+}
+ +

Catatan

+ +

Representasi dari objek Selection

+ +

Dalam JavaScript, ketika sebuah objek dimasukan ke function yang membutuhkan string (seperti {{ Domxref("window.alert()") }} atau {{ Domxref("document.write()") }}), objek metode {{jsxref("Object.toString", "toString()")}} akan dipanggil dan hasilnya akan dikembalikan ke function tersebut. Ini akan membuat objek dapat tampil sebagai string ketika digunakan oleh function lainnya ketika ini adalah objek dan metode yang benar.

+ +

Pada contoh berikut, selObj.toString() akan otomatis dipanggil ketika melewati {{domxref("window.alert()")}}. Bagaimanapun, mencoba menggunakan properti atau metode JavaScript String seperti length atau substr secara langsung pada objek {{domxref ("Selection")}} akan menghasilkan kesalahan jika tidak memiliki properti atau metode dan dapat mengembalikan hasil yang tidak terduga jika itu benar. Untuk menggunakan objek Selection sebagai string, panggil metode toString () secara langsung:

+ +
var selectedText = selObj.toString();
+ + + +

Objek terhubung

+ +

Kamu bisa memanggil {{domxref("Document.getSelection()")}}, yang mana ini bekerja seperti Window.getSelection().

+ +

Perlu diingat, bahwa saat ini getSelection() tidak bekerja pada elemen {{htmlelement("textarea")}} and {{htmlelement("input")}} di Firefox. Properti {{domxref("HTMLInputElement.setSelectionRange()")}} atau selectionStart dan selectionEnd yang dapat menangani hal ini.

+ +

Perhatikan juga perbedaan atara selection dan focus. {{domxref("Document.activeElement")}} menampilkan elemen yang sedang difokus.

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selection API", "#extensions-to-window-interface", "Window.getSelection()")}}{{Spec2("Selection API")}}New spec.
{{SpecName("HTML Editing", "#dom-window-getselection", "Window.getSelection()")}}{{Spec2("HTML Editing")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Window.getSelection")}}

+ +

See also

+ + diff --git a/files/id/web/api/window/index.html b/files/id/web/api/window/index.html new file mode 100644 index 0000000000..79736ccf64 --- /dev/null +++ b/files/id/web/api/window/index.html @@ -0,0 +1,479 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - Window +translation_of: Web/API/Window +--- +

{{APIRef}}

+ +

The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.

+ +

This section provides a brief reference for all of the methods, properties, and events available through the DOM window object. The window object implements the Window interface, which in turn inherits from the AbstractView interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the JavaScript Reference and DOM Reference.

+ +

In a tabbed browser, such as Firefox, each tab contains its own window object (and if you're writing an extension, the browser window itself is a separate window too - see Working with windows in chrome code for more information). That is, the window object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the window object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.

+ +

Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.

+ +
+
{{domxref("Window.applicationCache")}}  {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}
+
An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.
+
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+
This property indicates whether the current window is closed or not.
+
{{domxref("Window.console")}} {{ReadOnlyInline}}
+
Returns a reference to the console object which provides access to the browser's debugging console.
+
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+
Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.
+
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the XUL controller objects for the current chrome window.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Returns the browser crypto object.
+
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+
Gets/sets the status bar text for the given window.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the ratio between physical pixels and device independent pixels in the current display.
+
{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}
+
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Synonym of {{domxref("window.personalbar")}}
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Returns a reference to the document that the window contains.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Returns an array of the subframes in the current window.
+
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+
This property indicates whether the window is displayed in full screen or not.
+
{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
+ Was: Multiple storage objects that are used for storing data across multiple pages.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Returns a reference to the history object.
+
{{domxref("Window.innerHeight")}} {{readOnlyInline}}
+
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
+
{{domxref("Window.innerWidth")}} {{readOnlyInline}}
+
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
+
{{domxref("Window.isSecureContext")}} {{readOnlyInline}}
+
Indicates whether a context is capable of using features that require secure contexts.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Returns the number of frames in the window. See also {{domxref("window.frames")}}.
+
{{domxref("Window.location")}}
+
Gets/sets the location, or current URL, of the window object.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Returns the locationbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Returns the menubar object, whose visibility can be toggled in the window.
+
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+
Returns the message manager object for this window.
+
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}
+
The time in milliseconds since epoch at which the current animation cycle began.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
+
{{domxref("Window.name")}}
+
Gets/sets the name of the window.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Returns a reference to the navigator object.
+
{{domxref("Window.opener")}}
+
Returns a reference to the window that opened this current window.
+
{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
+
Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Gets the height of the outside of the browser window.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Gets the width of the outside of the browser window.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
An alias for {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+
An alias for {{domxref("window.scrollY")}}
+
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Returns a reference to the parent of the current window or subframe.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing performance-related data. See also Using Navigation Timing for additional information and examples.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+
Formerly provided access to install and remove PKCS11 modules.
+
{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}
+
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Returns a reference to the screen object associated with the window.
+ +
{{domxref("Window.screenX")}} {{readOnlyInline}}
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
{{domxref("Window.screenY")}} {{readOnlyInline}}
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
+
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled vertically.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Returns an object reference to the window object itself.
+
{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}
+
Returns a storage object for storing data within a single page session.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns a reference to the window object of the sidebar.
+
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
+
Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using Web Speech API speech synthesis functionality.
+
{{domxref("Window.status")}}
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Returns a reference to the topmost window in the window hierarchy. This property is read only.
+
{{domxref("Window.visualViewport")}} {{readOnlyInline}}
+
Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Returns a reference to the current window.
+
window[0], window[1], etc.
+
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
+
+ +

Properties implemented from elsewhere

+ +
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Returns a boolean indicating whether the current context is secure (true) or not (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)
+
+ +

Methods

+ +

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.

+ +
+
{{domxref("Window.alert()")}}
+
Displays an alert dialog.
+ +
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves back one in the window history.
+
{{domxref("Window.blur()")}}
+
Sets focus away from the window.
+
{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}
+
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.
+
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
+
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.
+
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+
Registers the window to capture all events of the specified type.
+
{{domxref("Window.clearImmediate()")}}
+
Cancels the repeated execution set using setImmediate.
+
{{domxref("Window.close()")}}
+
Closes the current window.
+
{{domxref("Window.confirm()")}}
+
Displays a dialog with a message that the user needs to respond to.
+
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.dispatchEvent()")}}
+
Used to trigger an event.
+
{{domxref("Window.dump()")}} {{Non-standard_inline}}
+
Writes a message to the console.
+
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.find()")}}
+
Searches for a given string in a window.
+
{{domxref("Window.focus()")}}
+
Sets focus on the current window.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves the window one document forward in the history.
+
{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Flashes the application icon.
+
{{domxref("Window.getAttentionWithCycleCount()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.getComputedStyle()")}}
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
+
Gets default computed style for the specified element, ignoring author stylesheets.
+
{{domxref("Window.getSelection()")}}
+
Returns the selection object representing the selected item(s).
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Returns the browser to the home page.
+
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimizes the window.
+
{{domxref("Window.moveBy()")}}
+
Moves the current window by a specified amount.
+
{{domxref("Window.moveTo()")}}
+
Moves the window to the specified coordinates.
+
{{domxref("Window.open()")}}
+
Opens a new window.
+
{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Opens a new dialog window.
+
{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}
+
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
+
{{domxref("Window.print()")}}
+
Opens the Print Dialog to print the current document.
+
{{domxref("Window.prompt()")}}
+
Returns the text entered by the user in a prompt dialog.
+
{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}
+
Releases the window from trapping events of a specific type.
+
{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.
+
{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
+
Enables the scheduling of tasks during a browser's idle periods.
+
{{domxref("Window.resizeBy()")}}
+
Resizes the current window by a certain amount.
+
{{domxref("Window.resizeTo()")}}
+
Dynamically resizes window.
+
{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.scroll()")}}
+
Scrolls the window to a particular place in the document.
+
{{domxref("Window.scrollBy()")}}
+
Scrolls the document in the window by the given amount.
+
{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}
+
Scrolls the document by the given number of lines.
+
{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}
+
Scrolls the current document by the specified number of pages.
+
{{domxref("Window.scrollTo()")}}
+
Scrolls to a particular set of coordinates in the document.
+
{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)
+
Changes the cursor for the current window
+
{{domxref("Window.setImmediate()")}}
+
Executes a function after the browser has finished other heavy tasks
+
{{domxref("Window.setResizable()")}} {{Non-standard_inline}}
+
Toggles a user's ability to resize a window.
+
{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}
+
Sizes the window according to its content.
+
{{domxref("Window.stop()")}}
+
This method stops window loading.
+
{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}
+
Updates the state of commands of the current chrome window (UI).
+
+ +

Methods implemented from elsewhere

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Register an event handler to a specific event type on the window.
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Starts the process of fetching a resource from the network.
+
{{domxref("EventTarget.removeEventListener")}}
+
Removes an event listener from the window.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Schedules a function to execute every time a given number of milliseconds elapses.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Schedules a function to execute in a given amount of time.
+
+ +

Obsolete methods

+ +
+
{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}
+
Displays a modal dialog. This method was removed completely in Chrome 43, and Firefox 55.
+
+ +

Event handlers

+ +

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

+ +

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.

+ +
+

Note: Starting in {{Gecko("9.0")}}, you can now use the syntax if ("onabort" in window) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

+
+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Called when the print dialog box is closed. See {{event("afterprint")}} event.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Called when the print dialog box is opened. See {{event("beforeprint")}} event.
+
{{domxref("Window.onbeforeinstallprompt")}}
+
An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
An event handler property for before-unload events on the window.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Called after the window loses focus, such as due to a popup.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
An event handler property for change events on the window.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Called after the ANY mouse button is pressed & released
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Called when a double click is made with ANY mouse button.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Called after the window is closed
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Called when the RIGHT mouse button is pressed
+
{{domxref("Window.ondevicelight")}}
+
An event handler property for any ambient light levels changes
+
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+
Called if accelerometer detects a change (For mobile devices)
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
Called when the orientation is changed (For mobile devices)
+
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only
+
An event handler property for any device orientation changes.
+
{{domxref("Window.ondeviceproximity")}}
+
An event handler property for device proximity event
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Called after the window receives or regains focus. See {{event("focus")}} events.
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.
+
{{domxref("Window.onappinstalled")}}
+
Called when the page is installed as a webapp. See {{event('appinstalled')}} event.
+
{{domxref("Window.ongamepadconnected")}}
+
Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).
+
{{domxref("Window.oninput")}}
+
Called when the value of an <input> element changes
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Called when you begin pressing ANY key. See {{event("keydown")}} event.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Called when you finish releasing ANY key. See {{event("keyup")}} event.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
An event handler property for {{event("languagechange")}} events on the window.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Called when ANY mouse button is pressed.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Called continously when the mouse is moved inside the window.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Called when the pointer leaves the window.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Called when the pointer enters the window
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Called when ANY mouse button is released
+
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Called when network connection is lost. See {{event("offline")}} event.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Called when network connection is established. See {{event("online")}} event.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.
+
{{domxref("Window.onpaint")}}
+
An event handler property for paint events on the window.
+
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+
Called when a back putton is pressed.
+
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
+
An event handler for handled {{jsxref("Promise")}} rejection events.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Called when a form is reset
+
{{domxref("GlobalEventHandlers.onresize")}}
+
Called continuously as you are resizing the window.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked
+
{{domxref("GlobalEventHandlers.onwheel")}}
+
Called when the mouse wheel is rotated around any axis
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Called after text in an input field is selected
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Called when there is a change in session storage or local storage. See {{event("storage")}} event
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Called when a form is submitted
+
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+
An event handler for unhandled {{jsxref("Promise")}} rejection events.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Called when the user navigates away from the page.
+
{{domxref("Window.onuserproximity")}}
+
An event handler property for user proximity events.
+
{{domxref("Window.onvrdisplayconnect")}}
+
Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).
+
{{domxref("Window.onvrdisplaydisconnect")}}
+
Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).
+
{{domxref("Window.onvrdisplayactivate")}}
+
Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
+
{{domxref("Window.onvrdisplaydeactivate")}}
+
Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
+
{{domxref("Window.onvrdisplayblur")}}
+
Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
+
{{domxref("Window.onvrdisplayfocus")}}
+
Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).
+
{{domxref("Window.onvrdisplaypresentchange")}}
+
represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).
+
+ +

Constructors

+ +

See also the DOM Interfaces.

+ +
+
{{domxref("DOMParser")}}
+
DOMParser can parse XML or HTML source stored in a string into a DOM Document. DOMParser is specified in DOM Parsing and Serialization.
+
{{domxref("Window.GeckoActiveXObject")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Image")}}
+
Used for creating an {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Used for creating an {{domxref("HTMLOptionElement")}}
+
{{domxref("Window.QueryInterface")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XMLSerializer")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Worker")}}
+
Used for creating a Web worker
+
{{domxref("Window.XPCNativeWrapper")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XPCSafeJSObjectWrapper")}}
+
{{todo("NeedsContents")}}
+
+ +

Interfaces

+ +

See DOM Reference

+ +

See also

+ + diff --git a/files/id/web/api/window/window/index.html b/files/id/web/api/window/window/index.html new file mode 100644 index 0000000000..a40d33059f --- /dev/null +++ b/files/id/web/api/window/window/index.html @@ -0,0 +1,63 @@ +--- +title: Window.window +slug: Web/API/Window/window +translation_of: Web/API/Window/window +--- +
{{APIRef}}
+ +

Summary

+ +

Properti window dalam obyek window mengarah pada obyek window itu sendiri. Jadi ekspresi berikut mengembalikan obyek window yang sama:

+ +
window.window
+window.window.window
+window.window.window.window
+  ...
+
+ +

Pada halaman web, obyek window merupakan obyek global. Ini berarti:

+ +
    +
  1. variabel global pada skrip adalah properti dari window: + + 
    var global = {data: 0};
+alert(global === window.global); // displays "true"
+
    +
    2. +
  2. kamu dapat mengakses properti bawaan dari window tanpa perlu menulis prefix window.: + 
    setTimeout("alert('Hi!')", 50); // equivalent to using window.setTimeout.
+alert(window === window.window); // displays "true"
+
    +
    3. +
+ +

Tujuan adanya properti window yang mengarah pada obyek itu sendiri adalah mempermudah dalam mengarah pada obyek global. Jika tidak, kamu harus melakukannya secara manual var window = this; dibagian awal skrip.

+ +

Alasan lain, ada beberapa hal yang tidak dapat kamu tulis, contohnya, "{{domxref("window.open","window.open('http://google.com/')")}}". kamu harus menulis "open('http://google.com/')".

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-window', 'Window.window')}}{{Spec2('HTML WHATWG')}}No difference from the latest snapshot {{SpecName("HTML5.1")}}
{{SpecName('HTML5.1', 'browsers.html#dom-window', 'Window.window')}}{{Spec2('HTML5.1')}}No difference from the {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-window', 'Window.window')}}{{Spec2('HTML5 W3C')}}First snapshot containing the definition of Window.window.
diff --git a/files/id/web/api/xmlhttprequest/index.html b/files/id/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..87f02b9550 --- /dev/null +++ b/files/id/web/api/xmlhttprequest/index.html @@ -0,0 +1,200 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - API + - Communication + - HTTP + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web + - XHR + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +
{{DefaultAPISidebar("XMLHttpRequest")}}
+ +

Use XMLHttpRequest (XHR) objects to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in {{Glossary("AJAX")}} programming.

+ +

{{InheritanceDiagram(650, 150)}}

+ +

Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML.

+ +

If your communication needs to involve receiving event data or message data from a server, consider using server-sent events through the {{domxref("EventSource")}} interface. For full-duplex communication, WebSockets may be a better choice.

+ +

Constructor

+ +
+
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
+
The constructor initializes an XMLHttpRequest. It must be called before any other method calls.
+
+ +

Properties

+ +

This interface also inherits properties of {{domxref("XMLHttpRequestEventTarget")}} and of {{domxref("EventTarget")}}.

+ +
+
{{domxref("XMLHttpRequest.onreadystatechange")}}
+
An {{domxref("EventHandler")}} that is called whenever the readyState attribute changes.
+
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+
Returns an unsigned short, the state of the request.
+
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
+
Returns an {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript object, or a {{domxref("DOMString")}}, depending on the value of {{domxref("XMLHttpRequest.responseType")}}, that contains the response entity body.
+
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+
Returns a {{domxref("DOMString")}} that contains the response to the request as text, or null if the request was unsuccessful or has not yet been sent.
+
{{domxref("XMLHttpRequest.responseType")}}
+
Is an enumerated value that defines the response type.
+
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+
Returns the serialized URL of the response or the empty string if the URL is null.
+
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+
Returns a {{domxref("Document")}} containing the response to the request, or null if the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML. Not available in workers.
+
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+
Returns an unsigned short with the status of the response of the request.
+
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+
Returns a {{domxref("DOMString")}} containing the response string returned by the HTTP server. Unlike {{domxref("XMLHttpRequest.status")}}, this includes the entire text of the response message ("200 OK", for example).
+
+ +
+

Note: According to the HTTP/2 specification (8.1.2.4 Response Pseudo-Header Fields), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.

+
+ +
+
{{domxref("XMLHttpRequest.timeout")}}
+
Is an unsigned long representing the number of milliseconds a request can take before automatically being terminated.
+
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+
Is an {{domxref("EventHandler")}} that is called whenever the request times out. {{gecko_minversion_inline("12.0")}}
+
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+
Is an {{domxref("XMLHttpRequestUpload")}}, representing the upload process.
+
{{domxref("XMLHttpRequest.withCredentials")}}
+
Is a {{domxref("Boolean")}} that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies or authorization headers.
+
+ +

Non-standard properties

+ +
+
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
+
Is a {{Interface("nsIChannel")}}. The channel used by the object when performing the request.
+
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
+
Is a boolean. If true, the request will be sent without cookie and authentication headers.
+
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
+
Is a boolean. If true, the same origin policy will not be enforced on the request.
+
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
+
Is a boolean. It indicates whether or not the object represents a background service request.
+
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
+
{{jsxref("ArrayBuffer")}}. The response to the request, as a JavaScript typed array.
+
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
+
This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22. Please use Server-Sent Events, Web Sockets, or responseText from progress events instead.
+
+ +

Event handlers

+ +

onreadystatechange as a property of the XMLHttpRequest instance is supported in all browsers.

+ +

Since then, a number of additional event handlers have been implemented in various browsers (onload, onerror, onprogress, etc.). See Using XMLHttpRequest.

+ +

More recent browsers, including Firefox, also support listening to the XMLHttpRequest events via standard {{domxref("EventTarget.addEventListener", "addEventListener()")}} APIs in addition to setting on* properties to a handler function.

+ +

Methods

+ +
+
{{domxref("XMLHttpRequest.abort()")}}
+
Aborts the request if it has already been sent.
+
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
+
Returns all the response headers, separated by {{Glossary("CRLF")}}, as a string, or null if no response has been received.
+
{{domxref("XMLHttpRequest.getResponseHeader()")}}
+
Returns the string containing the text of the specified header, or null if either the response has not yet been received or the header doesn't exist in the response.
+
{{domxref("XMLHttpRequest.open()")}}
+
Initializes a request.
+
{{domxref("XMLHttpRequest.overrideMimeType()")}}
+
Overrides the MIME type returned by the server.
+
{{domxref("XMLHttpRequest.send()")}}
+
Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.
+
{{domxref("XMLHttpRequest.setRequestHeader()")}}
+
Sets the value of an HTTP request header. You must call setRequestHeader()after open(), but before send().
+
+ +

Non-standard methods

+ +
+
{{domxref("XMLHttpRequest.init()")}}
+
Initializes the object for use from C++ code.
+
+ +
Warning: This method must not be called from JavaScript.
+ +
+
{{domxref("XMLHttpRequest.openRequest()")}}
+
Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use open() instead. See the documentation for open().
+
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
+
A variant of the send() method that sends binary data.
+
+ +

Events

+ +
+
{{domxref("XMLHttpRequest/abort_event", "abort")}}
+
Fired when a request has been aborted, for example because the program called {{domxref("XMLHttpRequest.abort()")}}.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} property.
+
{{domxref("XMLHttpRequest/error_event", "error")}}
+
Fired when the request encountered an error.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} property.
+
{{domxref("XMLHttpRequest/load_event", "load")}}
+
Fired when an {{domxref("XMLHttpRequest")}} transaction completes successfully.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} property.
+
{{domxref("XMLHttpRequest/loadend_event", "loadend")}}
+
Fired when a request has completed, whether successfully (after {{domxref("XMLHttpRequest/load_event", "load")}}) or unsuccessfully (after {{domxref("XMLHttpRequest/abort_event", "abort")}} or {{domxref("XMLHttpRequest/error_event", "error")}}).
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} property.
+
{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}
+
Fired when a request has started to load data.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} property.
+
{{domxref("XMLHttpRequest/progress_event", "progress")}}
+
Fired periodically when a request receives more data.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} property.
+
{{domxref("XMLHttpRequest/timeout_event", "timeout")}}
+
Fired when progress is terminated due to preset time expiring.
+ Also available via the {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} property.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard, latest version
+ +

Browser compatibility

+ + + +
{{Compat("api.XMLHttpRequest")}}
+ +

See also

+ + diff --git a/files/id/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/id/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..1de088b719 --- /dev/null +++ b/files/id/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,793 @@ +--- +title: Using XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +
{{APIRef("XMLHttpRequest")}}
+ +
Dalam panduan ini, kita akan melihat bagaimana cara untuk mengunakan {{domxref("XMLHttpRequest")}}  untuk menyelesaikan permasalahan HTTP request yang dalam penggunaan untuk pertukaran data antara halaman web dan server. Contoh umum dan kasus penggunaan lebih jelas untuk XMLHttpRequest disertakan.
+ +
+ +
Untuk mengirim HTTP request,  buatlah sebuah object XMLHttpRequest , buka sebuah URL dan kirim request tersebut. setelah transaksi selesai, objek akan berisi informasi yang berguna seperti badan respon dan status HTTP dari hasilnya.
+ +
+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.addEventListener("load", reqListener);
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();
+ +

Tipe-Tipe dari Request

+ +

Sebuh request yang dihasilkan melalui XMLHttpRequest dapat mengambil data dari salah satu cara, asynchronously or synchronously. Tipe dari request ditentukan onleh opsi async argument (argument ke-tiga) yang telah diset dialam metode {{domxref("XMLHttpRequest.open()")}}. Jika argument tersebut true atau tidak ditentukan. XMLHttpRequest akan diproses secara asynchronous,jika tidak proses akan berjalan secara synchronous. Diskusi detail dan demonstrasi dari kedua cara merequest tersebut dapat ditemukan pada halaman synchronous and asynchronous requests. Jangan gunakan permintaan synchronous di luar Pekerja Web.

+ +
Note: Dimulai dari Gecko 30.0 {{ geckoRelease("30.0") }}, permintaan synchronous pada utas utama telah ditinggalkan karena efek negatif terhadap pengalaman pengguna.
+ +
Note: fungsi konstruksi XMLHttpRequest tidak terbatas hanya pada dokumen XML. Itu dimulai dengan "XML" karena ketika itu dibuat format utama yang awalnya digunakan untuk Asynchronous Data Exchange adalah XML
+ +

Menangani Respons

+ +

Ada beberapa jenis atribut respons  ditentukan oleh spesifikasi standar untuk {domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} constructor. Ini memberi tahu klien membuat informasi penting XMLHttpRequest tentang status respons. Beberapa kasus di mana berurusan dengan jenis respons non-teks mungkin melibatkan beberapa manipulasi dan analisis diuraikan dalam bagian berikut.

+ +

Menganalisa dan Memanipulasi Properti responseXML

+ +

Jika kamu mengunakan XMLHttpRequest  untuk mendapatkan konten dokumen XML jarak jauh, properti {{domxref("XMLHttpRequest.responseXML", "responseXML")}}  akan menjadi objek DOM yang berisi dokumen XML parsing. Ini terbentuk sulit untuk dimanipulasi dan dianalisis. Ada empat cara utama untuk menganalisis dokumen XML ini:

+ +
    +
  1. Menggunakan XPath untuk mengatasi (atau menunjuk ke) bagian-bagiannya.
    2. +
  2. Secara manual Parsing dan men-serialisasikan XML ke string atau objek
    3. +
  3. Menggunakan {{domxref("XMLSerializer")}} untuk meng-serialisasi Pohon DOM ke strings atau ke file.
    4. +
  4. {{jsxref("RegExp")}} bisa digunakan jika kamu selalu tau konten dari XML document sebelumnya. Kamu mungkin ingin menghapus jeda baris, jika Anda menggunakan RegEx untuk memindai berkenaan dengan jeda baris. Namun, metode ini adalah "pilihan terakhir" karena jika kode XML sedikit berubah, metode ini kemungkinan akan gagal.
    5. +
+ +
+

Note: XMLHttpRequest sekarang dapat menafsirkan HTML untuk Anda menggunakan properti {{domxref("XMLHttpRequest.responseXML", "responseXML")}}. Baca artikel HTML dalam XMLHttpRequest untuk mempelajari cara untuk melakukannya.

+
+ +

Memproses sebuah Properti responseText yang Berisi HTML Dokument

+ +

Jika kamu mengunakan XMLHttpRequest untuk mendapatkan konten dari halaman web HTML jarak jauh. Properti {{domxref("XMLHttpRequest.responseText", "responseText")}} adalah sebuah string yang berisi data HTML mentah. Hal ini terbukti sulit untuk dimanipulasi dan dianalisi. Karenanya ada tiga cara utama untuk

+ +

If you use XMLHttpRequest to get the content of a remote HTML webpage, the {{domxref("XMLHttpRequest.responseText", "responseText")}} property is a string containing the raw HTML. This could prove difficult to manipulate and analyze. Ada tiga cara utama untuk menganalisis dan mengurai string HTML mentah ini:

+ +
    +
  1. Use the XMLHttpRequest.responseXML property as covered in the article HTML in XMLHttpRequest.
    2. +
  2. Inject the content into the body of a document fragment via fragment.body.innerHTML and traverse the DOM of the fragment.
    3. +
  3. {{jsxref("RegExp")}} can be used if you always know the content of the HTML responseText beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.
    4. +
+ +

Handling binary data

+ +

Although {{domxref("XMLHttpRequest")}} is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an XMLHttpRequest into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the XMLHttpRequest object and is a workable solution.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url);
+// retrieve data unprocessed as a binary string
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

However, more modern techniques are available, since the {{domxref("XMLHttpRequest.responseType", "responseType")}} attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.

+ +

For example, consider this snippet, which uses the responseType of "arraybuffer" to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // not responseText
+  /* ... */
+}
+oReq.open("GET", url);
+oReq.responseType = "arraybuffer";
+oReq.send();
+ +

For more examples check out the Sending and Receiving Binary Data page

+ +

Monitoring progress

+ +

XMLHttpRequest provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.

+ +

Support for DOM {{event("progress")}} event monitoring of XMLHttpRequest transfers follows the specification for progress events: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:

+ +
+
{{event("progress")}}
+
The amount of data that has been retrieved has changed.
+
{{event("load")}}
+
The transfer is complete; all data is now in the response
+
+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress);
+oReq.addEventListener("load", transferComplete);
+oReq.addEventListener("error", transferFailed);
+oReq.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+// ...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total * 100;
+    // ...
+  } else {
+    // Unable to compute progress information since the total size is unknown
+  }
+}
+
+function transferComplete(evt) {
+  console.log("The transfer is complete.");
+}
+
+function transferFailed(evt) {
+  console.log("An error occurred while transferring the file.");
+}
+
+function transferCanceled(evt) {
+  console.log("The transfer has been canceled by the user.");
+}
+ +

Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using XMLHttpRequest.

+ +
Note: You need to add the event listeners before calling open() on the request. Otherwise the progress events will not fire.
+ +

The progress event handler, specified by the updateProgress() function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded fields. However, if the lengthComputable field is false, the total length is not known and will be zero.

+ +

Progress events exist for both download and upload transfers. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress);
+oReq.upload.addEventListener("load", transferComplete);
+oReq.upload.addEventListener("error", transferFailed);
+oReq.upload.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+ +
Note: Progress events are not available for the file: protocol.
+ +
+

Note: Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.

+
+ +
+

Note: As of {{Gecko("12.0")}}, if your progress event is called with a responseType of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.

+
+ +

One can also detect all three load-ending conditions (abort, load, or error) using the loadend event:

+ +
req.addEventListener("loadend", loadEnd);
+
+function loadEnd(e) {
+  console.log("The transfer finished (although we don't know if it succeeded or not).");
+}
+
+ +

Note there is no way to be certain, from the information received by the loadend event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.

+ +

Submitting forms and uploading files

+ +

Instances of XMLHttpRequest can be used to submit forms in two ways:

+ + + +

Using the FormData API is the simplest and fastest, but has the disadvantage that data collected can not be stringified.
+ Using only AJAX is more complex, but typically more flexible and powerful.

+ +

Using nothing but XMLHttpRequest

+ +

Submitting forms without the FormData API does not require other APIs for most use cases. The only case where you need an additional API is if you want to upload one or more files, where you use the {{domxref("FileReader")}} API.

+ +

A brief introduction to the submit methods

+ +

An html {{ HTMLElement("form") }} can be sent in four ways:

+ + + +

Now, consider the submission of a form containing only two fields, named foo and baz. If you are using the POST method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:

+ + + +

However, if you are using the GET method, a string like the following will be simply added to the URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

A little vanilla framework

+ +

All these effects are done automatically by the web browser whenever you submit a {{HTMLElement("form")}}. If you want to perform the same effects using JavaScript you have to instruct the interpreter about everything. Therefore, how to send forms in pure AJAX is too complex to be explained here in detail. For this reason, here we place a complete (yet didactic) framework, able to use all four ways to submit, and to upload files:

+ +
+
<!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.
+|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    console.log(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* console.log(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) {
+        /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */
+        /* 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>
+
+ +

To test this, create a page named register.php (which is the action attribute of these sample forms), and put the following minimalistic content:

+ +
<?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);
+
+
+ +

The syntax to activate this script is simply:

+ +
AJAXSubmit(myForm);
+ +
Note: This framework uses the {{domxref("FileReader")}} API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered an experimental technique. If you do not need to upload binary files, this framework works fine in most browsers.
+ +
Note: The best way to send binary content is via {{jsxref("ArrayBuffer", "ArrayBuffers")}} or {{domxref("Blob", "Blobs")}} in conjuncton with the {{domxref("XMLHttpRequest.send()", "send()")}} method and possibly the {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} method of the FileReader API. But, since the aim of this script is to work with a stringifiable raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the FileReader API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the FormData API.
+ +
Note: The non-standard sendAsBinary method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard send(Blob data) method can be used instead.
+ +

Using FormData objects

+ +

The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primary use is in sending form data, but can also be used independently from a form in order to transmit user keyed data. The transmitted data is in the same format the form's submit() method uses to send data, if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the Using FormData Objects page. For didactic purposes here is a translation of the previous example transformed to use the FormData API. Note the brevity of the code:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" charset="UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script>
+"use strict";
+
+function ajaxSuccess () {
+  console.log(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);
+    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>
+
+ +
Note: As we said, {{domxref("FormData")}} objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the {{domxref("FileReader")}} API also: files are automatically loaded and uploaded.
+ +

Get last modified date

+ +
function getHeaderTime () {
+  console.log(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");
+oReq.onload = getHeaderTime;
+oReq.send();
+ +

Do something when last modified date changes

+ +

Let's create two functions:

+ +
function getHeaderTime () {
+  var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath));
+  var 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);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}
+ +

And to test:

+ +
/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});
+ +

If you want to know if the current page has changed, please read the article about {{domxref("document.lastModified")}}.

+ +

Cross-site XMLHttpRequest

+ +

Modern browsers support cross-site requests by implementing the Cross-Origin Resource Sharing (CORS) 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 appending 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
+
+ +

As 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());
+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 conclude with an XMLHttpRequest receiving status=0 and statusText=null, this means 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 subsequently open(). This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in otherwords, open()) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{event("activate")}} event which is set once the terminated window has its {{event("unload")}} event triggered.

+ +

Workers

+ +

Setting overrideMimeType does not work from a {{domxref("Worker")}}.  See {{bug(678057)}} for more details.  Other browsers may handle this differently.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard, latest version
+ +

Browser compatibility

+ + + +

{{Compat("api.XMLHttpRequest")}}

+ +

See also

+ +
    +
  1. MDN AJAX introduction
    2. +
  2. HTML in XMLHttpRequest
    3. +
  3. HTTP access control
    4. +
  4. How to check the security state of an XMLHTTPRequest over SSL
    5. +
  5. XMLHttpRequest - REST and the Rich User Experience
    6. +
  6. Microsoft documentation
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest object: WHATWG specification
    9. +
diff --git a/files/id/web/css/@font-face/font-display/index.html b/files/id/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..50fed7426a --- /dev/null +++ b/files/id/web/css/@font-face/font-display/index.html @@ -0,0 +1,101 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +translation_of: Web/CSS/@font-face/font-display +--- +
{{CSSRef}}
+ +

The font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.

+ +

The font display timeline

+ +

The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face.

+ +
+
Font block period
+
If the font face is not loaded, any element attempting to use it must render an invisible fallback font face. If the font face successfully loads during this period, it is used normally.
+
Font swap period
+
If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.
+
Font failure period
+
If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.
+
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword values */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

Values

+ +
+
auto
+
The font display strategy is defined by the user agent.
+
block
+
Gives the font face a short block period and an infinite swap period.
+
swap
+
Gives the font face an extremely small block period and an infinite swap period.
+
fallback
+
Gives the font face an extremely small block period and a short swap period.
+
optional
+
Gives the font face an extremely small block period and no swap period.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.font-face.font-display")}}

+ +

See also

+ + diff --git a/files/id/web/css/@font-face/index.html b/files/id/web/css/@font-face/index.html new file mode 100644 index 0000000000..940386b922 --- /dev/null +++ b/files/id/web/css/@font-face/index.html @@ -0,0 +1,199 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - '@font-face' + - At-rule + - CSS + - CSS Fonts + - Fonts + - NeedsTranslation + - Reference + - TopicStub + - typography +translation_of: Web/CSS/@font-face +--- +
{{CSSRef}}
+ +

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the {{Glossary("user agent")}} finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.

+ +

By allowing authors to provide their own fonts, @font-face makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an Internet connection.

+ +

It's common to use both url() and local() together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.

+ +

The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

+ +
@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+ +

Syntax

+ +

Descriptors

+ +
+
{{cssxref("@font-face/font-display", "font-display")}}
+
Determines how a font face is displayed based on whether and when it is downloaded and ready to use.
+
{{cssxref("@font-face/font-family", "font-family")}}
+
Specifies a name that will be used as the font face value for font properties.
+
{{cssxref("@font-face/font-stretch", "font-stretch")}}
+
A {{cssxref("font-stretch")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%;
+
{{cssxref("@font-face/font-style", "font-style")}}
+
A {{cssxref("font-style")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-style: oblique 20deg 50deg;
+
{{cssxref("@font-face/font-weight", "font-weight")}}
+
A {{cssxref("font-weight")}} value. Since Firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400;
+
{{cssxref("@font-face/font-variant", "font-variant")}}
+
A {{cssxref("font-variant")}} value.
+
{{cssxref("font-feature-settings", "font-feature-settings")}}
+
Allows control over advanced typographic features in OpenType fonts.
+
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+
Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values.
+
{{cssxref("@font-face/src", "src")}}
+
+

Specifies the resource containing the font data. This can be a URL to a remote font file location or the name of a font on the user's computer.

+ +

To provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a format() function:

+ + 
src: url(ideal-sans-serif.woff) format("woff"),
+     url(basic-sans-serif.ttf) format("truetype");
+ +

The available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".

+
+
{{cssxref("@font-face/unicode-range", "unicode-range")}}
+
The range of Unicode code points to be used from the font.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

This example simply specifies a downloadable font to use, applying it to the entire body of the document:

+ +

View the live example

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  </style>
+</head>
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
+</html>
+
+ +

In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

Font MIME Types

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
FormatMIME type
TrueTypefont/ttf
OpenTypefont/otf
Web Open Font Formatfont/woff
Web Open Font Format 2font/woff2
+ +

Notes

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}Font format specification with new compression algorithm
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}Font format specification
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.font-face")}}

+ +

See also

+ + diff --git a/files/id/web/css/_colon_active/index.html b/files/id/web/css/_colon_active/index.html new file mode 100644 index 0000000000..67d9357bef --- /dev/null +++ b/files/id/web/css/_colon_active/index.html @@ -0,0 +1,143 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

Rangkuman

+ +

:active CSS pseudo-class menunjukkan kapan sebuah elemen telah diaktifasi oleh pengguna. Hal ini memperbolehkan halaman memberikan feedback (korelasi) sehingga aktivasi telah terdeteksi oleh browser. Ketika berinteraksi dengan mouse, hal ini secara tipikal waktu antara pengguna menekan tombol mouse dan merelasisasikannya.  :active pseudo-class juga secara tipical ditampilkan ketika menggunakan tombol tab pada keyboard. Hal ini sering digunakan pada element HTML {{HTMLElement("a")}} dan {{HTMLElement("button")}}, tetapi boleh jadi tidak terbatas pada hal tersebut.

+ +

Style ini boleh jadi digunakan lebih oleh sebuah link-related pseudo-classes (tautan-terhubung dengan pseudo kelas) lainnya, yang mana merupakan {{cssxref(":link")}}, {{cssxref(":hover")}}, and {{cssxref(":visited")}}, ditampilkan dalam aturan bagian-bagiannya. Dalam memperoleh penampilan yang teraprofiasi dengan link, kamu membutuhkan menempatkan aturan :active setelah seluruh yang lainnya terhubungan dengan aturan link (link-related-rules), seperti diuraikan oleh LHVA-order:  :link — :visited — :hover — :active.

+ +
Cataan: Pada system dengan multi tombol mouse, CSS 3 spesifik bahwa :active pseudo-class harus hanya diterapkan pada tombol utama; pada klik kanan mouse, ini secara tipikal kebanyakan pada tombol kiri.
+ +

Contoh

+ +
+

HTML

+ +
<body>
+    <h1>:active CSS selector example</h1>
+    <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p>
+</body>
+ +

CSS

+ +
body { background-color: #ffffc9 }
+a:link { color: blue } /* unvisited links */
+a:visited { color: purple } /* visited links */
+a:hover { font-weight: bold } /* user hovers */
+a:active { color: lime } /* active links */
+
+ +
{{EmbedLiveSample('example',600,140)}}
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}No change.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Initial definition.
+ +

Dukungan Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.05.01.0
Support on non-<a> elements1.0{{CompatGeckoDesktop("1.0")}}8.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1.0")}}6.06.01.0
Support on non-<a> elements1.0{{CompatGeckoMobile("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} [1]
+
+ +

[1] Secara menyeluruh, Safari Mobile tidak menggunakan {{cssxref(":active")}} kesatuan yang tidak ada pada sebuah touchstart event handler pada elemen yang relevan atau pada {{HTMLElement("body")}}.

+ +

Lihat juga

+ + diff --git a/files/id/web/css/background-color/index.html b/files/id/web/css/background-color/index.html new file mode 100644 index 0000000000..920b4d28e5 --- /dev/null +++ b/files/id/web/css/background-color/index.html @@ -0,0 +1,149 @@ +--- +title: background-color +slug: Web/CSS/background-color +translation_of: Web/CSS/background-color +--- +
{{CSSRef}}
+ +

Background-color CSS digunakan untuk seting warna latar belakang dari element yang di inginkan.

+ +
{{EmbedInteractiveExample("pages/css/background-color.html")}}
+ + + +

Syntax

+ +
/* Keyword values */
+background-color: red;
+background-color: indigo;
+
+/* Hexadecimal value */
+background-color: #bbff00;    /* Fully opaque */
+background-color: #11ffee00;  /* Fully transparent */
+background-color: #11ffeeff;  /* Fully opaque */
+
+/* RGB value */
+background-color: rgb(255, 255, 128);        /* Fully opaque */
+background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */
+
+/* HSL value */
+background-color: hsl(50, 33%, 25%);         /* Fully opaque */
+background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */
+
+/* Special keyword values */
+background-color: currentcolor;
+background-color: transparent;
+
+/* Global values */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+ +

Background-color menggunakan hanya satu jenis warna <color> nilai.

+ +

Values

+ +
+
{{cssxref("<color>")}}
+
The uniform color of the background. It is rendered behind any {{cssxref("background-image")}} that is specified, although the color will still be visible through any transparency in the image.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Contoh

+ +

HTML

+ +
<div class="exampleone">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Examples", 200, 150)}}

+ +

Accessibility concerns

+ +

It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

+ +

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}Initial definition
+ +
{{cssinfo}}
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.background-color")}}

+ +

See also

+ + diff --git a/files/id/web/css/css_box_model/index.html b/files/id/web/css/css_box_model/index.html new file mode 100644 index 0000000000..08152c9c16 --- /dev/null +++ b/files/id/web/css/css_box_model/index.html @@ -0,0 +1,115 @@ +--- +title: CSS Basic Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

CSS Basic Box Model is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.

+ +

Reference

+ +

Properties

+ +

Properties controlling the flow of content in a box

+ +
+ +
+ +

Properties controlling the size of a box

+ +
+ +
+ +

Properties controlling the margins of a box

+ +
+ +
+ +

Properties controlling the paddings of a box

+ +
+ +
+ +

Other properties

+ +
+ +
+ +

Guides

+ +
+
Introduction to the CSS box model
+
Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.
+
Mastering margin collapsing
+
Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.
+
Visual formatting model
+
Explains the visual formatting model.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}Added margin-trim
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
diff --git a/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..d81bae36e6 --- /dev/null +++ b/files/id/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,73 @@ +--- +title: Introduction to the CSS basic box model +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

+ +

Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

+ +

CSS Box model

+ +

The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.

+ +

If the {{cssxref("box-sizing")}} property is set to content-box (default) and if the element is a block element, the content area's size can be explicitly defined with the {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, and {{cssxref("max-height")}} properties.

+ +

The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height.

+ +

The thickness of the padding is determined by the {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, and shorthand {{cssxref("padding")}} properties.

+ +

The border area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height.

+ +

The thickness of the borders are determined by the {{cssxref("border-width")}} and shorthand {{cssxref("border")}} properties. If the {{cssxref("box-sizing")}} property is set to border-box, the border area's size can be explicitly defined with the {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, and {{cssxref("max-height")}} properties. When there is a background ({{cssxref("background-color")}} or {{cssxref("background-image")}}) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the {{cssxref("background-clip")}} css property.

+ +

The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin-box width and the margin-box height.

+ +

The size of the margin area is determined by the {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, and shorthand {{cssxref("margin")}} properties. When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.

+ +

Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the {{cssxref('line-height')}} property, even though the borders and padding are still displayed around the content.

+ +

See also

+ + + +

Specification

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#intro')}}{{Spec2('CSS3 Box')}}
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Though more precisely worded, there is no practical change.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Initial definition.
+ +

See also

+ + diff --git a/files/id/web/css/css_selectors/index.html b/files/id/web/css/css_selectors/index.html new file mode 100644 index 0000000000..8bf3fb0034 --- /dev/null +++ b/files/id/web/css/css_selectors/index.html @@ -0,0 +1,154 @@ +--- +title: CSS Selectors +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - CSS Selectors + - NeedsTranslation + - Overview + - Reference + - Selectors + - TopicStub +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Selectors define to which elements a set of CSS rules apply.

+ +

Dasar Selektor

+ +
+
Type selectors (Jenis-Jenis Seleksi)
+
Dasar selektor ini memilih seluruh elemen sehingga ditampilkan dengan pemberian nama.
+ Syntax: eltname
+ Example: Input akan menampilkan sebuah elemen  {{HTMLElement('input')}}.
+
Class selectors (Selektor Class)
+
Dasar selektor ini memilih elemen yang didasarkan pada nilai attribut classnya.
+ Syntax: .classname
+ Example: .index akan menampilkan sebuah elemen yang mempunyai indeks class (seperti didefenisikan oleh sebuah attribut class="index" atau yang serupa).
+
ID selectors (selektor ID)
+
Dasar selektor ini memilih cabangan (nodes) didasarkan pada nilai attribut idnya. Bisa jadi hanya satu elemen dengan sebuah pemberian ID dalam sebuah dokumen.
+ Syntax: #idname
+ Example: #toc akan menampilkan elemen yang mempunyai id toc (seperti didefenisikan dengan atrribut id="toc" atau yang serupa).
+
Universal selectors (selektor seluruhnya)
+
Dasar selektor ini memilih seluruh nodes (cabangan). Ini juga ada dalam hanya sebuah satu-kumpulan nama (namespace) dan  dalam seluruh kumpulan nama (all-namespace) yang juga bervariasi.
+ Syntax: * ns|* *|*
+ Example: * akan menampilkan seluruh elemen dari dokumen.
+
Attribute selectors (selektor attribut)
+
Dasar selektor ini memilih nodes (cabangan)  didasarkan pada sebuah nilai dari atributnya.
+ Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Example: [autoplay] akan menampilkan seluruh elemen yang mempunyai attribut autoplay pengaturan (pada sebuah nilai).
+
+ +

Combinators

+ +
+
Adjacent sibling selectors
+
The '+' combinator selects nodes that immediately follow the former specified element.
+ Syntax: A + B
+ Example: ul + li will match any {{HTMLElement('li')}} that immediately follows a {{HTMLElement('ul')}}.
+
General sibling selectors
+
The '~' combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.
+ Syntax: A ~ B
+ Example: p ~ span will match all {{HTMLElement('span')}} elements that follow a {{HTMLElement('p')}} element inside the same element.
+
Child selectors
+
The '>' combinator selects nodes that are direct children of the former specified element.
+ Syntax: A > B
+ Example: ul > li will match all {{HTMLElement('li')}} elements that are inside a {{HTMLElement('ul')}} element.
+
Descendant selectors
+
The ' ' combinator selects nodes that are children (not necessary direct children) of the former specified element.
+ Syntax: A B
+ Example: div span will match any {{HTMLElement('span')}} element that is inside a {{HTMLElement('div')}} element.
+
+ +

Pseudo-elements

+ +

Pseudo-elements are abstractions of the tree representing entities beyond what HTML does. For example, HTML doesn't have an element describing the first letter or line of a paragraph, or the marker of a list. Pseudo-elements represent these entities and allow CSS rules to be associated with them. that way, these entitities can be styled independently.

+ +

Pseudo-classes

+ +

Pseudo-classes allow to select elements based on information that is not contained in the document tree like a state or that is particularly complex to extract. E.g. they match if a link has been previously visited or not.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..9ec7339a95 --- /dev/null +++ b/files/id/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,64 @@ +--- +title: 'Using the :target pseudo-class in selectors' +slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. {{CSSRef}}

+ +

Membantu mengidentifikasi tujuan dari sebuah tautan yang ditujukan pada sebuan bagian khusus sebuah dokumen, CSS3 Selectors mengenalkan {{ Cssxref(":target") }} pseudo-class.

+ +

Penentuan Sebuah Target

+ +

pseudo-class {{ Cssxref(":target") }} digunakan pada menampilkan target elemen dari sebuah URI berisikan sebuah pengidentifikasi menurut bagian bagian. Sebagai contoh, pada URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example berisi bagian bagian pengidentifikasi #Example. Dalam HTML, pengidentifikasi ditemukan sebagai nilai dari masing masing id atau nama attribut, sejak keduanya membagi namespace (kelompok id atau nama) yang sama. Dengan begitu, contoh URI akan menunjukkan kop "Example" dalam dokumen ini.  

+ +

Misalkan kamu berharap untuk menampilkan sebuah elemen h2 yang merupakan target sebuah URI, tetapi tidak menginginkan sesuatu jenis dari elemen lainnya untuk menemukan sebuah target tampilan. Ini cukup menyederhakan:

+ +
h2:target {font-weight: bold;}
+
+ +

Ini juga memungkinkan untuk membuat tampilan yang spesifik dari sebuah bagian bagian terkecil sebuah dokumen. Ini dilakukan menggunakan identifikasi nilai yang menemukan URI didalamnya. Dengan begitu, untuk menambahkan sebuah border pada #Example terpisah, kita dapat menuliskannya dengan:

+ +
#Example:target {border: 1px solid black;}
+ +

Menargetkan Seluruh Elemen

+ +

Jika intensif (berkelanjutan) untuk membuat sebuah "blanket" tampilan yang akan diterapkan pada seluruh target element, selanjutnya seleksi secara umum yang dapat diterapkan didalamnya:

+ +
:target {color: red;}
+
+ +

Contoh

+ +

Berikut contoh, ada lima poin tautan elemen dalam dokumen yang sama. Menyeleksi link "First", sebagai contoh, akan menyebabkan <h1 id="one"> menjadi target elemen. Catatan bahwa dokumen boleh melompat pada sebuah scroll posisi baru, selama target elemen ditempatkan pada posisi atas dari jendela browser jika memungkinkan. 

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

Kesimpulan

+ +

Dalam kasus dimana sebuah pengidentifikasi poin bagian bagian dari sebuah bagian dokumen, para pembaca bisa jadi dibingungkan tentang yang mana bagian dari dokumen yang mereka anggap untuk dapat dibaca (diseleksi). Dengan gaya target sebuah URI, kebingungan pembaca dapat dikurangi atau dihilangkan. 

+ + + + + +
+

Original Document Information

+ + +
diff --git a/files/id/web/css/flex-direction/index.html b/files/id/web/css/flex-direction/index.html new file mode 100644 index 0000000000..7406212148 --- /dev/null +++ b/files/id/web/css/flex-direction/index.html @@ -0,0 +1,155 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +translation_of: Web/CSS/flex-direction +--- +
{{CSSRef}}
+ +


+

+ +

flex-direction  adalah properti css yang menentukan sumbu utama dan arah (normal atau terbalik ) dari flex item yang ditempatkan di flex container / wadah .

+ +
{{EmbedInteractiveExample("pages/css/flex-direction.html")}}
+ + + +

Note that the values row and row-reverse are affected by the directionality of the flex container. If its {{HTMLAttrxRef("dir")}} attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

+ +

Syntax

+ +
/* The direction text is laid out in a line */
+flex-direction: row;
+
+/* Like <row>, but reversed */
+flex-direction: row-reverse;
+
+/* The direction in which lines of text are stacked */
+flex-direction: column;
+
+/* Like <column>, but reversed */
+flex-direction: column-reverse;
+
+/* Global values */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+
+ +

Values

+ +

The following values are accepted:

+ +
+
row
+
The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.
+
row-reverse
+
Behaves the same as row but the main-start and main-end points are permuted.
+
column
+
The flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.
+
column-reverse
+
Behaves the same as column but the main-start and main-end are permuted.
+
+ +

Accessibility concerns

+ +

Using the flex-direction property with values of row-reverse or column-reverse will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (CSS) order is important, then screen reader users will not have access to the correct reading order.

+ + + +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Reversing flex container columns and rows

+ +

HTML

+ +
<h4>This is a Column-Reverse</h4>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+</div>
+<h4>This is a Row-Reverse</h4>
+<div id="content1">
+  <div class="box1" style="background-color:red;">A</div>
+  <div class="box1" style="background-color:lightblue;">B</div>
+  <div class="box1" style="background-color:yellow;">C</div>
+</div>
+
+ +

CSS

+ +
#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box1 {
+  width: 50px;
+  height: 50px;
+}
+ +

Result

+ +

{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex-direction-property', 'flex-direction')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.flex-direction")}}

+ +

See also

+ + diff --git a/files/id/web/css/index.html b/files/id/web/css/index.html new file mode 100644 index 0000000000..c4f9c56adb --- /dev/null +++ b/files/id/web/css/index.html @@ -0,0 +1,64 @@ +--- +title: CSS +slug: Web/CSS +translation_of: Web/CSS +--- +

Cascading Style Sheets, dikenal juga sebagai CSS, adalah bahasa stylesheet yang digunakan untuk merubah tampilan dokumen yang terulis dalam HTML atau XML (termasuk variasi bahasa XML seperti SVG atau XHTML). CSS menjelaskan bagaimana elemen terstruktur yang harus ditampilkan di layar, di kertas, dalam cara komunikasi, atau dalam media yang lain.

+ +

CSS adalah salah satu dari bahasa inti dari open web (web berbasis terbuka) dan telah berstandar W3C specification. Dibangun dalam berbagai level, CSS1 sekarang sudah kuno, CSS2.1 direkomendasi dan CSS3, sekarang terbagi dalam modul kecil, bergerak dalam jalur standar.

+ +
+ + +
+
+

Dokumentasi dan tutorial

+ +
+
Kunci konsep CSS
+
Menjelaskan syntax dan lembar bahasa dan memperkenalkan dasar-dasar seperti specificity dan inheritance, box model dan margin collapsing, stacking dan konteks block-formatting, atau initial, computed, used dan nilai actual. Entitas seperti CSS shorthand properties juga dijelaskan.
+
Panduan Pengembang CSS
+
Artikel yang membantu mempelajari tehnik CSS untuk membuat konten anda bersinar.
+
+ +

Alat untuk pengembang CSS

+ +
    +
  • W3C CSS Validation Service mengecek bila CSS yang diberikan adalah valid. Ini adalah alat debugging yang berguna.
    • +
  • Firebug extension milik Firefox, extensi populer yang mengizinkan untuk merubah secara langsung CSS dalam situs yang dilihat. Sangat praktis untuk beberapa perubahan, bahkan ekstensi ini berguna lebih banyak.
    • +
  • Web Developer extension milik FireFox juga mengizinkan melihat dan merubah scara langsung CSS dalam situs yang dilihat. lebih mudah daripada Firebug, walaupun kurang berguna.
    • +
  • EditCSS extension milik FireFox mengizinkan mengubah CSS dalam sidebar.
    • +
+ + + + +
+ +
+ + +
    +
  • CSS Text-decoration Level 3 mencapai status Candidate Recommandation, termasuk properti text-decoration-* dan text-emphasis-*. Berikut lingk yang menjelaskan hal ini {{cssxref("text-shadow")}}. (August 1st, 2013)
    • +
  • Gecko sekarang suport {{cssxref("background-origin")}}: local. Ini tersedia dari Firefox 25 (dan siap juga dalam Nightly). (July 25th, 2013)
    • +
  • Pointer Events mencapai status Candidate Recommandation, berarti properti CSS touch-action, yang hanya dapat diimplementasikan pada IE10 (dengan prefiks -ms- ), sekarang bukan percobaan lagi. (May 6th, 2013)
    • +
  • Gecko suport flexible boxes yang telah ditambahkan untuk menyesuaikan spesifikasi terkini tercantum: dari Firefox 23 {{cssxref("::before")}} dan {{cssxref("::after")}} bersama dengan item fleksibel, dan semacam itu, dapat dipindah menggunakan {{cssxref("order")}} dan {{cssxref("align-self")}}. (May 3rd, 2013)
    • +
+
+
+
diff --git a/files/id/web/css/mask-border-width/index.html b/files/id/web/css/mask-border-width/index.html new file mode 100644 index 0000000000..b017ac4a56 --- /dev/null +++ b/files/id/web/css/mask-border-width/index.html @@ -0,0 +1,104 @@ +--- +title: mask-border-width +slug: Web/CSS/mask-border-width +translation_of: Web/CSS/mask-border-width +--- +
{{CSSRef}}
+ +

The mask-border-width CSS properti mengatur lebar elemen mask border.

+ +

Syntax

+ +
/* Keyword value */
+mask-border-width: auto;
+
+/* <length> value */
+mask-border-width: 1rem;
+
+/* <percentage> value */
+mask-border-width: 25%;
+
+/* <number> value */
+mask-border-width: 3;
+
+/* vertical | horizontal */
+mask-border-width: 2em 3em;
+
+/* top | horizontal | bottom */
+mask-border-width: 5% 15% 10%;
+
+/* top | right | bottom | left */
+mask-border-width: 5% 2em 10% auto;
+
+/* Global values */
+mask-border-width: inherit;
+mask-border-width: initial;
+mask-border-width: unset;
+
+ +

The mask-border-width properti dapat ditentukan menggunakan satu, dua, tiga, atau empat nilai yang dipilih dari daftar nilai di bawah.

+ + + +

Values

+ +
+
<length-percentage>
+
Lebar batas topeng, ditetapkan sebagai {{cssxref ("<length>")}} atau {{cssxref ("<percentage>")}}. Persentase relatif terhadap lebar area perbatasan untuk offset horizontal dan tinggi area perbatasan untuk offset vertikal. Tidak boleh negatif.
+
<number>
+
Lebar batas topeng, ditentukan sebagai kelipatan yang sesuai {{cssxref("border-width")}}. Tidak boleh negatif.
+
auto
+
Lebar batas topeng dibuat sama dengan lebar atau tinggi intrinsik (mana yang dapat diterapkan) yang sesuai {{cssxref("mask-border-slice")}}. Jika gambar tidak memiliki dimensi intrinsik yang diperlukan, sesuai border-width digunakan sebagai gantinya.
+
+ +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Basic usage

+ +

Properti ini tampaknya belum didukung di mana pun. Ketika akhirnya mulai didukung, itu akan berfungsi untuk menentukan lebar topeng perbatasan - mengatur ini ke nilai yang berbeda menjadi mask-border-slice akan menyebabkan irisan diskalakan agar sesuai dengan topeng perbatasan.

+ +
mask-border-width: 30 fill;
+ +

Browser berbasis Chromium mendukung versi lama properti ini — mask-box-image-width — dengan awalan:

+ +
-webkit-mask-box-image-width: 20px;
+ +
+

Note: The mask-border Halaman menampilkan contoh yang berfungsi (menggunakan properti topeng perbatasan awalan kedaluwarsa yang didukung di Chromium), sehingga Anda bisa mendapatkan gambaran tentang efeknya.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}{{Spec2("CSS Masks")}}Initial definition
+ +

Browser compatibility

+ +

TBD

diff --git a/files/id/web/css/referensi/index.html b/files/id/web/css/referensi/index.html new file mode 100644 index 0000000000..7609391ca5 --- /dev/null +++ b/files/id/web/css/referensi/index.html @@ -0,0 +1,185 @@ +--- +title: Referensi CSS +slug: Web/CSS/referensi +translation_of: Web/CSS/Reference +--- +
{{CSSRef}}
+ +

Gunakan referensi CSS ini untuk menelusuri indeks alfabetikal dari semua properti CSS umum, pseudo-classes, pseudo-elements, data types, dan at-rules. Anda juga dapat menulusuri konsep dasar and a list of selektor berdasarkan jenis. Juga ada referensi DOM-CSS / CSSOM.

+ +

Basic rule syntax

+ +

Style rule syntax

+ +
style-rule ::=
+    selectors-list {
+      properties-list
+    }
+
+ +

... where :

+ +
selectors-list ::=
+    selector[:pseudo-class] [::pseudo-element]
+    [, selectors-list]
+
+properties-list ::=
+    [property : value] [; properties-list]
+
+ +

See the index of selectors, pseudo-classes, and pseudo-elements below. The syntax for each specified value depends on the data type defined for each specified property.

+ +

Style rule examples

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

For a beginner-level introduction to the syntax of selectors, see our guide on CSS Selectors. Be aware that any syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

+ +

At-rule syntax

+ +

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

+ +

Keyword index

+ +
+

Note: The property names in this index do not include the JavaScript names where they differ from the CSS standard names.

+
+ +
{{CSS_Ref}}
+ +

Selectors

+ +

The following are the various selectors, which allow styles to be conditional based on various features of elements within the DOM.

+ +

Basic selectors

+ +

Basic selectors are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.

+ + + +

Grouping selectors

+ +
+
Selector list A, B
+
Specifies that both A and B elements are selected. This is a grouping method to select several matching elements.
+
+ +

Combinators

+ +

Combinators are selectors that establish a relationship between two or more simple selectors, such as "A is a child of B" or "A is adjacent to B."

+ +
+
Adjacent sibling combinator A + B
+
Specifies that the elements selected by both A and B have the same parent and that the element selected by B immediately follows the element selected by A horizontally.
+
General sibling combinator A ~ B
+
Specifies that the elements selected by both A and B share the same parent and that the element selected by A comes before—but not necessarily immediately before—the element selected by B.
+
Child combinator A > B
+
Specifies that the element selected by B is the direct child of the element selected by A.
+
Descendant combinator A B
+
Specifies that the element selected by B is a descendant of the element selected by A, but is not necessarily a direct child.
+
Column combinator A || B {{Experimental_Inline}}
+
Specifies that the element selected by B is located within the table column specified by A. Elements which span multiple columns are considered to be a member of all of those columns.
+
+ +

Pseudo

+ +
+
Pseudo classes :
+
Specifies a special state of the selected element(s).
+
Pseudo elements ::
+
Represents entities that are not included in HTML.
+
+ +
+

See also: Selectors in the Selectors Level 4 specification.

+
+ +

Concepts

+ +

Syntax and semantics

+ + + +

Values

+ + + +

Layout

+ + + +

DOM-CSS / CSSOM

+ +

Major object types

+ + + +

Important methods

+ + + +

See also

+ + + + + + diff --git a/files/id/web/css/text-transform/index.html b/files/id/web/css/text-transform/index.html new file mode 100644 index 0000000000..41db13ecf4 --- /dev/null +++ b/files/id/web/css/text-transform/index.html @@ -0,0 +1,307 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +translation_of: Web/CSS/text-transform +--- +
{{CSSRef}}
+ +

Properti CSS text-transform menerangkan bagaimana mengatur teks sebuah elemen. Properti ini dapat digunakan untuk membuat sebuah teks menjadi besar atau kecil semua, atau membuat setiap kata dikapitalisasi.

+ +
/* Nilai Kata-kunci */
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: none;
+text-transform: full-width;
+
+/* Nilai Global */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+
+ +

Properti text-transform memperhatikan peraturan khusus untuk setiap bahasa, seperti:

+ + + +

Pilihan bahasa didefinisikan dengan atribut HTML lang atau dengan atribut XML xml:lang.

+ +

Dukungan untuk kasus-kasus tertentu tidak sama untuk semua peramban, harap periksa tabel kompatibilitas peramban.

+ +

{{cssinfo}}

+ +

Syntax

+ +
+
capitalize
+
+

Adalah kata kunci yang mengubah secara paksa huruf pertama dari setiap kata menjadi huruf besar. Karakter lainnya tidak berubah; huruf-huruf tersebut akan tetap seperti pertama kali dituliskan pada katanya. Sebuah huruf adalah karakter Unicode dari kategori Huruf atau Angka umum {{experimental_inline}} : pilihan ini tidak memasukkan tanda baca atau simbal pada awal kata.

+ +
Penulis tidak seharusnya mengharapkan capitalize untuk mengikuti konvensi huruf besar untuk bahasa tertentu (seperti mengabaikan artikel dalam bahasa Inggris).
+ +
Kata kunci capitalize kurang dispesifikasikan pada CSS 1 dan CSS 2.1. Terdapat perbedaan antara peramban untuk memperhitungkan huruf pertama (Firefox menganggap - dan _ sebagai huruf, tetapi peramban lain tidak. Baik Webkit dan Gecko tidak dengan tepat menanggap simbol berdasarkan huruf seperti ⓐ sebagai benar-benar huruf. Internet Explorer 9 menerapkan definisi CSS 2 yang paling mendekati, tetapi dengan beberapa kasus sangat aneh). Dengan mendefinisikan bagaimana penerapan yang benar secara jelas, CSS Text Level 3 membersihkan kekacauan ini. Baris capitalize di tabel kompatibilitas peramban mempunyai informasi pada versi berapa mesin peramban mulai mendukung penerapan ini
+
+
uppercase
+
Adalah kata kunci yang mengubah semua karakter menjadi huruf besar.
+
lowercase
+
Adalah kata kunci yang mengubah semua karakter menjadi huruf kecil.
+
none
+
Adalah kata kunci yang mencegah perubahan dari semua karakter.
+
full-width {{experimental_inline}}
+
Adalah kata kunci yang mengharuskan penulisan karakter — biasanya ideogram dan tulisan latin — di dalam kotak persegi, yang membuat mereka dapat sejajar dalam tulisan Asia Timur kebanyakan (seperti bahasa Cina atau Jepang).
+ +
+ +

Sintaksis Formal

+ +
{{csssyntax}}
+ +

Contoh

+ +

none

+ +
<p>Kalimat Awal
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: none
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+
+ +
span {
+  text-transform: none;
+}
+strong { float: right; }
+ +

This demonstrates no text transformation.

+ +

{{ EmbedLiveSample('none', '100%', '100px') }}

+ +

capitalize (Umum)

+ +
<p>Kalimat Awal
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Contoh ini menunjukkan kata yang dikapitalkan.

+ +

{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}

+ +

capitalize (Tanda Baca)

+ +
<p>Kalimat Awal
+  <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Contoh ini mennjukkan bagaimana tanda baca di awal sebuah kata diabaikan. Kata kunci ini bekerja pada huruf pertama yang termasuk dalam bagian karakter Unicode dari kategori Huruf dan Angka umum.

+ +

{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}

+ +

capitalize (Simbol)

+ +
<p>Kalimat Awal
+  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Contoh ini menunjukkan bagaimana simbol di awal kata diabaikan. Kata kunci ini bekerja pada huruf pertama yang termasuk dalam bagian karakter Unicode dari kategori Huruf dan Angka umum.

+ +

{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}

+ +

capitalize (dwihuruf Belanda ij)

+ +
<p>Kalimat Awal
+  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Contoh ini menunjukkan bagaimana dwihuruf bahasa Belanda ij harus diperlakukan sebagai huruf tunggal.

+ +

{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}

+ +

uppercase (Umum)

+ +
<p>Kalimat Awal
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: uppercase
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: uppercase;
+}
+strong { float: right; }
+ +

Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf besar.

+ +

{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}

+ +

uppercase (Huruf Vokal Yunani)

+ +
<p>Kalimat Awal
+  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
+</p>
+<p>text-transform: uppercase
+  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
+</p>
+ +
span {
+  text-transform: uppercase;
+}
+strong { float: right; }
+ +

Contoh ini menunjukkan bagaimana huruf vokal bahasa Yunani, kecuali huruf disjungtif eta, kehilangan aksen, dan aksen pada huruf vokal pertama dari pasangan vokal menjadi diaeresis pada huruf vokal kedua.

+ +

{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}

+ +

lowercase (Umum)

+ +
<p>Kalimat Awal
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: lowercase;
+}
+strong { float: right; }
+ +

Contoh ini menunjukkan bagaimana kalimat diubah menjadi huruf kecil.

+ +

{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}

+ +

lowercase (Huruf Yunani Σ)

+ +
<p>Kalimat Awal
+  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong>
+</p>
+ +
span {
+  text-transform: lowercase;
+}
+strong { float: right; }
+ +

Contoh ini menunjukkan bagaimana karakter bahasa Yunani sigma (Σ) diubah menjadi huruf kecil sigma biasa (σ) atau varian akhir-kata (ς), tergantung kepada konteksnya.

+ +

{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}

+ +

full-width (Umum)

+ +
<p>Kalimat Awal
+  <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong>
+</p>
+<p>text-transform: full-width
+  <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong>
+</p>
+ +
span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }
+ +

Beberapa karakter mempunyai dua bentuk, yaitu lebar normal dan penuh, dengan kode nilai Unicode yang berbeda. Versi lebar-penuh digunakan untuk membuat penggabungan penulisan dengan karakter ideografi Asia dengan mulus.

+ +

{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS4 Text')}}Dari {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, menambahkan kata kunci full-size-kana dan membolehkan kata kunci full-width digunakan bersama dengan kata kunci lainnya.
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}Dari {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, memperluas cakupan huruf ke semua karakter Unicode dalam kategori Angka dan Huruf umum. Mengubah penerapan  capitalize ke huruf pertama kata, mengabaikan tanda baca atau simbol di awal. Menambahkan kata kunci full-width untuk membuat penggabungan penulisan dengan karakter ideografi dan alfabet menjadi mulus.
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}Dari {{SpecName('CSS1', '#text-transform', 'text-transform')}}, memperluas cakupan huruf dengan tulisan bikameral non-latin.
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}Definisi awal
+ +

Kompatibilitas Peramban

+ +

 

+ + + +

{{Compat("css.properties.text-transform")}}

+ +

 

+ +

Lihat juga

+ + diff --git a/files/id/web/css/type_selectors/index.html b/files/id/web/css/type_selectors/index.html new file mode 100644 index 0000000000..5302eef6eb --- /dev/null +++ b/files/id/web/css/type_selectors/index.html @@ -0,0 +1,121 @@ +--- +title: Type selectors +slug: Web/CSS/Type_selectors +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Rangkuman

+ +

Gaya seleksi CSS menampilkan elemen dengan nama node (bagian khusus nama elemen). Digunakan tersendiri, karenanya, sebuah tipe seleksi untuk sebuah nama node bagian terkecil menyeleksi seluruh bagian bagian dari tipe tersebut -- yang mana bahwa, dengan nama node tersebut -- didalam dokumen.

+ +

Bentuk Penulisan

+ +
element { style properties }
+
+ +

Contoh

+ +

CSS

+ +
span {
+  background-color: DodgerBlue;
+  color: #ffffff;
+}
+
+ +

HTML

+ +
<span>Here's a span with some text.</span>
+<p>Here's a p with some text.</p>
+
+ +

Hasil

+ +

{{EmbedLiveSample('Example', 200, 100)}}

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Tanpa Perubahan
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Tanpa Perubahan
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Defenisi Tanda
+ +

Dukungan Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/id/web/events/cached/index.html b/files/id/web/events/cached/index.html new file mode 100644 index 0000000000..195f18f846 --- /dev/null +++ b/files/id/web/events/cached/index.html @@ -0,0 +1,74 @@ +--- +title: cached +slug: Web/Events/cached +translation_of: Archive/Events/cached +--- +

Event cached dijalankan ketika resource pada daftar application cache manifest telah terunduh, dan aplikasi sekarang ter-cache.

+ +

Info Umum

+ +
+
Spesifikasi
+
Offline
+
Interface
+
Event
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
applicationCache
+
Default Action
+
None
+
+ +

Properti

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertiTypeDeskripsi
targetEventTarget (DOM element)The event target (the topmost target in the DOM tree). Read Only.
typestringThe type of event. Read only.
canBubblebooleanDoes the event normally bubble? Read only.
cancelablebooleanIs it possible to cancel the event? Read only.
+ +

Event Terkait

+ + + +

Lihat juga

+ + diff --git a/files/id/web/events/error/index.html b/files/id/web/events/error/index.html new file mode 100644 index 0000000000..a5c531c19c --- /dev/null +++ b/files/id/web/events/error/index.html @@ -0,0 +1,71 @@ +--- +title: error +slug: Web/Events/error +translation_of: Web/API/Element/error_event +--- +

Event error ditampilkan ketika sumberdaya gagal dimuat.

+ +

Informasi umum

+ +
+
Spesifikasi
+
DOM L3
+
Antar muka
+
UIEvent jika digenerasikan dari antarmuka pengguna, event sebaliknya.
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None
+
+ +

Properti

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
+ +

Lihat Juga

+ +

{{domxref("GlobalEventHandlers.onerror")}} - window.onerror dan element.onerror.

diff --git a/files/id/web/events/index.html b/files/id/web/events/index.html new file mode 100644 index 0000000000..3560bde99a --- /dev/null +++ b/files/id/web/events/index.html @@ -0,0 +1,2310 @@ +--- +title: Event reference +slug: Web/Events +tags: + - NeedsTranslation + - TopicStub + - events +translation_of: Web/Events +--- +

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.

+ +

This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that add-ons can use them to interact with the browser.

+ +

Standard events

+ +

These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("abort")}}{{domxref("UIEvent")}}DOM L3The loading of a resource has been aborted.
abort{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been terminated (not due to an error).
abort{{domxref("Event")}}IndexedDBA transaction has been aborted.
{{event("afterprint")}}{{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document has started printing or the print preview has been closed.
{{event("animationend")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has completed.
{{event("animationiteration")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation is repeated.
{{event("animationstart")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has started.
{{event("audioprocess")}}{{domxref("AudioProcessingEvent")}}{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.
{{event("audioend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has finished capturing audio for speech recognition.
{{event("audiostart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has started to capture audio for speech recognition.
{{event("beforeprint")}} {{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document is about to be printed or previewed for printing.
{{event("beforeunload")}}{{domxref("BeforeUnloadEvent")}}HTML5  
{{event("beginEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element begins.
blocked IndexedDBAn open connection to a database is blocking a versionchange transaction on the same database.
{{event("blur")}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (does not bubble).
{{event("boundary")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a word or sentence boundary
{{event("cached")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been downloaded, and the application is now cached.
{{event("canplay")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("canplaythrough")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("change")}}{{domxref("Event")}}DOM L2, HTML5The change event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.
{{event("chargingchange")}}{{domxref("Event")}}Battery statusThe battery begins or stops charging.
{{event("chargingtimechange")}}{{domxref("Event")}}Battery statusThe chargingTime attribute has been updated.
{{event("checking")}}{{domxref("Event")}}OfflineThe user agent is checking for an update, or attempting to download the cache manifest for the first time.
{{event("click")}}{{domxref("MouseEvent")}}DOM L3A pointing device button has been pressed and released on an element.
close{{domxref("Event")}}WebSocketA WebSocket connection has been closed.
complete IndexedDB 
{{event("complete")}}{{domxref("OfflineAudioCompletionEvent")}}{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}The rendering of an {{domxref("OfflineAudioContext")}} is terminated.
{{event("compositionend")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text has been completed or canceled.
{{event("compositionstart")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3A character is added to a passage of text being composed.
{{event("contextmenu")}}{{domxref("MouseEvent")}}HTML5The right button of the mouse is clicked (before the context menu is displayed).
{{event("copy")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been added to the clipboard.
{{event("cut")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been removed from the document and added to the clipboard.
{{event("dblclick")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is clicked twice on an element.
{{event("devicelight")}}{{domxref("DeviceLightEvent")}}Ambient Light EventsFresh data is available from a light sensor.
{{event("devicemotion")}}{{domxref("DeviceMotionEvent")}}Device Orientation EventsFresh data is available from a motion sensor.
{{event("deviceorientation")}}{{domxref("DeviceOrientationEvent")}}Device Orientation EventsFresh data is available from an orientation sensor.
{{event("deviceproximity")}}{{domxref("DeviceProximityEvent")}}Proximity EventsFresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).
{{event("dischargingtimechange")}}{{domxref("Event")}}Battery statusThe dischargingTime attribute has been updated.
DOMActivate {{deprecated_inline}}{{domxref("UIEvent")}}DOM L3A button, link or state changing element is activated (use {{event("click")}} instead).
DOMAttributeNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an attribute changed (use mutation observers instead).
DOMAttrModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3The value of an attribute has been modified (use mutation observers instead).
DOMCharacterDataModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A text or another CharacterData has changed (use mutation observers instead).
{{event("DOMContentLoaded")}}{{domxref("Event")}}HTML5The document has finished loading (but not its dependent resources).
DOMElementNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an element changed (use mutation observers instead).
DOMFocusIn {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).
DOMFocusOut {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).
DOMNodeInserted {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been added as a child of another node (use mutation observers instead).
DOMNodeInsertedIntoDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been inserted into the document (use mutation observers instead).
DOMNodeRemoved {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from its parent node (use mutation observers instead).
DOMNodeRemovedFromDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from the document (use mutation observers instead).
DOMSubtreeModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A change happened in the document (use mutation observers instead).
{{event("downloading")}}{{domxref("Event")}}OfflineThe user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.
{{event("drag")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged (every 350ms).
{{event("dragend")}}{{domxref("DragEvent")}}HTML5A drag operation is being ended (by releasing a mouse button or hitting the escape key).
{{event("dragenter")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection enters a valid drop target.
{{event("dragleave")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection leaves a valid drop target.
{{event("dragover")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged over a valid drop target (every 350ms).
{{event("dragstart")}}{{domxref("DragEvent")}}HTML5The user starts dragging an element or text selection.
{{event("drop")}}{{domxref("DragEvent")}}HTML5An element is dropped on a valid drop target.
{{event("durationchange")}}{{domxref("Event")}}HTML5 mediaThe duration attribute has been updated.
{{event("emptied")}}{{domxref("Event")}}HTML5 mediaThe media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
{{event("end_(SpeechRecognition)","end")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has disconnected.
{{event("end_(SpeechSynthesis)","end")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName("Web Speech API")}}The utterance has finished being spoken.
{{event("ended")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because the end of the media was reached.
{{event("ended_(Web_Audio)", "ended")}}{{domxref("Event")}}{{SpecName("Web Audio API")}} 
{{event("endEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element ends.
{{event("error")}}{{domxref("UIEvent")}}DOM L3A resource failed to load.
{{event("error")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has failed.
{{event("error")}}{{domxref("Event")}}OfflineAn error occurred while downloading the cache manifest or updating the content of the application.
{{event("error")}}{{domxref("Event")}}WebSocketA WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
{{event("error")}}{{domxref("Event")}}Server Sent EventsAn event source connection has been failed.
{{event("error")}}{{domxref("Event")}}IndexedDBA request caused an error and failed.
{{event("error_(SpeechRecognitionError)","error")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}A speech recognition error occurs.
{{event("error_(SpeechSynthesisError)","error")}}{{domxref("SpeechSynthesisErrorEvent")}}{{SpecName('Web Speech API')}}An error occurs that prevents the utterance from being successfully spoken.
{{event("focus")}}{{domxref("FocusEvent")}}DOM L3An element has received focus (does not bubble).
{{event("focusin")}}{{domxref("FocusEvent")}}DOM L3An element is about to receive focus (bubbles).
{{event("focusout")}}{{domxref("FocusEvent")}}DOM L3An element is about to lose focus (bubbles).
{{event("fullscreenchange")}}{{gecko_minversion_inline("9")}}{{domxref("Event")}}Full ScreenAn element was turned to fullscreen mode or back to normal mode.
{{event("fullscreenerror")}}{{gecko_minversion_inline("9")}}{{domxref("Event")}}Full ScreenIt was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{event("gamepadconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been connected.
{{event("gamepaddisconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been disconnected.
{{event("gotpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement receives pointer capture.
{{event("hashchange")}}{{domxref("HashChangeEvent")}}HTML5The fragment identifier of the URL has changed (the part of the URL after the #).
{{event("lostpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement lost pointer capture.
{{event("input")}}{{domxref("Event")}}HTML5The value of an element changes or the content of an element with the attribute contenteditable is modified.
{{event("invalid")}}{{domxref("Event")}}HTML5A submittable element has been checked and doesn't satisfy its constraints.
{{event("keydown")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down.
{{event("keypress")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down and that key normally produces a character value (use input instead).
{{event("keyup")}}{{domxref("KeyboardEvent")}}DOM L3A key is released.
{{event("languagechange")}}{{domxref("Event")}}{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }} 
{{event("levelchange")}}{{domxref("Event")}}Battery statusThe level attribute has been updated.
{{event("load")}}{{domxref("UIEvent")}}DOM L3A resource and its dependent resources have finished loading.
load{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been successful.
{{event("loadeddata")}}{{domxref("Event")}}HTML5 mediaThe first frame of the media has finished loading.
{{event("loadedmetadata")}}{{domxref("Event")}}HTML5 mediaThe metadata has been loaded.
{{event("loadend")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has stopped (after "error", "abort" or "load" have been dispatched).
{{event("loadstart")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has begun.
{{event("mark")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a named SSML "mark" tag.
message{{domxref("MessageEvent")}}WebSocketA message is received through a WebSocket.
message{{domxref("MessageEvent")}}Web WorkersA message is received from a Web Worker.
message{{domxref("MessageEvent")}}Web MessagingA message is received from a child (i)frame or a parent window.
message{{domxref("MessageEvent")}}Server Sent EventsA message is received through an event source.
{{event("message_(ServiceWorker)","message")}}{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.Service WorkersA message is received from a service worker, or a message is received in a service worker from another context.
{{event("mousedown")}}{{domxref("MouseEvent")}}DOM L3A pointing device button (usually a mouse) is pressed on an element.
{{event("mouseenter")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached.
{{event("mouseleave")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached.
{{event("mousemove")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved over an element.
{{event("mouseout")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached or off one of its children.
{{event("mouseover")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached or onto one of its children.
{{event("mouseup")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is released over an element.
{{event("nomatch")}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a final result with no significant recognition.
{{event("notificationclick")}}{{domxref("NotificationEvent")}}{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}A system notification spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.
{{event("noupdate")}}{{domxref("Event")}}OfflineThe manifest hadn't changed.
{{event("obsolete")}}{{domxref("Event")}}OfflineThe manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
{{event("offline")}}{{domxref("Event")}}HTML5 offlineThe browser has lost access to the network.
{{event("online")}}{{domxref("Event")}}HTML5 offlineThe browser has gained access to the network (but particular websites might be unreachable).
open{{domxref("Event")}}WebSocketA WebSocket connection has been established.
open{{domxref("Event")}}Server Sent EventsAn event source connection has been established.
{{event("orientationchange")}}{{domxref("Event")}}Screen OrientationThe orientation of the device (portrait/landscape) has changed
{{event("pagehide")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed from.
{{event("pageshow")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed to.
{{event("paste")}}{{domxref("ClipboardEvent")}}ClipboardData has been transferred from the system clipboard to the document.
{{event("pause")}}{{domxref("Event")}}HTML5 mediaPlayback has been paused.
{{event("pause_(SpeechSynthesis)", "pause")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance is paused part way through.
{{event("pointercancel")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer is unlikely to produce any more events.
{{event("pointerdown")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer enters the active buttons state.
{{event("pointerenter")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved inside the hit-testing boundary.
{{event("pointerleave")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved out of the hit-testing boundary.
{{event("pointerlockchange")}}{{domxref("Event")}}Pointer LockThe pointer was locked or released.
{{event("pointerlockerror")}}{{domxref("Event")}}Pointer LockIt was impossible to lock the pointer for technical reasons or because the permission was denied.
{{event("pointermove")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer changed coordinates.
{{event("pointerout")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device moved out of hit-testing boundary or leaves detectable hover range.
{{event("pointerover")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device is moved into the hit-testing boundary.
{{event("pointerup")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer leaves the active buttons state.
{{event("play")}}{{domxref("Event")}}HTML5 mediaPlayback has begun.
{{event("playing")}}{{domxref("Event")}}HTML5 mediaPlayback is ready to start after having been paused or delayed due to lack of data.
{{event("popstate")}}{{domxref("PopStateEvent")}}HTML5A session history entry is being navigated to (in certain cases).
{{event("progress")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestIn progress.
progress{{domxref("ProgressEvent")}}OfflineThe user agent is downloading resources listed by the manifest.
{{event("push")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A Service Worker has received a push message.
{{event("pushsubscriptionchange")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A PushSubscription has expired.
{{event("ratechange")}}{{domxref("Event")}}HTML5 mediaThe playback rate has changed.
{{event("readystatechange")}}{{domxref("Event")}}HTML5 and XMLHttpRequestThe readyState attribute of a document has changed.
{{event("repeatEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element is repeated.
{{event("reset")}}{{domxref("Event")}}DOM L2, HTML5A form is reset.
{{event("resize")}}{{domxref("UIEvent")}}DOM L3The document view has been resized.
{{event("resourcetimingbufferfull")}}{{domxref("Performance")}}Resource TimingThe browser's resource timing buffer is full.
{{event("result")}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
{{event("resume")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}A paused utterance is resumed.
{{event("scroll")}}{{domxref("UIEvent")}}DOM L3The document view or an element has been scrolled.
{{event("seeked")}}{{domxref("Event")}}HTML5 mediaA seek operation completed.
{{event("seeking")}}{{domxref("Event")}}HTML5 mediaA seek operation began.
{{event("select")}}{{domxref("UIEvent")}}DOM L3Some text is being selected.
{{event("selectstart")}}{{domxref("Event")}}{{ SpecName('Selection API')}}A selection just started.
{{event("selectionchange")}}{{domxref("Event")}}{{ SpecName('Selection API')}}The selection in the document has been changed.
{{event("show")}}{{domxref("MouseEvent")}}HTML5A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute
{{event("soundend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has stopped being detected.
{{event("soundstart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has been detected.
{{event("speechend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Speech recognised by the speech recognition service has stopped being detected.
{{event("speechstart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Sound that is recognised by the speech recognition service as speech has been detected.
{{event("stalled")}}{{domxref("Event")}}HTML5 mediaThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{event("start_(SpeechRecognition)","start")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
{{event("start_(SpeechSynthesis)","start")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance has begun to be spoken.
{{event("storage")}}{{domxref("StorageEvent")}}Web StorageA storage area (localStorage or sessionStorage) has changed.
{{event("submit")}}{{domxref("Event")}}DOM L2, HTML5A form is submitted.
success{{domxref("Event")}}IndexedDBA request successfully completed.
{{event("suspend")}}{{domxref("Event")}}HTML5 mediaMedia data loading has been suspended.
{{event("SVGAbort")}}{{domxref("SVGEvent")}}SVGPage loading has been stopped before the SVG was loaded.
{{event("SVGError")}}{{domxref("SVGEvent")}}SVGAn error has occurred before the SVG was loaded.
{{event("SVGLoad")}}{{domxref("SVGEvent")}}SVGAn SVG document has been loaded and parsed.
{{event("SVGResize")}}{{domxref("SVGEvent")}}SVGAn SVG document is being resized.
{{event("SVGScroll")}}{{domxref("SVGEvent")}}SVGAn SVG document is being scrolled.
{{event("SVGUnload")}}{{domxref("SVGEvent")}}SVGAn SVG document has been removed from a window or frame.
{{event("SVGZoom")}}{{domxref("SVGZoomEvent")}}SVGAn SVG document is being zoomed.
{{event("timeout")}}{{domxref("ProgressEvent")}}XMLHttpRequest 
{{event("timeupdate")}}{{domxref("Event")}}HTML5 mediaThe time indicated by the currentTime attribute has been updated.
{{event("touchcancel")}}{{domxref("TouchEvent")}}Touch EventsA touch point has been disrupted in an implementation-specific manners (too many touch points for example).
{{event("touchend")}}{{domxref("TouchEvent")}}Touch EventsA touch point is removed from the touch surface.
{{event("touchenter")}}{{domxref("TouchEvent")}}Touch Events RemovedA touch point is moved onto the interactive area of an element.
{{event("touchleave")}}{{domxref("TouchEvent")}}Touch Events RemovedA touch point is moved off the interactive area of an element.
{{event("touchmove")}}{{domxref("TouchEvent")}}Touch EventsA touch point is moved along the touch surface.
{{event("touchstart")}}{{domxref("TouchEvent")}}Touch EventsA touch point is placed on the touch surface.
{{event("transitionend")}}{{domxref("TransitionEvent")}}CSS TransitionsA CSS transition has completed.
{{event("unload")}}{{domxref("UIEvent")}}DOM L3The document or a dependent resource is being unloaded.
{{event("updateready")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.
upgradeneeded IndexedDBAn attempt was made to open a database with a version number higher than its current version. A versionchange transaction has been created.
{{event("userproximity")}}{{domxref("UserProximityEvent")}}{{SpecName("Proximity Events")}}Fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not).
{{event("voiceschanged")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)
versionchange IndexedDBA versionchange transaction completed.
{{event("visibilitychange")}}{{domxref("Event")}}Page visibilityThe content of a tab has become visible or has been hidden.
{{event("volumechange")}}{{domxref("Event")}}HTML5 mediaThe volume has changed.
{{event("waiting")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because of a temporary lack of data.
{{event("wheel")}}{{gecko_minversion_inline("17")}}{{domxref("WheelEvent")}}DOM L3A wheel button of a pointing device is rotated in any direction.
+ +

Non-standard events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("afterscriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script has been executed.
{{event("beforescriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script is about to be executed.
{{event("beforeinstallprompt")}}{{domxref("Event")}}Chrome specificA user is prompted to save a web site to a home screen on mobile.
{{event("cardstatechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.cardState")}} property changes value.
{{event("change")}}{{domxref("DeviceStorageChangeEvent")}}Firefox OS specificThis event is triggered each time a file is created, modified or deleted on a given storage area.
{{event("connectionInfoUpdate")}} Firefox OS specificThe informations about the signal strength and the link speed have been updated.
{{event("cfstatechange")}} Firefox OS specificThe call forwarding state changes.
{{event("datachange")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object changes values.
{{event("dataerror")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object receive an error from the RIL.
{{event("DOMMouseScroll")}}{{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)
dragdrop {{deprecated_inline}}DragEventMozilla specificAn element is dropped (use {{event("drop")}} instead).
dragexit {{deprecated_inline}}DragEventMozilla specificA drag operation is being ended(use {{event("dragend")}} instead).
draggesture {{deprecated_inline}}DragEventMozilla specificThe user starts dragging an element or text selection (use {{event("dragstart")}} instead).
{{event("icccardlockerror")}} Firefox OS specificthe {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.
{{event("iccinfochange")}} Firefox OS specificThe {{domxref("MozMobileConnection.iccInfo")}} object changes.
{{event("localized")}} Mozilla SpecificThe page has been localized using data-l10n-* attributes.
{{event("mousewheel")}}{{deprecated_inline}} IE inventedThe wheel button of a pointing device is rotated.
{{event("MozAudioAvailable")}}{{domxref("Event")}}Mozilla specificThe audio buffer is full and the corresponding raw samples are available.
MozBeforeResize {{obsolete_inline}} Mozilla specificA window is about to be resized.
{{event("mozbrowseractivitydone")}} Firefox OS Browser API-specificSent when some activity has been completed (complete description TBD.)
{{event("mozbrowserasyncscroll")}} Firefox OS Browser API-specificSent when the scroll position within a browser {{HTMLElement("iframe")}} changes.
{{event("mozbrowseraudioplaybackchange")}} Firefox OS Browser API-specificSent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.
{{event("mozbrowsercaretstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.
{{event("mozbrowserclose")}} Firefox OS Browser API-specificSent when window.close() is called within a browser {{HTMLElement("iframe")}}.
{{event("mozbrowsercontextmenu")}} Firefox OS Browser API-specificSent when a browser {{HTMLElement("iframe")}} try to open a context menu.
{{event("mozbrowserdocumentfirstpaint")}} Firefox OS Browser API-specificSent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.
{{event("mozbrowsererror")}} Firefox OS Browser API-specificSent when an error occured while trying to load a content within a browser iframe
{{event("mozbrowserfindchange")}} Firefox OS Browser API-specificSent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see HTMLIFrameElement search methods.)
{{event("mozbrowserfirstpaint")}} Firefox OS Browser API-specificSent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from about:blank.)
{{event("mozbrowsericonchange")}} Firefox OS Browser API-specificSent when the favicon of a browser iframe changes.
{{event("mozbrowserlocationchange")}} Firefox OS Browser API-specificSent when an browser iframe's location changes.
{{event("mozbrowserloadend")}} Firefox OS Browser API-specificSent when the browser iframe has finished loading all its assets.
{{event("mozbrowserloadstart")}} Firefox OS Browser API-specificSent when the browser iframe starts to load a new page.
{{event("mozbrowsermanifestchange")}} Firefox OS Browser API-specificSent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.
{{event("mozbrowsermetachange")}} Firefox OS Browser API-specificSent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.
{{event("mozbrowseropensearch")}} Firefox OS Browser API-specificSent when a link to a search engine is found.
{{event("mozbrowseropentab")}} Firefox OS Browser API-specificSent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.)
{{event("mozbrowseropenwindow")}} Firefox OS Browser API-specificSent when {{domxref("window.open()")}} is called within a browser iframe.
{{event("mozbrowserresize")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}}'s window size has changed.
{{event("mozbrowserscroll")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}} content scrolls.
{{event("mozbrowserscrollareachanged")}} Firefox OS Browser API-specificSent when the available scrolling area  in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)
{{event("mozbrowserscrollviewchange")}} Firefox OS Browser API-specificSent when asynchronous scrolling (i.e. APCZ) starts or stops.
{{event("mozbrowsersecuritychange")}} Firefox OS Browser API-specificSent when the SSL state changes within a browser iframe.
{{event("mozbrowserselectionstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.
{{event("mozbrowsershowmodalprompt")}} Firefox OS Browser API-specificSent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe
{{event("mozbrowsertitlechange")}} Firefox OS Browser API-specificSent when the document.title changes within a browser iframe.
{{event("mozbrowserusernameandpasswordrequired")}} Firefox OS Browser API-specificSent when an HTTP authentification is requested.
{{event("mozbrowservisibilitychange")}} Firefox OS Browser API-specificSent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.
{{event("MozGamepadButtonDown")}} To be specifiedA gamepad button is pressed down.
{{event("MozGamepadButtonUp")}} To be specifiedA gamepad button is released.
{{event("MozMousePixelScroll")}} {{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)
{{event("MozOrientation")}} {{deprecated_inline}} Mozilla specificFresh data is available from an orientation sensor (see deviceorientation).
{{event("MozScrolledAreaChanged")}}{{domxref("UIEvent")}}Mozilla specificThe document view has been scrolled or resized.
{{event("moztimechange")}} Mozilla specificThe time of the device has been changed.
MozTouchDown {{deprecated_inline}} Mozilla specificA touch point is placed on the touch surface (use touchstart instead).
MozTouchMove {{deprecated_inline}} Mozilla specificA touch point is moved along the touch surface (use touchmove instead).
MozTouchUp {{deprecated_inline}} Mozilla specificA touch point is removed from the touch surface (use touchend instead).
{{event("alerting")}}{{domxref("CallEvent")}}To be specifiedThe correspondent is being alerted (his/her phone is ringing).
{{event("busy")}}{{domxref("CallEvent")}}To be specifiedThe line of the correspondent is busy.
{{event("callschanged")}}{{domxref("CallEvent")}}To be specifiedA call has been added or removed from the list of current calls.
onconnected {{event("connected")}}{{domxref("CallEvent")}}To be specifiedA call has been connected.
{{event("connecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to connect.
{{event("delivered")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been successfully delivered.
{{event("dialing")}}{{domxref("CallEvent")}}To be specifiedThe number of a correspondent has been dialed.
{{event("disabled")}} Firefox OS specificWifi has been disabled on the device.
{{event("disconnected")}}{{domxref("CallEvent")}}To be specifiedA call has been disconnected.
{{event("disconnecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to disconnect.
{{event("enabled")}} Firefox OS specificWifi has been enabled on the device.
{{event("error_(Telephony)","error")}}{{domxref("CallEvent")}}To be specifiedAn error occurred.
{{event("held")}}{{domxref("CallEvent")}}To be specifiedA call has been held.
{{event("holding")}}{{domxref("CallEvent")}}To be specifiedA call is about to be held.
{{event("incoming")}}{{domxref("CallEvent")}}To be specifiedA call is being received.
{{event("received")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been received.
{{event("resuming")}}{{domxref("CallEvent")}}To be specifiedA call is about to resume.
{{event("sent")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been sent.
{{event("statechange")}}{{domxref("CallEvent")}}To be specifiedThe state of a call has changed.
{{event("statuschange")}} Firefox OS specificThe status of the Wifi connection changed.
{{event("overflow")}}{{domxref("UIEvent")}}Mozilla specificAn element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).
{{event("smartcard-insert")}} Mozilla specificA smartcard has been inserted.
{{event("smartcard-remove")}} Mozilla specificA smartcard has been removed.
{{event("stkcommand")}} Firefox OS specificThe STK Proactive Command is issued from ICC.
{{event("stksessionend")}} Firefox OS specificThe STK Session is terminated by ICC.
text Mozilla SpecificA generic composition event occurred.
{{event("underflow")}}{{domxref("UIEvent")}}Mozilla specificAn element is no longer overflowed by its content (only works for elements styled with overflow != visible).
uploadprogress {{deprecated_inline}}{{domxref("ProgressEvent")}}Mozilla SpecificUpload is in progress (see {{event("progress")}}).
+

{{event("ussdreceived")}}

+ 		 Firefox OS specificA new USSD message is received
{{event("voicechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.voice")}} object changes values.
+ +

Mozilla-specific events

+ +
+

Note: those events are never exposed to web content and can only be used in chrome content context.

+
+ +

XUL events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("broadcast")}} XULAn observer noticed a change to the attributes of a watched broadcaster.
{{event("CheckboxStateChange")}} XULThe state of a checkbox has been changed either by a user action or by a script (useful for accessibility).
close XULThe close button of the window has been clicked.
{{event("command")}} XULAn element has been activated.
{{event("commandupdate")}} XULA command update occurred on a commandset element.
{{event("DOMMenuItemActive")}} XULA menu or menuitem has been hovered or highlighted.
{{event("DOMMenuItemInactive")}} XULA menu or menuitem is no longer hovered or highlighted.
{{event("popuphidden")}}PopupEventXULA menupopup, panel or tooltip has been hidden.
{{event("popuphiding")}}PopupEventXULA menupopup, panel or tooltip is about to be hidden.
{{event("popupshowing")}}PopupEventXULA menupopup, panel or tooltip is about to become visible.
{{event("popupshown")}}PopupEventXULA menupopup, panel or tooltip has become visible.
{{event("RadioStateChange")}} XULThe state of a radio has been changed either by a user action or by a script (useful for accessibility).
{{event("ValueChange")}} XULThe value of an element has changed (a progress bar for example, useful for accessibility).
+ +

Add-on-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
MozSwipeGesture Addons specificA touch point is swiped across the touch surface
MozMagnifyGestureStart Addons specificTwo touch points start to move away from each other.
MozMagnifyGestureUpdate Addons specificTwo touch points move away from each other (after a MozMagnifyGestureStart).
MozMagnifyGesture Addons specificTwo touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).
MozRotateGestureStart Addons specificTwo touch points start to rotate around a point.
MozRotateGestureUpdate Addons specificTwo touch points rotate around a point (after a MozRotateGestureStart).
MozRotateGesture Addons specificTwo touch points rotate around a point (after a sequence of MozRotateGestureUpdate).
MozTapGesture Addons specificTwo touch points are tapped on the touch surface.
MozPressTapGesture Addons specificA "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).
MozEdgeUIGesture Addons specificA touch point is swiped across the touch surface to invoke the edge UI (Win8 only).
MozAfterPaint Addons specificContent has been repainted.
DOMPopupBlocked Addons specificA popup has been blocked
DOMWindowCreated Addons specificA window has been created.
DOMWindowClose Addons specificA window is about to be closed.
DOMTitleChanged Addons specifcThe title of a window has changed.
DOMLinkAdded Addons specifcA link has been added a document.
DOMLinkRemoved Addons specifcA link has been removed inside from a document.
DOMMetaAdded Addons specificA meta element has been added to a document.
DOMMetaRemoved Addons specificA meta element has been removed from a document.
DOMWillOpenModalDialog Addons specificA modal dialog is about to open.
DOMModalDialogClosed Addons specificA modal dialog has been closed.
DOMAutoComplete Addons specificThe content of an element has been auto-completed.
DOMFrameContentLoaded Addons specificThe frame has finished loading (but not its dependent resources).
AlertActive Addons specificA notification element is shown.
AlertClose Addons specificA notification element is closed.
fullscreen Addons specificBrowser fullscreen mode has been entered or left.
sizemodechange Addons specificWindow has entered/left fullscreen mode, or has been minimized/unminimized.
MozEnteredDomFullscreen Addons specificDOM fullscreen mode has been entered.
SSWindowClosing Addons specificThe session store will stop tracking this window.
SSTabClosing Addons specificThe session store will stop tracking this tab.
SSTabRestoring Addons specificA tab is about to be restored.
SSTabRestored Addons specificA tab has been restored.
SSWindowStateReady Addons specificA window state has switched to "ready".
SSWindowStateBusy Addons specificA window state has switched to "busy".
tabviewsearchenabled Addons specificThe search feature of Panorama has been activated
tabviewsearchdisabled Addons specificThe search feature of Panorama has been deactivated
tabviewframeinitialized Addons specificThe frame container of Panorama has been initialized
tabviewshown Addons specificThe Panorama tab has been shown
tabviewhidden Addons specificThe Panorama tab has been hidden
TabOpen Addons specificA tab has been opened.
TabClose Addons specificA tab has been closed.
TabSelect Addons specificA tab has been selected.
TabShow Addons specificA tab has been shown.
TabHide Addons specificA tab has been hidden.
TabPinned Addons specificA tab has been pinned.
TabUnpinned Addons specificA tab has been unpinned.
+ +

Developer tool-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
CssRuleViewRefreshed devtools specificThe "Rules" view of the style inspector has been updated.
CssRuleViewChanged devtools specificThe "Rules" view of the style inspector has been changed.
CssRuleViewCSSLinkClicked devtools specificA link to a CSS file has been clicked in the "Rules" view of the style inspector.
+ +

Categories

+ +

Animation events

+ +

{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}

+ +

Battery events

+ +

{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}

+ +

Call events

+ +

{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}

+ +

CSS events

+ +

CssRuleViewRefreshed, CssRuleViewChanged, CssRuleViewCSSLinkClicked, {{event("transitionend")}}

+ +

Database events

+ +

abort, blocked, complete, {{event("error")}} (link), success, upgradeneeded, versionchange

+ +

Document events

+ +

DOMLinkAdded, DOMLinkRemoved, DOMMetaAdded, DOMMetaRemoved, DOMWillOpenModalDialog, DOMModalDialogClosed, {{event("unload")}}

+ +

DOM mutation events

+ +

DOMAttributeNameChanged, DOMAttrModified, DOMCharacterDataModified, {{event("DOMContentLoaded")}}, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified

+ +

Drag events

+ +

{{event("drag")}}, dragdrop, {{event("dragend")}}, {{event("dragenter")}}, dragexit, draggesture, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}

+ +

Element events

+ +

{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, DOMAutoComplete, {{event("command")}}, {{event("commandupdate")}}

+ +

Focus events

+ +

{{event("blur")}}, {{event("change")}}, DOMFocusIn, DOMFocusOut, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}

+ +

Form events

+ +

{{event("reset")}}, {{event("submit")}}

+ +

Frame events

+ +

{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (link), {{event("mozbrowsertitlechange")}}, DOMFrameContentLoaded

+ +

Input device events

+ +

{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}

+ +

Media events

+ +

{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}

+ + + +

{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}

+ +

Network events

+ +

{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},

+ +

Notification events

+ +

AlertActive, AlertClose

+ +

Pointer events

+ +

{{event("pointerover")}}, {{event("pointerenter")}}, {{event("pointerdown")}}, {{event("pointermove")}}, {{event("pointerup")}}, {{event("pointercancel")}}, {{event("pointerout")}}, {{event("pointerleave")}}, {{event("gotpointercapture")}}, {{event("lostpointercapture")}}

+ + + +

{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, DOMPopupBlocked

+ +

Printing events

+ +

{{event("afterprint")}}, {{event("beforeprint")}}

+ +

Progress events

+ +

abort, {{event("error")}}, load, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, progress, {{event("timeout")}}, uploadprogress

+ +

Resource events

+ +

{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}

+ +

Script events

+ +

{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}

+ +

Sensor events

+ +

{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}

+ +

Session history events

+ +

{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}

+ +

Smartcard events

+ +

{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}

+ +

SMS and USSD events

+ +

{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}

+ +

Storage events

+ +

{{event("change")}} (see {{anch("Non-standard events")}}), {{event("storage")}}

+ +

SVG events

+ +

{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}

+ +

Tab events

+ +

tabviewsearchenabled, tabviewsearchdisabled, tabviewframeinitialized, tabviewshown, tabviewhidden, TabOpen, TabClose, TabSelect, TabShow, TabHide, TabPinned, TabUnpinned, SSTabClosing, SSTabRestoring, SSTabRestored, {{event("visibilitychange")}}

+ +

Text events

+ +

{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, text

+ +

Touch events

+ +

MozEdgeUIGesture, MozMagnifyGesture, MozMagnifyGestureStart, MozMagnifyGestureUpdate, MozPressTapGesture, MozRotateGesture, MozRotateGestureStart, MozRotateGestureUpdate, MozSwipeGesture, MozTapGesture, MozTouchDown, MozTouchMove, MozTouchUp, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}

+ +

Update events

+ +

{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}

+ +

Value change events

+ +

{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}

+ +

View events

+ +

fullscreen, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, MozEnteredDomFullscreen, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, sizemodechange

+ +

Websocket events

+ +

close, {{event("error")}}, message, open

+ +

Window events

+ +

DOMWindowCreated, DOMWindowClose, DOMTitleChanged, MozBeforeResize {{obsolete_inline}}, SSWindowClosing, SSWindowStateReady, SSWindowStateBusy, close

+ +

Uncategorized events

+ +

{{event("beforeunload")}}, {{event("localized")}}, message, message, message, MozAfterPaint, {{event("moztimechange")}}, open, {{event("show")}}

+ +

See also

+ + diff --git a/files/id/web/guide/api/index.html b/files/id/web/guide/api/index.html new file mode 100644 index 0000000000..4e0e34c483 --- /dev/null +++ b/files/id/web/guide/api/index.html @@ -0,0 +1,26 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +

Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.

+ +

Web APIs from A to Z

+ +

{{ListGroups}}

+ +

See also

+ + diff --git a/files/id/web/guide/api/webrtc/index.html b/files/id/web/guide/api/webrtc/index.html new file mode 100644 index 0000000000..93c1a489eb --- /dev/null +++ b/files/id/web/guide/api/webrtc/index.html @@ -0,0 +1,34 @@ +--- +title: WebRTC +slug: Web/Guide/API/WebRTC +translation_of: Web/API/WebRTC_API +--- +

WebRTC (RTC mengacu pada Real-Time Communications) adalah sebuah teknologi yang memungkinkan pengiriman audio atau video serta berbagi data antar peramban web (peer). Sebagai sebuah standar, WebRTC menghadirkan fitur pada peramban web untuk berbagi data dan melakukan telekonferensi secara peer-to-peer, tanpa perlu memasang plugins atau aplikasi pihak ketiga.

+ +

Komponen WebRTC dapat diakses melalui JavaScript API, di antaranya: Nework Stream API, yang merepresentasikan audio atau video dalam bentuk data stream; PeerConnection API, yang memungkinkan dua atau lebih pengguna untuk berkomunikasi langsung melalui peramban web; dan DataChannel API, yang memungkinkan bentuk komunikasi lainnya secara real-time untuk gaming, text chat, file transfer, dan lainnya.

+ +
+

Catatan: Dokumentasi ini sedang dalam proses pemindahan ke laman baru.

+
+ +

Panduan

+ +
+
Komunikasi peer-to-peer pada WebRTC
+
Bagaimana cara melakukan komunikasi peer-to-peer menggunakan WebRTC API.
+
Pengantar arsitektur WebRTC
+
WebRTC memiliki banyak bagian di dalamnya, dan itu sangat membingungkan. Artikel ini bertujuan untuk menjelaskan bagian-bagian tersebut, dan bagaimana semuanya bekerja.
+
Dasar-dasar WebRTC
+
Setelah Anda memahami arsitektur WebRTC, Anda dapat melanjutkan ke artikel selanjutnya yang akan menjelaskan proses pengembangan aplikasi dasar RTC yang bekerja pada peramban web.
+
+ +

Referensi

+ +
+
Navigator.getUserMedia
+
API yang berfungsi untuk menangkap media (audio atau video).
+
RTCPeerConnection
+
Antarmuka yang berfungsi untuk menangani data streaming antar dua peer.
+
RTCDataChannel
+
Antarmuka yang berfungsi untuk mengirimkan data antar peer.
+
diff --git a/files/id/web/guide/css/getting_started/index.html b/files/id/web/guide/css/getting_started/index.html new file mode 100644 index 0000000000..c37ce973fa --- /dev/null +++ b/files/id/web/guide/css/getting_started/index.html @@ -0,0 +1,32 @@ +--- +title: Getting started with CSS +slug: Web/Guide/CSS/Getting_started +translation_of: Learn/CSS/First_steps +--- +

This tutorial introduces you to the basic features and language (the syntax) for Cascading Style Sheets (CSS). You use CSS to change the look of a structured document, such as a web page. The tutorial also includes sample exercises you can try on your own computer to see the effects of CSS and features that work in modern browsers.

+

The tutorial is for beginners and anyone who would like to review the basics of CSS. If you have more experience with CSS, the CSS main page lists more advanced resources.

+ +

What you need to get started

+ +

Although the exercises can help you learn, you are not required to complete them. You can simply read the tutorial and look at the pictures.

+

Note: The tutorial covers how CSS works with color. It will be easier to complete these sections with a color display and normal color vision.

+

How to use this tutorial

+

To use this tutorial, read the pages carefully and in sequence. If you skip a page, it may be difficult to understand pages later in the tutorial.

+

Part I: The Basics of CSS

+

On each page, use the Information section to understand how CSS works. Use the Action section to try using CSS on your own computer.

+

To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.

+

To understand CSS in more depth, read the information that you find in boxes captioned More details. Use the links there to find reference information about CSS.

+

Part II: The Scope of CSS

+

A second part of the tutorial provides examples, which show the scope of CSS with other web and Mozilla technologies.

+
    +
  1. JavaScript
    2. +
  2. SVG graphics
    3. +
  3. XML data
    4. +
  4. XBL bindings
    5. +
  5. XUL user interfaces
    6. +
diff --git a/files/id/web/guide/css/media_queries/index.html b/files/id/web/guide/css/media_queries/index.html new file mode 100644 index 0000000000..3fe883c5f6 --- /dev/null +++ b/files/id/web/guide/css/media_queries/index.html @@ -0,0 +1,630 @@ +--- +title: Media query CSS +slug: Web/Guide/CSS/Media_queries +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +

Media query terdiri dari jenis media dan paling sedikit satu ekspresi yang membatasi lingkup style sheets dengan menggunakan fitur media, seperti lebar, tinggi, dan warna. Media query, ditambahkan di CSS3, memungkinkan tampilan konten disesuaikan dengan alat penampil tertentu tanpa harus mengubah konten itu sendiri.

+ +

Sintaks

+ +

Media query terdiri dari jenis media (media type) dan dapat, sesuai dengan spesifikasi CSS3, mengandung satu atau lebih ekspresi, diekspresikan sebagai fitur media, baik benar (true) atau salah (false).  Hasil query adalah benar jika jenis media yang disebutkan dalam media query cocok dengan jenis alat yang digunakan untuk menampilkan dokumen dan semua ekspresi di dalam media query adalah benar.

+ +
<!-- Media query CSS pada elemen link -->
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+
+<!-- Media query CSS di dalam style sheet -->
+<style>
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+</style>
+ +

Ketika sebuah media query adalah benar, style sheet atau aturan style yang bersangkutan diterapkan, sesuai dengan aturan cascading normal. Style sheet dengan media query yang menempel pada tag <link> masih akan diunduh bahkan jika media query tersebut adalah salah (false) (namun tidak akan diterapkan).

+ +

Kecuali jika Anda menggunakan operator not atau only, jenis media adalah opsional dan jenis all akan diterapkan.

+ +

Operator logika

+ +

Anda dapat merancang media query kompleks menggunakan operator logika, termasuk not, and, dan only. Operator and digunakan untuk menggabungkan banyak fitur media (media features) ke dalam satu media query tunggal, setiap fitur terkait harus benar (true) agar query benar (true). Operator not digunakan untuk menegasikan keseluruhan media query. Operator only digunakan untuk menerapkan suatu style hanya jika keseluruhan query cocok, berguna untuk mencegah browser lama menerapkan style-style tertentu. Jika Anda menggunakan operator-operator not atau only, Anda harus menyebutkan jenis media secara eksplisit.

+ +

Anda juga dapat menggabungkan banyak media query dalam sebuah daftar terpisah koma; jika ada media query di dalam daftar yang benar (true), keseluruhan pernyataan media adalah benar (true). Hal ini setara dengan operator or.

+ +

and

+ +

Kata kunci and digunakan untuk menggabungkan banyak fitur media menjadi satu, seperti menggabungkan fitur media dengan jenis media. Media query dasar, sebuah fitur media tunggal dengan jenis media all secara implisit, dapat terlihat seperti ini:

+ +
@media (min-width: 700px) { ... }
+ +

Namun, jika, Anda menginginkan hal ini diterapkan hanya untuk tampilan lanskap, Anda dapat menggunakan operator and untuk menggabungkan fitur-fitur media tersebut.

+ +
@media (min-width: 700px) and (orientation: landscape) { ... }
+ +

Sekarang media query di atas hanya akan benar jika lebar viewport adalah 700px atau lebih dan dalam tampilan lanskap. Namun, jika, Anda hanya menginginkan hal ini untuk diterapkan jika jenis media tampilan adalah TV, Anda dapat menggabungkan fitur-fitur ini dengan jenis media menggunakan operator and.

+ +
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
+ +

Sekarang, media query di atas hanya akan diterapkan jika jenis media adalah TV, lebar viewport adalah 700px atau lebih, dan tampilan adalah lanskap.

+ +

daftar terpisah koma

+ +

Daftar terpisah koma adalah seperti operator logika or ketika digunakan dalam media query. Ketika menggunakan daftar media query terpisah koma, jika ada media query yang benar (true), style or style sheet akan diterapkan. Setiap media query di dalam daftar terpisah koma diperlakukan sebagai query individual, dan setiap operator yang diterapkan pada satu media query tidak mempengaruhi yang lainnya. Ini berarti daftar media query terpisah koma dapat ditujukan  untuk fitur, jenis, dan kondisi media yang berbeda.

+ +

Sebagai contoh, seandainya Anda ingin menerapkan seperangkat style jika alat penampil memiliki lebar minimum 700px atau alat genggam dalam moda lanskap, Anda dapat menulis sebagai berikut:

+ +
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
+ +

Pada contoh di atas, jika saya menggunakan perangkat screen dengan lebar viewport 800px, pernyataan media akan benar (true) karena bagian pertama, yang diinterpetasikan sebagai @media all and (min-width: 700px) akan berlaku pada perangkat saya dan oleh karena itu benar (true), terlepas dari fakta bahwa perangkat screen saya akan gagal dalam pengecekan jenis media handheld di media query kedua. Demikian pula, jika saya menggunakan perangkat genggam handheld dalam moda lanskap dengan lebar viewport 500px, walaupun media query pertama gagal karena lebar viewport tidak sesuai, media query kedua akan berhasil dan oleh karena itu pernyataan media akan menghasilkan nilai benar (true).

+ +

not

+ +

Kata kunci not berlaku pada keseluruhan media query dan memberikan nilai benar (true) jika media query akan sebaliknya memberikan nilai salah (false) (seperti fitur query monochrome pada warna tampilan atau lebar layar 600px dengan min-width: 700px). Sebuah not hanya akan menegasikan media query yang ditetapkan dan bukan setiap media query jika ada dalam daftar media query terpisah koma. Kata kunci not tidak dapat digunakan untuk menegasikan sebuah fitur query individual, hanya untuk media query secara keseluruhan. Sebagai contoh, not dievaluasi paling akhir dalam query berikut ini:

+ +
@media not all and (monochrome) { ... }
+
+ +

Ini berarti bahwa query tersebut dievaluasi seperti ini:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... bukan seperti ini:

+ +
@media (not all) and (monochrome) { ... }
+ +

Sebagai contoh lain, lihat media query berikut ini:

+ +
@media not screen and (color), print and (color)
+
+ +

Yang dievaluasi seperti ini:

+ +
@media (not (screen and (color))), print and (color)
+ +

only

+ +

Kata kunci only mencegah browser lama yang tidak mendukung media query dengan fitur media menerapkan style yang disediakan:

+ +
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
+
+ +

Pseudo-BNF (untuk Anda yang gemar hal seperti ini)

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

Media query adalah case insensitive.  Media query yang melibatkan jenis media yang tidak diketahui selalu salah (false).

+ +
Catatan: Tanda kurung wajib digunakan di sekitar ekspresi; jika tidak digunakan akan mengakibatkan kesalahan.
+ +

Fitur media

+ +

Sebagian besar fitur media dapat diawali dengan "min-" atau "max-" untuk mengekspresikan batasan "lebih dari atau sama dengan" atau "kurang dari atau sama dengan".  Hal ini menghindari penggunaan simbol "<" dan ">", yang mungkin akan menyebabkan konflik dengan HTML dan XML.  Jika Anda  menggunakan fitur media tanpa nilai tertentu, ekspresi tersebut akan bernilai benar (true) jika nilai fitur adalah bukan-nol.

+ +
Catatan: Jika sebuah fitur media tidak sesuai untuk alat di mana browser dijalankan, ekspresi yang melibatkan fitur media tersebut adalah selalu salah (false).  Sebagai contoh, meng-query rasio aspek dari suatu alat aural selalu bernilai salah (false).
+ +

color

+ +

Nilai: {{cssxref("<color>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max prefixes: ya

+ +

Menunjukkan jumlah per komponen warna dari alat penampil.  Jika alat tersebut bukan alat yang memiliki warna, nilai ini adalah nol.

+ +
Catatan: Jika komponen warna memiliki jumlah bit yang berbeda per komponen warna, angka yang paling kecillah yang digunakan.  Sebagai contoh, jika sebuat layar menggunakan 5 bit untuk biru dan merah dan 6 bit untuk hijau, maka alat tersebut dianggap menggunakan 5 bit per komponen warna.  Jika suat alat menggunakan warna terindeks, jumlah bit minimum per komponen warna dalam tabel warna yang digunakan.
+ +

Contoh

+ +

Untuk menerapkan style sheet pada semua alat berwarna:

+ +
@media all and (color) { ... }
+
+ +

Untuk menerapkan style sheet pada alat yang memiliki paling sedikit 4 bit per komponen warna:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

Nila: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: ya

+ +

Menunjukkan jumlah entri dalam tabel pencarian warna untuk alat penampil.

+ +

Contoh

+ +

Untuk menunjukkan bahwa suatu style sheet harus diterapkan pada semua alat yang menggunakan warna terindeks, Anda dapat melakukan:

+ +
@media all and (color-index) { ... }
+
+ +

Untuk menerapkan style sheet pada alat berwarna terindeks dengan paling sedikit 256 warna:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

Nilai: {{cssxref("<ratio>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Menggambarkan rasio aspek daerah tampilan dari alat penampil.  Nilai ini terdiri dari dua integer positif dipisahkan oleh karakter garis miring ("/").  Ini menunjukkan rasio piksel horisontal (angka pertama) terhadap piksel vertikal (angka kedua).

+ +

Contoh

+ +

Berikut ini memilih style sheet khusus untuk digunakan ketika daerah tampilan paling tidak selebar tingginya.

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

Ini memilih style ketika rasio aspek adalah 1:1 atau lebih. Dengan kata lain, style-style ini hanya akan diterapkan ketika area penampil adalah bujursangkar atau lanskap.

+ +

device-aspect-ratio

+ +

Nilai: {{cssxref("<ratio>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Menggambarkan rasio aspek dari alat penampil.  Nilai ini terdiri dari dua integer positif dipisahkan oleh karakter garis miring ("/").  Hal ini menunjukkan rasio piksel horisontal (yang pertama) terhadap piksel vertikal (yang kedua).

+ +

Contoh

+ +

Berikut ini memilih style sheet khusus yang digunakan untuk tampilan layar lebar.

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

Ini memilih style ketika rasio aspek adalah 16:9 atau 16:10.

+ +

device-height

+ +

Nilai: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Menggambarkan tinggi alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).

+ +

Contoh

+ +

Untuk menerapkan style sheet pada sebuah dokument ketika ditampilkan pada layar yang memiliki panjang kurang dari 800 piksel, Anda dapat menggunakan ini:

+ +
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
+
+ +

device-width

+ +

Nilai: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Menggambarkan lebar alat penampil (berarti keseluruhan layar atau halaman, bukan hanya area render, seperti jendela dokumen).

+ +

Contoh

+ +

Untuk menerapkan style sheet pada sebuah dokumen ketika ditampilkan pada layar yang memiliki lebar kurang dari 800 piksel wide, Anda dapat menggunakan ini:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+ +

grid

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: all
+ Menerima prefiks min/max: tidak

+ +

Menentukan apakah alat penampil adalah sebuah alat grid atau bitmap.  Jika alat tersebut berbasis grid (seperti terminal TTY atau layar telepon dengan hanya satu font), nilai adalah 1.  Jika tidak, nilai adalah nol.

+ +

Contoh

+ +

Untuk menerapkan suatu style pada alat genggam dengan layar selebar 15-karakter atau kurang:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
Catatan: Unit "em" memiliki arti khusus untuk alat grid; karena lebar pasti "em" tidak dapat ditentukan, 1em diasumsikan selebar satu sel grid secara horisontal, dan tingginya satu sell secara vertikal.
+ +

height

+ +

Nilai: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Fitur media height (tinggi) menggambarkan tinggi permukaan rendering alat penampil (seperti tinggi viewport atau kotak halaman pada sebuah printer).

+ +
Catatan: Ketika user mengubah ukuran window, Firefox mengganti style sheets dengan yang paling sesuai berdasarkan media query menggunakan fitur media width dan height.
+ +

monochrome

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: ya

+ +

Menunjukkan jumlah bit per piksel pada alat monokrom (keabuan).  Jika alat tersebut bukan monokrom, nilai alat tersebut adalah 0.

+ +

Contoh

+ +

Untuk menerapkan style sheet pada semua alat monokrom:

+ +
@media all and (monochrome) { ... }
+
+ +

Untuk menerapkan style sheet pada alat monokrom dengan paling sedikit 8 bit per piksel:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

Nilai: landscape | portrait
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: tidak

+ +

Menunjukkan apakah viewport dalam mode lanskap (tampilan lebih lebar daripada tingginya) atau potret (tampilan lebih tinggi daripada lebarnya).

+ +

Contoh

+ +

Untuk menerapkan style sheet hanya pada orientasi potret:

+ +
@media all and (orientation: portrait) { ... }
+ +

resolution

+ +

Nilai: {{cssxref("<resolution>")}}
+ Media: {{cssxref("Media/Bitmap", "bitmap")}}
+ Menerima prefiks min/max: ya

+ +

Menunjukkan resolusi (kepadatan piksel) alat penampil. Resolution mungkin disebutkan dalam dots per inch (dpi - titik per inci) atau dots per centimeter (dpcm - titik per sentimeter).

+ +

Contoh

+ +

Untuk menerapkan style sheet pada alat dengan resolusi paling sedikit 300 dpi:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

Untuk mengganti sintaks lama (min-device-pixel-ratio: 2):

+ +
@media screen and (min-resolution: 2dppx) { ... }
+ +

scan

+ +

Nilai: progressive | interlace
+ Media: {{cssxref("Media/TV")}}
+ Menerima prefiks min/max: tidak

+ +

Menggambarkan proses pemindaian alat penampil televisi.

+ +

Contoh

+ +

Untuk menerapkan style sheet hanya pada televisi pemindai progresif:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

Nilai: {{cssxref("<length>")}}
+ Media: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Menerima prefiks min/max: ya

+ +

Fitur media width menggambarkan lebar permukaan rendering alat penampil (seperti lebar jendela dokumen, atau lebar kotak halaman sebuah printer).

+ +
Catatan: Ketika user mengubah ukuran jendela, Firefox mengganti style sheets yang sesuai berdasarkan media query menggunakan fitur media width dan height.
+ +

Contoh

+ +

Jika Anda ingin menentukan sebuah style sheet untuk perangkat genggam, atau perangkat layar dengan lebar lebih besar dari 20em, Anda dapat menggunakan query ini:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

Query Media ini menentukan style sheet yang berlaku untuk media cetak lebih lebar dari 8,5 inci:

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

Query ini menentukan style sheet yang digunakan saat lebar viewport adalah antara 500 dan 800 pixel:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+ +

Fitur Media Spesifik Mozilla

+ +

Mozilla menawarkan beberapa fitur media spesifik Gecko. Beberapa di antaranya mungkin diusulkan sebagai fitur media resmi.

+ +

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Meneriman prefiks min/max: tidak

+ +

Jika perangkat memungkinkan gambar untuk muncul dalam menu, ini adalah 1; jika tidak, nilainya adalah 0. Ini berhubungan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(images-in-menus)") }}.

+ +

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: no

+ +

Jika user telah mengkonfigurasi perangkat mereka untuk menggunakan tampilan "Graphite" pada Mac OS X, ini adalah 1. Jika pengguna menggunakan tampilan biru standar, atau bukan pada Mac OS X, ini adalah 0.

+ +

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.

+ +

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: tidak

+ +

Jika user menggunakan Maemo dengan tema asli, ini adalah 1; jika menggunakan tema Fremantle yang lebih baru, ini adalah 0.

+ +

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(maemo-classic)") }}.

+ +

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

+ +

Nilai: {{cssxref("<number>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: ya

+ +

Memberikan jumlah piksel perangkat per piksel CSS.

+ +
+

Jangan gunakan fitur ini.

+ +

Tapi gunakanlah fitur resolution dengan unit dppx.

+ +


+ -moz-device-pixel-ratio mungkin digunakan sebagai kompatibilitas dengan Firefox lebih tua daripada 16 dan -webkit-device-pixel-ratio dengan browser-browser berbasis WebKit yang tidak mendukung dppx.

+ +

Contoh:

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Browsers berbasis Webkit */
+       (min--moz-device-pixel-ratio: 2),    /* Browsers yang lebih tua (sebelum Firefox 16) */
+       (min-resolution: 2dppx),             /* Cara standar */
+       (min-resolution: 192dpi)             /* fallback dppx */
+ +

Lihat artikel CSSWG ini untuk praktek kompatibilitas yang baik terkait resolution dan dppx.

+
+ +
Catatan: Fitur media ini juga diimplementasikan oleh Webkit sebagai -webkit-device-pixel-ratio. Prefiks min dan max seperti diimplementasikan oleh Gecko dinamakan min--moz-device-pixel-ratio dan max--moz-device-pixel-ratio; tetapi prefiks yang sama seperti yang diimplementasikan oleh Webkit dinamakan -webkit-min-device-pixel-ratio dan -webkit-max-device-pixel-ratio.
+ +

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

+ +

Nilai: windows-xp | windows-vista | windows-win7 | windows-win8
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: tidak

+ +

Menunjukkan versi sistem operasi mana yang sedang digunakan saat ini. Saat ini hanya diimplementasikan pada Windows. Nilai-nilai yang mungkin adalah:

+ + + +

Ini disediakan untuk aplikasi skins dan kode chrome lainnya agar dapat beradaptasi untuk bekerja dengan baik dengan versi sistem operasi saat ini.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: no

+ +

Jika user interface perangkat menampilkan tombol panah kembali di akhir scrollbar, ini adalah 1. Jika tidak, bernilai 0.

+ +

Ini berkaitan dengan pseudo-class CSS {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

+ +

Nilai: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Menerima prefiks min/max: tidak

+ +

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

+ +

Example

+ +

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

+ +

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

+ +

This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

+ +

{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

+ +

Value: {{cssxref("<integer>")}}
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

+ +

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

+ +

Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
+ Media: {{cssxref("Media/Visual")}}
+ Accepts min/max prefixes: no

+ +

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

+ + + +

This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
grid{{ CompatUnknown() }}{{ CompatNo() }} (grid media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
resolution{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("<integer>")}} values;
+ {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("<number>")}} values, as per the spec.		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
scan{{ CompatUnknown() }}{{ CompatNo() }} (tv media type is not supported){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

+ + diff --git a/files/id/web/guide/grafis/index.html b/files/id/web/guide/grafis/index.html new file mode 100644 index 0000000000..43fb9b5954 --- /dev/null +++ b/files/id/web/guide/grafis/index.html @@ -0,0 +1,48 @@ +--- +title: Grafis dalam web +slug: Web/Guide/Grafis +tags: + - 2D + - 3D + - Canvas + - Grafik + - MDN + - OpenGL + - Web + - WebRTC +translation_of: Web/Guide/Graphics +--- +

Situs web moderen dan aplikasi sering membutuhkan tampilan grafis. Gambar statis dapat dengan mudah ditamilkan dengan menggunakan elemen {{HTMLElement("img")}} , atau mengatur tampilan background dari elemen HTML dengan menggunakan properti css {{cssxref("background-image")}}. anda sering menginginkan tampilan grafis melayang, atau memanipulasi gambar dari gambar nyatanya. Artikel ini memberikan wawasan tentang bagaimana anda dapat melakukannya

+ +
+
+

Grafik 2D

+ +
+
Canvas
+
Elemen {{HTMLElement("canvas")}} menyediakan API untuk menggambar grafik 2D menggunakan javascript.
+
SVG
+
Scalable Vector Graphics (SVG) memungkinkan anda menggunakan garis, kurva, dan bentuk geometris lain untuk membuat grafik. Dengan menghindari penggunaan bitmap, Anda dapat membuat gambar yang bersih dengan skala berbagai ukuran.
+
+ +

Lihat Semua... 

+
+ +
+

Grafik 3D

+ +
+
WebGL
+
Sebuah panduan untuk memulai menggunakan WebGL, API grafis 3D untuk Web. Teknologi ini memungkinkan anda menggunakan standar OpenGL ES dalam konten Web.
+
+ +

Video

+ +
+
Menggunakan HTML5 audio dan video
+
Embedding video dan / atau audio di halaman web dan mengendalikan pemutaran nya.
+
WebRTC
+
RTC pada WebRTC artinya Real-Time Communications, teknologi yang memungkinkan streaming audio/video serta berbagi data antar browser pengguna (peers).
+
+
+
diff --git a/files/id/web/guide/html/forms/index.html b/files/id/web/guide/html/forms/index.html new file mode 100644 index 0000000000..9daf1d6077 --- /dev/null +++ b/files/id/web/guide/html/forms/index.html @@ -0,0 +1,340 @@ +--- +title: HTML forms guide +slug: Web/Guide/HTML/Forms +translation_of: Learn/Forms +--- +

Panduan ini adalah seri dari artikel-artikel yang akan membantu anda menguasai form HTML. Form HTML adalah tool yang paling poweful untuk berinteraksi dengan para pengguna; namun, karena beberapa alasan sejarah dan teknis, tidak jelas bagaimana cara menggunakannya hingga pontensi penuhnya. Dalam panduan ini, kita akan membahas seluruh aspek dari form HTML, struktur form untuk pemberian style, mulai dari penanganan data sampai widget buatan. Anda akan mempelajari bagaimana menikmati kekuatan yang mereka miliki!

+

Articles

+
    +
  1. Form HTML pertama saya
    2. +
  2. Cara membuat struktur form HTML
    3. +
  3. Form Widget native
    4. +
  4. CSS dengan form HTML +
      +
    1. Pemberian style form HTML
      2. +
    2. Pemberian style form HTML Lanjut
      3. +
    3. Tabel kompatibilitas property widget form
      4. +
    +
    5. +
  5. Mengirim dan menerima data form
    6. +
  6. Validasi data form
    7. +
  7. Bagaimana cara membuat gidget form buatan
    8. +
  8. Mengirimkan form melalui JavaScript  +
      +
    1. Menggunakan object FormData
      2. +
    +
    9. +
  9. HTML forms in legacy browsers
    10. +
+

Dokumentasi HTML

+

Elemen-elemen HTML

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementRelated DOM interfaceDescription
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}Elemen button menampilkan tombol yang dapat diklik.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}Elemen datalist menampung kumpulan dari elemen {{ HTMLElement("option") }} yang merepresentasikan pilihan-pilihan yang mungkin untuk nilai dari elemen form lainnya.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}fieldset digunakan untuk menggabungkan beberapa elemen form dalam sebuah form.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}Elemen form merepresentasikan bagian dari dokumen yang memiliki elemen interaktif yang memungkinkan pengguna mengirimkan informasi ke web server.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}Elemen input digunakan untuk membuat kontrol interaktif untuk form.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}Elemen keygen memfasilitasi pembuatan key secara otomatis dan pengiriman public ke sebagai bagian dari form HTML.
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}Elemen label merepresentasikan judul dari sebuah item dalam antar muka user
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}Elemen legend merepresentasikan judul utama dari konten parentnya {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}Elemen meter merepresentasikan nilai skalar dalam jangkauan yang diketahui atau nilai fraksi.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}Elemen optgroup membuat grup dari pilihan-pilihan dalam sebuah elemen {{ HTMLElement("select") }}.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}Elemen HTML option digunakan untuk membuat kontrol yang merepresentasikan item yang terdapat dalam sebuah elemen {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} atau {{ HTMLElement("datalist") }}.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}Element output merepresentasikan hasil dari sebuah kalkulasi.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}Element progress digunakan untuk menampilkan progress dari sebuah tugas.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}Elemen select merepresentasikan kontrol yang menyajikan pilihan-pilihan menu.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}Elemen textarea merepresentasikan sebuah kontrol edit dengan multi baris.
+
+

Note: All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.

+
+

HTML Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute NameElementsDescription
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}List of types the server accepts, typically a file type.
accept-charset{{ HTMLElement("form") }}List of supported charsets.
action{{ HTMLElement("form") }}The URI of a program that processes the information submitted via the form.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}The element should be automatically focused after the page loaded.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
checked{{ HTMLElement("input") }}Indicates whether the element should be checked on page load.
cols{{ HTMLElement("textarea") }}Defines the number of columns in a textarea.
data{{ HTMLElement("object") }}Specifies the URL of the resource.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether the user can interact with the element.
enctype{{ HTMLElement("form") }}Defines the content type of the form date when the method is POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates the form that is the owner of the element.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indicates the maximum value allowed.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defines the maximum number of characters allowed in the element.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indicates the minimum value allowed.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Name of the element. For example used by the server to identify the fields in form submits.
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
+

Normative reference

+ diff --git a/files/id/web/guide/html/html5/index.html b/files/id/web/guide/html/html5/index.html new file mode 100644 index 0000000000..48e2349af7 --- /dev/null +++ b/files/id/web/guide/html/html5/index.html @@ -0,0 +1,179 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +tags: + - HTML + - HTML5 + - NeedsTranslation + - References + - TopicStub + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 adalah evolusi terbaru dari standard yang mendefinisikan HTML. Istilah ini merepresentasikan dua konsep yang berbeda:

+ + + +

Dirancang untuk dapat digunakan oleh semua pengembang Web Terbuka, Berikut ini adalah tautan halaman referensi ke beberapa resource tentang teknologi HTML5, diklasifikasikan ke dalam beberapa kelompok berdasarkan fungsinya masing-masing.

+ + + +
+
+

Semantik

+ +
+
"Sections" dan "outlines" pada HTML5
+
Sebuah tampilan pada elemen baru yaitu outline dan section pada HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.
+
Menggunakan fungsi "audio"  dan "video" pada HTML5
+
Elemen {{HTMLElement("audio")}} dan {{HTMLElement("video")}} ditanamkan sehingga kita dapat memanipulasi sebuah konten multimedia.
+
"Forms" pada HTML5
+
Perbaikan pada form di HTML5: the constraint validation API, beberapa attribute baru, nilai baru untuk {{HTMLElement("input")}} atribut {{htmlattrxref("type", "input")}} dan elemen baru yaitu {{HTMLElement("output")}}.
+
Elemen-elemen baru Semantik
+
Disamping section, media dan form elements, there are numerous new elements, like {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, or {{HTMLElement("meter")}} and {{HTMLElement("main")}}, increasing the amount of valid HTML5 elements.
+
Perbaikan pada {{HTMLElement("iframe")}}
+
Using the {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} attributes, authors can now be precise about the level of security and the wished rendering of an {{HTMLElement("iframe")}} element.
+
MathML
+
Allows directly embedding mathematical formulas.
+
Introduction to HTML5
+
This article introduces how to indicate to the problem that you are using HTML5 in your web design or web application.
+
HTML5-compliant parser
+
The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.
+
+ +

Connectivity

+ +
+
Web Sockets
+
Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.
+
Server-sent events
+
Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.
+
WebRTC
+
This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.
+
+ +

Offline & storage

+ +
+
Offline resources: the application cache
+
Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.
+
Online and offline events
+
Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.
+
WHATWG client-side session and persistent storage (aka DOM Storage)
+
Client-side session and persistent storage allows web applications to store structured data on the client side.
+
IndexedDB
+
IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.
+
Using files from web applications
+
Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the {{HTMLElement("input")}} of type file HTML element's new multiple attribute. There also is FileReader.
+
+ +

Multimedia

+ +
+
Using HTML5 audio and video
+
The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.
+
WebRTC
+
This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.
+
Using the Camera API
+
Allows using, manipulating, and storing an image from the computer's camera.
+
Track and WebVTT
+
The {{HTMLElement("track")}} element allows subtitles and chapters. WebVTT is a text track format.
+
+ +

3D, graphics & effects

+ +
+
Canvas Tutorial
+
Learn about the new {{HTMLElement("canvas")}} element and how to draw graphs and other objects in Firefox.
+
HTML5 text API for <canvas> elements
+
The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.
+
WebGL
+
WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.
+
SVG
+
An XML-based format of vectorial images that can directly be embedded in the HTML.
+
 
+
+
+ +
+

Performance & integration

+ +
+
Web Workers
+
Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
+
XMLHttpRequest Level 2
+
Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind Ajax.
+
JIT-compiling JavaScript engines
+
The new generation of JavaScript engines is much more powerful, leading to greater performance.
+
History API
+
Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.
+
The contentEditable attribute: transform your website to a wiki!
+
HTML5 has standardized the contentEditable attribute. Learn more about this feature.
+
Drag and drop
+
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
+
Focus management in HTML
+
The new HTML5 activeElement and hasFocus attributes are supported.
+
Web-based protocol handlers
+
You can now register web applications as protocol handlers using the navigator.registerProtocolHandler() method.
+
requestAnimationFrame
+
Allows control of animations rendering to obtain optimal performance.
+
Fullscreen API
+
Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.
+
Pointer Lock API
+
Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.
+
Online and offline events
+
In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.
+
+ +

Device access

+ +
+
Using the Camera API
+
Allows using, manipulating, and storing an image from the computer's camera.
+
Touch events
+
Handlers to react to events created by a user pressing touch screens.
+
Using geolocation
+
Let browsers locate the position of the user using geolocation.
+
Detecting device orientation
+
Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).
+
Pointer Lock API
+
Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.
+
+ +

Styling

+ +

CSS has been extended to be able to style elements in a much more complex way. This is often referred as CSS3, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.

+ +
+
New background styling features
+
It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and multiple backgrounds can be set.
+
More fancy borders
+
Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.
+
Animating your style
+
Using CSS Transitions to animate between different states or using CSS Animations to animate parts of the page without a triggering event, you can now control mobile elements on your page.
+
Typography improvement
+
Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and hyphenation, but also can add a shadow to it or control more precisely its decorations. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.
+
New presentational layouts
+
In order to improve the flexibility of designs, two new layouts have been added: the CSS multi-column layout, and the CSS flexible box layout.
+
+
+
+ +

External References
+
+ Html5 Tutorial
+  

+ +

 

diff --git a/files/id/web/guide/index.html b/files/id/web/guide/index.html new file mode 100644 index 0000000000..5e7889fa77 --- /dev/null +++ b/files/id/web/guide/index.html @@ -0,0 +1,55 @@ +--- +title: Paduan Pengembang Web +slug: Web/Guide +tags: + - Landing + - Paduan + - TopicStub + - Web +translation_of: Web/Guide +--- +

Artikel ini memberikan informasi untuk membantu anda menggunakan teknologi dan API secara spesifik.

+ +
+
+
+
Area Belajar HTML
+
HyperText Markup Language (HTML) merupakan inti bahasa untuk hampir semua konten Web. Hampir keseluruhan yang anda lihat di layar browser, pada dasarnya, menggunakan HTML.
+
Area Belajar CSS
+
Cascading Style Sheets (CSS) adalah bahasa stylesheet yang digunakan untuk mendeskripsikan tampilan dokumen yang ditulis di HTML.
+
Paduan pegembang Event
+
Events mengacu baik pada pola desain yang digunakan untuk penanganan secara asynchronous pada berbagai peristiwa di halaman web dan penamaan, karakterisasi, dan penggunaan sejumlah besar peristiwa dari berbagai tipe.
+
Grafis di Web
+
Website modern dan aplikasi sering memerlukan menyajikan grafis dari berbagai kecanggihan.
+
Paduan Web API
+
Daftar semua Web API dan apa yang dihasilkan.
+
JavaScript
+
JavaScript adalah bahasa scripting yang ampuh digunakan untuk membuat aplikasi Web.
+
Lokalisasi dan pengkodean karakter
+
Browser memproses teks sebagai Unicode secara internal. Namun, cara merepresentasikan karakter dalam bentuk bytes (character encoding) yang digunakan untuk mengirim teks melalui jaringan ke browser.  Spesifikasi HTML menyarankan penggunaan UTF-8 encoding (dimana mewakili semua Unicode), dan terlepas dari pengkode-an yang digunakan, dibutuhkan konten Web untuk mendeklarasikan pengkode-an tersebut.
+
Pengembangan Mobile Web
+
Halaman ini memberikan gambaran dari beberapa teknik utama yang dibutuhkan desain Website sehingga berjalan dengan baik di perangkat mobile. Jika anda mencari informasi di proyek Mozilla's Firefox OS, lihat halaman Firefox OS. Atau anda mungkin tertarik pada detail tentang Firefox for Android.
+
+
+ +
+
+
Optimasi dan kinerja
+
Ketika membangun modern Web apps dan situs, sangat penting untuk membuat konten yang bekerja dengan cepat dan efisien. Ini memungkinkan situs bekerja dengan baik pada keduanya, sistem Desktop yang kuat dan perngkat genggam yang lemah.
+
Parsing and serializing XML
+
Platform Web menyediakan metode yang berbeda dari parsing and serializing XML, dengan masing-masing pro dan kontra.
+
Open Web Font Format (WOFF)
+
WOFF (Web Open Font Format) adalah file format font yang gratis untuk semua pengguna di web.
+
Menggunakan Objek FormData
+
Objek FormData memungkinkan anda menkompilasi serangkaian key/value pairs untuk dikirim menggunakan XMLHttpRequest. Utamanya ditujukan untuk mengirim format data, namun dapat digunakan secara terpisah dari format dengan tujuan untuk mengirim keyed data. Pengiriman dengan format yang sama dengan bentuk method submit() digunakan untuk mengirim data jika bentuk tipe encoding ditetapkan ke "multipart/form-data".
+
Glosarium
+
Menjelaskan berbagai istilah teknis terkait Web dan Internet.
+
+
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/html/element/base/index.html b/files/id/web/html/element/base/index.html new file mode 100644 index 0000000000..6b4a556381 --- /dev/null +++ b/files/id/web/html/element/base/index.html @@ -0,0 +1,154 @@ +--- +title: +slug: Web/HTML/Element/base +translation_of: Web/HTML/Element/base +--- +

{{HTMLRef}}

+ +

The HTML <base> element specifies the base URL to use for all relative URLs contained within a document. There can be only one <base> element in a document. 

+ +

The base URL of a document can be queried from a script using {{domxref('document.baseURI')}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesMetadata content.
Permitted contentNone, it is an {{Glossary("empty element")}}.
Tag omissionThere must be no closing tag.
Permitted parentsAny {{HTMLElement("head")}} that doesn't contain any other {{HTMLElement("base")}} element
Permitted ARIA rolesNone
DOM interface{{domxref("HTMLBaseElement")}}
+ +

Attributes

+ +

This element's attributes include the global attributes.

+ +
+
{{htmlattrdef("href")}}
+
The base URL to be used throughout the document for relative URL addresses. If this attribute is specified, this element must come before any other elements with attributes whose values are URLs. Absolute and relative URLs are allowed.
+
{{htmlattrdef("target")}}
+
A name or keyword indicating the default location to display the result when hyperlinks or forms cause navigation, for elements that do not have an explicit target reference. It is a name of, or keyword for, a browsing context (for example: tab, window, or inline frame). The following keywords have special meanings: +
    +
  • _self: Load the result into the same browsing context as the current one. This value is the default if the attribute is not specified.
    • +
  • _blank: Load the result into a new unnamed browsing context.
    • +
  • _parent: Load the result into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • +
  • _top: Load the result into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • +
+
+
+ +

Usage notes

+ +

If multiple <base> elements are specified, only the first href and first target value are used; all others are ignored.

+ +

Examples

+ +
<base href="http://www.example.com/page.html">
+<base target="_blank" href="http://www.example.com/page.html">
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}{{Spec2('HTML WHATWG')}}No change since last snapshot.
{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}{{Spec2('HTML5 W3C')}}Specified the behavior of target
{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}{{Spec2('HTML4.01')}}Added the target attribute
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]{{CompatVersionUnknown}} [2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Support of relative URIs for href was added in Gecko 2.0 (Firefox 4.0)

+ +

[2] Before Internet Explorer 7, <base> could be positioned anywhere in the document and the nearest value of <base> was used. Support for relative URLs has been removed in Internet Explorer 8

diff --git a/files/id/web/html/element/dialog/index.html b/files/id/web/html/element/dialog/index.html new file mode 100644 index 0000000000..ac51fecd40 --- /dev/null +++ b/files/id/web/html/element/dialog/index.html @@ -0,0 +1,165 @@ +--- +title: ': The Dialog element' +slug: Web/HTML/Element/dialog +translation_of: Web/HTML/Element/dialog +--- +

Elemen <dialog> menampilkan sebuah kotak dialog atau komponen interaktif lainnya seperti halnya inspektor atau jendela.

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Kategori kontenAlur Konten, bagian akar
Konten yang diijinkanAlur konten
Penanda kesalahan{{no_tag_omission}}
Tingkatan yang diijinkanSetiap elemen yang menerima alur konten
Peran Aria yang diijinkan{{ARIARole("alertdialog")}}
Antarmuka DOM{{domxref("HTMLDialogElement")}}
+ +

Atribut

+ +

Elemen ini memiliki atribut global. Penggunaan atribut tabindex harus dihindari pada elemen <dialog> .

+ +
+
{{htmlattrdef("open")}}
+
Menandakan bahwa dialog telah aktif dan dapat digunakan. Ketika atribut open belum diatur, maka dialog tidak akan tampil kepada pengguna.
+
+ +

Catatan penggunaan

+ +

 

+ + + +

Contoh

+ +

Contoh sederhana

+ +
<dialog open>
+  <p>Greetings, one and all!</p>
+</dialog>
+
+ +

Contoh lanjutan

+ +

Pada contoh ini akan terbuka kotak dialog saat tombol "Update details" diklik.

+ +

HTML

+ +
<!-- Simple pop-up dialog box, containing a form -->
+<dialog open id="favDialog">
+  <form method="dialog">
+    <section>
+      <p><label for="favAnimal">Favorite animal:</label>
+      <select id="favAnimal">
+        <option></option>
+        <option>Brine shrimp</option>
+        <option>Red panda</option>
+        <option>Spider monkey</option>
+      </select></p>
+    </section>
+    <menu>
+      <button id="cancel" type="reset">Cancel</button>
+      <button type="submit">Confirm</button>
+    </menu>
+  </form>
+</dialog>
+
+<menu>
+  <button id="updateDetails">Update details</button>
+</menu>
+
+ +

JavaScript

+ +
(function() {
+  var updateButton = document.getElementById('updateDetails');
+  var cancelButton = document.getElementById('cancel');
+  var favDialog = document.getElementById('favDialog');
+
+  // Update button opens a modal dialog
+  updateButton.addEventListener('click', function() {
+    favDialog.showModal();
+  });
+
+  // Form cancel button closes the dialog box
+  cancelButton.addEventListener('click', function() {
+    favDialog.close();
+  });
+})();
+
+ +

Hasil

+ +

{{EmbedLiveSample("Contoh_lanjutan", "100%", 300)}}

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKeterangan
{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.2')}}Initial definition
+ +

Kompatibilitas browser

+ + + +

{{Compat("html.elements.dialog")}}

+ +

Polyfills

+ +

Sertakan polyfill ini untuk menyediakan dukungan terhadap browser lawas

+ +

dialog-polyfill

+ +

Lihat juga

+ + + +
{{HTMLRef}}
diff --git a/files/id/web/html/element/image/index.html b/files/id/web/html/element/image/index.html new file mode 100644 index 0000000000..047ac8f8b4 --- /dev/null +++ b/files/id/web/html/element/image/index.html @@ -0,0 +1,16 @@ +--- +title: +slug: Web/HTML/Element/image +translation_of: Web/HTML/Element/image +--- +
{{non-standard_header}}
+ +

Ringkasan

+ +

Elemen HTML <image> adalah elemen eksperimental yang dirancang untuk menampilkan gambar. Ini tidak pernah di implementasikan dan standar elemen {{HTMLElement ("img")}} harus digunakan.

+ +
+

Jangan Gunakan! Untuk menampilkan gambar, gunakan standar elemen {{HTMLElement ("img")}} .

+
+ +

Catatan sampai Firefox 22, meskipun tidak didukung, elemen <image> diasosiasikan dengan {{domxref ("HTMLSpanElement")}}. Kemudian diperbaiki dan sekarang diasosiasikan dengan {{domxref ("HTMLElement")}} mengikuti spesifikasi yang diminta.

diff --git a/files/id/web/html/element/index.html b/files/id/web/html/element/index.html new file mode 100644 index 0000000000..6651addc38 --- /dev/null +++ b/files/id/web/html/element/index.html @@ -0,0 +1,106 @@ +--- +title: HTML element reference +slug: Web/HTML/Element +tags: + - Elemen + - HTML + - Referensi + - Web + - dasar +translation_of: Web/HTML/Element +--- +
{{HTMLSidebar("Elements")}}
+ +

Halaman ini menampilkan semua daftar {{Glossary("HTML")}} {{Glossary("Element","elements")}}, yang dibuat menggunakan {{Glossary("Tag", "tags")}}. Ini dikelompokkan berdasarkan fungsi untuk membantu Anda mengingat lebih mudah. Daftar abjad semua element tersedia di sidebar pada setiap halaman element seperti yang ini.

+ +
+

Untuk informasi lebih tentang dasar-dasar element HTML dan attribut, lihat artikel bagian pengenalan HTML.

+
+ +

Akar Utama

+ +

{{HTMLRefTable("HTML Root Element")}}

+ +

Document metadata

+ +

Metadata mengandung informasi halaman. Ini terdapat informasi tentang styles, scripts dan data untuk membantu perangkat lunak ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, dsb.) gunakan dan alihkan halaman. Metadata untuk style dan script bisa didefinisikan di halaman atau link untuk berkas lainnya yabg memiliki informasinya.

+ +

{{HTMLRefTable("HTML Document Metadata")}}

+ +

Bagian Dasar

+ +

{{HTMLRefTable("Sectioning Root Element")}}

+ +

Kontent Bagian

+ +

Element konten bagian memungkinkan Ansa mengatur konten dokumen menjadi kepingan-kepingan logis. Gunakan element bagian untuk membuat sebagian besar konten halaman Anda, termasuk navigasi header dan footer, dan judul element untuk mengidentifikasi bagian kontent.

+ +

{{HTMLRefTable("HTML Sections")}}

+ +

Konten kalimat

+ +

Kegunaan element teks konten HTML mengatur blok atau bagian konten yang ditempatkan antara tag pembuka {{HTMLElement("body")}} dan penutup </body> . Penting untuk {{Glossary("accessibility")}} and {{Glossary("SEO")}}, element-element ini mengenali tujuan atau struktur kontennya.

+ +

{{HTMLRefTable("HTML Grouping Content")}}

+ +

Teks semantik dalam baris

+ +

Kegunaan teks semantik dalam baris HTML untuk memberikan tujuan, struktur, atau gaya kata, baris, atau potongan kata sembarang.

+ +

{{HTMLRefTable("HTML Text-Level Semantics")}}

+ +

Gambar dan multimedia

+ +

HTML mendukung beragam sumber multimedia seperti gambar, audio, dan vidio.

+ +

{{HTMLRefTable("multimedia")}}

+ +

Embedded content

+ +

Selain konten multimedia biasa, HTML dapat menyertakan konten lainnya, walaupun tidak selalu mudah menyertakannya.

+ +

{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}

+ +

Scripting

+ +

Untuk membuat konten dinamis dan aplikasi web, HTML mendukung penggunaan bahasa skripsi, secara paling jelas JavaScript. Element tertentu mendukung kemampuan ini.

+ +

{{HTMLRefTable("HTML Scripting")}}

+ +

Batas Pengubahan

+ +

Element ini memungkinkan Anda menyediakan indikasi bagian spesifik bagian kalimat yang telah diubah.

+ +

{{HTMLRefTable("HTML Edits")}}

+ +

Konten tabel

+ +

Element ini digunakan untuk membuat dan menangani data tabular.

+ +

{{HTMLRefTable("HTML tabular data")}}

+ +

Formulir

+ +

HTML menyediakan beberapa element yang dapat digunakan bersama untuk membuat formulir, dimana pengguna dapat mengisi dan memasukan ke situs web atau aplikasi. Terdapat banyak informasi ini tersedia di panduan formulir HTML.

+ +

{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}

+ +

Element interaktif

+ +

HTML menawarkan pilihan element yang membantu untuk membuat pengguna interaktif berhadapan dengan objek.

+ +

{{HTMLRefTable("HTML interactive elements")}}

+ +

Komponen Web

+ +

Komponen Web adalah teknologi HTML terhubung yang memungkinkan untuk, secara inti, membuat dan menggunakan element khusus seperti itu HTML umum. Selain itu, Anda dapat membuat versi khusus element HTML standar.

+ +

{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}

+ +

Element Usang dan Dihilangkan

+ +
+

Peringatan: Ini adalah element HTML lama yang dihilangkan dan seharusnya tidak digunakan. Anda harus tidak pernah menggunakannya pada proyek baru, dan harus mengubahnya pada proyek lama secepat yang Anda bisa. Berikut ini adalah daftarnya, hanya untuk informasi saja.

+
+ +

{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}

diff --git a/files/id/web/html/index.html b/files/id/web/html/index.html new file mode 100644 index 0000000000..11a63d028d --- /dev/null +++ b/files/id/web/html/index.html @@ -0,0 +1,97 @@ +--- +title: HTML +slug: Web/HTML +translation_of: Web/HTML +--- +
{{HTMLSidebar}}
+ +

HTML (HyperText Markup Language) merupakan building block web paling dasar. Ini memberikan arti dan struktur konten web. Teknologi-teknologi lainnya disamping HTML umumnya digunakan untuk menggambarkan penampilan/gambaran (CSS) atau fungsionalitas/tingkah laku (JavaScript).

+ +

"Hypertext" merujuk ke link yang menghubungkan halaman web satu dengan lainnya, baik dalam satu situs maupun antar situs web. Dengan mengunggah konten ke internet dan menghubungkannya ke halaman yang dibuat oleh orang lain, Anda menjadi pertisipasi aktif di World Wide Web.

+ +

HTML menggunakan "markup" untuk anotasi teks, gambar, dan konten lainnya untuk ditampilkan dalam peramban Web. Markip HTML terdapat "elements" khusus seperti {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} dan masih banyak lagi.

+ +

Elemen HTML dibedakan dari teks lain dalam dokumen dengan "tags", yang terdiri dari nama elemen yang dikelilingi oleh "<" dan ">". Nama elemen dalam tag itu insensitif. Yakni, dapat ditulis dengan huruf besar, huruf kecil, atau gabungan. Contohnya tag <title> dapat ditulis sebagai <Title>, <TITLE>, atau dengan cara lainnya.

+ +

Artikel-artikel dibawah dalat membantu Amda belajar lebih banyak tentang HTML.

+ +
+
    +
  • Pengenalan HTML + +

    Jika kamu baru di pengembangan Web, pastima untum membaca artikel Dasar-dasar HTML kami untuk belajar apa HTML itu dan cara menggunakannya.

    +
    • +
  • Tutorial HTML +

    Untuk artikel tentang cara menggunakan HTML, tutorial yang bagus dan dipenuhi contoh, periksa artikel Ruang Belajar HTML.

    +
    • +
  • Referensi HTML +

    Di bagian Referensi HTML yang luas, Anda akan menemukan setiap detail elemen dan attribut dalam HTML.

    +
    • +
+ +
+
+

Tutorial Pemula

+ +

Fitur-fitur modul ganda Ruang Belajar HTML yang mengajari HTML dari bawah ke atas — tanpa dibutuhkan pengetahuan sebelumnya.

+ +
+
Pengenalan pada HTML
+
Tahap kumpulan modul ini, membuat Anda terbiasa menggunakan konsep dan sintaks penting seperti melihat pengaplikasian HTML pada teks, cara untuk membuat hyperlink, dan cara menggunakan HTML untuk struktur halaman web.
+
Multimedia and embedding
+
This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
+
Tabel-tabel HTML
+
Mewakili data tabular di halaman web yang dapat dimengerti, cara keaksesan dapat menantang. Modul ini mencangkup markup dasar tabel, bersama dengan fitur lebih  kompleks seperti keterangan implementasi dan ringkasan.
+
Formulir HTML
+
Formulir merupakan bagian sangat penting di Web — ini menyediakan banyak kegunaan yang Anda butuhkan untuk berinteraksi dengan situs-situs web, msl. pendaftaran dan masuk, pengiriman masukan, pembelian produk, dan lainnya. Modul ini membantu Anda dengan membuat formulir sisi klien/bagian awal hingga akhir.
+
Pakai HTML untuk memperbaiki kesalahan umum.
+
Menyediakan link ke bagian-bagian konten menjelaskan cara menggubakan HTML untuk menyelesaikan masalah sangat umum ketika membuat halaman web: mengatur judul, menambahkan gambar atau vidio, penekanan konten, pembuatan formulir dasar, dsb.
+
+ +

Topik Lanjut

+ +
+
Gambar diaktifkan CORS
+
Attribut {{htmlattrxref("crossorigin", "img")}}, di kombinasikan dengan bagian kepala {{glossary("CORS")}} yang sesuai, memungkinkan gambar didefinisikan dengan elemen {{HTMLElement("img")}} untuk dimuat dari origin asing dan digunakan di elemen {{HTMLElement("canvas")}} seolah sedang dimuat dari asal saat ini.
+
CORS mengatur atribut
+
Beberapa elemen HTML mendukung CORS, seperti {{HTMLElement("img")}} atau {{HTMLElement("video")}}, memiliki atribut crossorigin (properti crossOrigin), yang memungkinkan Anda mengkonfigurasikan permintaan CORS untuk mengambil data elemen.
+
Fokus manajemen di HTML
+
Metode Atribut DOM activeElement dan DOM hasFocus() membantu Anda melacak dan mengendalikan interaksi pengguna dengan elemen di halaman web.
+
Mem-preloading konten dengan rel="preload"
+
The preload value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how preload works.
+
+
+ +
+

Referensi

+ +
+
Refensi HTML
+
HTML terdiri dari elemen, setiap elemen mugkin dimofikasi dengan beberapa atribut. Dokumen HTML terhubung satu sama lain dengan link.
+
Referensi elemen HTML
+
Kunjungi semua daftar {{glossary("HTML")}} {{glossary("Element", "elements")}}.
+
Referensi atribut HTML
+
Elemen HTML memiliki atribut. Ini adalah nilai tambahan yang mengkonfigurasikan elemen atau menyesuaikan tingkah lakunya di berbagai cara.
+
Atribut Global
+
Global attributes may be specified on all HTML elements, even those not specified in the standard. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.
+
Inline elements and block-level elements
+
Elemen HTML elements biasanya elemen "inline" atau "block-level". Inline elemen hanya menempati ruang yang terikat dengan elemen yang didefinisikan. Block-level menempati seluruh ruang elemen orang tuanya (parent element) (container), dengan demikian membuat sebuah "block."
+
Jenis-jenis Link
+
Di HTML, beragam jenis link dapat digunakan untuk membangun dan mendefinisikan hubungan antara dua dokumen. Elemen link yang jenisnya dapat diatur ke dalam {{HTMLElement("a")}}, {{HTMLElement("area")}} dan {{HTMLElement("link")}}.
+
Panduan jenis-jenis media dan format pada web
+
Elemen {{HTMLElement("audio")}} dan {{HTMLElement("video")}} memungkinkan Anda memutar media audio dan vidio secara langsung di konten Anda tidan perlu dukungan perangkat lunak tambahan.
+
Jenis-jenis konten HTML
+
HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each has a set of other content categories they can contain and elements which can or can't be used in them. This is a guide to these categories.
+
Quirks mode and standards mode
+
Historical information on quirks mode and standards mode.
+
+ +

Topik-topik berhubungan

+ +
+
Mengaplikasikan warna ke elemen HTML menggunakan CSS
+
Artikel ini mencakup sebagian besar cara Anda menggunakan CSS untuk memberikan warna pada konten HTML, daftar bagian dokumen apa yang dapat diwarnai dan properti CSS yang digunakan untuk melakukannya. Termasuk contoh, peralatan tempat palet, dan lainnya.
+
+
+
+Lihat semua...
diff --git a/files/id/web/http/basics_of_http/index.html b/files/id/web/http/basics_of_http/index.html new file mode 100644 index 0000000000..a00d7fe410 --- /dev/null +++ b/files/id/web/http/basics_of_http/index.html @@ -0,0 +1,51 @@ +--- +title: Basics of HTTP +slug: Web/HTTP/Basics_of_HTTP +tags: + - Guide + - HTTP + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/HTTP/Basics_of_HTTP +--- +
{{HTTPSidebar}}
+ +

HTTP adalah sebuah protokol yang dapat diperluas. HTTP bergantung pada beberapa konsep dasar seperti the notion of resources and URIs, a simple structure of messages, and a client-server structure for the communication flow. On top of these basic concepts, numerous extensions have appeared over the years, adding new functionality and new semantics by creating new HTTP methods or headers.

+ +

Articles

+ +
+
Overview of HTTP
+
Describes what HTTP is and its role in the Web architecture, its position in the protocol stack.
+
Evolution of HTTP
+
HTTP was created in the early 1990s and has been extended several times. This article goes through its history and describes HTTP/0.9, HTTP/1.0, HTTP/1.1, and the modern HTTP/2 as well as minor novelties introduced over the years.
+
Negotiating an HTTP version
+
Explains how a client and a server can negotiate a specific HTTP version and eventually upgrade the protocol version used.
+
Resources and URIs
+
A brief introduction of the notion of resources, identifiers, and locations on the Web.
+
Identifying resources on the Web
+
Describes how Web resources are referenced and how to locate them.
+
Data URIs
+
A specific kind of URIs that directly embeds the resource it represents. Data URIs are very convenient, but have some caveats.
+
Resource URLs {{Non-standard_Inline}}
+
Resource URLs, URLs prefixed with the resource: scheme, are used by Firefox and Firefox browser extensions to load resources internally, but some of the information is available to sites the browser connects to as well.
+
Separating identity and location of a resource: the Alt-Svc HTTP header
+
Most of the time identity and location of a Web resource are shared, this can be changed with the {{HTTPHeader("Alt-Svc")}} header.
+
MIME types
+
Since HTTP/1.0, different types of content can be transmitted. This article explains how this is done using the {{HTTPHeader("Content-Type")}} header and the MIME standard.
+
Choosing between www and non-www URLs
+
Advice on using a www-prefixed domain or not, this article explains the consequences of the choice as well as how to make it.
+
Flow of an HTTP session
+
This fundamental article describes a typical HTTP session: what happens under the hood when you click on a link in your browser…
+
HTTP Messages
+
HTTP Messages transmitted during requests or responses have a very clear structure; this introductory article describes this structure, its purpose and its possibilities.
+
Frame and message structure in HTTP/2
+
HTTP/2 encapsulates and represents HTTP/1.x messages in a binary frame. This article explains the frame structure, its purpose and the way it is encoded.
+
Connection management in HTTP/1.x
+
HTTP/1.1 was the first version of HTTP to support persistent connection and pipelining. This article explains these two concepts.
+
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 will choose the most adequate response.
+
diff --git a/files/id/web/http/gambaran/index.html b/files/id/web/http/gambaran/index.html new file mode 100644 index 0000000000..b06d42ac23 --- /dev/null +++ b/files/id/web/http/gambaran/index.html @@ -0,0 +1,173 @@ +--- +title: Gambaran HTTP +slug: Web/HTTP/Gambaran +translation_of: Web/HTTP/Overview +--- +
{{HTTPSidebar}}
+ +

HTTP adalah sebuah {{Glossary("protocol")}} yang memungkinkan pengambilan sumber daya, seperti dokumen HTML. Ini adalah dasar dari pertukaran data apa pun di Web dan itu adalah protokol client-server, yang berarti permintaan diprakarsai oleh penerima (Client), biasanya browser Web. Dokumen lengkap direkonstruksi dari berbagai sub-dokumen yang diambil, misalnya teks, deskripsi tata letak, gambar, video, skrip, dan banyak lagi.

+ +

A Web document is the composition of different resources

+ +

Client dan Server berkomunikasi dengan bertukar pesan individual (sebagai lawan aliran data). Pesan yang dikirim oleh Client, biasanya browser Web, disebut permintaan (requests) dan pesan yang dikirim oleh server sebagai jawaban disebut respons (responses)

+ +

HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer.Dirancang pada awal 1990-an, HTTP adalah protokol yang dapat diperluas, yang telah berevolusi dari waktu ke waktu. Ini adalah lapisan aplikasi protokol yang dikirim melalui {{Glossary("TCP")}}, atau melalui koneksi TCP yang terenkripsi {{Glossary("TLS")}} meskipun begitu semua transportasi protokol yang terpercaya secara teori juga dapat digunakan. Karena sifatnya yang dapat diperluas, protokol ini digunakan tidak hanya untuk mengambil dokumen hiperteks, tetapi juga gambar dan video atau untuk memposting konten ke server, sama seperti hasil sebuah form HTML. HTTP juga dapat digunakan untuk mengambil bagian dokumen untuk memperbarui halaman Web sesuai permintaan.

+ +

Components of HTTP-based systems

+ +

HTTP is a client-server protocol: requests are sent by one entity, the user-agent (or a proxy on behalf of it). Most of the time the user-agent is a Web browser, but it can be anything, for example a robot that crawls the Web to populate and maintain a search engine index.

+ +

Each individual request is sent to a server, which handles it and provides an answer, called the response. Between the client and the server there are numerous entities, collectively called {{Glossary("Proxy_server", "proxies")}}, which perform different operations and act as gateways or {{Glossary("Cache", "caches")}}, for example.

+ +

Client server chain

+ +

In reality, there are more computers between a browser and the server handling the request: there are routers, modems, and more. Thanks to the layered design of the Web, these are hidden in the network and transport layers. HTTP is on top, at the application layer. Although important to diagnose network problems, the underlying layers are mostly irrelevant to the description of HTTP.

+ +

Client: the user-agent

+ +

The user-agent is any tool that acts on the behalf of the user. This role is primarily performed by the Web browser; other possibilities are programs used by engineers and Web developers to debug their applications.

+ +

The browser is always the entity initiating the request. It is never the server (though some mechanisms have been added over the years to simulate server-initiated messages).

+ +

To present a Web page, the browser sends an original request to fetch the HTML document that represents the page. It then parses this file, making additional requests corresponding to execution scripts, layout information (CSS) to display, and sub-resources contained within the page (usually images and videos). The Web browser then mixes these resources to present to the user a complete document, the Web page. Scripts executed by the browser can fetch more resources in later phases and the browser updates the Web page accordingly.

+ +

A Web page is a hypertext document. This means some parts of displayed text are links which can be activated (usually by a click of the mouse) to fetch a new Web page, allowing the user to direct their user-agent and navigate through the Web. The browser translates these directions in HTTP requests, and further interprets the HTTP responses to present the user with a clear response.

+ +

The Web server

+ +

On the opposite side of the communication channel, is the server, which serves the document as requested by the client. A server appears as only a single machine virtually: this is because it may actually be a collection of servers, sharing the load (load balancing) or a complex piece of software interrogating other computers (like cache, a DB server, or e-commerce servers), totally or partially generating the document on demand.

+ +

A server is not necessarily a single machine, but several server software instances can be hosted on the same machine. With HTTP/1.1 and the {{HTTPHeader("Host")}} header, they may even share the same IP address.

+ +

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:

+ + + +

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.

+ + + +

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:

+ + + +

Responses

+ +

An example response:

+ +

+ +

Responses consist of the following elements:

+ + + +

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 is an extensible protocol that is easy to use. 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/id/web/http/index.html b/files/id/web/http/index.html new file mode 100644 index 0000000000..3e2144fb57 --- /dev/null +++ b/files/id/web/http/index.html @@ -0,0 +1,81 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - HTTP + - Referensi + - Web +translation_of: Web/HTTP +--- +
{{HTTPSidebar}}
+ +

Hypertext Transfer Protocol (HTTP) adalah sebuah protokol lapisan-aplikasi untuk mentransmisi dokumen hypermedia, seperti HTML. Ini dirancang untuk komunikasi antara peramban web dan server web, meskipun bisa digunakan untuk keperluan lain juga. Ini mengikuti sebuah model klien-server klasik, dengan sebuah klien membuka sebuah koneksi, membuat sebuah permintaan (request), dan menunggu hingga mendapatkan sebuah respon. Ini juga sebuah protokol tanpa-keadaan, maksudnya server tidak menyimpan data (keadaan) antara kedua permintaan. Meskipun kadang berdasarkan pada sebuah lapisan TCP/IP, bisa digunakan pada lapisan transport andal apa saja;  berarti sebuah protokol tidak kehilangan pesan secara diam-diam, seperti UDP.

+ +
+
+

Tutorial

+ +

Belajar bagaimana untuk menggunakan HTTP dengan panduan dan tutorial.

+ +
+
Ikhtisan dari HTTP
+
Fitur dasar dari protokol klien-server: apa yang bisa digunakan dan penggunaannya.
+
HTTP Cache
+
Caching sangat penting untuk mempercepat situs web. Artikel ini menjelaskan perbedaan metode dalam caching  dan bagaimana menggunakan HTTP Headers untuk mengendalikannya.
+
HTTP Kuki
+
Bagaimana kuki bekerja didefinisi oleh RFC 6265. Pada penerimaan sebuah permintaan HTTP, sebuah server bisa mengirim sebuah header Set-Cookie dengan responnya. Klien kemudian mengembalikan nilai kuki dengan setiap permintaan ke server yang sama dalam bentuk header permintaan Cookie. Kuki juga dapat ditetapkan untuk kadaluarsa pada tanggal tertentu, atau pembatasan pada domain dan jalur tertentu.
+
Cross-Origin Resource Sharing (CORS)
+
Permintaan Cross-site HTTP adalah permintaan HTTP untuk sumber daya dari domain lain kemduian domain dari sumberdaya membuat permintaan. Contohnya, sebuah laman HTML dari Domain A (http://domaina.example/), membuat sebuah permintaan untuk sebuah gambar pada Domain B (http://domainb.foo/image.jpg) malalui elemen img. Laman situs saat ini sangat biasa memuat sumber daya cross-site, termasuk CSS sytlesheets, gambar, skrip, dan sumber daya lainnya. CORS memungkinkan pengembang web untuk mengendaikan bagaimana situs mereka bereaksi kepada permintaan cross-site.
+
+ +
+
Perkembangan dari HTTP
+
Sebuah deskripsi  dari perubahan antara HTTP veri awal, ke HTTP/2 moderen dan seterusnya.
+
Panduan keamanan situs Mozilla
+
Sebuah koleksi dari tip untuk membantu tim operasional dengan membuat aplikasi web yang aman.
+
Pesan HTTP (HTTP Messages)
+
Penjelasan tipe dan struktur dari berbagai jenis dan struktur dari HTTP/1.x dan HTTP/2.
+
Sebuah sesi HTTP yang khas
+
Menunjukan dan menjelaskan alur dari sebuah sesi HTTP biasa.
+
 
+
Manajemen koneksi pada HTTP/1.x
+
Menjelaskan tiga model manajemen koneksi yang tersedia pada HTTP/1.x, serta kelebihan dan kekurangan mereka.
+
+
+ +
+

Referensi

+ +

Jelajahi dokumentasi referensi HTTP yang terperinci.

+ +
+
HTTP Headers
+
Pesan HTTP digunakan untuk menjelaskan secara tepat sumber daya atau perilaku dari server atau klien. header kepemilikan khusus bisa ditambahkan dengan menggunakan awalan X-; yang lain pada sebuah registri IANA, yang konten aslinya didefiniskan di RFC 4229. IANA juga mengelola registri dari usulan baru header pesan HTTP.
+
Metode Permintaan HTTP
+
Berbagai operasi yang bisa dilakukan dengan HTTP: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, tetapi juga permintaan yang kurang umum seperti {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}} atau {{HTTPMethod("TRACE")}}.
+
Kode Status Respon HTTP
+
Kode respon HTTP menunjukan apakah permintaan HTTP tertentu berhasil diselesaikan. Respon dikelompokan dalam lima kelas: respon informasi, respon sukses, pengaihan, kesalahan klien, dan kealahan server.
+
Petunjuk CSP (CSP directives)
+
Bidang header respon {{HTTPHeader("Content-Security-Policy")}} memungkinkan administrator situs web untuk mengendalikan sumber daya user agent yang memungkinkan untuk dimuat pada halaman tertentu. Dengan beberapa pengecualian, sebagian besar kebijakan melibatkan penentuan asal server dan skrip titik-akhir (endpoints). 
+
+ +

Alat & sumber daya

+ +

Alat dan sumber daya yang berguna untuk memahami dan debugging HTTP.

+ +
+
Firefox Developer Tools
+
Network monitor
+
Mozilla Observatory
+
+

Sebuah proyek yang dideain untuk membantu pengembang, administrator sistem, dan keamanan profesional mengkonfigurasi situs mereka secara aman.

+
+
RedBot
+
Alat untuk memeriksa header terkati-cache Anda.
+
Bagaimana Peramban Bekerja
+
Sebuah artikel yang sangat komprehensif tentang internal peramban dan alur permintaan melalui protokol HTTP. Sebuah artikel yang HARUS-DIBACA oleh tiap pengembang web.
+
+ +

 

+
+
diff --git a/files/id/web/http/methods/get/index.html b/files/id/web/http/methods/get/index.html new file mode 100644 index 0000000000..ff8f8cdbab --- /dev/null +++ b/files/id/web/http/methods/get/index.html @@ -0,0 +1,73 @@ +--- +title: GET +slug: Web/HTTP/Methods/GET +tags: + - HTTP + - Referensi + - Request method +translation_of: Web/HTTP/Methods/GET +--- +
{{HTTPSidebar}}
+ +

Request HTTP GET method merupakan representasi dari resource spesifik. Request menggunakan GET hanya menerima data.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Request has bodyNo
Successful response has bodyYes
{{Glossary("Safe")}}Yes
{{Glossary("Idempotent")}}Yes
{{Glossary("Cacheable")}}Yes
Allowed in HTML formsYes
+ +

Sintaks

+ +
GET /index.html
+
+ +

Spesifikasi

+ + + + + + + + + + + + +
SpesifikasiJudul
{{RFC("7231", "GET", "4.3.1")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Kompabilitas Browser

+ + + +

{{Compat("http.methods.GET")}}

+ +

Lihat Juga

+ + diff --git a/files/id/web/http/methods/index.html b/files/id/web/http/methods/index.html new file mode 100644 index 0000000000..1045732cc2 --- /dev/null +++ b/files/id/web/http/methods/index.html @@ -0,0 +1,76 @@ +--- +title: HTTP request methods +slug: Web/HTTP/Methods +tags: + - HTTP + - Methods + - Reference + - TopicStub +translation_of: Web/HTTP/Methods +--- +
{{HTTPSidebar}}
+ +
HTTP mendefinisikan seperangkat metode permintaan untuk menunjukkan tindakan yang diinginkan yang akan dilakukan untuk sumber daya tertentu. Meskipun mereka juga bisa menjadi kata benda, metode permintaan ini kadang-kadang disebut sebagai verba HTTP. Masing-masing menerapkan semantik yang berbeda, namun beberapa fitur umum digunakan bersama oleh mereka: mis. Metode permintaan dapat berupa {{glossary("safe")}}, {{glossary("idempotent")}}, atau {{glossary("cacheable")}}.
+ +
 
+ +
+
GET
+
Metode GET meminta representasi sumber daya yang ditentukan. Permintaan menggunakan GET seharusnya hanya mengambil data..
+
HEAD
+
Metode HEAD meminta tanggapan yang identik dengan permintaan GET, namun tanpa respon body.
+
POST
+
Metode POST digunakan untuk mengirimkan entitas ke sumber daya yang ditentukan, sering menyebabkan perubahan pada keadaan atau efek samping pada server.
+
PUT
+
+

Metode PUT menggantikan semua representasi terkini dari sumber target dengan muatan permintaan.

+
+
DELETE
+
Metode DELETE akan menghapus sumber daya yang ditentukan.
+
CONNECT
+
+

Metode CONNECT menetapkan terowongan ke server yang diidentifikasi oleh sumber target.

+
+
OPTIONS
+
Metode OPTIONS digunakan untuk menggambarkan opsi komunikasi untuk sumber target.
+
TRACE
+
+

Metode TRACE melakukan tes pesan loop-back di sepanjang jalan menuju sumber daya target.

+
+
PATCH
+
Metode PATCH digunakan untuk menerapkan modifikasi sebagian pada sumber daya.
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiJudulKomentar
{{RFC("7231", "Request methods", "4")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and ContentSpecifies GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE.
{{RFC("5789", "Patch method", "2")}}PATCH Method for HTTPSpecifies PATCH.
+ +

Kompabilitas Browser

+ + + +

{{Compat("http.methods")}}

+ +

Lihat Juga

+ + diff --git a/files/id/web/http/proxy_servers_and_tunneling/index.html b/files/id/web/http/proxy_servers_and_tunneling/index.html new file mode 100644 index 0000000000..f035225649 --- /dev/null +++ b/files/id/web/http/proxy_servers_and_tunneling/index.html @@ -0,0 +1,100 @@ +--- +title: Proxy servers and tunneling +slug: Web/HTTP/Proxy_servers_and_tunneling +tags: + - HTTP + - HTTP Tunneling + - NeedsTranslation + - Proxies + - Proxy + - TopicStub +translation_of: Web/HTTP/Proxy_servers_and_tunneling +--- +
{{HTTPSidebar}}
+ +

When navigating through different networks of the Internet, proxy servers and HTTP tunnels are facilitating access to content on the World Wide Web. A proxy can be on the user's local computer, or anywhere between the user's computer and a destination server on the Internet. This page outlines some basics about proxies and introduces a few configuration options.

+ +

There are two types of proxies: forward proxies (or tunnel, or gateway) and reverse proxies (used to control and protect access to a server for load-balancing, authentication, decryption or caching).

+ +

Forward proxies

+ +

A forward proxy, or gateway, or just "proxy" provides proxy services to a client or a group of clients. There are likely hundreds of thousands of open forward proxies on the Internet. They store and forward Internet services (like the DNS, or web pages) to reduce and control the bandwidth used by the group.

+ +

Forward proxies can also be anonymous proxies and allow users to hide their IP address while browsing the Web or using other Internet services. TOR (The Onion Router), routes internet traffic through multiple proxies for anonymity.

+ +

Reverse proxies

+ +

As the name implies, a reverse proxy does the opposite of what a forward proxy does: A forward proxy acts on behalf of clients (or requesting hosts). Forward proxies can hide the identities of clients whereas reverse proxies can hide the identities of servers. Reverse proxies have several use cases, a few are:

+ + + +

Forwarding client information through proxies

+ +

Proxies can make requests appear as if they originated from the proxy's IP address. This can be useful if a proxy is used to provide client anonymity, but in other cases information from the original request is lost. The IP address of the original client is often used for debugging, statistics, or generating location-dependent content. A common way to disclose this information is by using the following HTTP headers:

+ +

The standardized header:

+ +
+
{{HTTPHeader("Forwarded")}}
+
Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.
+
+ +

Or the de-facto standard versions:

+ +
+
{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}
+
Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.
+
{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}
+
Identifies the original host requested that a client used to connect to your proxy or load balancer.
+
{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}
+
identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.
+
+ +

To provide information about the proxy itself (not about the client connecting to it), the Via header can be used.

+ +
+
{{HTTPHeader("Via")}}
+
Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.
+
+ +

HTTP tunneling

+ +

Tunneling transmits private network data and protocol information through public network by encapsulating the data. HTTP tunneling is using a protocol of higher level (HTTP) to transport a lower level protocol (TCP).

+ +

The HTTP protocol specifies a request method called {{HTTPMethod("CONNECT")}}. It starts two-way communications with the requested resource and can be used to open a tunnel. This is how a client behind an HTTP proxy can access websites using SSL (i.e. HTTPS, port 443). Note, however, that not all proxy servers support the CONNECT method or limit it to port 443 only.

+ +

See also the HTTP tunnel article on Wikipedia.

+ +

Proxy Auto-Configuration (PAC)

+ +

A Proxy Auto-Configuration (PAC) file is a JavaScript function that determines whether web browser requests (HTTP, HTTPS, and FTP) go directly to the destination or are forwarded to a web proxy server. The JavaScript function contained in the PAC file defines the function:

+ +

The auto-config file should be saved to a file with a .pac filename extension:

+ +
proxy.pac
+ +

And the MIME type set to:

+ +
application/x-ns-proxy-autoconfig
+ +

The file consists of a function called FindProxyForURL. The example below will work in an environment where the internal DNS server is set up so that it can only resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable:

+ +
function FindProxyForURL(url, host) {
+  if (isResolvable(host))
+    return "DIRECT";
+  else
+    return "PROXY proxy.mydomain.com:8080";
+}
+ +

See Proxy Auto-Configuration (PAC) for more examples.

+ +

See also

+ + diff --git a/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html b/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html new file mode 100644 index 0000000000..c470d2fe27 --- /dev/null +++ b/files/id/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html @@ -0,0 +1,727 @@ +--- +title: Proxy Auto-Configuration (PAC) file +slug: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file +translation_of: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file +--- +
{{HTTPSidebar}}
+ +

File Proxy Auto-Configuration (PAC) adalah fungsi JavaScript yang menentukan apakah permintaan browser web (HTTP, HTTPS, dan FTP) langsung ke tujuan atau diteruskan ke server proxy web. Fungsi JavaScript yang terdapat dalam file PAC mendefinisikan fungsi tersebut:

+ +
function FindProxyForURL(url, host) {
+  // ...
+}
+ +

Sintaksis

+ +
function FindProxyForURL(url, host)
+ +

Parameter

+ +
+
url
+
URL sedang diakses. Jalur dan komponen kueri https://URL dihilangkan. Di Chrome (versi 52 hingga 73), Anda dapat menonaktifkan ini dengan menyetel PacHttpsUrlStrippingEnabledke falsedalam kebijakan atau dengan meluncurkan dengan --unsafe-pac-urlbendera baris perintah (di Chrome 74, hanya bendera yang berfungsi, dan dari 75 dan seterusnya, tidak ada cara untuk menonaktifkan jalur- pengupasan; mulai Chrome 81, pengupasan jalur tidak berlaku untuk URL HTTP, tetapi ada minat untuk mengubah perilaku ini agar cocok dengan HTTPS); di Firefox, preferensinya adalah network.proxy.autoconfig_url.include_path.
+
host
+
Nama host diekstrak dari URL. Ini hanya untuk kenyamanan; itu adalah string yang sama seperti antara ://dan yang pertama :atau /setelah itu. Nomor port tidak termasuk dalam parameter ini. Ini dapat diekstrak dari URL bila perlu.
+
+ +

Deskripsi

+ +

Mengembalikan string yang menjelaskan konfigurasi. Format string ini ditentukan dalam format nilai pengembalian di bawah ini.

+ +

Format nilai pengembalian

+ + + +
+
DIRECT
+
Koneksi harus dibuat secara langsung, tanpa proxy apa pun
+
PROXY host:port
+
Proksi yang ditentukan harus digunakan
+
SOCKS host:port
+
Server SOCKS yang ditentukan harus digunakan
+
+ +

Versi terbaru Firefox juga mendukung:

+ +
+
HTTP host:port
+
Proksi yang ditentukan harus digunakan
+
HTTPS host:port
+
Proksi HTTPS yang ditentukan harus digunakan
+
SOCKS4 host:port
+
SOCKS5 host:port
+
Server SOCKS yang ditentukan (dengan versi SOCK yang ditentukan) harus digunakan
+
+ +

Jika ada beberapa pengaturan yang dipisahkan titik koma, pengaturan paling kiri akan digunakan, sampai Firefox gagal membuat sambungan ke proxy. Dalam hal ini, nilai selanjutnya akan digunakan, dll.

+ +

Browser akan secara otomatis mencoba proxy yang sebelumnya tidak merespons setelah 30 menit. Upaya tambahan akan berlanjut mulai dari satu jam, selalu menambahkan 30 menit ke waktu yang telah berlalu di antara upaya.

+ +

Jika semua proxy sedang down, dan tidak ada opsi LANGSUNG yang ditentukan, browser akan menanyakan apakah proxy harus diabaikan untuk sementara, dan koneksi langsung diupayakan. Setelah 20 menit, browser akan menanyakan apakah proxy harus dicoba lagi, menanyakan lagi setelah 40 menit tambahan. Kueri akan berlanjut, selalu menambahkan 20 menit ke waktu yang telah berlalu di antara kueri.

+ +

Contoh

+ +
+
PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081
+
Proksi utama adalah w3proxy: 8080; jika turun, mulailah menggunakan mozilla: 8081 hingga proxy utama muncul lagi.
+
PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081; DIRECT
+
Sama seperti di atas, tetapi jika kedua proxy turun, secara otomatis mulai membuat koneksi langsung. (Pada contoh pertama di atas, Netscape akan menanyakan konfirmasi pengguna tentang membuat koneksi langsung; dalam hal ini, tidak ada intervensi pengguna.)
+
PROXY w3proxy.netscape.com:8080; SOCKS socks:1080
+
Gunakan SOCKS jika proxy utama mati.
+
+ +

File konfigurasi otomatis harus disimpan ke file dengan ekstensi nama file .pac:

+ +
proxy.pac
+ +

Dan tipe MIME harus disetel ke:

+ +
application/x-ns-proxy-autoconfig
+ +

Selanjutnya, Anda harus mengkonfigurasi server Anda untuk memetakan ekstensi nama file .pac ke jenis MIME.

+ +
+

Catatan:

+ +
    +
  • Fungsi JavaScript harus selalu disimpan ke file dengan sendirinya tetapi tidak disematkan dalam file HTML atau file lainnya.
    • +
  • Contoh-contoh di akhir dokumen ini lengkap. Tidak ada sintaks tambahan yang diperlukan untuk menyimpannya ke dalam file dan menggunakannya. (Tentu saja, JavaScripts harus diedit untuk mencerminkan nama domain dan / atau subnet situs Anda.)
    • +
+
+ +

Fungsi dan lingkungan yang telah ditentukan sebelumnya

+ +

Fungsi-fungsi ini dapat digunakan untuk membuat file PAC:

+ + + +
+

Catatan: pactester (bagian dari paket pacparser ) digunakan untuk menguji contoh sintaks berikut.

+ +
    +
  • File PAC diberi nama proxy.pac
    • +
  • Baris perintah: pactester -p ~/pacparser-master/tests/proxy.pac -u http://www.mozilla.org(melewati hostparameter www.mozilla.orgdan urlparameter http://www.mozilla.org)
    • +
+
+ +

isPlainHostName ()

+ +

Sintaksis

+ +
isPlainHostName(host)
+ +

Parameter

+ +
+
tuan rumah
+
Nama host dari URL (tidak termasuk nomor port).
+
+ +

Deskripsi

+ +

Benar jika dan hanya jika tidak ada nama domain di nama host (tidak ada titik).

+ +

Contoh

+ +
isPlainHostName("www.mozilla.org") // false
+isPlainHostName("www") // true
+
+ +

dnsDomainIs()

+ +

Sintaksis

+ +
dnsDomainIs(host, domain)
+ +

Parameter

+ +
+
tuan rumah
+
Apakah nama host dari URL.
+
domain
+
Apakah nama domain untuk menguji nama host.
+
+ +

Deskripsi

+ +

Mengembalikan nilai benar jika dan hanya jika domain nama host cocok.

+ +

Contoh

+ +
dnsDomainIs("www.mozilla.org", ".mozilla.org") // true
+dnsDomainIs("www", ".mozilla.org") // false
+
+ +

localHostOrDomainIs ()

+ +

Sintaksis

+ +
localHostOrDomainIs(host, hostdom)
+ +

Parameter

+ +
+
tuan rumah
+
Nama host dari URL.
+
tuan rumah
+
Nama host yang sepenuhnya memenuhi syarat untuk dicocokkan.
+
+ +

Deskripsi

+ +

Benar jika nama host sama persis dengan nama host yang ditentukan, atau jika tidak ada bagian nama domain dalam nama host, tetapi nama host yang tidak memenuhi syarat cocok.

+ +

Contoh

+ +
localHostOrDomainIs("www.mozilla.org" , "www.mozilla.org") // true (exact match)
+localHostOrDomainIs("www"             , "www.mozilla.org") // true (hostname match, domain not specified)
+localHostOrDomainIs("www.google.com"  , "www.mozilla.org") // false (domain name mismatch)
+localHostOrDomainIs("home.mozilla.org", "www.mozilla.org") // false (hostname mismatch)
+ +

isResolvable ()

+ +

Sintaksis

+ +
isResolvable(host)
+ +

Parameter

+ +
+
tuan rumah
+
adalah nama host dari URL.
+
+ +

Mencoba menyelesaikan nama host. Mengembalikan nilai benar jika berhasil.

+ +

Contoh:

+ +
isResolvable("www.mozilla.org") // true
+
+ +

isInNet ()

+ +

Sintaksis

+ +
isInNet(host, pattern, mask)
+ +

Parameter

+ +
+
tuan rumah
+
nama host DNS, atau alamat IP. Jika nama host dilewatkan, itu akan diselesaikan menjadi alamat IP dengan fungsi ini.
+
pola
+
pola alamat IP dalam format yang dipisahkan titik.
+
topeng
+
mask untuk pola alamat IP yang menginformasikan bagian mana dari alamat IP yang harus dicocokkan. 0 berarti abaikan, 255 berarti cocok.
+
+ +

True jika dan hanya jika alamat IP dari host cocok dengan pola alamat IP yang ditentukan.

+ +

Spesifikasi pola dan topeng dilakukan dengan cara yang sama seperti untuk konfigurasi SOCKS.

+ +

Contoh:

+ +
function alert_eval(str) { alert(str + ' is ' + eval(str)) }
+function FindProxyForURL(url, host) {
+  alert_eval('isInNet(host, "63.245.213.24", "255.255.255.255")')
+  // "PAC-alert: isInNet(host, "63.245.213.24", "255.255.255.255") is true"
+}
+
+ +

dnsResolve ()

+ +
dnsResolve(host)
+ +

Parameter

+ +
+
tuan rumah
+
nama host untuk diselesaikan.
+
+ +

Menyelesaikan nama host DNS yang diberikan menjadi alamat IP, dan mengembalikannya dalam format yang dipisahkan titik sebagai string.

+ +

Contoh

+ +
dnsResolve("www.mozilla.org"); // returns the string "104.16.41.2"
+ +

convert_addr ()

+ +

Sintaksis

+ +
convert_addr(ipaddr)
+ +

Parameter

+ +
+
ipaddr
+
Alamat bertitik apa pun seperti alamat IP atau topeng.
+
+ +

Menggabungkan empat byte yang dipisahkan titik menjadi satu kata 4-byte dan mengubahnya menjadi desimal.

+ +

Contoh

+ +
convert_addr("104.16.41.2"); // returns the decimal number 1745889538
+ +

myIpAddress ()

+ +

Sintaksis

+ +
myIpAddress()
+ +

Parameter

+ +

(tidak ada)

+ +

Mengembalikan alamat IP server dari mesin tempat Firefox dijalankan, sebagai string dalam format bilangan bulat yang dipisahkan titik.

+ +
+

myIpAddress () mengembalikan alamat IP yang sama dengan alamat server yang dikembalikan oleh nslookup localhost mesin Linux. Itu tidak mengembalikan alamat IP publik.

+
+ +

Contoh

+ +
myIpAddress() //returns the string "127.0.1.1" if you were running Firefox on that localhost
+ +

dnsDomainLevels ()

+ +

Sintaksis

+ +
dnsDomainLevels(host)
+ +

Parameter

+ +
+
tuan rumah
+
adalah nama host dari URL.
+
+ +

Mengembalikan angka (bilangan bulat) dari level domain DNS (jumlah titik) di nama host.

+ +

Contoh:

+ +
dnsDomainLevels("www");             // 0
+dnsDomainLevels("mozilla.org");     // 1
+dnsDomainLevels("www.mozilla.org"); // 2
+
+ +

shExpMatch ()

+ +

Sintaksis

+ +
shExpMatch(str, shexp)
+ +

Parameter

+ +
+
str
+
adalah sembarang string untuk dibandingkan (mis. URL, atau nama host).
+
shexp
+
adalah ekspresi shell untuk dibandingkan.
+
+ +

Mengembalikan nilai benar jika string cocok dengan ekspresi shell yang ditentukan.

+ +

Perhatikan bahwa polanya adalah ekspresi shell glob , bukan ekspresi reguler. *dan ?selalu didukung, sementara [characters]dan [^characters]didukung oleh beberapa implementasi termasuk Firefox. Ini terutama karena ekspresi diterjemahkan ke RegExp melalui subsitusi [.*?]. Untuk cara yang dapat diandalkan untuk menggunakan sintaks RegExp ini, cukup gunakan RegExp sebagai gantinya.

+ +

Contoh

+ +
shExpMatch("http://home.netscape.com/people/ari/index.html"     , "*/ari/*"); // returns true
+shExpMatch("http://home.netscape.com/people/montulli/index.html", "*/ari/*"); // returns false
+ +

weekdayRange ()

+ +

Sintaksis

+ +
weekdayRange(wd1, wd2, [gmt])
+ +
+

Catatan: (Sebelum Firefox 49) wd1 harus lebih kecil dari wd2 jika Anda ingin fungsi mengevaluasi parameter ini sebagai rentang. Lihat peringatan di bawah.

+
+ +

Parameter

+ +
+
wd1 dan wd2
+
Salah satu string hari kerja yang dipesan:
+
+ 
"SUN"|"MON"|"TUE"|"WED"|"THU"|"FRI"|"SAT"
+
+
waktu Greenwich
+
Apakah string "GMT" atau ditinggalkan.
+
+ +

Hanya parameter pertama yang wajib diisi. Entah yang kedua, ketiga, atau keduanya mungkin ditinggalkan.

+ +

Jika hanya satu parameter yang ada, fungsi mengembalikan nilai true pada hari kerja yang diwakili oleh parameter. Jika string "GMT" ditetapkan sebagai parameter kedua, waktu dianggap dalam GMT. Jika tidak, mereka diasumsikan berada dalam zona waktu lokal.

+ +

Jika wd1 dan wd1 ditentukan, kondisinya benar jika hari kerja saat ini berada di antara dua hari kerja yang dipesan . Batas bersifat inklusif, tetapi batasnya teratur . Jika parameter "GMT" ditentukan, waktu dianggap dalam GMT. Jika tidak, zona waktu lokal digunakan.

+ +
+

Urutan hari penting ; Sebelum Firefox 49, akan selalu bernilai true. Sekarang hanya akan mengevaluasi benar jika hari ini adalah Rabu atau Minggu.weekdayRange("SUN", "SAT")weekdayRange("WED", "SUN")

+
+ +

Contoh

+ +
weekdayRange("MON", "FRI");        // returns true Monday through Friday (local timezone)
+weekdayRange("MON", "FRI", "GMT"); // returns true Monday through Friday (GMT timezone)
+weekdayRange("SAT");               // returns true on Saturdays local time
+weekdayRange("SAT", "GMT");        // returns true on Saturdays GMT time
+weekdayRange("FRI", "MON");        // returns true Friday and Monday only (note, order does matter!)
+ +

dateRange()

+ +

Syntax

+ +
dateRange(<day> | <month> | <year>, [gmt])  // ambiguity is resolved by assuming year is greater than 31
+dateRange(<day1>, <day2>, [gmt])
+dateRange(<month1>, <month2>, [gmt])
+dateRange(<year1>, <year2>, [gmt])
+dateRange(<day1>, <month1>, <day2>, <month2>, [gmt])
+dateRange(<month1>, <year1>, <month2>, <year2>, [gmt])
+dateRange(<day1>, <month1>, <year1>, <day2>, <month2>, <year2>, [gmt])
+ +
+

Note: (Before Firefox 49) day1 must be less than day2, month1 must be less than month2, and year1 must be less than year2 if you want the function to evaluate these parameters as a range. See the warning below.

+
+ +

Parameters

+ +
+
day
+
Is the ordered day of the month between 1 and 31 (as an integer).
+
+ +
1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31
+ +
+
month
+
Is one of the ordered month strings below.
+
+ +
"JAN"|"FEB"|"MAR"|"APR"|"MAY"|"JUN"|"JUL"|"AUG"|"SEP"|"OCT"|"NOV"|"DEC"
+ +
+
year
+
Is the ordered full year integer number. For example, 2016 (not 16).
+
gmt
+
Is either the string "GMT", which makes time comparison occur in GMT timezone, or is left out. If left unspecified, times are taken to be in the local timezone.
+
+ +

Jika hanya satu nilai yang ditentukan (dari setiap kategori: hari, bulan, tahun), fungsi mengembalikan nilai sebenarnya hanya pada hari yang cocok dengan spesifikasi tersebut. Jika kedua nilai ditentukan, hasilnya adalah benar di antara waktu-waktu tersebut, termasuk batas, tetapi batasnya diurutkan .

+ +
+

Urutan hari, bulan, dan tahun penting ; Sebelum Firefox 49, akan selalu mengevaluasi ke . Sekarang hanya akan mengevaluasi benar jika bulan ini adalah Desember atau Januari.dateRange("JAN", "DEC")truedateRange("DEC", "JAN")

+
+ +

Contoh

+ +
dateRange(1);            // returns true on the first day of each month, local timezone
+dateRange(1, "GMT")      // returns true on the first day of each month, GMT timezone
+dateRange(1, 15);        // returns true on the first half of each month
+dateRange(24, "DEC");    // returns true on 24th of December each year
+dateRange("JAN", "MAR"); // returns true on the first quarter of the year
+
+dateRange(1, "JUN", 15, "AUG");
+// returns true from June 1st until August 15th, each year
+// (including June 1st and August 15th)
+
+dateRange(1, "JUN", 1995, 15, "AUG", 1995);
+// returns true from June 1st, 1995, until August 15th, same year
+
+dateRange("OCT", 1995, "MAR", 1996);
+// returns true from October 1995 until March 1996
+// (including the entire month of October 1995 and March 1996)
+
+dateRange(1995);
+// returns true during the entire year of 1995
+
+dateRange(1995, 1997);
+// returns true from beginning of year 1995 until the end of year 1997
+ +

rentang waktu()

+ +

Sintaksis

+ +
// The full range of expansions is analogous to dateRange.
+timeRange(<hour1>, <min1>, <sec1>, <hour2>, <min2>, <sec2>, [gmt])
+ +
+

Catatan: (Sebelum Firefox 49) kategori hour1, min1, sec1 harus kurang dari kategori hour2, min2, sec2 jika Anda ingin fungsi mengevaluasi parameter ini sebagai rentang. Lihat peringatan di bawah.

+
+ +

Parameter

+ +
+
jam
+
Adalah jam dari 0 hingga 23. (0 adalah tengah malam, 23 adalah 11 malam.)
+
min
+
Menit dari 0 hingga 59.
+
detik
+
Detik dari 0 hingga 59.
+
waktu Greenwich
+
Baik string "GMT" untuk zona waktu GMT, atau tidak ditentukan, untuk zona waktu lokal.
+
+ +

Jika hanya satu nilai yang ditentukan (dari setiap kategori: jam, menit, detik), fungsi mengembalikan nilai sebenarnya hanya pada waktu yang sesuai dengan spesifikasi tersebut. Jika kedua nilai ditentukan, hasilnya adalah benar di antara waktu-waktu tersebut, termasuk batas, tetapi batasnya diurutkan .

+ +
+

Urutan jam, menit, materi kedua ; Sebelum Firefox 49, akan selalu bernilai true. Sekarang hanya akan mengevaluasi benar jika jam saat ini adalah 23:00 atau tengah malam.timeRange(0, 23)timeRange(23, 0)

+
+ +

Contoh

+ +
timerange(12);                // returns true from noon to 1pm
+timerange(12, 13);            // returns true from noon to 1pm
+timerange(12, "GMT");         // returns true from noon to 1pm, in GMT timezone
+timerange(9, 17);             // returns true from 9am to 5pm
+timerange(8, 30, 17, 00);     // returns true from 8:30am to 5:00pm
+timerange(0, 0, 0, 0, 0, 30); // returns true between midnight and 30 seconds past midnight
+ +

Contoh 1

+ +

Gunakan proxy untuk semuanya kecuali host lokal

+ +
+

Catatan: Karena semua contoh berikut sangat spesifik, mereka belum diuji.

+
+ +

All hosts which aren't fully qualified, or the ones that are in local domain, will be connected to directly. Everything else will go through w3proxy.mozilla.org:8080. If the proxy goes down, connections become direct automatically:

+ +
function FindProxyForURL(url, host) {
+  if (isPlainHostName(host) || dnsDomainIs(host, ".mozilla.org")) {
+    return "DIRECT";
+  } else {
+    return "PROXY w3proxy.mozilla.org:8080; DIRECT";
+  }
+}
+ +
+

Note: This is the simplest and most efficient autoconfig file for cases where there's only one proxy.

+
+ +

Example 2

+ +

As above, but use proxy for local servers which are outside the firewall

+ +

If there are hosts (such as the main Web server) that belong to the local domain but are outside the firewall and are only reachable through the proxy server, those exceptions can be handled using the localHostOrDomainIs() function:

+ +
function FindProxyForURL(url, host) {
+  if (
+    (isPlainHostName(host) || dnsDomainIs(host, ".mozilla.org")) &&
+    !localHostOrDomainIs(host, "www.mozilla.org") &&
+    !localHostOrDoaminIs(host, "merchant.mozilla.org")
+  ) {
+    return "DIRECT";
+  } else {
+    return "PROXY w3proxy.mozilla.org:8080; DIRECT";
+  }
+}
+ +

The above example will use the proxy for everything except local hosts in the mozilla.org domain, with the further exception that hosts www.mozilla.org and merchant.mozilla.org will go through the proxy.

+ +
+

Note the order of the above exceptions for efficiency: localHostOrDomainIs() functions only get executed for URLs that are in local domain, not for every URL. Be careful to note the parentheses around the or expression before the and expression to achieve the above-mentioned efficient behaviour.

+
+ +

Example 3

+ +

Use proxy only if cannot resolve host

+ +

This example will work in an environment where the internal DNS server is set up so that it can only resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable:

+ +
function FindProxyForURL(url, host) {
+  if (isResolvable(host))
+    return "DIRECT";
+  else
+    return "PROXY proxy.mydomain.com:8080";
+}
+ +

The above requires consulting the DNS every time; it can be grouped intelligently with other rules so that DNS is consulted only if other rules do not yield a result:

+ +
function FindProxyForURL(url, host) {
+  if (
+    isPlainHostName(host) ||
+    dnsDomainIs(host, ".mydomain.com") ||
+    isResolvable(host)
+  ) {
+    return "DIRECT";
+  } else {
+    return "PROXY proxy.mydomain.com:8080";
+  }
+}
+ +

Example 4

+ +

Subnet based decisions

+ +

In this example all of the hosts in a given subnet are connected-to directly, others are connected through the proxy:

+ +
function FindProxyForURL(url, host) {
+  if (isInNet(host, "198.95.0.0", "255.255.0.0"))
+    return "DIRECT";
+  else
+    return "PROXY proxy.mydomain.com:8080";
+}
+ +

Again, use of the DNS server in the above can be minimized by adding redundant rules in the beginning:

+ +
function FindProxyForURL(url, host) {
+  if (
+    isPlainHostName(host) ||
+    dnsDomainIs(host, ".mydomain.com") ||
+    isInNet(host, "198.95.0.0", "255.255.0.0")
+  ) {
+    return "DIRECT";
+  } else {
+    return "PROXY proxy.mydomain.com:8080";
+  }
+}
+ +

Example 5

+ +

Load balancing/routing based on URL patterns

+ +

This example is more sophisticated. There are four (4) proxy servers; one of them is a hot stand-by for all of the other ones, so if any of the remaining three goes down the fourth one will take over. Furthermore, the three remaining proxy servers share the load based on URL patterns, which makes their caching more effective (there is only one copy of any document on the three servers - as opposed to one copy on each of them). The load is distributed like this:

+ + + + + + + + + + + + + + + + + + + + + + + + +
ProxyPurpose
#1.com domain
#2.edu domain
#3all other domains
#4hot stand-by
+ +

All local accesses are desired to be direct. All proxy servers run on the port 8080 (they don't need to, you can just change your port but remember to modify your configuations on both side). Note how strings can be concatenated with the + operator in JavaScript.

+ +
function FindProxyForURL(url, host) {
+
+  if (isPlainHostName(host) || dnsDomainIs(host, ".mydomain.com"))
+    return "DIRECT";
+
+  else if (shExpMatch(host, "*.com"))
+    return "PROXY proxy1.mydomain.com:8080; " +
+           "PROXY proxy4.mydomain.com:8080";
+
+  else if (shExpMatch(host, "*.edu"))
+    return "PROXY proxy2.mydomain.com:8080; " +
+           "PROXY proxy4.mydomain.com:8080";
+
+  else
+    return "PROXY proxy3.mydomain.com:8080; " +
+           "PROXY proxy4.mydomain.com:8080";
+}
+ +

Example 6

+ +

Setting a proxy for a specific protocol

+ +

Most of the standard JavaScript functionality is available for use in the FindProxyForURL() function. As an example, to set different proxies based on the protocol the {{jsxref("String.prototype.startsWith()", "startsWith()")}} function can be used:

+ +
function FindProxyForURL(url, host) {
+
+  if (url.startsWith("http:"))
+    return "PROXY http-proxy.mydomain.com:8080";
+
+  else if (url.startsWith("ftp:"))
+    return "PROXY ftp-proxy.mydomain.com:8080";
+
+  else if (url.startsWith(“gopher:"))
+    return "PROXY gopher-proxy.mydomain.com:8080";
+
+  else if (url.startsWith("https:") || url.startsWith("snews:"))
+    return "PROXY security-proxy.mydomain.com:8080";
+
+  else
+    return "DIRECT";
+
+}
+ +
+

Note: The same can be accomplished using the shExpMatch() function described earlier.

+
+ +

For example:

+ +
// ...
+if (shExpMatch(url, "http:*")) {
+  return "PROXY http-proxy.mydomain.com:8080";
+}
+// ...
+ +
+

The autoconfig file can be output by a CGI script. This is useful, for example, when making the autoconfig file act differently based on the client IP address (the REMOTE_ADDR environment variable in CGI).

+ +

Usage of isInNet(), isResolvable() and dnsResolve() functions should be carefully considered, as they require the DNS server to be consulted. All the other autoconfig-related functions are mere string-matching functions that don't require the use of a DNS server. If a proxy is used, the proxy will perform its DNS lookup which would double the impact on the DNS server. Most of the time these functions are not necessary to achieve the desired result.

+
+ +

History and implementation

+ +

Proxy auto-config was introduced into Netscape Navigator 2.0 in the late 1990s, at the same time when JavaScript was introduced. Open-sourcing Netscape eventually lead to Firefox itself.

+ +

Oleh karena itu, implementasi PAC yang paling "asli" dan pustaka JavaScript-nya nsProxyAutoConfig.jsditemukan di versi awal Firefox. Utilitas ini ditemukan di banyak sistem sumber terbuka lainnya termasuk Chromium . Firefox kemudian mengintegrasikan file tersebut menjadi ProxyAutoConfig.cppliteral string C ++. Untuk mengekstraknya ke dalam filenya sendiri, cukup dengan menyalin potongan ke JavaScript dengan console.logperintah untuk mencetaknya.

+ +

Microsoft secara umum membuat implementasinya sendiri. Dulu ada beberapa masalah dengan pustaka mereka , tetapi sebagian besar telah diselesaikan sekarang. Mereka telah mendefinisikan beberapa fungsi sufiks "Ex" baru di sekitar bagian penanganan alamat untuk mendukung IPv6. Fitur ini didukung oleh Chromium, tetapi belum didukung oleh Firefox ( bugzilla # 558253 ).

diff --git a/files/id/web/http/status/100/index.html b/files/id/web/http/status/100/index.html new file mode 100644 index 0000000000..3f2f0db1d2 --- /dev/null +++ b/files/id/web/http/status/100/index.html @@ -0,0 +1,46 @@ +--- +title: 100 Continue +slug: Web/HTTP/Status/100 +tags: + - HTTP + - Informasi + - Status code +translation_of: Web/HTTP/Status/100 +--- +
{{HTTPSidebar}}
+ +

HTTP 100 Continue menginformasikan status kode respon yang menandakan bahwa semuanya OK dan klien dapat melanjutkan dengan permintaan atau mengabaikan jika telah terselesaikan.

+ +

Untuk bisa mendapatkan server check pada header permintaan, klien harus mengirim Expect: 100-continue sebagai header pada permintaan inisial dan mendapatan kode status respon 100 Continue sebelum mengirim konten atau body.

+ +

Status

+ +
100 Continue
+ +

Spesifikasi

+ + + + + + + + + + + + +
SpesifikasiTitle
{{RFC("7231", "100 Continue" , "6.2.1")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Kompabilitas Browser

+ + + +

{{Compat("http/status", "100")}}

+ +

Lihat Juga

+ + diff --git a/files/id/web/http/status/200/index.html b/files/id/web/http/status/200/index.html new file mode 100644 index 0000000000..76c06a3e1e --- /dev/null +++ b/files/id/web/http/status/200/index.html @@ -0,0 +1,50 @@ +--- +title: 200 OK +slug: Web/HTTP/Status/200 +translation_of: Web/HTTP/Status/200 +--- +
{{HTTPSidebar}}
+ +

HTTP 200 OK respon status sukses merupakan kode respon yang menandakan bahwa request sukses. respon 200 dapat dichace secara default.

+ +

Arti dari sukses tergantung pada fungsi request HTTP:

+ + + +

Kesuksesan hasil dari {{HTTPMethod("PUT")}} atau {{HTTPMethod("DELETE")}} biasanya bukan 200 OK tapi {{HTTPStatus("204")}} No Content (atau {{HTTPStatus("201")}} Created ketika resource diunggah pertama kali).

+ +

Status

+ +
200 OK
+ +

Spesifikasi

+ + + + + + + + + + + + +
SpesifikasiJudul
{{RFC("7231", "200 OK" , "6.3.1")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Kompabilitas Browser

+ + + +

{{Compat("http.status.200")}}

+ +

Lihat Juga

+ + diff --git a/files/id/web/http/status/400/index.html b/files/id/web/http/status/400/index.html new file mode 100644 index 0000000000..3d98750338 --- /dev/null +++ b/files/id/web/http/status/400/index.html @@ -0,0 +1,39 @@ +--- +title: 400 Bad Request +slug: Web/HTTP/Status/400 +tags: + - Galat Klien + - HTTP + - Kode status + - Referensi + - Status kode HTTP +translation_of: Web/HTTP/Status/400 +--- +
{{HTTPSidebar}}
+ +

Kode Respon HTTP 400 Bad Request mengindikasikan bahwa server tidak bisa atau tidak akan memproses permintaan karena sesuatu yang dianggap sebagai kesalahan klien (seperti sintaks permintaan yang jelek, pesan request yang tidak valid, atau permintaan yang menipu.

+ +
+

Klien seharusnya tidak mengulangi permintaan yang sama tanpa perubahan.

+
+ +

Status

+ +
400 Bad Request
+ +

Spesifikasi

+ + + + + + + + + + + + + + +
SpecificationTitle
{{RFC("7231", "400 Bad Request" , "6.5.1")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
diff --git a/files/id/web/http/status/403/index.html b/files/id/web/http/status/403/index.html new file mode 100644 index 0000000000..71dc858a2f --- /dev/null +++ b/files/id/web/http/status/403/index.html @@ -0,0 +1,56 @@ +--- +title: 403 Forbidden +slug: Web/HTTP/Status/403 +tags: + - Galat Klien + - HTTP + - Kode status + - Referensi +translation_of: Web/HTTP/Status/403 +--- +
{{HTTPSidebar}}
+ +

Kode respon HTTP 403 Forbidden mengindikasikan bahwa server memahami permintaan tetapi menolak untuk mengesahkannya.

+ +

Kode status ini mirip dengan {{HTTPStatus("401")}}, tetapi dalam kasus ini, autentikasi ulang tidak akan memberi perubahan. Aksesnya dilarang secara permanen dan diikat pada logika aplikasi, seperti kurangnya hak akses untuk mendapatkan sumber daya.

+ +

Status

+ +
403 Forbidden
+ +

Contoh respon

+ +
HTTP/1.1 403 Forbidden
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + +
SpecificationTitle
{{RFC("7231", "403 Forbidden" , "6.5.3")}}HTTP/1.1: Semantics and Content
+ +

Dukungan peramban

+ + + +

{{Compat("http.status.403")}}

+ +

Lihat juga

+ + diff --git a/files/id/web/http/status/404/index.html b/files/id/web/http/status/404/index.html new file mode 100644 index 0000000000..10c1e4e0a5 --- /dev/null +++ b/files/id/web/http/status/404/index.html @@ -0,0 +1,63 @@ +--- +title: 404 Not Found +slug: Web/HTTP/Status/404 +tags: + - Galat Klien + - HTTP + - Kode status + - Peramban +translation_of: Web/HTTP/Status/404 +--- +
{{HTTPSidebar}}
+ +

Kode respon HTTP 404 Not Found mengindikasikan bahwa server tidak dapat menemukan sumber daya yang diminta. Link yang menuju halaman 404 biasanya disebut dengan broken atau dead links, dan bisa menjadi subjek kepada link rot.

+ +

Status kode 404 tidak mengindikasikan bahwa sumber daya tidak ditemukan sementara atau secara permanen. Apabila sumber daya dihapus secara permanen, {{HTTPStatus("410")}} (Gone) harus digunakan dibandingkan status 404.

+ +

Status

+ +
404 Not Found
+ +

Halaman galat khusus

+ +

Banyak web sites menyesuaikan tampilan dari halaman 404 supaya lebih membantu pengguna dan memberikan petunjuk apa yang harus dilakukan seterusnya. Server Apache dapat dikonfigurasi dengan file .htaccess dengan potongan kode berikut.

+ +
ErrorDocument 404 /notfound.html
+ +

Untuk contoh dari halaman 404 khusus, lihat Halaman 404 MDN.

+ +
+

Desain khusus merupakan hal yang baik. Buat halaman 404 Anda menjadi lucu dan manusiawi, tetapi jangan membuat bingung pengguna.

+
+ +

Spesifikasi

+ + + + + + + + + + + + + + +
SpecificationTitle
{{RFC("7231", "404 Not Found" , "6.5.4")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Dukungan Peramban

+ + + +

{{Compat("http.status.404")}}

+ +

Lihat Juga

+ + diff --git a/files/id/web/http/status/405/index.html b/files/id/web/http/status/405/index.html new file mode 100644 index 0000000000..651db0f858 --- /dev/null +++ b/files/id/web/http/status/405/index.html @@ -0,0 +1,44 @@ +--- +title: 405 Metode tidak Diizinkan +slug: Web/HTTP/Status/405 +tags: + - Galat Klien + - HTTP + - Referensi + - Status kode + - Status kode HTTP +translation_of: Web/HTTP/Status/405 +--- +
{{HTTPSidebar}}
+ +

Kode respon HTTP 405 Method Not Allowed mengindikasikan bahwa metode permintaan dikenali oleh server tetapi tidak didukung oleh target sumber daya. Server harus menyematkan Allow header field di dalam respon 405 berisi daftar dari metode permintaan yang didukung oleh target sumber daya.

+ +

Status

+ +
405 Method Not Allowed
+ +

Spesifikasi

+ + + + + + + + + + + + + + +
SpecificationTitle
{{RFC("7231", "405 Method Not Allowed" , "6.5.5")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Lihat juga

+ + diff --git a/files/id/web/http/status/410/index.html b/files/id/web/http/status/410/index.html new file mode 100644 index 0000000000..42ac089598 --- /dev/null +++ b/files/id/web/http/status/410/index.html @@ -0,0 +1,54 @@ +--- +title: 410 Gone +slug: Web/HTTP/Status/410 +tags: + - Galat Klien + - HTTP + - Kode status + - Referensi +translation_of: Web/HTTP/Status/410 +--- +
{{HTTPSidebar}}
+ +

Kode respon HTTP 410 Gone mengindikasikan bahwa akses ke sumber daya tidak lagi tersedia di server asal dengan kondisi akan tidak tersedia secara permanen.

+ +

Apabila Anda tidak tahu apakah kondisi ini hanya sementara atau permanen, kode error {{HTTPStatus(404)}} sebaiknya digunakan.

+ +
+

Catatan: Sebuah respon 410 dapat disimpan di dalam cache secara bawaan.

+
+ +

Status

+ +
410 Gone
+ +

Spesifikasi

+ + + + + + + + + + + + + + +
SpecificationTitle
{{RFC("7231", "410 Gone" , "6.5.9")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Dukungan Peramban

+ +

The information shown below has been pulled from MDN's GitHub (https://github.com/mdn/browser-compat-data).

+ + + +

{{Compat("http.status.410")}}

+ +

Lihat Juga

+ + diff --git a/files/id/web/http/status/500/index.html b/files/id/web/http/status/500/index.html new file mode 100644 index 0000000000..ce5c5157fb --- /dev/null +++ b/files/id/web/http/status/500/index.html @@ -0,0 +1,38 @@ +--- +title: 500 Internal Server Error +slug: Web/HTTP/Status/500 +translation_of: Web/HTTP/Status/500 +--- +
{{HTTPSidebar}}
+ +

HTTP kode respons kesalahan server menunjukkan bahwa server mengalami kondisi tak terduga yang menghalanginya memenuhi permintaan.

+ +

Respons kesalahan ini adalah turunan "mencakup-semua" respons. Seringkali respons server pengelola catatan seperti kode status 500 dengan lebih banyak detail tentang permintaan untuk mencegah kesalahan terjadi lagi di masa mendatang.

+ +

Status

+ +
500 Kesalahan Server dari Dalam
+
+ +

Specifications

+ + + + + + + + + + + + +
SpecificationTitle
{{RFC("7231", "" , "6.6.1")}}Protokol Transfer Hiperteks (HTTP / 1.1): Semantik dan Konten
+ +

Kompatibilias browser

+ + + + + +

{{Compat("http.status.500")}}

diff --git a/files/id/web/http/status/index.html b/files/id/web/http/status/index.html new file mode 100644 index 0000000000..066d40771e --- /dev/null +++ b/files/id/web/http/status/index.html @@ -0,0 +1,141 @@ +--- +title: HTTP response status codes +slug: Web/HTTP/Status +translation_of: Web/HTTP/Status +--- +
{{HTTPSidebar}}
+ +

kode status respon HTTP menunjukkan apakah permintaan HTTP tertentu telah berhasil diselesaikan. Tanggapan dikelompokkan dalam lima kelas: tanggapan informasi, tanggapan yang sukses, pengalihan, kesalahan klien, dan server kesalahan.

+ +

Respon informasi

+ +
+
{{HTTPStatus(100, "100 Continue")}}
+
Tanggapan sementara ini menunjukkan bahwa segala sesuatu sejauh ini adalah OK dan bahwa klien harus melanjutkan dengan permintaan atau mengabaikannya jika sudah selesai.
+
{{HTTPStatus(101, "101 Switching Protocol")}}
+
Kode ini dikirim sebagai tanggapan ke header permintaan {{HTTPHeader ("Upgrade")}} oleh klien, dan menunjukkan protokol yang digunakan oleh server.
+
{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})
+
Kode ini menunjukkan bahwa server telah menerima dan memproses permintaan, tetapi belum ada respons.
+
+ +

Response Sukses

+ +
+
{{HTTPStatus(200, "200 OK")}}
+
Permintaan telah berhasil . Arti keberhasilan bervariasi tergantung pada metode HTTP :
+ GET: The resource has been fetched and is transmitted in the message body.
+ HEAD: The entity headers are in the message body.
+ POST: The resource describing the result of the action is transmitted in the message body.
+ TRACE: The message body contains the request message as received by the server
+
{{HTTPStatus(201, "201 Created")}}
+
The request has succeeded and a new resource has been created as a result of it. This is typically the response sent after a PUT request.
+
{{HTTPStatus(202, "202 Accepted")}}
+
The request has been received but not yet acted upon. It is non-committal, meaning that there is no way in HTTP to later send an asynchronous response indicating the outcome of processing the request. It is intended for cases where another process or server handles the request, or for batch processing.
+
{{HTTPStatus(203, "203 Non-Authoritative Information")}}
+
This response code means returned meta-information set is not exact set as available from the origin server, but collected from a local or a third party copy. Except this condition, 200 OK response should be preferred instead of this response.
+
{{HTTPStatus(204, "204 No Content")}}
+
There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.
+
{{HTTPStatus(205, "205 Reset Content")}}
+
This response code is sent after accomplishing request to tell user agent reset document view which sent this request.
+
{{HTTPStatus(206, "206 Partial Content")}}
+
This response code is used because of range header sent by the client to separate download into multiple streams.
+
+ +

Redirection messages

+ +
+
{{HTTPStatus(300, "300 Multiple Choice")}}
+
The request has more than one possible responses. User-agent or user should choose one of them. There is no standardized way to choose one of the responses.
+
{{HTTPStatus(301, "301 Moved Permanently")}}
+
This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response.
+
{{HTTPStatus(302, "302 Found")}}
+
This response code means that URI of requested resource has been changed temporarily. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.
+
{{HTTPStatus(303, "303 See Other")}}
+
Server sent this response to directing client to get requested resource to another URI with an GET request.
+
{{HTTPStatus(304, "304 Not Modified")}}
+
This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.
+
{{HTTPStatus(305, "305 Use Proxy")}}
+
This means requested response must be accessed by a proxy. This response code is not largely supported because security reasons.
+
{{HTTPStatus(306, "306 unused")}}
+
This response code is no longer used, it is just reserved currently. It was used in a previous version of the HTTP 1.1 specification.
+
{{HTTPStatus(307, "307 Temporary Redirect")}}
+
Server sent this response to directing client to get requested resource to another URI with same method that used prior request. This has the same semantic than the 302 Found HTTP response code, with the exception that the user agent must not change the HTTP method used: if a POST was used in the first request, a POST must be used in the second request.
+
{{HTTPStatus(308, "308 Permanent Redirect")}}
+
This means that the resource is now permanently located at another URI, specified by the Location: HTTP Response header. This has the same semantics as the 301 Moved Permanently HTTP response code, with the exception that the user agent must not change the HTTP method used: if a POST was used in the first request, a POST must be used in the second request.
+
+ +

Client error responses

+ +
+
{{HTTPStatus(400, "400 Bad Request")}}
+
Respons ini berarti server tidak dapat memahami permintaan karena sintaks yang tidak valid.
+
{{HTTPStatus(401, "401 Unauthorized")}}
+
Authentication is needed to get requested response. This is similar to 403, but in this case, authentication is possible.
+
{{HTTPStatus(402, "402 Payment Required")}}
+
This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.
+
{{HTTPStatus(403, "403 Forbidden")}}
+
Client does not have access rights to the content so server is rejecting to give proper response.
+
{{HTTPStatus(404, "404 Not Found")}}
+
Server can not find requested resource. This response code probably is most famous one due to its frequency to occur in web.
+
{{HTTPStatus(405, "405 Method Not Allowed")}}
+
The request method is known by the server but has been disabled and cannot be used. The two mandatory methods, GET and HEAD, must never be disabled and should not return this error code.
+
{{HTTPStatus(406, "406 Not Acceptable")}}
+
This response is sent when the web server, after performing server-driven content negotiation, doesn't find any content following the criteria given by the user agent.
+
{{HTTPStatus(407, "407 Proxy Authentication Required")}}
+
This is similar to 401 but authentication is needed to be done by a proxy.
+
{{HTTPStatus(408, "408 Request Timeout")}}
+
This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome or IE9, use HTTP preconnection mechanisms to speed up surfing (see {{ bug(634278) }}, which tracks the future implementation of such a mechanism in Firefox). Also note that some servers merely shut down the connection without sending this message.
+
{{HTTPStatus(409, "409 Conflict")}}
+
This response would be sent when a request conflict with current state of server.
+
{{HTTPStatus(410, "410 Gone")}}
+
This response would be sent when requested content has been deleted from server.
+
{{HTTPStatus(411, "411 Length Required")}}
+
Server rejected the request because the Content-Length header field is not defined and the server requires it.
+
{{HTTPStatus(412, "412 Precondition Failed")}}
+
The client has indicated preconditions in its headers which the server does not meet.
+
{{HTTPStatus(413, "413 Payload Too Large")}}
+
Request entity is larger than limits defined by server; the server might close the connection or return an Retry-After header field.
+
{{HTTPStatus(414, "414 URI Too Long")}}
+
The URI requested by the client is longer than the server is willing to interpret.
+
{{HTTPStatus(415, "415 Unsupported Media Type")}}
+
The media format of the requested data is not supported by the server, so the server is rejecting the request.
+
{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}
+
The range specified by the Range header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.
+
{{HTTPStatus(417, "417 Expectation Failed")}}
+
This response code means the expectation indicated by the Expect request header field can't be met by the server.
+
{{HTTPStatus(421, "421 Misdirected Request")}}
+
The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.
+
{{HTTPStatus(426, "426 Upgrade Required")}}
+
The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server MUST send an Upgrade header field in a 426 response to indicate the required protocol(s) (Section 6.7 of [RFC7230]).
+
{{HTTPStatus(428, "428 Precondition Required")}}
+
The origin server requires the request to be conditional. Intended to prevent "the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.
+
{{HTTPStatus(429, "429 Too Many Requests")}}
+
The user has sent too many requests in a given amount of time ("rate limiting").
+
{{HTTPStatus(431, "431 Request Header Fields Too Large")}}
+
The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing the size of the request header fields.
+
{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}
+
The user requests an illegal resource, such as a web page censored by a government.
+
+ +

Server error responses

+ +
+
{{HTTPStatus(500, "500 Internal Server Error")}}
+
The server has encountered a situation it doesn't know how to handle.
+
{{HTTPStatus(501, "501 Not Implemented")}}
+
The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are GET and HEAD.
+
{{HTTPStatus(502, "502 Bad Gateway")}}
+
This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.
+
{{HTTPStatus(503, "503 Service Unavailable")}}
+
The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the Retry-After: HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.
+
{{HTTPStatus(504, "504 Gateway Timeout")}}
+
This error response is given when the server is acting as a gateway and cannot get a response in time.
+
{{HTTPStatus(505, "505 HTTP Version Not Supported")}}
+
The HTTP version used in the request is not supported by the server.
+
{{HTTPStatus(506, "506 Variant Also Negotiates")}}
+
The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.
+
{{HTTPStatus(507, "507 Variant Also Negotiates")}}
+
The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.
+
{{HTTPStatus(511, "511 Network Authentication Required")}}
+
The 511 status code indicates that the client needs to authenticate to gain network access.
+
diff --git a/files/id/web/index.html b/files/id/web/index.html new file mode 100644 index 0000000000..9d74fa1a90 --- /dev/null +++ b/files/id/web/index.html @@ -0,0 +1,153 @@ +--- +title: Teknologi Web untuk Pengembang +slug: Web +tags: + - Landing + - Web +translation_of: Web +--- + + +

Sifat terbuka World Wide Web memberikan kesempatan luar biasa bagi orang-orang yang ingin membuat situs-situs web atau aplikasi daring. Untuk memanfaatkan kemampuan-kemampuan web, Anda perlu belajar cara menggunakannya. Jelajahi link dibawah ini untuk mempelajari lebih lanjut berbagai teknologi web.

+ +
+
+

Teknologi-teknologi Web

+ +

Dasar-dasar

+ +
+
HTML
+
HyperText Markup Language (HTML) adalah bahasa yang digunakan untuk mendeskripsikan dan menentukan konten dari halaman Web.
+
CSS
+
Cascading Style Sheets (CSS) digunakan untuk menentukan tampilan/gambaran konten Web.
+
HTTP
+
HyperText Transfer Protocol (HTTP) digunakan untuk mengantar HTML dan dokumen hypermedia lainnya pada web.
+
+ +

Scripting

+ +
+
JavaScript
+
JavaScript merupakan bahasa pemrograman yang berjalan di browser Anda. Anda dapat menggunakan untuk menambahkan interaktivitas dan fitur dinamis pada situs web atau aplikasi Anda.
+
Dengan adanya {{glossary("Node.js")}}, Anda juga bisa menjalankan JavaScript pada server.
+
Web APIs
+
Web Aplication Programming Interfaces (Web API) digunakan untuk melaksanakan tugas-tugas beragam, seperti memanipulasi DOM, memainkan audio maupun vidio atau membuat grafis 3D. +
    +
  • Referensi Web API antarmuka semua jenis daftar objek yang Anda dapat gunakan selagi mengembangkan untuk web.
    • +
  • Halaman WebAPI semua daftar komunikasi, akses perangkat keras, dan API lainnya yang dapat Anda gunakan di aplikasi web.
    • +
  • Event reference semua daftar events yang dapat Anda gunakan untuk melacak dan bereaksi pada hal-hal yang menarik yang telah terjadi di halaman web atau aplikasi Anda.
    • +
+
+
Komponen-komponen Web
+
Komponen-komponen web adalah serangkaian teknologi-teknologi berbeda yang memungkinkan Anda untuk membuat elemmen-elemen khusus yang dapat digunakan kembali dengan fungsionalitasnya dienkapsulasi (menjaga elemen didalamnya) jauh dari sisa kode Anda dan menggunakannya di aplikasi web Anda.
+
+ +

Grafis

+ +
+
Canvas
+
Elemen {{HTMLElement("canvas")}} menyediakan API untuk membuat grafik 2D menggunakan JavaScript.
+
SVG
+
Scalable Vector Graphics (SVG) memungkinkan Anda mengunakan berbagai garis, kurva, dan bentuk-bentuk geometris lainnya untuk membuat grafik. Dengan vektor, Anda dapat membuat gambar yang diubah ukurannya tetap jernih pada ukuran apapun.
+
WebGL
+
WebGL merupakan API JavaScript yang memungkinkan Anda menggambar grafis 3D atau 2D HTML elemen {{HTMLElement("canvas")}}. Teknologi ini memungkinan Anda melihat OpenGL ES standar di konten Web.
+
+ +

Audio, vidio, dan multimedia

+ +
+
Teknologi-teknologi media Web
+
Sebuah daftar media API terhubung dengan link-link ke dokumentasi yang Anda perlukan masing-masing.
+
Media capture and streams API
+
Referensi untuk API yang memungkinkan untuk streaming, merekam, dan memanipulasi di dua media secara lokal dan seluruh jaringan. Ini termasuk menggunakan kamera lokal dan mikrofon untuk merekam vidio, audio, dan gambar.
+
Menggunakan audio dan vidio HTML
+
Menggabungkan vidio dan/atau audio di sebuah halaman web dan mengendalikan tayangannya.
+
WebRTC
+
RTC di WebRTC singkatan untuk Real-Time Communications, teknologi yang memungkinkan streaming audio/vidio dan berbagi data antara peramban (teman sebaya) klien.
+
+ +

Lainnya

+ +
+
MathML
+
Mathematical Markup Language (MathML) memungkinkan Anda menampilkan persamaan dan sintaks.
+
XSLT
+
Extensible Stylesheet Language Transformations (XSLT) memungkinan Anda mengubah dokumen XML menjadi HTML yang lebih dapat dibaca manusia.
+
EXSLT
+
Fungsi tambahan yang memungkinkan penambahan fitur ke XSLT.
+
XPath
+
XPath memungkinan Anda memilih node DOM di dokumen menggunakan sintaks kuat daripada penyedianya saat ini oleh CSS selectors.
+
+
+ +
+

Ruang Belajar

+ +
+
Belajar Pengembangan Web
+
Kumpulan artikel ini menyediakan pemula dengan segala yang mereka butuhkan untuk memulai coding situs web sederhana.
+
Pemroses aplikasi web
+
Pemroses aplikasi web menggunakan modern API bersama dengan strategi peningkatan pemrosesan tradisi untuk membuat aplikasi web berbagai perangkat. Aplikasi ini bekerja dimana saja dan menyediakan beberapa fitur yang memberikan keuntungan pengalaman sesama pengguna sebagai aplikasi asli. Kumupulan set dokumen ini dan panduannya memberikan semua yang kalian perlukan untuk mengetahui tentang PAW.
+
+ +

Topik-topik lainnya

+ +
+
Aksesbilitas
+
Situs-situs web aksessibel memungkinkan sebanyak-banyaknya orang dapat menggubakan web, termasuk keterbatasan visual, pendengaran, atau kemampuan lainnya. Kumpulan artikel ini menyediakan informasi mengenai pengembangan web aksessibel.
+
Kinerja Web
+
Kinerja Web merupakan seni untuk memastika aplikasi web dimuat cepat dan responsif untuk interaksi pengguna, gak peduli bandwith pengguna, ukuran layar, jaringan, atau kemampuan perangkat.
+
Keamanan
+
Jangan biarkan situs web atau aplikasi Anda kebocoran data ke penjahat. Gunakan kumpulan artikel ini untuk memastikan proyek Anda aman.
+
WebAssembly
+
WebAssembly adalah jenis kode baru yang dapat dijalankan di peramban web — ini merupakan seperti bahasa assembly low-level dengan format compact binary yang berjalan dengan mendekati kinerja asli dan menyediakan bahasa seperti C/C++ dan Rust dengan target kompasi jadi dapat dijalankan di web.
+
+
+
+ +

Lihat Semua...

diff --git a/files/id/web/javascript/a_re-introduction_to_javascript/index.html b/files/id/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..5b7ef3b14e --- /dev/null +++ b/files/id/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,862 @@ +--- +title: Sebuah pengenalan ulang pada bahasa JavaScript (tutorial JS) +slug: Web/JavaScript/A_re-introduction_to_JavaScript +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +
{{jsSidebar}}
+ +

Pengantar

+ +

Mengapa melakukan pengenalan ulang? Karena bahasa {{Glossary("JavaScript")}} terkenal dengan cap buruk sebagai bahasa pemprograman yang paling sering membuat kesalahpahaman di dunia. Sering kali JavaScript diejek sebagai sebuah mainan (layaknya mobil-mobilan) karena terlihat sederhana, tetapi dibalik kesederhanaannya tersebut, terdapat beberapa fitur yang sangat andal. Saat ini JavaScript digunakan oleh aplikasi-aplikasi terkenal dalam jumlah yang luar biasa banyaknya, memiliki pengetahuan yang mendalam tentang teknologi ini adalah salah satu skill penting bagi para pengembang web atau mobile.

+ +

Ada baiknya kita memulai pengenalan ini dengan mengetahui sekilas gambaran sejarah dari bahasa pemograman ini. JavaScript dibuat pada tahun 1995 oleh Brendan Eich ketika dia menjadi seorang insinyur perangkat lunak di Netscape. JavaScript dirilis bersamaan dengan Netscape 2 di permulaan tahun 1996. Awalnya JavaScript dinamakan LiveScript, tetapi diganti menjadi JavaScript karena  memanfaatkan ketenaran bahasa pemograman Java dari Sun Microsystem, walaupun keduanya memiliki sedikit sekali kesamaan. Hal inilah yang menjadi sumber kebingungan sejak saat itu.

+ +

Beberapa bulan kemudian, Microsoft merilis JScript yang tertanam di dalam Internet Explore 3. Sebagian besar JScript kompatible dan mirip dengan JavaScript. Beberapa bulan setelahnya Netscape mengajukan JavaScript ke  Ecma International, Organisasi Eropa yang melakukan standarisasi sistem informasi dan komunikasi, yang kemudian menghasilkan edisi pertama dari standar {{Glossary("ECMAScript")}} pada tahun itu. Standar ini memperoleh pembaharuan yang signifikan pada ECMAScript edisi ke-3 pada tahun 1999, dan sejak saat itu standar tersebut tidak terlalu banyak mengalami perubahan. Edisi ke-4 ECMAScript diabaikan dengan alasan perbedaan pandangan terhadap kompleksitas bahasa. Beberapa bagian dari edisi ECMAScript ke-4  membentuk dasar ECMAScript edisi ke-5, yang dipublikasi pada tahun 2009 and edisi ECMAScript ke-6 dirilis pada bulan Juni tahun 2015.

+ +
+

Karena lebih familiar, mulai dari sini kita akan mengacu ECMAScript sebagai "JavaScript".

+
+ +

Tidak seperti kebanyakan bahasa pemograman, JavaScript tidak mempunyai konsep input atau output (I/O). Didesain untuk dapat dieksekusi sebagai bahasa scripting pada lingkungan pengguna dan mekanisme komunikasi dengan dunia luar diserahkan kepada lingkungan pengguna. Browser adalah lingkungan pengguna yang sangat umum, tetapi Interpreter JavaScript dapat juga ditemukan ditempat lain, termasuk Adobe Acrobat, Adobe Photshop, SVG images, Yahoo Widget engine, lingkungan server seperti Node.js, database NoSQL  seperti Apache CouchDB, komputer tertanam, lingkungan desktop seperti GNOME (salah satu antarmuka yang paling terkenal pada sustem operasi GNU/Linux), dan masih banyak lagi yang lainnya.
+  

+ +

Ikhtisar

+ +

JavaScript adalah bahasa pemograman dinamis berorientasi objek dengan types dan operator, objek bawaan standar (objek literal),  dan methods. Syntax JavaScript dipengaruhi oleh bahasa Java dan C - sangat banyak struktur dalam bahasa tersebut yang digunakan dalam JavaScript. Perbedaan yang paling mendasar adalah JavaScript tidak mempunyai kelas, melainkan fungsionalitas kelas yang dicapai dengan obyek prototipe (Lebih lanjut tentang ES6 {{jsxref("Classes")}}). Perbedaan utama lainnya adalah fungsi sebagai objek, yaitu fungsi mempunyai kapasitas untuk menahan kode yang dapat dieksekusi dan dilewatkan seperti objek yang lain.

+ +

Mari mulai dengan melihat blok pembangun dari bahasa pemograman: types (tipe-tipe data). Program pada JavaScript memanipulasi nilai dan nilai tersebut termasuk ke dalam sebuah tipe. Beberapa tipe dalam JavaScript adalah:
+  

+ + + +

...ooo, ada lagi {{jsxref("undefined")}} and {{jsxref("null")}} keduanya mempunyai karakteristik yang sedikit ganjil, {{jsxref("Array")}} merupakan objek spesial, {{jsxref("Date")}} dan {{jsxref("RegExp")}} merupakan objek yang dapat digunakan langsung dan untuk lebih tepatnya, fungsi termasuk dalam objek spesial. Jadi, diagramnya kira-kira seperti ini:

+ + + +

Ada beberapa tipe {{jsxref("Error")}} bawaan juga, akan lebih memudahkan jika kita mempelajari terlebih dahulu diagram pertama, bagaimanapun juga kita akan membahas tipe - tipe yang telah dituliskan diatas.

+ +

Numbers

+ +

Menurut spesifikasi, tipe nomer pada JavaScript menggunakan "format IEEE 754 64-bit double-presisi". Hal ini menyebabkan beberapa konsekuensi, diantaranya tidak adanya tipe integer pada JavaScript. Jadi programmer harus agak teliti dengan operasi aritmatika jika sebelumnya berangkat dari C atau Java.
+
+ Perlu juga memperhatikan kasus seperti berikut:

+ +
0.1 + 0.2 == 0.30000000000000004
+
+ +

Dalam praktiknya, nilai integer diperlakukan sebagai int 32-bit, dan beberapa implementasi bahkan menyimpannya demikian (dalam int 32-bit) kecuali diinstruksikan agar nilai tersebut valid sebagai tipe Number namun tidak dalam integer 32-bit. Hal ini mungkin saja penting untuk operasi yang mementingkan ukuran bit.

+ +

Standar operasi aritmatika tersedia, seperti penjumlahan, pengurangan, modulus, dan lain-lain. Ada juga Object bawaan yang kami lupa menyebutkannya di awal disebut {{jsxref("Math")}} yang menyediakan fungsi matematika dan konstan:

+ +
Math.sin(3.5);
+var circumference = Math.PI * (r + r);
+
+ +

Anda dapat mengonversi sebuah string ke integer dengan menggunakan fungsi bawaan  {{jsxref("Global_objeks/parseInt", "parseInt()")}}. Basis konversi dapat ditambahkan sebagai argumen kedua (tidak wajib), namun sebaiknya ditambahkan:

+ +
parseInt("123", 10); // 123
+parseInt("010", 10); // 10
+
+ +

Pada peramban kuno, string yang diawali dengan "0" diasumsikan sebagai octal (radix 8), namun hal ini tidak lagi menjadi masalah sejak 2013 dan seterusnya. Kecuali Anda sudah yakin mengenai format string-nya, Anda akan mendapatkan hasil mengejutkan pada peramban kuno tersebut:

+ +
parseInt("010");  //  8
+parseInt("0x10"); // 16
+
+ +

Di sini, kita melihat fungsi {{jsxref("Global_objeks/parseInt", "parseInt()")}} memperlakukan string pertama sebagai oktal karena diawali dengan "0", dan string kedua sebagai hexadecimal karena diawali dengan "0x". Notasi heksadesimal masih ada; hanya oktal yang telah dihapus.

+ +

If you want to convert a binary number to an integer, just change the base:

+ +
parseInt("11", 2); // 3
+
+ +

Similarly, you can parse floating point numbers using the built-in {{jsxref("Global_objeks/parseFloat", "parseFloat()")}} function. Unlike its {{jsxref("Global_objeks/parseInt", "parseInt()")}} cousin, parseFloat() always uses base 10.

+ +

You can also use the unary + operator to convert values to numbers:

+ +
+ "42";   // 42
++ "010";  // 10
++ "0x10"; // 16
+
+ +

A special value called {{jsxref("NaN")}} (short for "Not a Number") is returned if the string is non-numeric:

+ +
parseInt("hello", 10); // NaN
+
+ +

NaN is toxic: if you provide it as an input to any mathematical operation the result will also be NaN:

+ +
NaN + 5; // NaN
+
+ +

You can test for NaN using the built-in {{jsxref("Global_objeks/isNaN", "isNaN()")}} function:

+ +
isNaN(NaN); // true
+
+ +

JavaScript also has the special values {{jsxref("Infinity")}} and -Infinity:

+ +
 1 / 0; //  Infinity
+-1 / 0; // -Infinity
+
+ +

You can test for Infinity, -Infinity and NaN values using the built-in {{jsxref("Global_objeks/isFinite", "isFinite()")}} function:

+ +
isFinite(1/0); // false
+isFinite(-Infinity); // false
+isFinite(NaN); // false
+
+ +
The {{jsxref("Global_objeks/parseInt", "parseInt()")}} and {{jsxref("Global_objeks/parseFloat", "parseFloat()")}} functions parse a string until they reach a character that isn't valid for the specified number format, then return the number parsed up to that point. However the "+" operator simply converts the string to NaN if there is an invalid character contained within it. Just try parsing the string "10.2abc" with each method by yourself in the console and you'll understand the differences better.
+ +

Strings

+ +

Strings in JavaScript are sequences of Unicode characters. This should be welcome news to anyone who has had to deal with internationalization. More accurately, they are sequences of UTF-16 code units; each code unit is represented by a 16-bit number. Each Unicode character is represented by either 1 or 2 code units.

+ +

If you want to represent a single character, you just use a string consisting of that single character.

+ +

To find the length of a string (in code units), access its length property:

+ +
"hello".length; // 5
+
+ +

There's our first brush with JavaScript objeks! Did we mention that you can use strings like {{jsxref("objek", "objeks", "", 1)}} too? They have {{jsxref("String", "methods", "#Methods", 1)}} as well that allow you to manipulate the string and access information about the string:

+ +
"hello".charAt(0); // "h"
+"hello, world".replace("hello", "goodbye"); // "goodbye, world"
+"hello".toUpperCase(); // "HELLO"
+
+ +

Other types

+ +

JavaScript distinguishes between {{jsxref("null")}}, which is a value that indicates a deliberate non-value (and is only accessible through the null keyword), and {{jsxref("undefined")}}, which is a value of type undefined that indicates an uninitialized value — that is, a value hasn't even been assigned yet. We'll talk about variables later, but in JavaScript it is possible to declare a variable without assigning a value to it. If you do this, the variable's type is undefined. undefined is actually a constant.

+ +

JavaScript has a boolean type, with possible values true and false (both of which are keywords.) Any value can be converted to a boolean according to the following rules:

+ +
    +
  1. false, 0, empty strings (""), NaN, null, and undefined all become false.
    2. +
  2. All other values become true.
    3. +
+ +

You can perform this conversion explicitly using the Boolean() function:

+ +
Boolean("");  // false
+Boolean(234); // true
+
+ +

However, this is rarely necessary, as JavaScript will silently perform this conversion when it expects a boolean, such as in an if statement (see below.) For this reason, we sometimes speak simply of "true values" and "false values," meaning values that become true and false, respectively, when converted to booleans. Alternatively, such values can be called "truthy" and "falsy", respectively.

+ +

Boolean operations such as && (logical and), || (logical or), and ! (logical not) are supported; see below.

+ +

Variables

+ +

New variables in JavaScript are declared using the var keyword:

+ +
var a;
+var name = "simon";
+
+ +

If you declare a variable without assigning any value to it, its type is undefined.

+ +

An important difference between JavaScript and other languages like Java is that in JavaScript, blocks do not have scope; only functions have scope. So if a variable is defined using var in a compound statement (for example inside an if control structure), it will be visible to the entire function. However, starting with ECMAScript Edition 6, let and const declarations allow you to create block-scoped variables.

+ +

Operators

+ +

JavaScript's numeric operators are +, -, *, / and % — which is the remainder operator (which is not the same as modulo.) Values are assigned using =, and there are also compound assignment statements such as += and -=. These extend out to x = x operator y.

+ +
x += 5
+x = x + 5
+
+ +

You can use ++ and -- to increment and decrement respectively. These can be used as prefix or postfix operators.

+ +

The + operator also does string concatenation:

+ +
"hello" + " world"; // "hello world"
+
+ +

If you add a string to a number (or other value) everything is converted in to a string first. This might catch you up:

+ +
"3" + 4 + 5;  // "345"
+ 3 + 4 + "5"; // "75"
+
+ +

Adding an empty string to something is a useful way of converting it to a string itself.

+ +

Comparisons in JavaScript can be made using <, >, <= and >=. These work for both strings and numbers. Equality is a little less straightforward. The double-equals operator performs type coercion if you give it different types, with sometimes interesting results:

+ +
123 == "123"; // true
+1 == true; // true
+
+ +

To avoid type coercion and make sure your comparisons are always accurate, you should always use the triple-equals operator:

+ +
123 === "123"; // false
+1 === true;    // false
+
+ +

There are also != and !== operators.

+ +

JavaScript also has bitwise operations. If you want to use them, they're there.

+ +

Control structures

+ +

JavaScript has a similar set of control structures to other languages in the C family. Conditional statements are supported by if and else; you can chain them together if you like:

+ +
var name = "kittens";
+if (name == "puppies") {
+  name += "!";
+} else if (name == "kittens") {
+  name += "!!";
+} else {
+  name = "!" + name;
+}
+name == "kittens!!"
+
+ +

JavaScript has while loops and do-while loops. The first is good for basic looping; the second for loops where you wish to ensure that the body of the loop is executed at least once:

+ +
while (true) {
+  // an infinite loop!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input))
+
+ +

JavaScript's for loop is the same as that in C and Java: it lets you provide the control information for your loop on a single line.

+ +
for (var i = 0; i < 5; i++) {
+  // Will execute 5 times
+}
+
+ +

The && and || operators use short-circuit logic, which means whether they will execute their second operand is dependent on the first. This is useful for checking for null objeks before accessing their attributes:

+ +
var name = o && o.getName();
+
+ +

Or for setting default values:

+ +
var name = otherName || "default";
+
+ +

JavaScript has a ternary operator for conditional expressions:

+ +
var allowed = (age > 18) ? "yes" : "no";
+
+ +

The switch statement can be used for multiple branches based on a number or string:

+ +
switch(action) {
+  case 'draw':
+    drawIt();
+    break;
+  case 'eat':
+    eatIt();
+    break;
+  default:
+    doNothing();
+}
+
+ +

If you don't add a break statement, execution will "fall through" to the next level. This is very rarely what you want — in fact it's worth specifically labeling deliberate fallthrough with a comment if you really meant it to aid debugging:

+ +
switch(a) {
+  case 1: // fallthrough
+  case 2:
+    eatIt();
+    break;
+  default:
+    doNothing();
+}
+
+ +

The default clause is optional. You can have expressions in both the switch part and the cases if you like; comparisons take place between the two using the === operator:

+ +
switch(1 + 3) {
+  case 2 + 2:
+    yay();
+    break;
+  default:
+    neverhappens();
+}
+
+ +

objeks

+ +

JavaScript objeks can be thought of as simple collections of name-value pairs. As such, they are similar to:

+ + + +

The fact that this data structure is so widely used is a testament to its versatility. Since everything (bar core types) in JavaScript is an objek, any JavaScript program naturally involves a great deal of hash table lookups. It's a good thing they're so fast!

+ +

The "name" part is a JavaScript string, while the value can be any JavaScript value — including more objeks. This allows you to build data structures of arbitrary complexity.

+ +

There are two basic ways to create an empty objek:

+ +
var obj = new objek();
+
+ +

And:

+ +
var obj = {};
+
+ +

These are semantically equivalent; the second is called objek literal syntax, and is more convenient. This syntax is also the core of JSON format and should be preferred at all times.

+ +

objek literal syntax can be used to initialize an objek in its entirety:

+ +
var obj = {
+  name: "Carrot",
+  "for": "Max",
+  details: {
+    color: "orange",
+    size: 12
+  }
+}
+
+ +

Attribute access can be chained together:

+ +
obj.details.color; // orange
+obj["details"]["size"]; // 12
+
+ +

The following example creates an objek prototype, Person, and instance of that prototype, You.

+ +
function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+// Define an objek
+var You = new Person("You", 24);
+// We are creating a new person named "You"
+// (that was the first parameter, and the age..)
+
+ +

Once created, an objek's properties can again be accessed in one of two ways:

+ +
obj.name = "Simon";
+var name = obj.name;
+
+ +

And...

+ +
obj["name"] = "Simon";
+var name = obj["name"];
+
+ +

These are also semantically equivalent. The second method has the advantage that the name of the property is provided as a string, which means it can be calculated at run-time. However, using this method prevents some JavaScript engine and minifier optimizations being applied. It can also be used to set and get properties with names that are reserved words:

+ +
obj.for = "Simon"; // Syntax error, because 'for' is a reserved word
+obj["for"] = "Simon"; // works fine
+
+ +
+

Starting in ECMAScript 5, reserved words may be used as objek property names "in the buff". This means that they don't need to be "clothed" in quotes when defining objek literals. See the ES5 Spec.

+
+ +

For more on objeks and prototypes see: objek.prototype.

+ +

Arrays

+ +

Arrays in JavaScript are actually a special type of objek. They work very much like regular objeks (numerical properties can naturally be accessed only using [] syntax) but they have one magic property called 'length'. This is always one more than the highest index in the array.

+ +

One way of creating arrays is as follows:

+ +
var a = new Array();
+a[0] = "dog";
+a[1] = "cat";
+a[2] = "hen";
+a.length; // 3
+
+ +

A more convenient notation is to use an array literal:

+ +
var a = ["dog", "cat", "hen"];
+a.length; // 3
+
+ +

Note that array.length isn't necessarily the number of items in the array. Consider the following:

+ +
var a = ["dog", "cat", "hen"];
+a[100] = "fox";
+a.length; // 101
+
+ +

Remember — the length of the array is one more than the highest index.

+ +

If you query a non-existent array index, you'll get a value of undefined returned:

+ +
typeof a[90]; // undefined
+
+ +

If you take the above into account, you can iterate over an array using the following:

+ +
for (var i = 0; i < a.length; i++) {
+  // Do something with a[i]
+}
+
+ +

You can iterate over an array using a for...in loop. Note that if someone added new properties to Array.prototype, they will also be iterated over by this loop.  Therefore this method is "not" recommended.

+ +

Another way of iterating over an array that was added with ECMAScript 5 is forEach():

+ +
["dog", "cat", "hen"].forEach(function(currentValue, index, array) {
+  // Do something with currentValue or array[index]
+});
+
+ +

If you want to append an item to an array simply do it like this:

+ +
a.push(item);
+ +

Arrays come with a number of methods. See also the full documentation for array methods.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Method nameDescription
a.toString()Returns a string with the toString() of each element separated by commas.
a.toLocaleString()Returns a string with the toLocaleString() of each element separated by commas.
a.concat(item1[, item2[, ...[, itemN]]])Returns a new array with the items added on to it.
a.join(sep)Converts the array to a string — with values delimited by the sep param
a.pop()Removes and returns the last item.
a.push(item1, ..., itemN)Adds one or more items to the end.
a.reverse()Reverses the array.
a.shift()Removes and returns the first item.
a.slice(start[, end])Returns a sub-array.
a.sort([cmpfn])Takes an optional comparison function.
a.splice(start, delcount[, item1[, ...[, itemN]]])Lets you modify an array by deleting a section and replacing it with more items.
a.unshift(item1[, item2[, ...[, itemN]]])Prepends items to the start of the array.
+ +

Functions

+ +

Along with objeks, functions are the core component in understanding JavaScript. The most basic function couldn't be much simpler:

+ +
function add(x, y) {
+  var total = x + y;
+  return total;
+}
+
+ +

This demonstrates a basic function. A JavaScript function can take 0 or more named parameters. The function body can contain as many statements as you like, and can declare its own variables which are local to that function. The return statement can be used to return a value at any time, terminating the function. If no return statement is used (or an empty return with no value), JavaScript returns undefined.

+ +

The named parameters turn out to be more like guidelines than anything else. You can call a function without passing the parameters it expects, in which case they will be set to undefined.

+ +
add(); // NaN
+// You can't perform addition on undefined
+
+ +

You can also pass in more arguments than the function is expecting:

+ +
add(2, 3, 4); // 5
+// added the first two; 4 was ignored
+
+ +

That may seem a little silly, but functions have access to an additional variable inside their body called arguments, which is an array-like objek holding all of the values passed to the function. Let's re-write the add function to take as many values as we want:

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

That's really not any more useful than writing 2 + 3 + 4 + 5 though. Let's create an averaging function:

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

This is pretty useful, but introduces a new problem. The avg() function takes a comma separated list of arguments — but what if you want to find the average of an array? You could just rewrite the function as follows:

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

But it would be nice to be able to reuse the function that we've already created. Luckily, JavaScript lets you call a function and call it with an arbitrary array of arguments, using the {{jsxref("Function.apply", "apply()")}} method of any function objek.

+ +
avg.apply(null, [2, 3, 4, 5]); // 3.5
+
+ +

The second argument to apply() is the array to use as arguments; the first will be discussed later on. This emphasizes the fact that functions are objeks too.

+ +

JavaScript lets you create anonymous functions.

+ +
var avg = function() {
+  var sum = 0;
+  for (var i = 0, j = arguments.length; i < j; i++) {
+    sum += arguments[i];
+  }
+  return sum / arguments.length;
+};
+
+ +

This is semantically equivalent to the function avg() form. It's extremely powerful, as it lets you put a full function definition anywhere that you would normally put an expression. This enables all sorts of clever tricks. Here's a way of "hiding" some local variables — like block scope in C:

+ +
var a = 1;
+var b = 2;
+
+(function() {
+  var b = 3;
+  a += b;
+})();
+
+a; // 4
+b; // 2
+
+ +

JavaScript allows you to call functions recursively. This is particularly useful for dealing with tree structures, such as those found in the browser DOM.

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

This highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? JavaScript lets you name function expressions for this. You can use named IIFEs (Immediately Invoked Function Expressions) as shown below:

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

The name provided to a function expression as above is only available to the function's own scope. This allows more optimizations to be done by the engine and results in more readable code. The name also shows up in the debugger and some stack traces, which can save you time when debugging.

+ +

Note that JavaScript functions are themselves objeks — like everything else in JavaScript — and you can add or change properties on them just like we've seen earlier in the objeks section.

+ +

Custom objeks

+ +
For a more detailed discussion of objek-oriented programming in JavaScript, see Introduction to objek Oriented JavaScript.
+ +

In classic objek Oriented Programming, objeks are collections of data and methods that operate on that data. JavaScript is a prototype-based language that contains no class statement, as you'd find in C++ or Java (this is sometimes confusing for programmers accustomed to languages with a class statement.) Instead, JavaScript uses functions as classes. Let's consider a person objek with first and last name fields. There are two ways in which the name might be displayed: as "first last" or as "last, first". Using the functions and objeks that we've discussed previously, we could display the data like this:

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

This works, but it's pretty ugly. You end up with dozens of functions in your global namespace. What we really need is a way to attach a function to an objek. Since functions are objeks, this is easy:

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

There's something here we haven't seen before: the this keyword. Used inside a function, this refers to the current objek. What that actually means is specified by the way in which you called that function. If you called it using dot notation or bracket notation on an objek, that objek becomes this. If dot notation wasn't used for the call, this refers to the global objek.

+ +

Note that this is a frequent cause of mistakes. For example:

+ +
s = makePerson("Simon", "Willison");
+var fullName = s.fullName;
+fullName(); // undefined undefined
+
+ +

When we call fullName() alone, without using s.fullName(), this is bound to the global objek. Since there are no global variables called first or last we get undefined for each one.

+ +

We can take advantage of the this keyword to improve our makePerson function:

+ +
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");
+
+ +

We have introduced another keyword: new. new is strongly related to this. It creates a brand new empty objek, and then calls the function specified, with this set to that new objek. Notice though that the function specified with this does not return a value but merely modifies the this objek. It's new that returns the this objek to the calling site. Functions that are designed to be called by new are called constructor functions. Common practice is to capitalize these functions as a reminder to call them with new.

+ +

The improved function still has the same pitfall with calling fullName() alone.

+ +

Our person objeks are getting better, but there are still some ugly edges to them. Every time we create a person objek we are creating two brand new function objeks within it — wouldn't it be better if this code was shared?

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

That's better: we are creating the method functions only once, and assigning references to them inside the constructor. Can we do any better than that? The answer is yes:

+ +
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 is an objek shared by all instances of Person. It forms part of a lookup chain (that has a special name, "prototype chain"): any time you attempt to access a property of Person that isn't set, JavaScript will check Person.prototype to see if that property exists there instead. As a result, anything assigned to Person.prototype becomes available to all instances of that constructor via the this objek.

+ +

This is an incredibly powerful tool. JavaScript lets you modify something's prototype at any time in your program, which means you can add extra methods to existing objeks at runtime:

+ +
s = new Person("Simon", "Willison");
+s.firstNameCaps(); // TypeError on line 1: s.firstNameCaps is not a function
+
+Person.prototype.firstNameCaps = function firstNameCaps() {
+  return this.first.toUpperCase()
+};
+s.firstNameCaps(); // "SIMON"
+
+ +

Interestingly, you can also add things to the prototype of built-in JavaScript objeks. Let's add a method to String that returns that string in reverse:

+ +
var s = "Simon";
+s.reversed(); // TypeError on line 1: s.reversed is not a function
+
+String.prototype.reversed = function reversed() {
+  var r = "";
+  for (var i = this.length - 1; i >= 0; i--) {
+    r += this[i];
+  }
+  return r;
+};
+
+s.reversed(); // nomiS
+
+ +

Our new method even works on string literals!

+ +
"This can now be reversed".reversed(); // desrever eb won nac sihT
+
+ +

As mentioned before, the prototype forms part of a chain. The root of that chain is objek.prototype, whose methods include toString() — it is this method that is called when you try to represent an objek as a string. This is useful for debugging our Person objeks:

+ +
var s = new Person("Simon", "Willison");
+s; // [objek objek]
+
+Person.prototype.toString = function() {
+  return '<Person: ' + this.fullName() + '>';
+}
+
+s.toString(); // "<Person: Simon Willison>"
+
+ +

Remember how avg.apply() had a null first argument? We can revisit that now. The first argument to apply() is the objek that should be treated as 'this'. For example, here's a trivial implementation of new:

+ +
function trivialNew(constructor, ...args) {
+  var o = {}; // Create an objek
+  constructor.apply(o, args);
+  return o;
+}
+
+ +

This isn't an exact replica of new as it doesn't set up the prototype chain (it would be difficult to illustrate). This is not something you use very often, but it's useful to know about. In this snippet, ...args (including the ellipsis) is called the "rest arguments" — as the name implies, this contains the rest of the arguments.

+ +

Calling

+ +
var bill = trivialNew(Person, "William", "Orange");
+ +

is therefore almost equivalent to

+ +
var bill = new Person("William", "Orange");
+ +

apply() has a sister function named call, which again lets you set this but takes an expanded argument list as opposed to an 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

+ +

JavaScript function declarations are allowed inside other functions. We've seen this once before, with an earlier makePerson() function. An important detail of nested functions in JavaScript is that they can access variables in their parent function's scope:

+ +
function betterExampleNeeded() {
+  var a = 1;
+  function oneMoreThanA() {
+    return a + 1;
+  }
+  return oneMoreThanA();
+}
+
+ +

This provides a great deal of utility in writing more maintainable code. If a function relies on one or two other functions that are not useful to any other part of your code, you can nest those utility functions inside the function that will be called from elsewhere. This keeps the number of functions that are in the global scope down, which is always a good thing.

+ +

This is also a great counter to the lure of global variables. When writing complex code it is often tempting to use global variables to share values between multiple functions — which leads to code that is hard to maintain. Nested functions can share variables in their parent, so you can use that mechanism to couple functions together when it makes sense without polluting your global namespace — "local globals" if you like. This technique should be used with caution, but it's a useful ability to have.

+ +

Closures

+ +

This leads us to one of the most powerful abstractions that JavaScript has to offer — but also the most potentially confusing. What does this do?

+ +
function makeAdder(a) {
+  return function(b) {
+    return a + b;
+  };
+}
+var x = makeAdder(5);
+var y = makeAdder(20);
+x(6); // ?
+y(7); // ?
+
+ +

The name of the makeAdder() function should give it away: it creates a new 'adder' functions, which when called with one argument adds it to the argument that they were created with.

+ +

What's happening here is pretty much the same as was happening with the inner functions earlier on: a function defined inside another function has access to the outer function's variables. The only difference here is that the outer function has returned, and hence common sense would seem to dictate that its local variables no longer exist. But they do still exist — otherwise the adder functions would be unable to work. What's more, there are two different "copies" of makeAdder()'s local variables — one in which a is 5 and one in which a is 20. So the result of those function calls is as follows:

+ +
x(6); // returns 11
+y(7); // returns 27
+
+ +

Here's what's actually happening. Whenever JavaScript executes a function, a 'scope' objek is created to hold the local variables created within that function. It is initialized with any variables passed in as function parameters. This is similar to the global objek that all global variables and functions live in, but with a couple of important differences: firstly, a brand new scope objek is created every time a function starts executing, and secondly, unlike the global objek (which is accessible as this and in browsers as window) these scope objeks cannot be directly accessed from your JavaScript code. There is no mechanism for iterating over the properties of the current scope objek, for example.

+ +

So when makeAdder() is called, a scope objek is created with one property: a, which is the argument passed to the makeAdder() function. makeAdder() then returns a newly created function. Normally JavaScript's garbage collector would clean up the scope objek created for makeAdder() at this point, but the returned function maintains a reference back to that scope objek. As a result, the scope objek will not be garbage collected until there are no more references to the function objek that makeAdder() returned.

+ +

Scope objeks form a chain called the scope chain, similar to the prototype chain used by JavaScript's objek system.

+ +

A closure is the combination of a function and the scope objek in which it was created. Closures let you save state — as such, they can often be used in place of objeks. You can find several excellent introductions to closures.

diff --git a/files/id/web/javascript/data_structures/index.html b/files/id/web/javascript/data_structures/index.html new file mode 100644 index 0000000000..3521bbc640 --- /dev/null +++ b/files/id/web/javascript/data_structures/index.html @@ -0,0 +1,267 @@ +--- +title: JavaScript data types and data structures +slug: Web/JavaScript/Data_structures +tags: + - JavaScript + - Tipe +translation_of: Web/JavaScript/Data_structures +--- +

   {{jsSidebar("More")}}

+ +

Semua bahasa pemrograman memiliki struktur data bawaan, namun hal tersebut sering dijumpai berbeda antara satu bahasa dengan bahasa lainya. Artikel ini mencoba untuk membuat daftar struktur data bawaan yang tersedia di JavaScript dan sifat-sifat apa saja yang dimiliki. Struktur data bawaan dapat digunakan untuk membangun struktur data lainnya. Bila memungkinkan, perbandingan dengan bahasa lainya akan diambil.

+ +

Dynamic typing

+ +

JavaScript adalah salah satu bahasa pemrograman yang tidak mengutamakan tipe data. Tidak perlu mendeklarasikan jenis data dari suatu variabel setiap saat. Tipe data akan dideklarasikan secara otomatis diawal program dijalankan. Dengan kata lain memungkinkan untuk menggunakan nama peubah yang sama dengan jenis data yang berbeda:

+ +
var foo = 42;    // foo saat ini adalah angka
+foo     = 'bar'; // foo saat ini adalah string
+foo     = true;  // foo saat ini adalah boolean
+
+ +

Tipe Data

+ +

Standar ECMAScript terakhir menjelaskan tujuh tipe data:

+ + + +

Nilai Primitif

+ +

Semua tipe kecuali objek menentukan nilai tetap (nilai, yang tidak dapat diubah). Misalnya dan tidak seperti C, Strings tidak dapat diubah. Di JavaScript, string termasuk sebagai nilai primitif.

+ +

Undefined

+ +

Variabel yang nilainya tidak ditetapkan (tidak diisi) memiliki nilai undefined. Lihat {{jsxref("undefined")}} dan {{Glossary("Undefined")}} untuk lebih lanjut.

+ +

Null

+ +

Null hanya memiliki sebuah nilai dan terdiri nilai itu sendiri: null. Lihat {{jsxref("null")}} dan {{Glossary("Null")}} untuk lebih lanjut.

+ +

Boolean

+ +

Merepresentasikan entitas logika dan hanya memiliki dua nilai atau kemungkinan, yaitu: true dan false.

+ +

Number

+ +

Berdasarkan standar ECMAScript, dikatakan bahwa hanya ada satu tipe nomor, yaitu double-precision 64-bit binary format IEEE 754 value (nomor diantara -(253 -1) dan (253 -1) ). Tidak ada penomoran bilangan bulat yang spesifik. Sebagai tambahan untuk menampilkan bilangan floating-point (bilangan pecahan float), tipe nomor memiliki tiga simbol, yaitu: +Infinity, -Infinity, dan NaN (Not-a-Number)

+ +

Untuk memeriksa nomor paling besar atau paling kecil diantara +/-Infinity diatas, dapat menggunakan konstanta {{jsxref("Number.MAX_VALUE")}} atau {{jsxref("Number.MIN_VALUE")}}. Semenjak standar ECMAScript 2015, untuk memeriksa nilai double-precision floating-point dapat menggunakan {{jsxref("Number.isSafeInteger()")}} yang setara dengan {{jsxref("Number.MAX_SAFE_INTEGER")}} dan {{jsxref("Number.MIN_SAFE_INTEGER")}}. Lebih dari batas tersebut, bilangan bulat di JavaScript tidak aman dan akan digantikan dengan perkiraan double-precision floating-point.

+ +

Angka 0 merupakan bilangan bulat integer yang memiliki dua representasi, yaitu +0 dan -0 dan pada kenyataannya tidak berpengaruh dalam perhitungan karena jika keduanya dibandingkan akan bernilai benar: +0 === -0 //-->(true) dan akan diberitahu jika pembagi merupakan nol:

+ +
> 42 / +0
+Infinity
+> 42 / -0
+-Infinity
+
+ +

Meskipun angka sering hanya mewakili nilainya, JavaScript menyediakan beberapa operator biner (bitwise) yang dapat digunakan untuk bit masking, yaitu mewakili beberapa nilai Boolean dalam sebuah nomor. Namun, ini biasanya dianggap sebagai praktik yang buruk, karena JavaScript menawarkan cara lain untuk mewakili satu set Boolean (seperti array Boolean atau objek dengan nilai Boolean yang ditetapkan untuk properti bernama). Bit masking juga cenderung membuat kode lebih sulit dibaca, dipahami, dan dirawat. Mungkin diperlukan untuk digunakan di lingkungan yang sangat terbatas, seperti saat mencoba mengatasi kompresi atau dalam kasus ekstrim ketika setiap bit di atas jumlah jaringan. Teknik ini hanya harus dipertimbangkan ketika tidak ada cara terakhir yang dapat diambil untuk mengoptimalkan ukuran.

+ +

String

+ +

Tipe {{jsxref("Global_Objects/String", "String")}} digunakan untuk menampilkan data tulisan (teks). Terdiri dari beberapa bagian karakter yang dibentuk dari bilangan 16-bit unsigned integer. Setiap karakter pada String menempati posisi pada String. Karakter pertama pada string berindeks 0, kemudian 1, lalu 2, ..., hingga karakter terakhir dari String. Panjang String merupakan jumlah karakter pembentuknya.

+ +

Berbeda dengan bahasa pemrogramman C, JavaScript string tidak dapat diubah. Dengan kata lain sekali String dibuat, maka tidak mungkin untuk mengubahnya. Namun memungkinkan untuk membuat String baru berdasarkan operasi string sebelumnya. Contoh:

+ + + +

Hati-hati pada "stringly-typing" kode!

+ +

String dapat digunakan untuk menampilkan data kompleks (rumit). Keuntungan untuk jangka pendek:

+ + + +

Dengan adanya konversi, string dapat menampung semua tipe data, dan hentu bukan hal yang baik. Sebagai contoh, dengan separator (pemisah), string dapat meniru list (pada JavaScript disebut sebagai array). Sayangnya saat pemisah digunakan di salahsatu bagian "list" maka strukturnya akan rusak. Escape character menjadi salahsatu cara untuk menangani hal tersebut. Hal tersebut membutuhkan konversi mahal dan hanya menambah beban pemeliharaan.

+ +

Gunakan string untuk data teks. Parse string dan gunakan abstraksi yang tepat jika untuk menampilkan data yang rumit.

+ +

Symbol

+ +

Baru diperkenalkan sejak JavaScript ECMAScript 2015. Simbol memiliki ciri khas (unik) dan nilai primitif tetap (immutable) serta dapat digunakan sebagai kunci dari properti sebuah Objek. Pada beberapa bahasa pemrogramman, Simbol disebut sebagai atom. Untuk lebih jelasnya, lihat pustaka {{Glossary("Symbol")}} dan pembungkus {{jsxref("Symbol")}} objek di JavaScript.

+ +

Objek

+ +

Pada ilmu komputer, objek adalah nilai pada memori yang dimungkinkan dialamatkan oleh {{Glossary("Identifier", "identifier")}}.

+ +

Properties

+ +

Pada JavaScript, objek dapat digambarkan sebagai kumpulan properti. Dengan adanya sintaks objek literal, set properti dibatasi; kemudian properti dapat ditambahkan atau dihapus. Nilai dari properti dapat berupa "nilai" atau tipe data lain, termasuk objek itu sendiri, yang memungkinkan untuk membangun struktur data yang rumit. Properti diidentifikasi menggunakan nilai kunci. Kunci dapat berupa String ataupun Simbol.

+ +

Terdapat dua tipe objek properti yang memiliki attribut: data property dan accessor property.

+ +

Data Property

+ +

mengkaitkan kunci dengan nilai dan memiliki beberapa atribut:

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributTipeKeteranganNilai bawaan
[[Value]]Semua jenis JavaScriptNilai yang diterima dengan mengambil akses properti.undefined
[[Writable]]BooleanJika false, maka propeti [[Value]] tidak dapat diubah.false
[[Enumerable]]BooleanJika true, properti dapat terbaca saat for...in loops. Lihat juga Enumerability and ownership of propertiesfalse
[[Configurable]]BooleanJika false, properti tidak dapat dihapus, tidak dapat diubah menjadi aksesor propeti, juga atribut selain [[Value]] dan [[Writable]] tidak dapat diubah.false
+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Atribut usang (as of ECMAScript 3, renamed in ECMAScript 5)
AtributTipeKeterangan
Read-onlyBooleanDiubah di ES5 menjadi atribut [[Writable]].
DontEnumBooleanDiubah di ES5 menjadi atribut [[Enumerable]].
DontDeleteBooleanDiubah di ES5 menjadi atribut [[Configurable]].
+ +

 

+ +
+

Note: Biasanya atribut digunakan oleh JavaScript engine, sehingga tidak dapat diakses secara langsung (lihat Object.defineProperty()). Itulah mengapa atribut ditulis dengan kurung siku ganda.

+
+ +

 

+ +

"Normal" objects, and functions

+ +

A JavaScript object is a mapping between keys and values. Keys are strings (or {{jsxref("Symbol")}}s) and values can be anything. This makes objects a natural fit for hashmaps.

+ +

Functions are regular objects with the additional capability of being callable.

+ +

Dates

+ +

When representing dates, the best choice is to use the built-in Date utility in JavaScript.

+ +

Indexed collections: Arrays and typed Arrays

+ +

Arrays are regular objects for which there is a particular relationship between integer-key-ed properties and the 'length' property. Additionally, arrays inherit from Array.prototype which provides to them a handful of convenient methods to manipulate arrays. For example, indexOf (searching a value in the array) or push(adding an element to the array), etc. This makes Arrays a perfect candidate to represent lists or sets.

+ +

Typed Arrays are new to JavaScript with ECMAScript 2015 and present an array-like view of an underlying binary data buffer. The following table helps you to find the equivalent C data types:

+ +

{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}

+ +

Keyed collections: Maps, Sets, WeakMaps, WeakSets

+ +

These data structures take object references as keys and are introduced in ECMAScript Edition 6. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object. The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.

+ +

One could implement Maps and Sets in pure ECMAScript 5. However, since objects cannot be compared (in the sense of "less than" for instance), look-up performance would necessarily be linear. Native implementations of them (including WeakMaps) can have look-up performance that is approximately logarithmic to constant time.

+ +

Usually, to bind data to a DOM node, one could set properties directly on the object or use data-* attributes. This has the downside that the data is available to any script running in the same context. Maps and WeakMaps make it easy to privately bind data to an object.

+ +

Structured data: JSONBagian

+ +

JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript but used by many programming languages. JSON builds universal data structures. See {{Glossary("JSON")}} and {{jsxref("JSON")}} for more details.

+ +

More objects in the standard libraryBagian

+ +

JavaScript has a standard library of built-in objects. Please have a look at the referenceto find out about more objects.

+ +

Determining types using the typeofoperator

+ +

The typeof operator can help you to find the type of your variable. Please read the reference page for more details and edge cases.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-8', 'Types')}}{{Spec2('ES5.1')}} 
{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ESDraft')}} 
+ +

See also

+ + + +

 

+ +

 

diff --git a/files/id/web/javascript/index.html b/files/id/web/javascript/index.html new file mode 100644 index 0000000000..bfc6233ce4 --- /dev/null +++ b/files/id/web/javascript/index.html @@ -0,0 +1,116 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - JavaScript + - belajar +translation_of: Web/JavaScript +--- +
{{JsSidebar}}
+ +

JavaScript (JS) sangat ringan, terinterpretasi, bahasa pemrogramman dengan first-class functions. Umum dikenal sebagai bahasa scripting untuk halaman web, Banyak lingkungan non-browser juga menggunakan javascript, seperti node.js dan Apache CouchDB. JS merupakan prototype-based, multi-paradigm, bahasa scripting dinamis, medukung object-oriented, diperlukan, dan declarative (mis. functional programming) styles. Baca lebih lanjut about JavaScript.

+ +

Bagian situs ini didedikasikan untuk bahasa javascript dan bukan bagian yang spesifik dengan halaman web atau lingkungan host lain. Untuk informasi tentang {{Glossary("API","APIs")}} yang spesifik untuk halaman web, Lihat Web APIs dan DOM.

+ +

Standar untuk JavaScript adalah ECMAScript. Seperti pada 2012, semua modern browsers mendukung ECMAScript 5.1. Browser lama mendukung setidaknya  ECMAScript 3. Juni 17, 2015, ECMA International mempublikasikan versi major keenam dari ECMAScript, yang secara ofisial disebut ECMAScript 2015, dan umumnya dikaitkan sebagai ECMAScript 6 atau ES6. Sejak ketika standar ECMAScript pada siklus rilis tahunan. Dokumentasi ini mengacu pada draft versi terbaru, saat ini ECMAScript 2018.

+ +

Jangan keliru antara JavaScript dengan Bahasa pemrograman java. Keduanya "Java" dan "JavaScript" adalah merek dagang dan merek ini terdaftar oleh Oracle di U.S. dan negara lainnya. Namun, kedua bahasa pemrograman tersebut memiliki sintaks, struktur, dan penggunaan yang berbeda.

+ +
+
+

Tutorial

+ +

Belajar cara menulis program di javascript dengan paduan dan tutorial.

+ +

Untuk Pemula

+ +

Pergilah ke topik Area Pembelajaran JavaScript kami jika Anda ingin belajar JavaScript dan belum memiliki pengalaman dari pemrograman JavaScript. Tersedia modul lengkap sebagai berikut:

+ +

Langkah pertama JavaScript
+      Jawaban beberapa pertanyaan mendasar seperti "apa itu JavaScript?", "Seperti apa tampilannya?", Dan "apa yang bisa dilakukan?", Bersama mendiskusikan fitur utama JavaScript seperti variabel, string, angka dan array.

+ +

Bangunan Blok JavaScript
+     Lanjutan jangkauan dari fitur dasar kunci JavaScript, arahkan perhatian pada jenis blok kode yang biasa ditemukan seperti statement kondisional, loop, fungsi, dan events.

+ +

Perkenalan Objek JavaScript
+      Sifat JavaScript yang berorientasi objek penting untuk dipahami jika Anda ingin melangkah lebih jauh dengan pengetahuan Anda tentang bahasanya dan menulis kode yang lebih efisien, oleh karena itu kami menyediakan modul ini untuk membantu Anda.

+ +

Pengantar

+ +
+
Paduan JavaScript
+
Jika anda baru mengenal javascript, paduan ini akan menuntun anda belajar.
+
Ikhtisar Teknologi JavaScript
+
Pengantar javascript pada lingkungan web browser.
+
Pengantar JavaScript Berbasis Objek
+
Pengantar pada konsep dari bahasa berorientasi object di JavaScript.
+
+ +

Menengah

+ +
+
Mengenal kembali JavaScript
+
Gambaran bagi mereka yang berfikir mengetahui tentang JavaScript.
+
+ +
+
Struktur data JavaScript
+
Gambaran struktur data yang tersedia di JavaScript.
+
Perbandingan kesetaraan dan kesamaan
+
JavaScript  menyediakan tiga operasi perbandingan yang berbeda: perbandingan stric ===, perbandingan loggar menggunakan ==, dan method {{jsxref("Global_Objects/Object/is", "Object.is()")}}.
+
+ +

Lanjut

+ +
+
Pewarisan dan rantai purwarupa
+
Menjelaskan tentang kesalah-pahaman dan meremehkan yang terjadi pada  pewarisan berbasis purwarupa.
+
Mode Strict
+
Mode strict mendefinisikan bahwa anda tidak dapat menggunakan variabel sebelum menginisialisasinya. Ini bentuk batasan dari varian ECMAScript 5, berguna untuk performa yang lebih cepat dan debuging yang lebih mudah.
+
JavaScript typed arrays
+
JavaScript typed arrays menyediakan mekanisme untuk mengakses data binari mentah(raw).
+
Pengelolaan Memory
+
Siklus memori dan garbage collection di JavaScript.
+
Model konkurensi dan Event Loop
+
JavaScript memiliki model konkurensi berbasis pada "event loop".
+
+
+ +
+

Referensi

+ +

Jelajahi dokumentasi Referensi javaScript.

+ +
+
Standard objects
+
Mencari tahu tentang standarbuilt-in objects {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}},{{jsxref("RegExp")}} , {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} , {{jsxref("WeakSet")}}, dan lainnya.
+
Ekspresi dan operator
+
Belajar tentang cara kerja operator {{jsxref("Operators/instanceof", "instanceof")}},  {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}},  operator precedence, dan banyak lagi.
+
Statemen dan pendeklarasian
+
Belajar cara menggunakan {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, dan statement Javascript lain dan juga kerja keywords.
+
 Fungsi
+
Belajar bagaimana menggunakan fugsi untuk digunakan di aplikasi anda.
+
+ +

Alat & sumber

+ +

Alat yang dapat membantu anda menulis dan mendebug kode JavaScript.

+ +
+
Firefox Developer Tools
+
Scratchpad, Web Console, JavaScript Profiler, Debugger, dan lainnya.
+
Firebug
+
Edit, debug, dan melihat CSS, HTML, juga JavaScript langsung di setiap halaman web.
+
JavaScript Shells
+
JavaScript shell memungkinkan anda untuk mencoba kode snippet JavaScript.
+
TogetherJS
+
Mempermudah kolaborasi.
+
Stack Overflow
+
Bertanya di Stack Overflow dengan tag "JavaScript".
+
Versi JavaScript dan catatan release
+
Jelajahi sejarah fitur JavaScript dan status implementasi.
+
JSFiddle
+
Edit JavaScript, CSS, HTML dan lihat secara langsung. Gunakan sumber dari luar dan berkolaborasi dengan tim anda secara online.
+
+
+
diff --git a/files/id/web/javascript/inheritance_dan_prototype_chain/index.html b/files/id/web/javascript/inheritance_dan_prototype_chain/index.html new file mode 100644 index 0000000000..49a0100ed8 --- /dev/null +++ b/files/id/web/javascript/inheritance_dan_prototype_chain/index.html @@ -0,0 +1,304 @@ +--- +title: Inheritance dan prototype chain +slug: Web/JavaScript/Inheritance_dan_prototype_chain +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +
{{jsSidebar("Advanced")}}
+ +

JavaScript sedikit membingungkan bagi pengembang yang berpengalaman di pemrograman berbasis class (seperti java dan C++), sebagai bahasa dinamis dan tidak mendukung implementasi class lihat( keyword class dikenalkan pada ES2015, namun terkesan berlebihan, JavaScript merupakan bahasa berbasis prototype).

+ +

Ketika menggunakan inheritance, JavaScript hanya memiliki satu construct: objek. Setiap objek memiliki sebuah private property ( berkenaan tentang [[Prototype]] ) yang memegang jalinan ke objek lain yang memanggil prototype tersebut. Prototype objek tersebut memiliki prototype sendiri, dan seterusnya hingga objek mencapai prototipe null. Dengan definisi, null tidak lagi memiliki prototype, dan berperan sebagai hubungan terakhir dari prototype chain.

+ +

Hampir seluruh objek pada JavaScript merupakan instance dari {{jsxref("Object")}} dimana berada di atas prototype chain.

+ +

Meskipun hal ini sering dianggap sebagai salah satu kelemahan JavaScript, model Inheritance prototype sebenarnya lebih hebat daripada model klasiknya. Hal ini, misalnya, cukup sepele untuk membangun model klasik di atas model prototipal.

+ +

Inheritance dengan prototype chain

+ +

Meng-Inheriting properti

+ +

JavaScript objects are dynamic "bags" of properties (referred to as own properties). JavaScript objects have a link to a prototype object. When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.

+ +
+

Following the ECMAScript standard, the notation someObject.[[Prototype]] is used to designate the prototype of someObject. Since ECMAScript 2015, the [[Prototype]] is accessed using the accessors {{jsxref("Object.getPrototypeOf()")}} and {{jsxref("Object.setPrototypeOf()")}}. This is equivalent to the JavaScript property __proto__ which is non-standard but de-facto implemented by many browsers.

+ +

It should not be confused with the func.prototype property of functions, which instead specifies the [[Prototype]] to be assigned to all instances of objects created by the given function when used as a constructor. The Object.prototype property represents the {{jsxref("Object")}} prototype object.

+
+ +

Here is what happens when trying to access a property:

+ +
// Let's assume we have object o, with its own properties a and b:
+// {a: 1, b: 2}
+// o.[[Prototype]] has properties b and c:
+// {b: 3, c: 4}
+// Finally, o.[[Prototype]].[[Prototype]] is null.
+// This is the end of the prototype chain, as null,
+// by definition, has no [[Prototype]].
+// Thus, the full prototype chain looks like:
+// {a: 1, b: 2} ---> {b: 3, c: 4} ---> null
+
+console.log(o.a); // 1
+// Is there an 'a' own property on o? Yes, and its value is 1.
+
+console.log(o.b); // 2
+// Is there a 'b' own property on o? Yes, and its value is 2.
+// The prototype also has a 'b' property, but it's not visited.
+// This is called "property shadowing."
+
+console.log(o.c); // 4
+// Is there a 'c' own property on o? No, check its prototype.
+// Is there a 'c' own property on o.[[Prototype]]? Yes, its value is 4.
+
+console.log(o.d); // undefined
+// Is there a 'd' own property on o? No, check its prototype.
+// Is there a 'd' own property on o.[[Prototype]]? No, check its prototype.
+// o.[[Prototype]].[[Prototype]] is null, stop searching,
+// no property found, return undefined.
+
+ +

Setting a property to an object creates an own property. The only exception to the getting and setting behavior rules is when there is an inherited property with a getter or a setter.

+ +

Inheriting "methods"

+ +

JavaScript does not have "methods" in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property, including property shadowing as shown above (in this case, a form of method overriding).

+ +

When an inherited function is executed, the value of this points to the inheriting object, not to the prototype object where the function is an own property.

+ +
var o = {
+  a: 2,
+  m: function() {
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// When calling o.m in this case, 'this' refers to o
+
+var p = Object.create(o);
+// p is an object that inherits from o
+
+p.a = 4; // creates an own property 'a' on p
+console.log(p.m()); // 5
+// when p.m is called, 'this' refers to p.
+// So when p inherits the function m of o,
+// 'this.a' means p.a, the own property 'a' of p
+
+ +

Different ways to create objects and the resulting prototype chain

+ +

Objects created with syntax constructs

+ +
var o = {a: 1};
+
+// The newly created object o has Object.prototype as its [[Prototype]]
+// o has no own property named 'hasOwnProperty'
+// hasOwnProperty is an own property of Object.prototype.
+// So o inherits hasOwnProperty from Object.prototype
+// Object.prototype has null as its prototype.
+// o ---> Object.prototype ---> null
+
+var b = ['yo', 'whadup', '?'];
+
+// Arrays inherit from Array.prototype
+// (which has methods indexOf, forEach, etc.)
+// The prototype chain looks like:
+// b ---> Array.prototype ---> Object.prototype ---> null
+
+function f() {
+  return 2;
+}
+
+// Functions inherit from Function.prototype
+// (which has methods call, bind, etc.)
+// f ---> Function.prototype ---> Object.prototype ---> null
+
+ +

With a constructor

+ +

A "constructor" in JavaScript is "just" a function that happens to be called with the new operator.

+ +
function Graph() {
+  this.vertices = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v) {
+    this.vertices.push(v);
+  }
+};
+
+var g = new Graph();
+// g is an object with own properties 'vertices' and 'edges'.
+// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed.
+
+ +

With Object.create

+ +

ECMAScript 5 introduced a new method: {{jsxref("Object.create()")}}. Calling this method creates a new object. The prototype of this object is the first argument of the function:

+ +
var a = {a: 1};
+// a ---> Object.prototype ---> null
+
+var b = Object.create(a);
+// b ---> a ---> Object.prototype ---> null
+console.log(b.a); // 1 (inherited)
+
+var c = Object.create(b);
+// c ---> b ---> a ---> Object.prototype ---> null
+
+var d = Object.create(null);
+// d ---> null
+console.log(d.hasOwnProperty);
+// undefined, because d doesn't inherit from Object.prototype
+
+ +
+

With the class keyword

+ +

ECMAScript 2015 introduced a new set of keywords implementing classes. Although these constructs look like those familiar to developers of class-based languages, they are not the same. JavaScript remains prototype-based. The new keywords include {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.

+ +
'use strict';
+
+class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(sideLength) {
+    super(sideLength, sideLength);
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set sideLength(newLength) {
+    this.height = newLength;
+    this.width = newLength;
+  }
+}
+
+var square = new Square(2);
+
+ +

Performance

+ +

The lookup time for properties that are high up on the prototype chain can have a negative impact on performance, and this may be significant in code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.

+ +

Also, when iterating over the properties of an object, every enumerable property that is on the prototype chain will be enumerated.To check whether an object has a property defined on itself and not somewhere on its prototype chain, it is necessary to use the hasOwnProperty method which all objects inherit from Object.prototype. To give you a concrete example, let's take the above graph example code to illustrate it:

+ +
console.log(g.hasOwnProperty('vertices'));
+// true
+
+console.log(g.hasOwnProperty('nope'));
+// false
+
+console.log(g.hasOwnProperty('addVertex'));
+// false
+
+console.log(g.__proto__.hasOwnProperty('addVertex'));
+// true
+
+ +

hasOwnProperty is the only thing in JavaScript which deals with properties and does not traverse the prototype chain.

+ +

Note: It is not enough to check whether a property is undefined. The property might very well exist, but its value just happens to be set to undefined.

+
+ +

Bad practice: Extension of native prototypes

+ +

One mis-feature that is often used is to extend Object.prototype or one of the other built-in prototypes.

+ +

This technique is called monkey patching and breaks encapsulation. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional non-standard functionality.

+ +

The only good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like Array.forEach.

+ +

Example

+ +

B shall inherit from A:

+ +
function A(a) {
+  this.varA = a;
+}
+
+// What is the purpose of including varA in the prototype when A.prototype.varA will always be shadowed by
+// this.varA, given the definition of function A above?
+A.prototype = {
+  varA: null,  // Shouldn't we strike varA from the prototype as doing nothing?
+      // perhaps intended as an optimization to allocate space in hidden classes?
+      // https://developers.google.com/speed/articles/optimizing-javascript#Initializing-instance-variables
+      // would be valid if varA wasn't being initialized uniquely for each instance
+  doSomething: function() {
+    // ...
+  }
+};
+
+function B(a, b) {
+  A.call(this, a);
+  this.varB = b;
+}
+B.prototype = Object.create(A.prototype, {
+  varB: {
+    value: null,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  },
+  doSomething: {
+    value: function() { // override
+      A.prototype.doSomething.apply(this, arguments); // call super
+      // ...
+    },
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }
+});
+B.prototype.constructor = B;
+
+var b = new B();
+b.doSomething();
+
+ +

The important parts are:

+ + + +

prototype and Object.getPrototypeOf

+ +

JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.

+ +

You probably already noticed that our function A has a special property called prototype. This special property works with the JavaScript new operator. The reference to the prototype object is copied to the internal [[Prototype]] property of the new instance. For example, when you do var a1 = new A(), JavaScript (after creating the object in memory and before running function A() with this defined to it) sets a1.[[Prototype]] = A.prototype. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in [[Prototype]]. This means that all the stuff you define in prototype is effectively shared by all instances, and you can even later change parts of prototype and have the changes appear in all existing instances, if you wanted to.

+ +

If, in the example above, you do var a1 = new A(); var a2 = new A(); then a1.doSomething would actually refer to Object.getPrototypeOf(a1).doSomething, which is the same as the A.prototype.doSomething you defined, i.e. Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething.

+ +

In short, prototype is for types, while Object.getPrototypeOf() is the same for instances.

+ +

[[Prototype]] is looked at recursively, i.e. a1.doSomething, Object.getPrototypeOf(a1).doSomething, Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething etc., until it's found or Object.getPrototypeOf returns null.

+ +

So, when you call

+ +
var o = new Foo();
+ +

JavaScript actually just does

+ +
var o = new Object();
+o.[[Prototype]] = Foo.prototype;
+Foo.call(o);
+ +

(or something like that) and when you later do

+ +
o.someProp;
+ +

it checks whether o has a property someProp. If not, it checks Object.getPrototypeOf(o).someProp, and if that doesn't exist it checks Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp, and so on.

+ +
+

In conclusion

+ +

It is essential to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should never be extended unless it is for the sake of compatibility with newer JavaScript features.

+
diff --git a/files/id/web/javascript/language_resources/index.html b/files/id/web/javascript/language_resources/index.html new file mode 100644 index 0000000000..bda5fe1f42 --- /dev/null +++ b/files/id/web/javascript/language_resources/index.html @@ -0,0 +1,136 @@ +--- +title: JavaScript language resources +slug: Web/JavaScript/Language_Resources +tags: + - Advanced + - JavaScript +translation_of: Web/JavaScript/Language_Resources +--- +
{{JsSidebar}}
+ +

ECMAScript merupakan bahasa scripting yang membentuk basis dari  JavaScript. ECMAScript di standarisasi oleh organisasi standard ECMA International pada Spesifikasi ECMA-262 dan ECMA-402. Berikut ECMAScript standard yang telah disetujui atau masih dalam pengerjaan:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamaLinkTanggal rilisDeskripsi
Edisi saat ini
ECMA-262 2017 (ES 8)Working draft, repository2017ECMAScript 2017 (8th Edition), currently work in progress.
ECMA-402 4.0Working draft, repository2017ECMAScript Internationalization API 4.0, currently work in progress.
Obsolete/historical editions
ECMA-262 (ES 1)PDFJune 1997the original ECMAScript standard.
ECMA-262 (ES 2)PDFAugust 1998the second revision of the ECMAScript standard; also ISO standard 16262.
ECMA-262 (ES 3)PDFDecember 1999the third revision of the ECMAScript standard; corresponds to JavaScript 1.5.
+ See also the errata
ECMA-262 (ES 5)PDFDecember 2009ECMAScript 5
+ See also the ES5 errata and ECMAScript 5 support in Mozilla
ECMA-357PDFJune 2004ECMAScript for XML (E4X).
+ See also the E4X errata.
ECMA-357 Edition 2PDFDecember 2005ECMAScript for XML (E4X).
ECMA-262 (ES 5.1)PDF, HTMLJune 2011This version is fully aligned with 3rd edition of the international standard ISO/IEC 16262:2011.
+ It includes ES5 errata fixes, no new features.
ECMA-402 1.0PDF, HTMLDecember 2012ECMAScript Internationalization API 1.0.
ECMA-262 2015 (ES 6)PDF, HTMLJune 2015ECMAScript 2015 (6th Edition).
ECMA-402 2.0PDFJune 2015ECMAScript Internationalization API 2.0.
ECMA-262 2016 (ES 7)HTMLJune 2016ECMAScript 2016 (7th Edition). Now feature frozen. To be ratified later this year (June).
ECMA-402 3.0HTMLJune 2016ECMAScript Internationalization API 3.0. To be ratified later this year (June).
+ +

Lihat entri Wikipedia ECMAScript untuk info lebih lanjut tentang sejarah ECMAScript.

+ +

Anda dapat berpartisipasi atau mengikuti pekerjaan di revisi berikutnya dari spasifikasi bahasa ECMAScript, nama kode "Harmony", dan Spesifikasi ECMAScript Internationalization API melalui public wiki dan es-discuss mailing list tercantum dari ecmascript.org.

+ +

Implementasi

+ + + +

Lihat juga

+ + diff --git a/files/id/web/javascript/memory_management/index.html b/files/id/web/javascript/memory_management/index.html new file mode 100644 index 0000000000..90242f72da --- /dev/null +++ b/files/id/web/javascript/memory_management/index.html @@ -0,0 +1,187 @@ +--- +title: Memory Management +slug: Web/JavaScript/Memory_Management +translation_of: Web/JavaScript/Memory_Management +--- +
{{JsSidebar("Advanced")}}
+ +

Introduction

+ +

Bahasa-bahasa Level Bawah, seperti C, memiliki manajemen memory level rendah yang primitiv seperti malloc() dan  free(). Pada bagian lain, nilai Javascript dialokasikan ketika sesuatu (objek, string,dll.) dibuat dan secara otomatis dibebaskan ketika tidak digunakan lagi. Proses terakhir disebut garbage collection. "Secara Otomatis" ini adalah sumber kekeliruan dan memberikan kesan developer Javascript (dan Bahasa tingkat tinggi lainnya) bahwa mereka bisa memilih untuk tidak mempedulikan tentang manajemen memory, maka itu adalah suatu kesalahan

+ +

Low-level languages, like C, have low-level memory management primitives like malloc() and free(). On the other hand, JavaScript values are allocated when things (objects, strings, etc.) are created and "automatically" freed when they are not used anymore. The latter process is called garbage collection. This "automatically" is a source of confusion and gives JavaScript (and high-level languages) developers the impression they can decide not to care about memory management. This is a mistake.

+ +

Siklus hidup sebuah memori

+ +

Tanpa memperhatikan bahasa pemograman, siklus hidup memori pada akhirnya selalu sama :

+ +
    +
  1. Mengalokasi memori yang kamu gunakan.
    2. +
  2. Menggunakan alokasi memori untuk (baca, tulis).
    3. +
  3. Membebaskan alokasi memori saat tidak digunakan lagi.
    4. +
+ +

Bagian pertama dan kedua bersifat ekplisit untuk semua bahasa. Sedangkan untuk bagian terakhir adalah eksplisit untuk bahasa tingkat rendah, tetapi hampir semua bahasa tingkat atas seperti JavaScript juga bersifat implisit.

+ +

Allocation in JavaScript

+ +

Value initialization

+ +

In order not to bother the programmer with allocations, JavaScript does it alongside with declaring values.

+ +
var n = 123; // allocates memory for a number
+var s = "azerty"; // allocates memory for a string
+
+var o = {
+  a: 1,
+  b: null
+}; // allocates memory for an object and contained values
+
+// (like object) allocates memory for the array and
+// contained values
+var a = [1, null, "abra"];
+
+function f(a){
+  return a + 2;
+} // allocates a function (which is a callable object)
+
+// function expressions also allocate an object
+someElement.addEventListener('click', function(){
+  someElement.style.backgroundColor = 'blue';
+}, false);
+
+ +

Allocation via function calls

+ +

Some function calls result in object allocation.

+ +
var d = new Date(); // allocates a Date object
+
+var e = document.createElement('div'); // allocates a DOM element
+ +

Some methods allocate new values or objects:

+ +
var s = "azerty";
+var s2 = s.substr(0, 3); // s2 is a new string
+// Since strings are immutable value,
+// JavaScript may decide to not allocate memory,
+// but just store the [0, 3] range.
+
+var a = ["ouais ouais", "nan nan"];
+var a2 = ["generation", "nan nan"];
+var a3 = a.concat(a2);
+// new array with 4 elements being
+// the concatenation of a and a2 elements
+
+ +

Using values

+ +

Using value basically means reading and writing in allocated memory. This can be done by reading or writing the value of a variable or an object property or even passing an argument to a function.

+ +

Release when the memory is not needed anymore

+ +

Most of memory management issues come at this phase. The hardest task here is to find when "the allocated memory is not needed any longer". It often requires for the developer to determine where in the program such piece of memory is not needed anymore and free it.

+ +

High-level languages embed a piece of software called "garbage collector" whose job is to track memory allocation and use in order to find when a piece of allocated memory is not needed any longer in which case, it will automatically free it. This process is an approximation since the general problem of knowing whether some piece of memory is needed is undecidable (can't be solved by an algorithm).

+ +

Garbage collection

+ +

As stated above the general problem of automatically finding whether some memory "is not needed anymore" is undecidable. As a consequence, garbage collections implement a restriction of a solution to the general problem. This section will explain the necessary notions to understand the main garbage collection algorithms and their limitations.

+ +

References

+ +

The main notion garbage collection algorithms rely on is the notion of reference. Within the context of memory management, an object is said to reference another object if the former has an access to the latter (either implicitly or explicitly). For instance, a JavaScript object has a reference to its prototype (implicit reference) and to its properties values (explicit reference).

+ +

In this context, the notion of "object" is extended to something broader than regular JavaScript objects and also contains function scopes (or the global lexical scope).

+ +

Reference-counting garbage collection

+ +

This is the most naive garbage collection algorithm. This algorithm reduces the definition of "an object is not needed anymore" to "an object has no other object referencing to it". An object is considered garbage collectable if there is zero reference pointing at this object.

+ +

Example

+ +
var o = {
+  a: {
+    b:2
+  }
+};
+// 2 objects are created. One is referenced by the other as one of its properties.
+// The other is referenced by virtue of being assigned to the 'o' variable.
+// Obviously, none can be garbage-collected
+
+
+var o2 = o; // the 'o2' variable is the second thing that
+            // has a reference to the object
+o = 1;      // now, the object that was originally in 'o' has a unique reference
+            // embodied by the 'o2' variable
+
+var oa = o2.a; // reference to 'a' property of the object.
+               // This object has now 2 references: one as a property,
+               // the other as the 'oa' variable
+
+o2 = "yo"; // The object that was originally in 'o' has now zero
+           // references to it. It can be garbage-collected.
+           // However what was its 'a' property is still referenced by
+           // the 'oa' variable, so it cannot be freed
+
+oa = null; // what was the 'a' property of the object originally in o
+           // has zero references to it. It can be garbage collected.
+
+ +

Limitation: cycles

+ +

There is a limitation when it comes to cycles. In the following example 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 freed. However, the reference-counting algorithm considers that since each of both object is referenced at least once and none can be garbage-collected.

+ +
function f(){
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o references o2
+  o2.a = o; // o2 references o
+
+  return "azerty";
+}
+
+f();
+
+ +

Real-life example

+ +

Internet Explorer 6 and 7 are known to have reference-counting garbage collectors for DOM objects. Cycles are a common mistake that can generate memory leaks:

+ +
var div;
+window.onload = function(){
+  div = document.getElementById("myDivElement");
+  div.circularReference = div;
+  div.lotsOfData = new Array(10000).join("*");
+};
+
+ +

In the above example, the DOM element "myDivElement" has a circular reference to itself in the "circularReference" property. If the property is not explicitly removed or nulled, a reference-counting garbage collector will always have at least one reference intact and will keep the DOM element in memory even if it was removed from the DOM tree. If the DOM element holds lots of data (illustrated in the above example with the "lotsOfData" property), the memory consumed by this data will never be released.

+ +

Mark-and-sweep algorithm

+ +

This algorithm reduces the definition of "an object is not needed anymore" to "an object is unreachable".

+ +

This algorithm assumes the knowledge of a set of objects called roots (In JavaScript, the root is the global object). Periodically, the garbage-collector will start from these roots, find all objects that are referenced from these roots, then all objects referenced from these, etc. Starting from the roots, the garbage collector will thus find all reachable objects and collect all non-reachable objects.

+ +

This algorithm is better than the previous one since "an object has zero reference" leads to this object being unreachable. The opposite is not true as we have seen with cycles.

+ +

As of 2012, all modern browsers ship a mark-and-sweep garbage-collector. All improvements made in the field of JavaScript garbage collection (generational/incremental/concurrent/parallel garbage collection) over the last few years are implementation improvements of this algorithm, but not improvements over the garbage collection algorithm itself nor its reduction of the definition of when "an object is not needed anymore".

+ +

Cycles are not a problem anymore

+ +

In the first above example, after the function call returns, the 2 objects are not referenced anymore by something reachable from the global object. Consequently, they will be found unreachable by the garbage collector.

+ +

The same thing goes with the second example. Once the div and its handler are made unreachable from the roots, they can both be garbage-collected despite referencing each other.

+ +

Limitation: objects need to be made explicitly unreachable

+ +

Although this is marked as a limitation, it is one that is rarely reached in practice which is why no one usually cares that much about garbage collection.

+ +

See also

+ + diff --git a/files/id/web/javascript/new_in_javascript/index.html b/files/id/web/javascript/new_in_javascript/index.html new file mode 100644 index 0000000000..79ee10c2b3 --- /dev/null +++ b/files/id/web/javascript/new_in_javascript/index.html @@ -0,0 +1,74 @@ +--- +title: New in JavaScript +slug: Web/JavaScript/New_in_JavaScript +tags: + - ECMAScript + - JavaScript + - NeedsTranslation + - TopicStub + - Versions +translation_of: Archive/Web/JavaScript/New_in_JavaScript +--- +
{{jsSidebar("New_in_JS")}}
+ +

This chapter contains information about JavaScript's version history and implementation status for Mozilla/SpiderMonkey-based JavaScript applications, such as Firefox.

+ +

ECMAScript versions

+ +
+
Language resources
+
Learn more about the ECMAScript standards on which the JavaScript language is based on.
+
ECMAScript 5 support
+
Implementation status for the current standard ECMA-262 Edition 5.1 in Mozilla-based engines and products.
+
ECMAScript 2015 support
+
Implementation status for the draft ECMA-262 Edition 6 (ES2015) in Mozilla-based engines and products.
+
ECMAScript Next support
+
Implementation status for upcoming ECMA-262 features as per the yearly (ES2016/ES2017/ES2018/...) release schedule in Mozilla-based engines and products.
+
+ +

JavaScript release notes

+ +
+
Firefox JavaScript changelog
+
See this changelog for JavaScript features implemented in Firefox 5 and later.
+
+ +

JavaScript versions

+ +

Deprecated ({{deprecated_inline}}). The explicit versioning and opt-in of language features was Mozilla-specific and are in process of being removed. Firefox 4 was the last version which referred to a JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as ECMAScript 2015.

+ +

JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.

+ +
+
JavaScript 1.1
+
Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.
+
JavaScript 1.2
+
Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.
+
JavaScript 1.3
+
Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.
+ Standardization work to be compliant with ECMA-262 1st and 2nd Edition.
+
JavaScript 1.4
+
Version shipped with Netscape's server-side JavaScript. Released in 1999.
+
JavaScript 1.5
+
Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.
+ Standardization work to be compliant with ECMA-262 3rd Edition.
+
JavaScript 1.6
+
Version shipped in Firefox 1.5. Released in November 2005.
+ Includes ECMAScript for XML (E4X), new Array methods plus String and Array generics.
+
JavaScript 1.7
+
Version shipped in Firefox 2. Released in October 2006.
+ Includes generators, iterators, array comprehensions, let expressions, and destructuring assignment.
+
JavaScript 1.8
+
Version shipped in Firefox 3. Released in June 2008.
+ Includes expression closures, generator expressions and Array.reduce()
+
JavaScript 1.8.1
+
Version shipped in Firefox 3.5. Released on June 30, 2009.
+ Includes the TraceMonkey JIT and supports native JSON.
+
JavaScript 1.8.2
+
Version shipped in Firefox 3.6. Released June 22, 2009.
+ Includes only minor changes.
+
JavaScript 1.8.5
+
Version shipped in Firefox 4. Released July 27, 2010.
+ Includes many new features for ECMA-262 Edition 5 compliance.
+ This is the last JavaScript version.
+
diff --git a/files/id/web/javascript/panduan/closures/index.html b/files/id/web/javascript/panduan/closures/index.html new file mode 100644 index 0000000000..73cdbb7e15 --- /dev/null +++ b/files/id/web/javascript/panduan/closures/index.html @@ -0,0 +1,345 @@ +--- +title: Closures +slug: Web/JavaScript/Panduan/Closures +translation_of: Web/JavaScript/Closures +--- +

Closure adalah fungsi yang merujuk kepada variabel yang mandiri (bebas). 

+ +

Dengan kata lain, fungsi yang di definisikan di dalam closure 'mengingat' lingkungan dimana closure ini didefinisikan. 

+ +

Lihat contoh berikut:

+ +
+
function init() {
+    var name = "Mozilla"; // name adalah sebuah lokal variabel yang dibuat oleh init
+    function displayName() { // displayName() adalah fungsi internal, sebuah closure
+        alert (name); // displayName() menggunakan variabel yang dideklarasikan pada fungsi induknya
+    }
+    displayName();
+}
+init();
+
+
+ +

init() membuat sebuah lokal variabel name dan kemudian memanggil fungsi displayName(). displayName() adalah fungsi internal yang didefinisikan didalam init() dan hanya dapat diakses di dalam fungsi tersebut. displayName() tidak memiliki lokal variabelnya sendiri, namun fungsi ini memiliki akses ke variabel diluar fungsinya dan dapat menggunakan variabel name tersebut yang telah di deklarasikan di fungsi induknya.

+ +

Jalankan kode dan perhatikan bahwa alert() dapat menampilkan isi dari variabel name, dimana variabel tersebut dideklarasikan pada fungsi induknya. Ini adalah sebuah contoh dari ruang lingkup leksikal (lexical scoping), yang menunjukan bagaimana cara javascript mencari variabel. Di Javascript lokasi dimana variabel tersebut dideklarasikan di dalam source code menentukan dimana variabel itu dapat diakses. Nested functions memiliki akses pada variabel yang dideklarasikan pada ruang lingkup induknya.

+ +

Lihat contoh berikut:

+ +
function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+myFunc();
+
+ +

Jika kamu menjalankan kode ini, kode ini akan memiliki efek yang sama seperti contoh sebelumnya init(): teks "Mozilla" akan muncul di JavaScript alert box. Yang membedakan dan menarik adalah fungsi internal displayName() di kembalikan terlebih dahulu ke fungsi di luar sebelum di eksekusi.

+ +

Jika dilihat ini agak aneh karena normalnya pada bahasa pemrograman lain, variabel lokal di dalam sebuah fungsi hanya ada saat fungsi tersebut dieksekusi. Sehingga saat makeFunc() selesai dieksekusi, sewajarnya variabel name ini tidak dapat diakses lagi. Namun, karena kode ini masih berjalan normal, ini adalah hal yang berbeda di Javascript.

+ +

Alasannya adalah fungsi tersebut telah menjadi closure di javascript. Closure adalah kombinasi dari fungsi dan lingkungan leksikal dimana fungsi itu di deklarasikan. Lingkungan ini terdiri dari lokal variabel yang berada di ruang lingkup yang sama saat closure dibuat. Pada kasus ini, myFunc bereferensi kepada fungsi displayName yang telah dibuat ketika makeFunc dijalankan. Fungsi displayName akan tepat menjaga akses ke lingkungan leksikalnya, dimana variabel name ini aktif. Untuk alasan inilah, ketika myFunc di panggil, variabel name tetap dapat digunakan dan "Mozilla" dikirim ke alert box.

+ +

Berikut adalah contoh menarik yang lainnya — fungsi 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
+
+ +

Di contoh ini, kita telah mendefinisikan fungsi makeAdder(x) dengan satu argument x dan mengembalikan sebuah fungsi baru. Fungsi yang dikembalikan membutuhkan satu argumen y, dan mengembalikan jumlah x dan y.

+ +

Esensinya, makeAdder adalah fungsi untuk membuat fungsi (function factory) — fungsi ini akan membuat fungsi yang akan menambahkan angka melalui argumen. Pada contoh diatas kita membuat dua fungsi baru — yang satu menambahkan 5 melalui argumentnya dan satu menambahkan 10.

+ +

add5 dan add10 keduanya adalah closure. Fungsi ini menggunakan definisi fungsi yang sama, namun menggunakan memori yang berbeda. Di add5 variabel x memiliki nilai 5. sedangkan di add10 variabel x memiliki nilai 10.

+ +

Penggunaan Closure

+ +

Setelah membaca teorinya muncul pertanyaan —  Apakah closure berguna? Mari kita lihat implikasi dari penggunaan closure. Closure membantu kita mengakses data (pada lingkungannya) dengan fungsi yang mengoperasikan data tersebut. Ini berhubungan dengan object oriented programming, dimana objek obj0ek tersebut membantu kita dalam menghubukan beberapa data (properti objek) dengan satu atau lebih method.

+ +

Karena itu, kamu dapat menggunakan closure dimanapun kamu dapat menggunakan objek dengan satu method.

+ +

Situasi ini banyak ditemui umumnya pada pengembangan web. Banyak kode yang kita tulis di Javascript berdasarkan event — kita definisikan terlebih dahulu sifat dari event ini, kemudian menempelkannya pada event yang di panggil oleh user (seperti klik atau penekanan tombol). Kode kita secara garis umum adalah sebuah callback: sebuah fungsi yang dijalankan untuk merespon sebuah event.

+ +

Berikut adalah contoh: kita ingin menambahkan beberapa tombol di sebuah halaman yang akan merubah ukuran teks. Cara untuk melakukannya adalah dengan menentukan ukuran huruf dari elemen body dalam satuan unit pixel, kemudian menentukan ukuran elemen lain di halaman (seperti header) menggunakan satuan unit em:

+ +
body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+
+ +

Tombol interaktif kita dapat merubah ukuran huruf dari elemen body dan elemen yang lainnya akan menyesuaikan.

+ +

Berikut kode 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, dan size16 adalah fungsi yang akan merubah ukuran teks body ke 12, 14, dan 16 pixel, secara berurutan. Kemudian kita tempelkan fungsi ini ke tombol (pada kasus ini adalah link) sebagai berikut:

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

Lihat pada JSFiddle

+ +

Emulating private methods with closures

+ +

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;
+    }
+  };
+})();
+
+alert(counter.value()); /* Alerts 0 */
+counter.increment();
+counter.increment();
+alert(counter.value()); /* Alerts 2 */
+counter.decrement();
+alert(counter.value()); /* Alerts 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 JavaScript 1.7, 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();
+
+ +

Lihat pada JSFiddle

+ +

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();
+
+ +

Lihat pada JSFiddle

+ +

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

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.

+ +

Expression closures

+ +

This addition is nothing more than a shorthand for writing simple functions, giving the language something similar to a typical Lambda notation.

+ +

JavaScript 1.7 and older:

+ +
function(x) { return x * x; }
+ +

JavaScript 1.8:

+ +
function(x) x * x
+ +

This syntax allows you to leave off the braces and 'return' statement - making them implicit. There is no added benefit to writing code in this manner, other than having it be syntactically shorter.

+ +

Examples:

+ +

A shorthand for binding event listeners:

+ +
 document.addEventListener("click", function() false, true);
+
+ +

Using this notation with some of the array functions from JavaScript 1.6:

+ +
elems.some(function(elem) elem.type == "text");
diff --git a/files/id/web/javascript/panduan/index.html b/files/id/web/javascript/panduan/index.html new file mode 100644 index 0000000000..491d4a4a84 --- /dev/null +++ b/files/id/web/javascript/panduan/index.html @@ -0,0 +1,119 @@ +--- +title: Panduan JavaScript +slug: Web/JavaScript/Panduan +translation_of: Web/JavaScript/Guide +--- +
{{jsSidebar("JavaScript Guide")}}
+ +

Pedoman javasript memberi tahu bagaimana menggunakan JavaScript dan memberikan penjelasan tentang bahasa javascript. Jika anda ingin memulai javascript atau programming secara umum, konsultasikan artikel di Area pembelajaran. Jika anda membutuhkan informasi lengkap tentang fitur silakan lihat  Referensi javaScript.

+ +

Bagian

+ +

Pedoman ini dibagi menjadi beberapa bagian:

+ + + + + + + + + +

{{Next("Web/JavaScript/Guide/Introduction")}}

diff --git a/files/id/web/javascript/panduan/loops_and_iteration/index.html b/files/id/web/javascript/panduan/loops_and_iteration/index.html new file mode 100644 index 0000000000..7fbb416c43 --- /dev/null +++ b/files/id/web/javascript/panduan/loops_and_iteration/index.html @@ -0,0 +1,330 @@ +--- +title: Loops and iteration +slug: Web/JavaScript/Panduan/Loops_and_iteration +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}
+ +

Loop menawarkan cara cepat dan mudah untuk melakukan sesuatu secara berulang-ulang. Bab tentang Panduan JavaScript ini memperkenalkan berbagai pernyataan iterasi berbeda yang tersedia untuk JavaScript.

+ +

Anda dapat menganggap loop sebagai versi permainan terkomputerisasi di mana Anda menyuruh seseorang untuk mengambil langkah X menuju satu arah lalu langkah Y ke arah yang lain; Sebagai contoh, gagasan "Pergilah lima langkah ke timur" dapat di ekspresikan dengan cara berikut sebagai sebuah loop (pengulangan):

+ +
var langkah;
+for (langkah= 0; langkah< 5; langkah++) {
+  // berlari 5 kali, dengan nilai langkah 0 sampai 4.
+  console.log('Berjalan ke timur satu langkah');
+}
+
+ +

Ada beberapa jenis loop yang berbeda, namun pada dasarnya semuanya melakukan hal yang sama, mereka mengulangi sebuah aksi beberapa kali (dan sebenarnya memungkinkan bahwa dapat saja menjadi nol). Berbagai mekanisme loop menawarkan berbagai cara untuk menentukan titik awal dan akhir perulangan. Ada berbagai situasi yang lebih mudah dikerjakan oleh sebuah tipe loop dibandingkan tipe (loop) yang lain.

+ +

Pernyataan untuk loop yang disediakan dalam JavaScript adalah:

+ + + +

for statement

+ +

Sebuah {{jsxref("statements/for","for loop")}} mengulang hingga kondisi yang ditentukan evaluasinya menjadi salah/false.  for loop pada Javascript serupa dengan  for loop pada Java dan C. Sebuah statement (pernyataan) for   terlihat sebagai berikut:

+ +
for ([initialExpression]; [condition];
+[incrementExpression]) statement
+
+ +

Ketika sebuah for loop dieksekusi, Berikut ini akan terjadi:

+ +
    +
  1. Ekspresi yang menginisialisasi yaitu initialExpression, Jika ada, maka akan di eksekusi. Ekspresi ini biasanya menginisialisasi satu atau lebih penghitung loop, tetapi sintaksnya memperbolehkan ekspresi dengan tingkat kerumitan apapun. Ekspresi ini juga bisa mendeklarasikan variabel.
    2. +
  2. Ekpresi condition di evaluasi. JIka value dari kondisi adalah true (benar), maka statement loop akan dieksekusi. Jika value dari condition false (salah), for loop akan dihentikan.  Jika ekspresi condition dihilangkan sama sekali, kondisinya diasumsikan benar.
    3. +
  3. Mengeksekusi Statement . Untuk mengeksekusi berbagai pernyataan, gunakanlah sebuah blok pernyataan ({ ... }) untuk mengelompokkan pernyataan-pernyataan tersebut.
    4. +
  4. Jika ada, ekspresi baru incrementExpression di eksekusi.
    5. +
  5. Kontrol kembali ke langkah ke-2.
    6. +
+ +

Contoh

+ +

function (fungsi) berikut memuat sebuah statement for yang menghitung angka dari opsi yang terpilih dalam sebuah daftar scrolling  (sebuah elemen {{HTMLElement("select")}} yang memperbolehkan berbagai pilihan). Statement for mendeklarasikan variable i dan menginisialisasinya ke nol. Ia memeriksa bahwa i lebih kecil dari nomor dari opsi dalam elemen <select> , menampilkan statement if yang berhasil, dan menaikan i satu setelah masing-masing lolos melewati loop.

+ +
<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="How many are selected?" /></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>
+
+
+ +

do...while statement

+ +

Pernyataan/statement {{jsxref("statements/do...while", "do...while")}} terus di ulangi sampai evaluasi kondisi bernilai false/salah. Sebuah do...while statement terlihat sebagai berikut:

+ +
do
+  statement
+while (condition);
+
+ +

statement di jalankan lebih dulu sebelum kondisi diperiksa. Untuk menjalankan banyak statements, gunakan statement blok ({ ... }) untuk membuat grup dari statement tersebut. Jika condition bernilai benar, maka statement akan dijalankan kembali. Kondisi diperiksa pada setiap akhir eksekusi. Ketika kondisi bernilai salah, eksekusi berhenti dan kontrol akan melewati pernyataan yang mengikuti do...while.

+ +

Contoh

+ +

Dalam contoh berikut, perulangan do di iterasi sekali dan di iterasi kembali sampai i tidak lagi kurang dari 5. 

+ +
var i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i < 5);
+ +

while statement

+ +

Sebuah statement {{jsxref("statements/while","while")}} di eksekusi pernyataan pernyataannya asalkan memenuhi syarat kondisinya yang bernilai true/benar. Sebuah statement  while terlihat sebagai berikut:

+ +
while (condition)
+  statement
+
+ +

Jika kondisi bernilai false/salah, statement dengan perulangan berhenti di eksekusi dan kontrol akan melewati statement yang mengikuti perulangan tersebut.

+ +

Kondisi terjadi sebelum statement dalam perulangan di eksekusi. Jika kondisi bernilai true/benar, statement di eksekusi dan kondisi di uji kembali. Jika kondisi bernilai false/salah, eksekusi akan berhenti dan konrol lewat untuk statement yang mengikuti while.

+ +

Untuk mengeksekusi banyak statement, gunakan blok statement ({ ... }) untuk mengelompokan banyak statement tersebut.

+ +

Contoh 1

+ +

Beikut perulangan while mengiterasi n selama n kurang dari tiga:

+ +
var n = 0;
+var x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+
+ +

Dengan setiap iterasi, perulangan akan menambahkan increments n dan menambahkan nilainya pada  x. Karena itu, x dan n mengambil nilai nilai berikut:

+ + + +

Setelah melewati perulangan yang ketiga , kondisinya n < 3 tidak lagi bernilai true/benar, jadi perulangan di hentikan.

+ +

Contoh 2

+ +

Hindari perulangan tanpa batas. Pastikan kondisi dalam perulangan mendapatkan kondisi yang bernilai false/salah untuk berhenti, jika tidak perulangan tidak akan pernah berhenti. Statements dalam while berikut di eksekusi berulang kali selamanya karena kondisi tidak pernah mendapatkan nilai false/salah:

+ +
while (true) {
+  console.log('Hello, world!');
+}
+ +

labeled statement

+ +

Sebuah {{jsxref("statements/label","label")}} menyediakan sebuah statement dengan pengenal yang memungkinkan Anda merujuknya di tempat lain dalam program Kamu. Untuk contohnya, Kamu dapat menggunakan label untuk mengidentifikasi pengulangan, lalu gunakan statement break atau continue untuk menunjukkan apakah suatu program harus memutuskan loop atau melanjutkan eksekusinya.

+ +

Sintak dari statement berlabel terlihat seperti berikut:

+ +
label :
+   statement
+
+ +

Nilai dai sebuah label dapat berupa identifikasi JavaScript apa pun yang tidak dari kata  kunci yang ada pada javascript. statement
+ yang Kamu identifikasi dengan label tersebut dapat berupa statement apa pun.

+ +

Contoh

+ +

Pada contoh ini, label markLoop mengidentifikasi sebuah perulangan while.

+ +
markLoop:
+while (theMark == true) {
+   doSomething();
+}
+ +

break statement

+ +

Gunakan {{jsxref("statements/break","break")}} statement untuk menghentikan perulangan, switch, atau konjungsi dengan statement yang memakai label.

+ + + +

Sintak dari statement break terlihat seperti ini:

+ +
break [label];
+
+ +

Bentuk pertama sintak mengakhiri perulangan atau switch; Bentuk kedua sintak mengakhiri statement dari spesifik label.

+ +

Contoh 1

+ +

Contoh berikut mengiterasi melewati elemen-elemen dalam array sampai menemukan indeks elemen  yang bernilai dari theValue:

+ +
for (var i = 0; i < a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}
+ +

Contoh 2: Breaking pada sebuah label

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

continue statement

+ +

Statement {{jsxref("statements/continue","continue")}} bisa digunakan untuk memulai lagi statement while, do-while, for, atau label.

+ + + +

Sintak statement continue terlihat sebagai berikut:

+ +
continue [label];
+
+ +

Contoh 1

+ +

Contoh berikut menunjukkan sebuah perulangan while dengan sebuah statement continue yang di eksekusi ketika niai dari i adalah tiga  Jadi, n mengambil nilai satu, tiga, tujuh dan dua belas.

+ +
var i = 0;
+var n = 0;
+while (i < 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+
+ +

Contoh 2

+ +

Sebuah statement yang berlabel checkiandj berisikan sebuah statement berlabel checkj. Jika ada continue , Programnya akan menghentikan iterasi saat ini dari checkj dan memulai iterasi selanjutnya. Setiap kali continue ditemui, checkj  di iterasi kembali sampai kondisinya bernilai false/salah. Ketika bernilai false/salah, Sisa dari statement checkiandj sudah selesai, dan checkiandj di iterasi kembali sampai kondisi bernilai salah false. Ketika bernilai salah false , program melanjutkan pada statement yang mengikuti checkiandj.

+ +

JIka continue dipunyai label dari checkiandj, program akan terus berlanjut ke bagian atas dari statement checkiandj .

+ +
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);
+  }
+ +

for...in statement

+ +

Statement {{jsxref("statements/for...in","for...in")}} mengiterasi sebuah variabel spesifik diatas properti enumerable dari sebuah objek. Untuk setiap properti yang berbeda, JavaScript mengeksekusi pernyataan pernyataan yang spesifik. Sebuah statement for...in terlihat sebagai berikut:

+ +
for (variable in object) {
+  statements
+}
+
+ +

Contoh

+ +

Function/fungsi berikut mengambil argumentnya dari sebuah objek dan nama objek. Lalu dia di iterasi diatas semua property objek dan mengembalikan sebuah string yang mendaftarkan nama properti dan nilainya.

+ +
function dump_props(obj, obj_name) {
+  var result = '';
+  for (var i in obj) {
+    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
+  }
+  result += '<hr>';
+  return result;
+}
+
+ +

Untuk sebuah objek car dengan property make dan model, result/hasil akan menjadi:

+ +
car.make = Ford
+car.model = Mustang
+
+ +

Arrays

+ +

Meskipun mungkin menggunakan ini sebagai cara untuk melakukan iterasi di atas elemen {{jsxref("Array")}},statement for...in akan mengembalikan nilai nama property yang di tetapkan pengguna dalam penambahan numerik indek. Jadi lebih baik menggunakan tradisional perulangan {{jsxref("statements/for","for")}} dengan sebuah numerik indek ketika mengiterasi diatas array, karena statement  for...in mengiterasi diatas nama properti yang di tetapkan pengguna pada penambahan elemen array, Jika kamu merubah array, seperti menambahkan properti atau metode. 

+ +

for...of statement

+ +

Statement {{jsxref("statements/for...of","for...of")}} membuat sebuah iterasi perulangan diatas iterable objects (termasuk {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} object dan seterusnya), menjalankan hubungan iterasi khusus dengan statement yang akan dieksekusi untuk setiap nilai properti yang berbeda.

+ +
for (variable of object) {
+  statement
+}
+ +

Contoh berikut menampilkan perbedaan diantara sebuah perulangan for...of dan sebuah perulangan {{jsxref("statements/for...in","for...in")}}. Ketika for...in mengiterasi diatas nama-nama properti, for...of mengiterasi diatas nilai-nilai properti:

+ +
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/id/web/javascript/panduan/numbers_and_dates/index.html b/files/id/web/javascript/panduan/numbers_and_dates/index.html new file mode 100644 index 0000000000..e9681b2adf --- /dev/null +++ b/files/id/web/javascript/panduan/numbers_and_dates/index.html @@ -0,0 +1,376 @@ +--- +title: Numbers and dates +slug: Web/JavaScript/Panduan/Numbers_and_dates +translation_of: Web/JavaScript/Guide/Numbers_and_dates +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}
+ +

Pada Bab ini memperkenalkan cara menggunakan angka dan tanggal pada JavaScript.

+ +

Angka

+ +

Pada JavaScript, semua angka diimplementasikan kedalam double-precision 64-bit binary format IEEE 754 (mis. angka antara -(253 -1) dan 253 -1). Tidak ada jenis spesifik untuk integer. Selain bisa mewakili angka float, tipe data angka memiliki 3 nilai secara simbolik: +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}}, dan {{jsxref("NaN")}} (bukan sebuah angka). Lihat juga JavaScript tipe data dan struktur untuk konteks dengan tipe data primitif JavaScript yang lain.

+ +

Anda dapat menggunakan empat tipe angka literal: desimal, biner, oktal, dan heksadesimal.

+ +

Angka Desimal

+ +
1234567890
+42
+
+// Perhatikan ketika menggunakan angka berawalan nol:
+
+0888 // 888 diubah menjadi desimal
+0777 // diubah menjadi oktal pada non-strict mode (511 in decimal)
+
+ +

Perhatikan bahwa desimal literal dapat dimulai dari nol(0) diikuti angka desimal yang lain, namun jika setiap angka setelah 0 lebih kecil dari 8, angkanya diubah menjadi oktal.

+ +

Angka Biner

+ +

Sintaks angka biner menggunakan angka nol diikuti dengan huruf kecil atau dengan huruf besar, huruf Latin "B" (0b atau 0B). Jika digit setelah 0b atau bukan 0 atau 1, menurut SyntaxError yang dilemparkan: "Missing binary digits after 0b".

+ +
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
+ +

Angka oktal

+ +

Angka oktal menggunakan awalan angka nol. Jika digit setelah 0 berada diluar jangkauan 0 hinga 7, angka akan diintrepretasikan sebagai angka desimal.

+ +
var n = 0755; // 493
+var m = 0644; // 420
+
+ +

Mode ketat pada ECMAScript 5 melarang sintaks oktal. Oktal sintaks bukan bagian dari ECMAScript 5, namun didukung oleh semua peramban dengan cara awalan nomor oktal dengan angka nol: 0644 === 420 dan "\045" === "%". Pada ECMAScript 2015, angka oktal didukung jika diawali dengan 0o, e.g.: 

+ +
var a = 0o10; // ES2015: 8
+
+ +

Angka Heksadesimal

+ +

Sintaks heksadesimal menggunakan awalan nol diikuti dengan huruf kecil atau huruf kapital Latin "X" (0x atau 0X). Jika digit setelah 0x berada diluar jangkauan (0123456789ABCDEF),  menurut SyntaxError yang dilemparkan: "Identifier starts immediately after numeric literal".

+ +
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+
+ +

Eksponensial

+ +
1E3   // 1000
+2e6   // 2000000
+0.1e2 // 10
+ +

Angka object

+ +

The built-in {{jsxref("Number")}} objek memiliki properti untuk numerik konstanta, seperti nilai maksimal, bukan-sebuah-angka, dan tak terhingga. Anda tidak dapat mengganti nilai dari properti tersebut dan anda dapat menggunakannya sebagai berikut:

+ +
var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+
+ +

Anda selalu mengacu pada properti dari objek angka yang telah ditentukan seperti yang ditunjukkan diatas, dan bukan sebagai properti objek angka yang anda tentukan.

+ +

Tabel berikut meringkas sifat-sifat nomor object.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties of Number
PropertiDeskripsi
{{jsxref("Number.MAX_VALUE")}}Merepresantikan angka maksimal / terbesar
{{jsxref("Number.MIN_VALUE")}}Merepresantikan angka minimal / terkecil
{{jsxref("Number.NaN")}}Nilai spesial "bukan sebuah angka"
{{jsxref("Number.NEGATIVE_INFINITY")}}Nilai spesial negatif tak terhingga; dikembalikan pada overflow
{{jsxref("Number.POSITIVE_INFINITY")}}Nilai spesial positif tak terhingga; dikembalikan pada overflow
{{jsxref("Number.EPSILON")}}Perbedaan antara satu dan nilai terkecil lebih besar dari satu yang dapat direpresentasikan sebagai {{jsxref("Number")}}.
{{jsxref("Number.MIN_SAFE_INTEGER")}}Bilangan bulat aman minimum dalam JavaScript.
{{jsxref("Number.MAX_SAFE_INTEGER")}}Bilangan bulat aman maksimum dalam JavaScript.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Methods of Number
MethodDescription
{{jsxref("Number.parseFloat()")}}Parses a string argument and returns a floating point number.
+ Same as the global {{jsxref("parseFloat", "parseFloat()")}} function.
{{jsxref("Number.parseInt()")}}Parses a string argument and returns an integer of the specified radix or base.
+ Same as the global {{jsxref("parseInt", "parseInt()")}} function.
{{jsxref("Number.isFinite()")}}Determines whether the passed value is a finite number.
{{jsxref("Number.isInteger()")}}Determines whether the passed value is an integer.
{{jsxref("Number.isNaN()")}}Determines whether the passed value is {{jsxref("Global_Objects/NaN", "NaN")}}. More robust version of the original global {{jsxref("Global_Objects/isNaN", "isNaN()")}}.
{{jsxref("Number.isSafeInteger()")}}Determines whether the provided value is a number that is a safe integer.
+ +

Prototipe Angka menyediakan metode-metode untuk menampilkan informasi dari objek angka dalam format bervariasi. Tabel berikut meringkas metode-metode prototipe angka.

+ + + + + + + + + + + + + + + + + + + + + + + +
Methods of Number.prototype
MethodDescription
{{jsxref("Number.toExponential", "toExponential()")}}Mengembalikan string yang merepresentasikan nomor dalam notasi eksponensial.
{{jsxref("Number.toFixed", "toFixed()")}}Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point.
{{jsxref("Number.toPrecision", "toPrecision()")}}Mengembalikan string yang merepresentasikan nomor dalam notasi fixed-point yang lebih spesifik.
+ +

Math object

+ +

The built-in {{jsxref("Math")}} objek memiliki properti dan metode-metode untuk konstanta matematika dan fungsi-fungsi. Sebagai contoh, objek matematik PI properti memiliki nilai (3.141...), yang akan anda gunakan dalam aplikasi sebagai

+ +
Math.PI
+
+ +

Demikian pula, fungsi standard matematika merupakan metode-metode Math. termasuk trigonometri, logaritma, eksponensial, dan fungsi lainnya. Sebagai contoh, jika anda ingin menggunakan fungsi trigonometri sin, anda akan menulis

+ +
Math.sin(1.56)
+
+ +

Perhatikan bahwa semua metode trigonometri matematika menggunakan argumen dalam radian.

+ +

Tabel berikut meringkas metode-metode objek matematik.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Methods of Math
MethodDescription
{{jsxref("Math.abs", "abs()")}}Nilai absolut
{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}Fungsi trigonometri standar; dengan argumen dalam radian.
{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}Fungsi trigonometri terbalik; mengembalikan nilai dalam radian.
{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}Fungsi hiperbolik. argumen dalam sudut hiperbolik.
{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}Fungsi hiperbolik terbalik. mengembalikan nilai dalam sudut hiperbolik.
+

{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}

+ 		Fungsi eksponen dan logaritma.
{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}Mengembalikan angka bulat terkecil/terbesar kurang/lebih dari atau sama dengan pada sebuah argumen.
{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}Mengembalikan nilai minimum/maksimum sebuah koma terpisah dari angka sebagai argumen.
{{jsxref("Math.random", "random()")}}Megembalikan angka acak antara 0 dan 1.
{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},Fungsi pembulatan dan pemotongan.
{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}Akar kuadrat, akar pangkat tiga, akar kuadrat dari jumlah argumen persegi.
{{jsxref("Math.sign", "sign()")}}tanda sebuah angka, mengindikasikan angka apapun merupakan angka positif, negatif, atau nol.
{{jsxref("Math.clz32", "clz32()")}},
+ {{jsxref("Math.imul", "imul()")}}		Angka yang dimulai dari nol bit dalam 32-bit.
+ Hasil dari C-like 32-bit perkalian dari dua argumen.
+ +

Tidak seperti beberapa objek lainnya, anda tidak perlu membuat objek matematika sendiri. anda selalu menggunakan built-in Math object.

+ +

Date object

+ +

JavaScript does not have a date data type. However, you can use the {{jsxref("Date")}} object and its methods to work with dates and times in your applications. The Date object has a large number of methods for setting, getting, and manipulating dates. It does not have any properties.

+ +

JavaScript handles dates similarly to Java. The two languages have many of the same date methods, and both languages store dates as the number of milliseconds since January 1, 1970, 00:00:00, with a Unix Timestamp being the number of seconds since January 1, 1970, 00:00:00.

+ +

The Date object range is -100,000,000 days to 100,000,000 days relative to 01 January, 1970 UTC.

+ +

To create a Date object:

+ +
var dateObjectName = new Date([parameters]);
+
+ +

where dateObjectName is the name of the Date object being created; it can be a new object or a property of an existing object.

+ +

Calling Date without the new keyword returns a string representing the current date and time.

+ +

The parameters in the preceding syntax can be any of the following:

+ + + +

Methods of the Date object

+ +

The Date object methods for handling dates and times fall into these broad categories:

+ + + +

With the "get" and "set" methods you can get and set seconds, minutes, hours, day of the month, day of the week, months, and years separately. There is a getDay method that returns the day of the week, but no corresponding setDay method, because the day of the week is set automatically. These methods use integers to represent these values as follows:

+ + + +

For example, suppose you define the following date:

+ +
var Xmas95 = new Date('December 25, 1995');
+
+ +

Then Xmas95.getMonth() returns 11, and Xmas95.getFullYear() returns 1995.

+ +

The getTime and setTime methods are useful for comparing dates. The getTime method returns the number of milliseconds since January 1, 1970, 00:00:00 for a Date object.

+ +

For example, the following code displays the number of days left in the current year:

+ +
var today = new Date();
+var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month
+endYear.setFullYear(today.getFullYear()); // Set year to this year
+var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day
+var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
+var daysLeft = Math.round(daysLeft); //returns days left in the year
+
+ +

This example creates a Date object named today that contains today's date. It then creates a Date object named endYear and sets the year to the current year. Then, using the number of milliseconds per day, it computes the number of days between today and endYear, using getTime and rounding to a whole number of days.

+ +

The parse method is useful for assigning values from date strings to existing Date objects. For example, the following code uses parse and setTime to assign a date value to the IPOdate object:

+ +
var IPOdate = new Date();
+IPOdate.setTime(Date.parse('Aug 9, 1995'));
+
+ +

Example

+ +

In the following example, the function JSClock() returns the time in the format of a digital clock.

+ +
function JSClock() {
+  var time = new Date();
+  var hour = time.getHours();
+  var minute = time.getMinutes();
+  var second = time.getSeconds();
+  var temp = '' + ((hour > 12) ? hour - 12 : hour);
+  if (hour == 0)
+    temp = '12';
+  temp += ((minute < 10) ? ':0' : ':') + minute;
+  temp += ((second < 10) ? ':0' : ':') + second;
+  temp += (hour >= 12) ? ' P.M.' : ' A.M.';
+  return temp;
+}
+
+ +

The JSClock function first creates a new Date object called time; since no arguments are given, time is created with the current date and time. Then calls to the getHours, getMinutes, and getSeconds methods assign the value of the current hour, minute, and second to hour, minute, and second.

+ +

The next four statements build a string value based on the time. The first statement creates a variable temp, assigning it a value using a conditional expression; if hour is greater than 12, (hour - 12), otherwise simply hour, unless hour is 0, in which case it becomes 12.

+ +

The next statement appends a minute value to temp. If the value of minute is less than 10, the conditional expression adds a string with a preceding zero; otherwise it adds a string with a demarcating colon. Then a statement appends a seconds value to temp in the same way.

+ +

Finally, a conditional expression appends "P.M." to temp if hour is 12 or greater; otherwise, it appends "A.M." to temp.

+ +

{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}

diff --git a/files/id/web/javascript/panduan/pengenalan/index.html b/files/id/web/javascript/panduan/pengenalan/index.html new file mode 100644 index 0000000000..19523a0821 --- /dev/null +++ b/files/id/web/javascript/panduan/pengenalan/index.html @@ -0,0 +1,156 @@ +--- +title: Perkenalan +slug: Web/JavaScript/Panduan/pengenalan +tags: + - 'I10n:priority' + - JavaScript + - Pedoman + - Pemula + - Perkenalan +translation_of: Web/JavaScript/Guide/Introduction +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
+ +

Bab ini mengenalkan dan membahas konsep yang mendasar di javascript.

+ +

Apa yang perlu anda ketahui

+ +

Pada pedoman ini kami anggap Anda memiliki pengetahuan dasar dari:

+ + + +

Tempat untuk mencari informasi JavaScript 

+ +

Dokumentasi JavaScript di MDN menyediakan materi sebagai berikut:

+ + + +

Jika Anda baru mengenal JavaScript, mulailah dari area belajar dan Paduan JavaScript. Ketika Anda sudah mendapatkan pemahaman dasarnya, Anda bisa menggunakan Referensi JavaScript untuk melihat lebih detil objek dan statement.

+ +

Apa itu JavaScript?

+ +

JavaScript adalah bahasa scripting cross-platform yang berorientasi objek yang digunakan untuk membuat bagian interaktif dari halaman-halaman web (misal: animasi kompleks, tombol yang dapat di-klik, menu pop-up, dll). Terdapat juga versi server-side yang lebih lanjut dari JavaScript seperti Node.Js yang mana dapat memberikan Anda fungsionalitas lebih pada sebuah website (seperti kolaborasi realtime di antara beberapa komputer). Di dalam host environment (contoh, sebuah web browser), JavaScript dapat dihubungkan ke objek-objek dari environment tersebut untuk menyediakan kendali programmatis terhadapnya. 

+ +

JavaScript memuat satu library standar yang memuat objek-objek, seperti Array, Date, dan Math, juga set inti dari elemen-elemen bahasa ini seperti operator, struktur kontrol, dan statement. Inti dari JavaScript dapat dikembangkan untuk kegunaan yang beragam dengan cara menambahkan  objek-objek tambahan; sebagai contoh:

+ + + +

JavaScript dan Java

+ +

JavaScript dan Java memang memiliki kemiripan pada beberapa hal, namun pada dasarnya saling berbeda. JavaScript menyerupai Java namum tidak memiliki static typing dan strong type checking. JavaScript mengikuti sebagian besar expresi syntax Java, konvensi penamaan serta konstruksi control-flow dasar, yang mana menjadi alasan untuk mengganti namanya dari LiveScript ke JavaScript.

+ +

Berbeda dengan sistem compile-time class Java yang dibangun melalui deklarasi, Javascript mendukung sistem runtime yang berbasis pada sebagian kecil tipe data yang mewakili nilai numerik, Boolean, dan string. Javascript memiliki model objek berbasis prototipe ketimbang model objek berbasis kelas yang lebih umum. Model berbasis prototipe menyediakan inheritance dinamis; yaitu, apa yang diturunkan/diwariskan dapat berbeda pada setiap objek. Javascript juga mendukung fungsi tanpa persyaratan deklaratif khusus. Fungsi bisa berupa properti objek, yang dijalankan sebagai tipe metode yang longgar.

+ +

JavaScript merupakan bahasa dengan bentuk yang sangat bebas dibandingkan dengan Java. Anda tidak perlu mendeklarasikan semua variabel, kelas, dan metode. Anda tidak perlu khawatir apakah metode itu public, private, atau protected, dan Anda juga tidak perlu mengimplementasikan interface. Variabel, parameter, dan tipe kembalian fungsi juga tidak ditulis secara eksplisit.

+ +

Java merupakan bahasa berbasis kelas yang didesain untuk eksekusi yang cepat dan penulisan yang aman. Penulisan yang aman, misalnya, Anda tidak bisa mengubah integer Java menjadi referensi objek atau mengakses private memori dengan membobol bytecode. Model berbasis kelas Java bermaksud bahwa program secara eksklusif terdiri atas sejumlah kelas beserta metode-metodenya. Pewarisan kelas dan penulisan ketat milik Java umumnya membutuhkan hirarki objek yang juga sangat kekat. Syarat-syarat tersebut menjadikan pemrograman Java lebih kompleks ketimbang pemrograman Javascript.

+ +

Sebaliknya, JavaScript mewarisi inti dari baris bahasa yang bertipe dinamis dan lebih sederhana sepeti HyperTalk dan dBASE. Bahasa-bahasa scripting tersebut menawarkan fungsionalitas pemrograman ke pengguna yang lebih luas karena syntax-nya yang lebih mudah, berfokus pada fungsi built-in, dan persyaratan yang minimalis untuk membuat objek.

+ + + + + + + + + + + + + + + + + + + + + + + +
JavaScript dibandingkan Java
JavaScriptJava
Berorientasi objek. Tak ada perbedaan antar tipe objek. Inheritance/ pewarisan melalui mekanisme prototipe, serta properti dan metode bisa ditambahkan kepada objek apapun secara dinamis.Berbasis kelas. Objek dibagi ke dalam kelas dan instansi dengan semua pewarisan melalui hirarki kelas. Kelas dan instansi tidak dapat memiliki properti atau metode yang ditambahkan secara dinamis.
Tipe data variabel tidak dideklarasi (dynamic typing, loosely typed).Tipe data variabel harus dideklarasi (static-typing, strongly typed).
Tidak bisa menulis ke hard disk secara otomatis.Bisa menulis ke hard disk secara otomatis.
+ +

Untuk informasi lebih lanjut perbedaan antara JavaScript dan Java, lihat bagian Detil dari model objek.

+ +

JavaScript dan spesifikasi ECMAScript

+ +

Javascript distandarisasi melalui Ecma International — asosiasi Eropa yang men-standarisasi sistem informasi dan komunikasi  (ECMA merupakan singkatan yang dari European Computer Manufacturers Association) yang mengurusi standarisasi bahasa pemrograman internasional berbasis JavaScript. Versi standarisasi JavaScript ini, yang disebut sebagai ECMAScript, akan berperilaku sama pada setiap aplikasi yang mengikutinya. Perusahaan-perusahaan dapat menggunakan bahasa standar terbuka untuk mengembangkan implementasi JavaScript mereka. Standar ECMAScript didokumentasikan dalam spesifikasi ECMA-262. Kunjungi Terbaru di JavaScript untuk mempelajari lebih lanjut tentang berbagai versi dari JavaScript dan spesifikasi edisi ECMAScript.

+ +

Standar ECMA-262 juga disetujui oleh ISO (International Organization for Standardization) sebagai ISO-16262. Anda juga dapat menemukan spesifikasinya di website Ecma International. Spesifikasi ECMAScript tidak memaparkan Document Object Model yang distandarisasi oleh World Wide Web Consortium (W3C) bersama WHATWG (Web Hypertext Application Technology Working Group). DOM mendefinisikan cara dimana dokumen objek HTML diekspos ke script Anda. Untuk mendapatkan pemahaman yang lebih baik tentang berbagai teknologi yang digunakan ketika memrogram menggunakan JavaScript, lihat artikel ikhtisar teknologi JavaScript.

+ +

Perbandingan dokumentasi JavaScript dengan spesifikasi ECMAScript

+ +

Spesifikasi ECMAScript adalah seperangkat persyaratan untuk menerapkan ECMAScript; berguna jika Anda ingin menerapkan fitur bahasa yang sesuai standar dalam penerapan atau mesin ECMAScript Anda (seperti SpiderMonkey di Firefox, atau V8 di Chrome).

+ +

Dokumen ECMAScript tidak dimaksudkan untuk membantu script programmer; gunakanlah dokumentasi JavaScript untuk informasi dalam penulisan script.

+ +

Spesifikasi ECMAScript menggunakan terminologi dan syntax yang mungkin asing bagi programmer JavaScript. Meskpun deskripsi dari bahasa tersebut dapat berbeda dengan ECMAScript, bahasanya sendiri tetap sama. JavaScript mendukung semua fungsionalitas yang diuraikan dalam spesifikasi ECMAScript.

+ +

Dokumentasi JavaScript menggambarkan aspek bahasa yang sesuai bagi seorang programmer JavaScript.

+ +

Memulai Javascript

+ +

Memulai JavaScript itu mudah: semua yang dibutuhkan hanyalah Web browser modern untuk menjalankannya. Panduan ini mencakup beberapa fitur JavaScript yang hanya tersedia pada versi terakhir Firefox, sehingga disarankan untuk menggunakan Firefox versi terbaru.

+ +

Terdapat dua alat yang dipasang ke dalam Firefox yang berguna dalam bereksperimen dengan JavaScript: Web Console dan Scratchpad.

+ +

Web Console

+ +

Web Consol / Konsol Web memperlihatkan kepada Anda tentang informasi laman Web yang sedang di-load saat ini, dan juga mencakup commandline / baris perintah yang dapat Anda gunakan untuk mengeksekusi ekspresi JavaScript pada laman saat ini.

+ +

Untuk membuka Konsol Web, tekan (Ctrl + Shift + K) pada Windows dan Linux atau tekan (Cmd + Option + K) pada Mac, pilih "Web Console" dari menu "Developer", yang berada di bawah menu "Tools" di Firefox. Konsol akan muncul di bagian bawah jendela browser. Di bagian bawah konsol tersebut adalah command line yang dapat Anda gunakan untuk memasukkan JavaScript, dan outputnya akan muncul pada panel di atasnya.

+ +

Konsol tersebut bekerja persis seperti eval: expresi terakhir yang dienter akan dikembalikan. Demi kesederhanaan, bisa dibayangkan jika setiap saat sesuatu dimasukkan ke dalam konsol, ia akan selalu dikelilingi oleh console.log sekitar eval seperti ini.

+ +
function greetMe(yourName) {
+  alert('Hello ' + yourName);
+}
+console.log(eval('3 + 5'));
+ +

 

+ +

Scratchpad

+ +

Konsol Web bagus untuk menjalankan satu baris kode JavaScript, meskipun Anda juga dapat menjalankan banyak baris, tetap saja akan terasa kurang nyaman, dan Anda juga tidak bisa menyimpan sampel kode Anda menggunakan Konsol Web. Jadi untuk contoh yang lebih kompleks, Scratchpad adalah solusinya.

+ +

Untuk membuka Scratchpad tekan (Shift + F4), pilih "Scratchpad" dari menu "Developer", yang ada di bawah menu pada Firefox. Selanjutnya akan muncul di window yang terpisah dan merupakan editor yang dapat Anda gunakan untuk menulis dan menjalankan JavaScript di browser. Anda juga dapat menyimpan dan membuka kode dari disk.

+ +

+ +

Hello world

+ +

Untuk mulai menulis JavaScript, buka Scratchpad dan tulislah kode JavaScript "Hello world" pertama Anda:

+ +
(function(){
+  "use strict";
+  /* Start of your code */
+  function greetMe(yourName) {
+    alert('Hello ' + yourName);
+  }
+
+  greetMe('World');
+  /* End of your code */
+})();
+
+ +

Pilih kode diatas dan tekan Ctrl+R untuk melihatnya berjalan di browser Anda! Di laman-laman berikutnya, panduan ini akan memperkenalkan Anda dengan syntax dan fitur-fitur bahasa JavaScript, sehingga Anda dapat menulis aplikasi yang lebih kompleks. Tapi untuk saat ini, ingatlah untuk selalu memasukkan (function(){"use strict"; sebelum kode Anda, dan tambahkan  })(); di akhir kode Anda. Anda akan mempelajari apa artinya itu, tetapi untuk sekarang mereka bisa dianggap melakukan:

+ +
    +
  1. Meningkatkan performa secara masif
    2. +
  2. Mencegah semantik ceroboh dalam JavaScript yang menjatuhkan pemula
    3. +
  3. Mencegah code snippets yang dieksekusi dalam konsol untuk berinteraksi satu sama lain (misalnya sesuatu yang dibuat dalam suatu eksekusi konsol digunakan untuk eksekusi konsol yang lain).
    4. +
+ +

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git a/files/id/web/javascript/panduan/tentang/index.html b/files/id/web/javascript/panduan/tentang/index.html new file mode 100644 index 0000000000..98b5e2c2b0 --- /dev/null +++ b/files/id/web/javascript/panduan/tentang/index.html @@ -0,0 +1,144 @@ +--- +title: Tentang Panduan Ini +slug: Web/JavaScript/Panduan/Tentang +tags: + - JavaScript + - Panduan + - dasar +translation_of: Web/JavaScript/Guide/Introduction +--- +

JavaScript adalah bahasa yang cross-platform yaitu berarti JavaScript dapat dijalankan di banyak platform seperti Linux, Windows, Mac OS, Android, Firefox OS dan lain - lain. Panduan ini akan memberikan segala pengetahuan dasar yang perlu anda ketahui dalam penggunaan JavaScript.

+ +

Fitur baru pada versi JavaScript

+ +

 

+ + + +

 

+ +

Apa yang perlu anda pelajari terlebih dahulu ?

+ +

Sebelum mempelajari panduan ini anda harus mempunyai pengetahuan dasar tentang:

+ + + +

JavaScript versions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 1 JavaScript and Navigator versions
JavaScript versionNavigator version
JavaScript 1.0Navigator 2.0
JavaScript 1.1Navigator 3.0
JavaScript 1.2Navigator 4.0-4.05
JavaScript 1.3Navigator 4.06-4.7x
JavaScript 1.4 
JavaScript 1.5Navigator 6.0
+ Mozilla (open source browser)
JavaScript 1.6Firefox 1.5, other Mozilla 1.8-based products
JavaScript 1.7Firefox 2, other Mozilla 1.8.1-based products
JavaScript 1.8Firefox 3, other Gecko 1.9-based products
+ +

Dimana saya mendapatkan informasi tentang JavaScript ?

+ +

Dokumentasi JavaScript terdapat pada buku dibawah ini:

+ + + +

Untuk yang baru belajar bacalah JavaScript Guide. Atau anda ingin mendapat pemahaman yang kuat bacalah JavaScript Reference untuk mendapatkan detail dari masing - masing object dan statements.

+ +

Tips untuk belajar JavaScript

+ +

Untuk memulai belajar JavaScript sangatlah mudah, anda hanya butuh web browser versi terbaru seperti Mozilla Firefox. Karena di dalam panduan ini terdapat beberapa fitur JavaScript yang hanya bisa dijalankan pada web browser firefox versi terbaru (dan web browser lain yang didukung Gecko), jadi kami menyarankan anda selalu update Mozilla Firefox terbaru.

+ +

Ada dua tool yang tersedia di dalam Firefox dan sangat berguna untuk berEksperimen dengan JavaScript yaitu Web Console dan Scratchpad.

+ +

Web Console

+ +

Web Console memberikan anda informasi tentang halaman web yang sedang anda buka, dan juga terdapat command line yang membuat anda bisa menjalankan JavaScript expression di web page yang sedang anda buka.

+ +

Untuk menggunakan Web Console, pilih "Web Console" dari menu "Web Developer" yang terdapat di dalam menu "Tools" atau "Peralatan" dalam bahasa indonesia. Web Console akan muncul pada bagian bawah browser dan anda bisa menjalankan Script anda pada Text Input dan hasilnya akan muncul pada box seperti gambar dibawah ini.

+ +

+ +

Scratchpad

+ +

Web Console biasa digunakan untuk single lines Script, ketika anda ingin mencoba Script multiple lines kami sarankan menggunakan Scratchpad, karena selain tidak efective juga Web Console tidak bisa menyimpan perubahan yang anda lakukan pada Script, namun Scratchpad melakukan itu dengan sangat baik.

+ +

Untuk menggunakan Scratchpad, pilih "Scratchpad" pada menu "Web Developer" di dalam menu "Tools" atau "Pengaturan" dalam bahasa indonesia. Anda dapat menyimpan dan menload Script dari dari hardisk ataupun flashdisk.

+ +

Ketika anda mengklik tombol "Inspect" maka script anda akan tereksekusi dan hasilnya akan dikembalikan pada Script dalam bentuk komentar.

+ +

+ +

Document conventions

+ +

Applikasi JavaScript berjalan di banyak Operating System (OS) dan informasi pada panduan ini adalah untuk semua versi OS. File dan lokasi Folder pada Unix dan Windows dipisahkan oleh backslashes (/)

+ +

Panduan ini menggunakan uniform resource locators (URLs) of the following form:

+ +

http://server.domain/path/file.html

+ +

In these URLs, server represents the name of the server on which you run your application, such as research1 or www; domain represents your Internet domain name, such as netscape.com or uiuc.edu; path represents the directory structure on the server; and file.html represents an individual file name. In general, items in italics in URLs are placeholders and items in normal monospace font are literals. If your server has Secure Sockets Layer (SSL) enabled, you would use https instead of http in the URL.

+ +

This guide uses the following font conventions:

+ + + +
 
diff --git a/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html b/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html new file mode 100644 index 0000000000..41900a1603 --- /dev/null +++ b/files/id/web/javascript/panduan/values,_variables,_and_literals/index.html @@ -0,0 +1,648 @@ +--- +title: Tata Bahasa dan Tipe +slug: 'Web/JavaScript/Panduan/Values,_variables,_and_literals' +tags: + - JavaScript + - Panduan +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
+ +

Pada bagian ini membahas tata bahasa dasar Javascript, deklarasi variabel, tipe data dan literal.

+ +

Dasar

+ +

Sebagian besar sintak JavaScript terinspirasi dari Java, namun juga dipengaruhi oleh Awk, Perl dan Python.

+ +

JavaScript bersifat case-sensitive dan menggunakan set karakter Unicode.

+ +

Dalam JavaScript, instruksi disebut {{Glossary ("Statement", "pernyataan")}} dan dipisahkan oleh titik koma (;). Spasi, tab dan karakter baris baru disebut whitespace.Teks sumber skrip JavaScript dipindai dari kiri ke kanan dan diubah menjadi urutan elemen masukan yang merupakan token, karakter kontrol, terminator baris, komentar atau whitespace. ECMAScript juga mendefinisikan kata kunci dan literal tertentu dan memiliki aturan untuk penyisipan titik koma secara otomatis (ASI) untuk mengakhiri pernyataan. Namun, dianjurkan untuk selalu menambahkan titik koma untuk mengakhiri pernyataan anda; Itu akan terhindar dari efek samping. Untuk informasi lebih lanjut, lihat referensi rinci tentang tata bahasa eksikal JavaScript.

+ +


+ Komentar

+ +

Sintak komentar pada JavaScript sama dengan C++ dan dalam banyak bahasa pemrograman lainnya:

+ +
// komentar satu baris
+
+/* Ini lebih panjang
+   komentar beberapa baris
+ */
+
+/* Anda tidak bisa menggunakannya, /* komentar bersarang */ Sintak bermasalah */
+ +

Deklarasi

+ +

Ada tiga macam deklarasi pada JavaScript.

+ +
+
var
+
Mendeklarasikan sebuah variabel, opsional menginisialisasi sebuah nilai.
+
let
+
Mendeklarasikan lingkup-blok, variabel lokal, opsional menginisialisasi sebuah nilai.
+
const
+
Mendeklarasikan sebuah lingkup-blok, baca-saja dinamakan konstanta.
+
+ +

Variabel

+ +

Anda menggunakan variabel sebagai nama simbolik dalam aplikasi Anda.  Nama variabel, disebut {{Glossary("Identifier", "Pengidentifikasi")}}, sesuai dengan peraturan tertentu.

+ +

Pengindetifikasi pada JavaScript harus dimulai dengan huruf, garis bawah (_), atau tanda dolar ($); Karakter selanjutnya bisa berupa digit (0-9). karena JavaScript sensitif huruf (case-sensitive), Huruf termasuk karakter "A" sampai "Z" (huruf besar) dan huruf "a" sampai "z" (huruf kecil) .

+ +

Anda dapat menggunakan sebagian besar huruf ISO 8859-1 atau Unicode seperti å dan ü dalam pengidentifikasi (untuk lebih jelasnya lihat postingan blog ini). Anda juga dapat menggunakan urutan rangkaian pelolosan/escape Unicode sebagai karakter dalam pengidentifikasi.

+ +

Beberapa contoh nama legal adalah Number_hits, temp99, $credit, dan _name.

+ +

Mendeklarasikan variabel

+ +

Anda bisa mendeklarasikan sebuah variabel dalam tiga cara:

+ + + +

Mengevaluasi variabel

+ +

Variabel yang dideklarasikan dengan menggunakan pernyataan  var atau let tanpa penetapan nilai yang ditentukan memiliki nilai undefined.

+ +

Upaya untuk mengakses variabel yang tidak dideklarasikan akan menuju kepada pelemparan eksepsi ReferenceError:

+ +
var a;
+console.log('Nilai dari a adalah ' + a); // Nilai dari a adalah undefined
+
+console.log('Nilai dari b adalah ' + b); // Nilai dari b adalah undefined
+var b;
+
+console.log('Nilai dari c adalah ' + c); // Tidak tertangkap ReferenceError: c tidak di definisikan
+
+let x;
+console.log('Nilai dari x adalah ' + x); // Nilai dari x adalah undefined
+
+console.log('Nilai dari y adalah ' + y); // Tidak tertangkap ReferenceError: y tidak di definisikan
+let y;
+ +

Anda dapat menggunakan undefined untuk menentukan apakah sebuah variabel memiliki nilai. Dalam kode berikut, variabel input tidak diberi nilai, dan pernyataan  if dievaluasi true.

+ +
var input;
+if (input === undefined) {
+  lakukanIni();
+} else {
+  lakukanItu();
+}
+ +

Nilai  undefined berperilaku sebagai false bila digunakan dalam konteks boolean. Misalnya, kode berikut menjalankan fungsi fungsiSaya karena elemen  myArray undefined:

+ +
var myArray = [];
+if (!myArray[0]) fungsiSaya();
+ +

Nilai  undefined mengkonversi ke NaN bila digunakan dalam konteks numerik.

+ +
var a;
+a + 2;  // Dievaluasi ke NaN
+ +

Ketika Anda mengevaluasi sebuah variabel null, nilai null berperilaku seperti 0 dalam konteks numerik dan sebagai false dalam konteks boolean. Sebagai contoh:

+ +
var n = null;
+console.log(n * 32); // Akan log 0 ke konsol
+ +

Lingkup variabel

+ +

Bila Anda mendeklarasikan variabel di luar fungsi apa pun, ini disebut variabel global , karena tersedia pada kode lain dalam dokumen tersebut. Ketika Anda mendeklarasikan sebuah variabel dalam suatu fungsi, itu disebut variabel lokal , karena hanya tersedia di dalam fungsi itu.

+ +

JavaScript sebelum ECMAScript 2015 tidak memiliki lingkup pernyataan blok ; Sebaliknya, variabel yang dinyatakan dalam blok bersifat lokal terhadap fungsi (atau lingkup global) yang berada di blok. Misalnya kode berikut akan log 5, karena ruang lingkupnya x adalah fungsi (atau konteks global) yang x dideklarasikan, bukan bloknya, yang dalam hal ini adalah sebuah pernyataan if.

+ +
if (true) {
+  var x = 5;
+}
+console.log(x);  // x is 5
+ +

Perilaku ini berubah, saat menggunakan deklarasi let yang diperkenalkan di ECMAScript 2015.

+ +
if (true) {
+  let y = 5;
+}
+console.log(y);  // ReferenceError: y tidak di definisikan
+ +

Hoisting variabel

+ +

Hal lain yang tidak biasa tentang variabel dalam JavaScript adalah Anda bisa merujuk ke variabel yang dideklarasikan nanti, tanpa mendapatkan eksepsi. Konsep ini dikenal sebagai hoisting; Variabel dalam JavaScript dalam arti "dikibarkan" atau diangkat ke atas fungsi atau pernyataan. Bagaimanapun, variabel yang dikibarkan akan memberikan nilai undefined. Jadi, bahkan jika Anda mendeklarasikan dan menginisialisasi setelah Anda menggunakan atau merujuk ke variabel ini, itu akan tetap memberikan undefined.

+ +
/**
+ * Contoh 1
+ */
+console.log(x === undefined); // true
+var x = 3;
+
+/**
+ * Contoh 2
+ */
+// Akan memberikan nilai undefined
+var myvar = 'my value';
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = 'local value';
+})();
+ +

Contoh di atas akan dinterprestasikan sama dengan:

+ +
/**
+ * Contoh 1
+ */
+var x;
+console.log(x === undefined); // true
+x = 3;
+
+/**
+ * Example 2
+ */
+var myvar = 'my value';
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = 'nilai lokal';
+})();
+ +

Karena hoisting, semua pernyataan var dalam suatu fungsi harus ditempatkan sedekat mungkin ke atas fungsi. Praktik terbaik ini meningkatkan kejelasan kode.

+ +

Dalam ECMAScript 2015, variabel  let (const) tidak akan hoist ke bagian atas blok. Bagaimanapun, referensi variabel di blok sebelum deklarasi variabel menghasilkan sebuah ReferenceError. Variabel ini berada dalam "zona mati temporal" dari awal blok sampai deklarasi diproses.

+ +
console.log(x); // ReferenceError
+let x = 3;
+ +

Hoisting fungsi

+ +

Untuk fungsi, hanya deklarasi fungsi yang diangkat ke atas dan bukan ekspresi fungsi.

+ +
/* Deklarasi fungsi */
+
+foo(); // "bar"
+
+function foo() {
+  console.log('bar');
+}
+
+
+/* Ekspresi fungsi */
+
+baz(); // TypeError: baz adalah bukan fungsi
+
+var baz = function() {
+  console.log('bar2');
+};
+ +

Variabel global

+ +

Variabel global sebenarnya adalah properti dari objek global . Di halaman web objek global itu window, sehingga Anda bisa mengatur dan mengakses variabel global dengan menggunakan sintaks window.variable

+ +

Akibatnya, Anda dapat mengakses variabel global yang dideklarasikan dalam satu window atau frame dari window atau frame lain dengan menentukan nama window atau frame. Misalnya, jika variabel yang disebut phoneNumber dinyatakan dalam dokumen, Anda dapat merujuk variabel ini dari iframe as parent.phoneNumber.

+ +

Konstanta

+ +

Anda bisa membuat variabel baca-saja, dinamai dengan kata kunci const. Sintaksis dari pengenal konstanta sama dengan pengenal variabel: ia harus dimulai dengan huruf, garis bawah atau tanda dolar ($) dan dapat berisi karakter abjad, numerik, atau garis bawah.

+ +
const PI = 3.14;
+ +

Konstanta tidak dapat mengubah nilai melalui penugasan atau dinyatakan ulang saat naskah dijalankan. Ini harus diinisialisasi ke sebuah nilai.

+ +

Aturan lingkup untuk konstanta sama dengan variabel lingkup-blok let . Jika kata kunci  const dihilangkan, pengenal dianggap mewakili variabel.

+ +

Anda tidak dapat mendeklarasikan konstanta dengan nama yang sama dengan fungsi atau variabel dalam lingkup yang sama. Sebagai contoh:

+ +
// INI AKAN MENYEBABKAN ERROR
+function f() {};
+const f = 5;
+
+// INI AKAN MENYEBABKAN ERROR JUGA
+function f() {
+  const g = 5;
+  var g;
+
+  //pernyataan
+}
+ +

Namun, properti objek yang ditugaskan pada konstanta tidak terlindungi, jadi pernyataan berikut dijalankan tanpa masalah.

+ +
const MY_OBJECT = {'key': 'value'};
+MY_OBJECT.key = 'otherValue';
+ +

Struktur dan tipe data

+ +

Tipe data

+ +

Standar ECMAScript terbaru mendefinisikan tujuh tipe data:

+ + + +

Meskipun tipe data ini jumlahnya relatif kecil, namun memungkinkan Anda untuk melakukan fungsi-fungsi yang berguna dengan aplikasi Anda.  {{jsxref("Object", "Objects")}} dan {{jsxref("Function", "functions")}} merupakan unsur fundamental lainnya dalam bahasa ini. Anda bisa memikirkan objek sebagai wadah bernama untuk nilai, dan fungsi sebagai prosedur yang dapat dilakukan aplikasi Anda.

+ +

Konversi tipe data

+ +

JavaScript adalah bahasa yang diketik secara dinamis. Itu berarti Anda tidak perlu menentukan tipe data variabel saat Anda menyatakannya, dan tipe data akan dikonversi secara otomatis sesuai kebutuhan selama eksekusi skrip. Jadi, misalnya, Anda bisa mendefinisikan variabel sebagai berikut:

+ +
var jawaban = 42;
+ +

Dan nanti, Anda bisa menetapkan variabel yang sama dengan nilai string, misalnya:

+ +
jawaban = 'Thanks for all the fish...';
+ +

Karena JavaScript diketik secara dinamis, penugasan ini tidak menyebabkan pesan kesalahan.

+ +

Dalam ekspresi yang melibatkan nilai numerik dan string dengan operator +, JavaScript mengubah nilai numerik menjadi string. Misalnya, perhatikan pernyataan berikut:

+ +
x = 'Jawabannya adalah ' + 42 // "Jawabannya adalah 42"
+y = 42 + ' Adalah jawabannya' // "42 Adalah jawabannya"
+ +

Dalam pernyataan yang melibatkan operator lain, JavaScript tidak mengubah nilai numerik menjadi string. Sebagai contoh:

+ +
'37' - 7 // 30
+'37' + 7 // "377"
+ +

Mengubah string menjadi angka

+ +

Dalam kasus yang sebuah nilai mewakili bilangan ada dalam memori sebagai string, ada metode untuk konversi.

+ + + +

parseInt Hanya akan memberikan bilangan bulat, jadi penggunaannya berkurang untuk desimal. Selain itu, praktik terbaik untuk parseInt selalu menyertakan parameter radix. Parameter radix digunakan untuk menentukan sistem numerik yang akan digunakan.

+ +

Metode alternatif untuk mengambil nomor dari string adalah dengan operator +  (unary plus):

+ +
'1.1' + '1.1' = '1.11.1'
+(+'1.1') + (+'1.1') = 2.2
+// Catatan: kurung siku buka tutup ditambahkan untuk kejelasan, tidak diminta.
+ +

Literal

+ +

Anda menggunakan literal untuk mewakili nilai dalam JavaScript. Ini adalah nilai tetap, bukan variabel, yang Anda berikan secara literal dalam skrip Anda. Bagian ini menjelaskan jenis literal berikut:

+ + + +

Literal array

+ +

Sebuah literal array adalah daftar dari nol atau lebih ekspresi,  yang masing-masing mewakili elemen array, dilampirkan dalam tanda kurung siku ([]). Bila Anda membuat array menggunakan literal array, ini diinisialisasi dengan nilai yang ditentukan sebagai elemennya, dan panjangnya diatur ke jumlah argumen yang ditentukan.

+ +

Contoh berikut membuat array coffees dengan tiga elemen dan panjang tiga:

+ +
var coffees = ['French Roast', 'Colombian', 'Kona'];
+ +

Catatan: Sebuah literal array  adalah tipe dari object initializer. Lihat Menggunakan Penginisialisasi Objek.

+ +

Jika sebuah array dibuat menggunakan literal dalam skrip tingkat-atas, JavaScript menginterpretasikan array setiap kali mengevaluasi ekspresi yang berisi literal array. Selain itu, literal yang digunakan dalam suatu fungsi dibuat setiap kali fungsi dipanggil.

+ +

Array literal juga objek Array. Lihat Array dan Koleksi diIndek untuk rincian tentang objek Array.

+ +

Ekstra koma dalam literal array

+ +

Anda tidak perlu menentukan semua elemen dalam literal array. Jika Anda memasukkan dua koma berturut-turut, array dibuat undefined untuk elemen yang tidak ditentukan. Contoh berikut membuat array fish:

+ +
var fish = ['Lion', , 'Angel'];
+ +

Array ini memiliki dua elemen dengan nilai dan satu elemen kosong (fish[0] adalah "Lion", fish[1] adalah undefined, dan fish[2] merupakan "Angel").

+ +

Jika Anda menyertakan koma di akhir daftar elemen, koma diabaikan. Pada contoh berikut, panjang array adalah tiga. Tidak ada myList[3]. Semua koma lainnya dalam daftar menunjukkan elemen baru.

+ +

Catatan: Koma diakhir dapat membuat kesalahan pada versi browser lama dan merupakan praktik terbaik untuk menghapusnya.

+ +
var myList = ['home', , 'school', ];
+ +

Dalam contoh berikut, panjang array adalah empat, dan myList[0]dan myList[2] hilang.

+ +
var myList = [ ,'home', , 'school'];
+ +

Dalam contoh berikut, panjang array adalah empat, dan myList[1]dan myList[3] hilang. Hanya koma terakhir yang diabaikan.

+ +
var myList = ['home', , 'school', , ];
+ +

Memahami perilaku ekstra  koma penting untuk memahami JavaScript sebagai bahasa, namun saat menulis kode Anda sendiri: secara eksplisit menyatakan elemen yang hilang sebagai undefined akan meningkatkan kejelasan dan perawatan kode anda.

+ +

Literal boolean

+ +

Tipe Boolean memiliki dua nilai literal: true dan false.

+ +

Jangan membingungkan nilai Boolean primitif true dan false dengan nilai true dan false objek Boolean. Objek Boolean adalah pembungkus di sekitar tipe data Boolean primitif. Lihat {{jsxref("Boolean")}} untuk informasi lebih lanjut.

+ +

Integer

+ +

Integer dapat dinyatakan dalam desimal (basis 10), heksadesimal (basis 16), oktal (basis 8) dan biner (basis 2).

+ + + +

Beberapa contoh literal bilangan bulat adalah:

+ +
0, 117 and -345 (desimal, basis 10)
+015, 0001 and -0o77 (oktal, basis 8)
+0x1123, 0x00111 and -0xF1A7 (heksadesimal, "hex" or basis 16)
+0b11, 0b0011 and -0b11 (biner, basis 2)
+ +

Untuk informasi lebih lanjut, lihat literatur numerik dalam referensi tata bahasa leksikal .

+ +

Literal floating-point

+ +

Sebuah literal  floating-point dapat memiliki bagian berikut:

+ + + +

Bagian eksponennya adalah "e" atau "E" diikuti oleh bilangan bulat, yang dapat ditandatangani (didahului dengan "+" atau "-"). Literal floating-point harus memiliki setidaknya satu digit dan titik desimal atau "e" (atau "E").

+ +

Lebih ringkas lagi, sintaksnya adalah:

+ +
[(+|-)][angka][.angka][(E|e)[(+|-)]angka]
+ +

Sebagai contoh:

+ +
3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+ +

Literal objek

+ +

Literal objek adalah daftar dari nol atau lebih pasangan nama properti dan nilai objek yang terkait, yang dilampirkan dalam kurung kurawal ({}). Anda seharusnya tidak menggunakan literal objek di awal sebuah pernyataan. Ini akan menyebabkan kesalahan atau tidak berperilaku seperti yang Anda harapkan, karena { akan ditafsirkan sebagai awal dari sebuah blok.

+ +

Berikut ini adalah contoh dari literal objek. Elemen pertama dari objek car mendefinisikan sebuah properti myCar, dan menetapkan sebuah string baru, " Saturn";  Elemen kedua, properti getCar,  segera diberi hasil pemanggilan function (carTypes("Honda")); elemen ketiga, properti special menggunakan variabel yang ada ( sales).

+ +
var sales = 'Toyota';
+
+function carTypes(name) {
+  if (name === 'Honda') {
+    return name;
+  } else {
+    return "Maaf, kami tidak menjual " + name + ".";
+  }
+}
+
+var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales };
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+ +

Selain itu, Anda dapat menggunakan literal numerik atau string untuk nama properti atau menyarangkan objek di dalam objek yang lain. Contoh berikut menggunakan opsi ini.

+ +
var car = { manyCars: {a: 'Saab', 'b': 'Jeep'}, 7: 'Mazda' };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+ +

Nama properti objek bisa berupa string apapun, termasuk string kosong. Jika nama properti akan menjadi {{Glossary("Identifier","pengidentifikasi")}} JavaScript yang tidak valid atau angka, maka harus dilampirkan dalam tanda petik. Nama properti yang pengidentifikasi tidak valid juga tidak dapat diakses sebagai properti dot (.), namun dapat diakses dan ditetapkan dengan notasi seperti array ("[]").

+ +
var namaPropertiTidakBiasa = {
+  '': 'An empty string',
+  '!': 'Bang!'
+}
+console.log(namaPropertiTidakBiasa.'');   // SyntaxError: Unexpected string
+console.log(namaPropertiTidakBiasa['']);  // An empty string
+console.log(namaPropertiTidakBiasa.!);    // SyntaxError: Unexpected token !
+console.log(namaPropertiTidakBiasa['!']); // Bang!
+ +

Peningkatan Literal Objek

+ +

Di ES2015, literal objek diperluas untuk mendukung pengaturan prototipe pada konstruksi, singkatan untuk  foo: penugasan foo , definisikan metode, pembuatan panggilan super, dan komputasi nama properti dengan ekspresi. Bersamaan dengan itu, ini juga membawa literatur dan deklarasi kelas lebih dekat bersama, dan membiarkan desain berbasis objek mendapatkan keuntungan dari beberapa kemudahan yang sama.

+ +
var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // Shorthand for ‘handler: penangan’
+    handler,
+    // Metode
+    toString() {
+     // Pangilan super
+     return 'd ' + super.toString();
+    },
+    // Dikalkulasi (dinamis) nama properti
+    [ 'prop_' + (() => 42)() ]: 42
+};
+ +

Tolong dicatat:

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

Literal RegExp

+ +

Sebuah literal regex adalah pola yang dilampirkan diantara garis miring. Berikut ini adalah contoh literal regex.

+ +
var re = /ab+c/;
+ +

Literal string

+ +

Literal string adalah nol atau lebih karakter yang dilampirkan dengan tanda kutip ganda (") atau tunggal ('). String harus dibatasi dengan tanda kutip dari jenis yang sama; Yaitu kedua tanda kutip tunggal atau kedua tanda petik ganda. Berikut ini adalah contoh literal string:

+ +
'foo'
+"bar"
+'1234'
+'baris satu \n baris lainnya'
+"Kucing jhon"
+ +

Anda dapat memanggil salah satu metode objek String pada nilai literal string-JavaScript secara otomatis mengubah literal string menjadi objek String sementara, memanggil metode tersebut, lalu membuang objek String sementara. Anda juga bisa menggunakan properti String.length dengan literal string:

+ +
console.log("Kucing jhon".length)
+// Akan mencetak jumlah simbol dalam string termasuk spasi.
+// Dalam hal ini, 11.
+ +

Di ES2015, template literal juga tersedia. Template string memberikan sintaksis gula untuk pembuatan string. Ini mirip dengan fitur interpolasi string di Perl, Python dan lainnya. Secara opsional, tag dapat ditambahkan untuk memungkinkan konstruksi string disesuaikan, menghindari serangan injeksi atau membangun struktur data tingkat tinggi dari konten string.

+ +
// Literal dasar kreasi string
+`Dalam JavaScript '\n' adalah sebuah line-feed.`
+
+// String beberapa baris
+`Dalam template string JavaScript dapat berjalan di
+ beberapa baris, namun string yang dikutip ganda dan tunggal
+ tidak dapat dilakukan.`
+
+// Interpoasi string
+var name = 'Bob', time = 'today';
+`Hello ${name}, how are you ${time}?`
+
+// Membangun prefix permintaan HTTP digunakan untuk menafsirkan penggantian dan konstruksi
+POST`http://foo.org/bar?a=${a}&b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);
+ +

Anda harus menggunakan literal string kecuali Anda secara khusus perlu menggunakan objek String. Lihat {{jsxref("String")}}  untuk rincian tentang objek String.

+ +

Menggunakan karakter khusus dalam string

+ +

Selain karakter biasa, Anda juga bisa menyertakan karakter khusus dalam string, seperti yang ditunjukkan pada contoh berikut.

+ +
'one line \n another line'
+ +

Tabel berikut mencantumkan karakter khusus yang dapat Anda gunakan dalam string JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabel: karakter khusus JavaScript
KarakterBerarti
\0Null Byte
\bbackspase
\fform feed
\nBaris baru
\rCariage return
\tTab
\vTab vertikal
\'Apostrof atau kutipan tunggal
\"Kutipan ganda
\\Karakter backslash
\XXXKarakter dengan pengkodean Latin-1 ditentukan oleh hingga tiga digit oktal XXX antara 0 dan 377. Misalnya, \251 adalah urutan oktal untuk simbol hak cipta.
\xXXKarakter dengan pengkodean Latin-1 yang ditentukan oleh dua digit heksadesimal XX antara 00 dan FF. Misalnya, \xA9 adalah urutan heksadesimal untuk simbol hak cipta.
\uXXXXKarakter Unicode ditentukan oleh empat digit heksadesimal XXXX . Misalnya, \u00A9 adalah urutan Unicode untuk simbol hak cipta. Lihat rangkaian pelolosan Unicode.
\u{XXXXX}Kode Unicode lolos. Misalnya, \u {2F804} sama dengan Unicode sederhana yang lolos \uD87E \uDC04.
+ +

Karakter pelolosan

+ +

Untuk karakter yang tidak tercantum dalam tabel, tanda garis miring terbalik sebelumnya diabaikan, namun penggunaan ini tidak berlaku lagi dan harus dihindari.

+ +

Anda dapat memasukkan tanda petik di dalam string sebelum mendahului dengan garis miring terbalik. Ini dikenal sebagai pelolosan dari tanda petik. Sebagai contoh:

+ +
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+ +

Hasil dari ini adalah:

+ +
He read "The Cremation of Sam McGee" by R.W. Service.
+ +

Untuk menyertakan garis miring terbalik di dalam string, Anda harus melepaskan diri dari karakter garis miring terbalik. Misalnya, untuk menetapkan path file c:\temp ke string, gunakan yang berikut ini:

+ +
var home = 'c:\\temp';
+ +

Anda juga bisa meloloskan dari baris istirahat sebelumnya mendahului mereka dengan garis miring terbalik. Garis miring terbalik dan baris istirahat keduanya terlepas dari nilai string.

+ +
var str = 'this string \
+is broken \
+across multiple \
+lines.'
+console.log(str);   // this string is broken across multiplelines.
+ +

Meskipun JavaScript tidak memiliki sintaks "heredoc", Anda bisa mendekat dengan menambahkan pelolosan baris istirahat dan baris istirahat pada akhir setiap baris:

+ +
var poem =
+'Roses are red,\n\
+Violets are blue.\n\
+Sugar is sweet,\n\
+and so is foo.'
+ +

ECMAScript 2015 memperkenalkan tipe literal baru, yaitu  template literal . Hal ini memungkinkan banyak fitur baru termasuk string beberapa baris!

+ +

 

+ +
var poem =
+`Roses are red,
+Violets are blue.
+Sugar is sweet,
+and so is foo.`
+ +

 

+ +

Informasi lebih lanjut

+ +

Bab ini berfokus pada sintaks dasar untuk deklarasi dan tipe. Untuk mempelajari lebih lanjut tentang konstruksi bahasa JavaScript, lihat juga bab-bab berikut dalam panduan ini:

+ + + +

Pada bab berikutnya, kita akan melihat konstruksi aliran kontrol dan penanganan kesalahan.

diff --git a/files/id/web/javascript/panduan/working_with_objects/index.html b/files/id/web/javascript/panduan/working_with_objects/index.html new file mode 100644 index 0000000000..4449732e61 --- /dev/null +++ b/files/id/web/javascript/panduan/working_with_objects/index.html @@ -0,0 +1,492 @@ +--- +title: Bekerja dengan objek +slug: Web/JavaScript/Panduan/Working_with_Objects +tags: + - 'I10n:priority' + - JavaScript + - Konstruktor + - Membandingkan objek + - Objek + - Panduan + - Pemula + - dokumen +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
+ +

JavaScript dirancang berdasarkan paradigma berbasis objek sederhana. Objek adalah kumpulan dari properti, dan properti adalah sepasang hubungan antara nama (atau kunci) dan nilai. Nilai properti bisa berupa fungsi, Dalam hal ini properti itu disebut metode. Selain objek yang sudah di tentukan pada peramban, Kamu bisa menentukan objekmu sendiri. Bab ini menjelaskan cara memakai objek, properti, fungsi, dan metode, serta bagaimana cara membuat objekmu sendiri.

+ +

Ikhtisar objek

+ +

Objek di JavaScript sama seperti kebanyakan bahasa pemrograman lainnya, bisa dibandingkan dengan objek dalam kehidupan nyata. Konsep objek dalam JavaScript dapat dipahami dengan kehidupan nyata, objek nyata.

+ +

Di JavaScript, objek adalah entitas yang mandiri dengan properti dan tipe. Bandingkan dengan cangkir, misalnya. Sebuah cangkir adalah objek dengan banyak properti. Cangkir punya warna, desain, berat, materi bahan, dll. Dengan cara sama, objek JavaScript juga punya banyak properti yang menjelaskan karakteristiknya.

+ +

Objek dan properti

+ +

Objek JavaScript punya banyak properti yang terkait dengannya. Properti dari objek dapat didefinisikan sebagai variabel yang dilampirkan pada objek itu. Properti dari objek pada dasarnya sama dengan variabel JavaScript biasa, kecuali lampiran pada objek. Properti objek menentukan karakteristik objek itu. Kamu mengakses properti objek dengan sebuah notasi titik sederhana:

+ +
objectName.propertyName
+
+ +

Seperti semua variabel JavaScript, baik nama objek (bisa jadi variabel normal) maupun nama properti peka terhadap besar huruf. Kamu bisa mendefinisi properti dengan mengassign nilai. Contohnya, ayo buat objek bernama myCar dan dan berikan dia properti bernama make, model, dan year sebagai berikut:

+ +
var myCar = new Object();
+myCar.make = 'Ford';
+myCar.model = 'Mustang';
+myCar.year = 1969;
+
+ +

Nilai properti objek yang tidak diassign adalah {{jsxref("undefined")}} (dan bukan {{jsxref("null")}}).

+ +
myCar.color; // undefined
+ +

Properti dari objek JavaScript juga bisa diakses atau diset menggunakan notasi kurung siku (untuk lebih detil lihat aksesor properti). Terkadang objek disebut associative array, karena tiap properti dikaitkan dengan nilai string yang bisa digunakan untuk mengaksesnya. Jadi, contohnya, kamu bisa mengakses properti dari objek myCar seperti berikut:

+ +
myCar['make'] = 'Ford';
+myCar['model'] = 'Mustang';
+myCar['year'] = 1969;
+
+ +

Nama properti objek bisa berupa string dari JavaScript yang valid, atau apapun yang dapat diubah menjadi string, termasuk string kosong. Namun, nama properti apapun yang tidak valid sebagai identitas di JavaScript (contohnya, nama properti yang memiliki spasi atau tanda hubung, atau yang dimulai dengan angka) hanya bisa diakses menggunakan notasi kurung siku. Notasi ini juga sangat berguna ketika nama properti harus ditentukan secara dinamis (ketika nama properti belum ditentukan hingga runtime). Contohnya sebagai berikut:

+ +
// empat variabel dibuat dan diberi nilai sekali jalan,
+// dipisahkan oleh koma
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = 'Syntax titik';
+myObj['date created']   = 'String dengan spasi';
+myObj[str]              = 'Nilai string';
+myObj[rand]             = 'Angka Random';
+myObj[obj]              = 'Objek';
+myObj['']               = 'Bahkan string kosong';
+
+console.log(myObj);
+
+ +

Tolong dicatat bahwa semua kunci di dalam notasi kurung siku diubah ke dalam tipe String, karena objek JavaScript hanya bisa punya tipe String sebagai tipe kunci. Contohnya, dalam kode di atas, ketika kunci  obj ditambahkan dalam myObj, JavaScript akan memanggil method obj.toString() , dan menggunakan hasil string ini sebagai kunci baru.

+ +

Kamu juga bisa mengakses properti menggunakan nilai string yang disimpan dalam variabel:

+ +
var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+ +

Kamu bisa menggunakan notasi kurung siku dengan for...in untuk mengiterasi ulang semua kumpulan properti yang terdaftar dari sebuah objek. Untuk mengilustrasikan cara kerjanya, fungsi berikut ini menampilkan properti dari objek ketika kamu memasukkan objek dan nama objek sebagai argumen pada fungsi:

+ +
function showProps(obj, objName) {
+  var result = '';
+  for (var i in obj) {
+    // obj.hasOwnProperty() digunakan untuk menyaring properti dari rantai prototipe objek
+    if (obj.hasOwnProperty(i)) {
+      result += objName + '.' + i + ' = ' + obj[i] + '\n';
+    }
+  }
+  return result;
+}
+
+ +

Jadi memanggil fungsi showProps(mobilKu, "mobilKu") akan mengembalikan:

+ +
myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969
+ +

Mengenumerasi properti dari objek

+ +

Mulai ECMAScript 5, ada tiga cara asli untuk mendaftarkan/melintasi properti objek:

+ + + +

Sebelum ECMAScript 5, tidak ada cara asli untuk mendaftarkan semua properti-properti dari suatu objek. Namun, ini dapat dicapai dengan fungsi berikut:

+ +
function listAllProperties(o) {
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+
+ +

Ini dapat berguna untuk memperlihatkan properti-properti  tersembunyi" (properti-properti dalam rantai prototip yang tidak dapat diakses melalui objek, karena properti lain memiliki nama yang sama di rantai prototip sebelumnya). Mendaftarkan properti-properti yang dapat diakses hanya dapat dilakukan dengan menghapus duplikat di dalam array.

+ +

Membuat objek baru

+ +

JavaScript mempunyai sejumlah objek yang telah ditetapkan. Selain itu, kamu dapat membuat objek sendiri. Kamu bisa membuat sebuah objek menngunakan sebuah object initializer. Sebagai alternatif, kamu bisa membuat sebuah fungsi konstruktor lalu menginstanisasi sebuah pemanggilan objek bersama dengan operator new.

+ +

Menggunakan object initializer

+ +

Selain membuat objek menggunakan fungsi konstruktor, kamu bisa membuat objek memakai object initializer. Kadang pemakaian object initializer disamakan dengan pembuatan objek dengan notasi literal. "Object initializer" sama dengan terminologi dalam C++.

+ +

Syntax untuk objek yang menggunakan object initializer ialah:

+ +
var obj = { property_1:   value_1,   // property_# bisa berupa identifier...
+            2:            value_2,   // atau angka...
+            // ...,
+            'property n': value_n }; // atau string
+
+ +

Di mana obj adalah nama objek baru, setiap property_i adalah identifier (baik nama, angka, atau string literal), dan setiap value_i adalah expresi yang nilainya diassign ke property_i.  obj dan assignment adalah opsional, jika kamu tidak butuh rujukan ke objek ini, kamu tak usah mengassign dia ke variabel. (Ingat bahwa kamu harus membungkus literal objek dalam tanda kurung jika objeknya muncul dalam statement diharapkan, supaya bisa membedakan mana literal dan mana statement blok.)

+ +

Object initializer adalah expresi, dan setiap object initializer mengembalikan objek baru. Objek baru dibuat saat ia muncul dalam statement yang dieksekusi. Object initializer yang identik membuat objek berbeda yang tidak akan sama bila dibandingkan. Objek dibuat seolah-olah ada panggilan new Object(); yaitu, objek yang dibuat dari expresi literal objek adalah instance dari Object.

+ +

Statement berikut membuat objek dan mengassign dia ke variabel x jika dan hanya jika expresi cond benar:

+ +
if (cond) var x = {greeting: 'hi there'};
+
+ +

Contoh berikut membuat myHonda dengan tiga properti. Ingat bahwa properti engine juga adalah objek yang punya properti sendiri.

+ +
var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+
+ +

Kamu juga bisa menggunakan object initializer untuk membuat array. Lihat literal array.

+ +

Menggunakan fungsi konstruktor

+ +

Kamu bisa membuat objek dengan dua langkah alternatif ini:

+ +
    +
  1. Definisikan tipe objek dengan menulis fungsi konstruktor. Ada konvensi dengan alasan bagus untuk menggunakan huruf kapital inisial.
    2. +
  2. Membuat instance objek dengan new.
    3. +
+ +

Untuk mendefinisi tipe objek, buat fungsi untuk tipe objek tersebut yang menspesifikasi nama, properti, dan metodenya. Misalnya, kamu ingin membuat tipe objek untuk mobil. Kamu ingin jenis objek ini disebut Car, dan kamu ingin punya properti pembuat, model, dan tahun. Untuk melakukan ini, kamu akan menulis fungsi berikut:

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+ +

Perhatikan penggunaan this untuk mengassign nilai ke properti objek berdasarkan nilai yang diteruskan kepada fungsi.

+ +

Sekarang kamu bisa membuat objek myCar sebagai berikut:

+ +
var mycar = new Car('Eagle', 'Talon TSi', 1993);
+ +

Statement ini membuat myCar dan mengassign ia nilai spesifik untuk propertinya. Lalu nilai dari myCar.make ialah string "Eagle", myCar.year ialah integer 1993, dan seterusnya.

+ +

Kamu bisa membuat sejumlah objek Car dengan memanggil new. Sebagai contoh.

+ +
var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+ +

Objek bisa punya properti yang merupakan objek lain. Misalnya, kamu mendefinisi objek person sebagai berikut:

+ +
function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+ +

dan kemudian menginstantiasi dua objek person baru sebagai berikut:

+ +
var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+ +

Kemudian, kamu bisa menulis ulang definisi Car untuk memasukkan properti owner yang mengambil objek person sebagai berikut:

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+ +

Untuk menginstantiasi objek baru, gunakan ini:

+ +
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+ +

Perhatikan bahwa ketimbang meneruskan nilai string atau integer literal ketika membuat objek baru, statement diatas meneruskan objek rand dan ken sebagai argumen untuk pemilik. Lalu jika kamu mau mencari nama pemilik car2, kamu bisa mengakses properti berikut:

+ +
car2.owner.name
+
+ +

Ingat bahwa kamu selalu bisa menambah properti ke objek yang sudah dibuat sebelumnya. Contohnya statement

+ +
car1.color = 'black';
+
+ +

menambah properti color pada car1, dan mengassign nilai "black". Ini tak mempengaruhi objek lain. Untuk menambah properti baru ke semua objek dari tipe yang sama, kamu harus menambah properti pada definisi tipe objek Car.

+ +

Menggunakan metode Object.create

+ +

Objek bisa juga dibuat menggunakan metode {{jsxref("Object.create()")}}. Metode ini bisa sangat berguna, karena ia memungkinkan kamu memilih prototipe objek untuk objek yang mau kamu buat, tanpa harus mendefinisi fungsi konstruktor.

+ +
// Enkapsulasi metode dan properti Animal
+var Animal = {
+  type: 'Invertebrates', // Nilai properti default
+  displayType: function() {  // Method which will display type of Animal
+    console.log(this.type);
+  }
+};
+
+// Create new animal type called animal1 
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = 'Fishes';
+fish.displayType(); // Output:Fishes
+ +

Warisan

+ +

Semua objek di javascript diwariskan setidaknya dari satu objek lain. Objek yang diwariskan disebut prototipe, dan properti warisan bisa ditemukan dalam objek prototype dari konstruktor. Lihat Rantai warisan dan prototype untuk informasi lebih lanjut.

+ +

Mengindex properti objek

+ +

Kamu dapat merujuk ke properti dari objek menggunakan nama propertinya ataupun index urutannya. Jika kamu awalnya mendefinisi properti memakai namanya, kamu harus selalu merujuknya dengan namanya, dan jika kamu awalnya mendefinisikan properti memakai index, kamu harus selalu merujuknya dengan indexnya.

+ +

Pembatasan ini berlaku ketika kamu membuat objek dan propertinya dengan fungsi konstruktor (seperti yang kita lakukan sebelumnya dengan jenis objek Car) dan ketika kamu mendefinisi properti individual secara explisit (misalnya, myCar.color = "ref"). Jika kamu awalnya mendefinisi properti objek dengan index, seperti myCar[5] = "25 mpg", maka kamu merujuk ke properti tersebut dengan myCar[5].

+ +

Pengecualian dalam aturan ini adalah objek mirip-array pantulan dari HTML, seperti objek mirip-array forms. Kamu selalu dapat merujuk ke objek dalam objek mirip-array ini menggunakan nomor urutan mereka (berdasarkan di mana mereka muncul dalam dokumen) atau nama mereka (jika didefinisi). Misalnya, jika tag <FORM> kedua dalam dokumen punya atribut NAME "myForm", kamu dapat merujuk ke form tersebut sebagai document.forms[1] atau document.forms["myForm"] atau document.forms.myForm.

+ +

Mendefinisi properti untuk tipe objek

+ +

Kamu dapat menambah properti ke tipe objek yang didefinisi sebelumnya menggunakan properti prototype. Ini mendefinisi properti yang dibagikan semua objek dari tipe yang dispesifikasi, bukan cuma satu instance objek. Kode berikut menambahkan sebuah properti color ke semua objek dari tipe objek Car, dan kemudian mengassign nilai ke properti color dari objek car1.

+ +
Car.prototype.color = null;
+car1.color = 'black';
+ +

Lihat properti prototipe dari objek Function dalam referensi JavaScript untuk informasi lebih lanjut.

+ +

Mendefiniskan metode

+ +

Metode ialah fungsi yang terasosiasi dengan objek, atau sederhananya, metode ialah properti dari objek berupa fungsi. Metode didefinisi sebagai cara fungsi nornal didefinisi, kecuali mereka harus diassign sebagai properti objek. Lihat juga definisi metode untuk lebih detil. Contohnya:

+ +
objectName.methodname = functionName;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+
+  // OR THIS WORKS TOO
+
+  myOtherMethod(params) {
+    // ...do something else
+  }
+};
+
+ +

Di mana objectName adalah metode yang sudah ada, methodname ialah nama yang kamu assign ke metode, dan functionName adalah nama fungsi.

+ +

Lalu kamu bisa memanggil metode dalam kontex objek sebagai berikut:

+ +
object.methodname(params);
+
+ +

Kamu bisa mendefinisi metode untuk tipe objek dengan memasukkan sebuah definisi metode dalam fungsi konstruktor objek. Kamu bisa mendefinisi fungsi yang akan memformat dan menampilkan properti objek Car sebelumnya; contohnya,

+ +
function displayCar() {
+  var result = `A Beautiful ${this.year} ${this.make} ${this.model}`;
+  pretty_print(result);
+}
+ +

Di mana pretty_print adalah fungsi untuk menampilkan garis horizontal dan string. Perhatikan penggunaan this untuk merujuk ke objek yang punya metode tersebut.

+ +

Kamu bisa menjadikan fungsi ini metode Car dengan menambah statement

+ +
this.displayCar = displayCar;
+ +

ke definisi objek. Jadi definisi penuh dari Car sekarang akan terlihat seperti

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+ +

Maka kamu bisa memanggil metode displayCar untuk masing-masig objek sebagai berikut:

+ +
car1.displayCar();
+car2.displayCar();
+ +

Menggunakan this untuk referensi Objek

+ +

JavaScript punya katakunci spesial this, kamu bisa memakainya dalam metode untuk merujuk ke objek saat ini. Misalnya, kamu punya fungsi yang disebut validate yang memvalidasi properti value, yang diberikan objek dan nilai atas dan bawah:

+ +
function validate(obj, lowval, hival) {
+  if ((obj.value < lowval) || (obj.value > hival)) {
+    alert('Invalid Value!');
+  }
+}
+
+ +

Kemudian kamu bisa panggil validate di penangan event onchange setiap elemen form, gunakan this untuk meneruskan elemen. Seperti contoh berikut:

+ +
<input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)">
+
+ +

Secara umum, this merujuk ke pemanggilan objek dalam metode.

+ +

Ketika dikombinasikan dengan properti form, this bisa mengacu ke induk objek form saat ini. Dalam contoh berikut, form myForm berisi objek Text dan sebuah tombol. Ketika pengguna mengklik tombol, nilai objek Text diset ke nama form tersebut. Penangan event onclick tombol menggunakan this.form untuk merujuk ke induk form, myForm.

+ +
<form name="myForm">
+<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name">
+</p>
+</form>
+ +

Mendefinisikan getter dan setter

+ +

Getter ialah metode yang mendapat nilai dari properti spesifik. Setter ialah metode yang mengatur nilai properti spesifik. Kamu bisa mendefinisi getter dan setter objek inti apapun yang sudah ditetapkan atau objek yang ditetapkan pengguna yang mendukung penambahan peroperti-properti baru. Syntax untuk mendefinisi getter dan setter menggunakan syntax literal objek.

+ +

Berikut ilustrasi cara getter dan setter bisa bekerja untuk objek o yang sudah didefinisi user.

+ +
var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+
+ +

Properti objek o adalah:

+ + + +

Harap diingat bahwa nama fungsi dari getter dan setter yang didefisini dalam literal objek menggunakan "[gs]et property()" (dibandingkan dengan __define[GS]etter__ ) bukanlah nama getter mereka sendiri, meski syntax [gs]et propertyName(){ } membuatmu berpikir lain. Untuk menamai fungsi dalam getter atau setter menggunakan syntax "[gs]et property()", definiskan fungsi, dengan nama explisit, secara terprogram menggunakan Object.defineProperty (atau pengganti legacy Object.prototype.__defineGetter__).

+ +

Kode berikut mengilustrasikan cara getter dan setter bisa memperluas prototipe {{jsxref("Date")}} untuk menambah properti year ke semua instance dari kelas Date yang sudah didefinisi. Ia menggunakan metode kelas Date yang sudah ada, getFullYear dan setFullYear untuk mendukung properti getter dan setter year.

+ +

Statement ini mendefinisi getter dan setter untuk properti tahun:

+ +
var d = Date.prototype;
+Object.defineProperty(d, 'year', {
+  get: function() { return this.getFullYear(); },
+  set: function(y) { this.setFullYear(y); }
+});
+
+ +

Statement ini menggunakan getter dan setter dalam objek Date:

+ +
var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+
+ +

Secara pinsip, getter dan setter bisa

+ + + +

Ketika mendefiniisi getter dan setter menggunakan object initializer yang harus kamu lakukan adalah memprefix metode getter dengan get dan metode setter dengan set. Tentunya, metode getter tidak boleh mengharapkan parameter, lalu metode setter mengharapkan hanya satu parameter (nilai baru untuk diset). Contohnya:

+ +
var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+
+ +

Getter dan setter juga bisa ditambah ke objek kapanpun setelah membuat objek menggunakan metode Object.defineProperties. Parameter pertama metode ini ialah object tempat kamu mendefinisi getter atau setter. Parameter kedua ialah objek yang nama propertinya berupa nama getter atau setter,dan yang nilai propertinya berupa objek yang mendefinisi fungsi getter atau setter. Berikut adalah contoh mendefinisi getter dan setter yang sama yang digunakan dalam contoh sebelumnya:

+ +
var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Menjalankan setter, yang mengassign 10 / 2 (5) ke properti 'a'
+console.log(o.b); // Menjalankan getter, yang menghasilkan a + 1 atau 6
+
+ +

Yang manapun dari dua form ini yang dipilih tergantung dari gaya pemrograman dan tugas di tangan. Jika kamu sudah memilih object initializer ketika mendefinisi prototipe kamu mungkin akan sering memilih form pertama. Form ini lebih compact dan natural. Namun, kalau kamu harus menambah getter dan setter nanti — karena kamu tak menulis prototipenya atau object khusus — maka form kedua menjadi satu-satunya solusi. Form kedua mungkin paling baik mewakiliki sifat dinamis JavaScript — tapi ia bisa membuat kode sulit dibaca dan dipahami.

+ +

Menghapus properti

+ +

Kamu bisa menghapus properti yang bukan warisan menggunakan operator delete. Kode berikut menampilkan cara menghapus properti.

+ +
// Membuat objek baru, myobj, dengan dua properti, a dan b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Mengapus properti a, menyisakan myobj hanya dengan properti b.
+delete myobj.a;
+console.log ('a' in myobj); // menghasilkan "false"
+
+ +

Kamu juga bisa memakai delete untuk menghapus variabel global jika katakunci var tidak dipakai untuk mendeklarasi variabel itu:

+ +
g = 17;
+delete g;
+
+ +

Membandingkan objek

+ +

Dalam JavaScript objek ialah tipe referensi. Dua objek berbeda tak akan pernah sama, meski mereka punya properti yang sama. Hanya membandingkan referensi objek yang sama dengannya menghasilkan true.

+ +
// Dua variabel, dua objek berbeda dengan properti yang sama
+var fruit = {name: 'apple'};
+var fruitbear = {name: 'apple'};
+
+fruit == fruitbear; // mengembalikan false
+fruit === fruitbear; // mengembalikan false
+ +
// Dua variabel, objek tunggal
+var fruit = {name: 'apple'};
+var fruitbear = fruit;  // assign referensi objek buah ke fruitbear
+
+// di sini fruit dan fruitbear menunjuk ke objek yang sama
+fruit == fruitbear; // mengembalikan true
+fruit === fruitbear; // mengembalikan true
+
+ +
fruit.name = 'grape';
+console.log(fruitbear);    // menghasilkan { name: "grape" } ketimbang { name: "apple" }
+
+ +

Untuk informasi lebih tentang operator pembandingan, lihat Operator pembandingan.

+ +

Lihat juga

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}

diff --git a/files/id/web/javascript/reference/about/index.html b/files/id/web/javascript/reference/about/index.html new file mode 100644 index 0000000000..02c6ef967c --- /dev/null +++ b/files/id/web/javascript/reference/about/index.html @@ -0,0 +1,86 @@ +--- +title: Mengenai Pustaka Ini +slug: Web/JavaScript/Reference/About +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/About +--- +

Apa yang perlu diketahui sebelumnya

+ +

Pengalaman menggunakan bahasa pemrograman lainnya dapat menjadi manfaat, meskipun tidak menjadi prasyarat.

+ +

JavaScript ditujukan untuk digunakan pada lingkup yang lebih besar, seperti peramban, script server-side, atau sejenisnya. Secara umum, pustaka ini tergantung pada platform tertentu, dan tidak ditujukan hanya untuk peramban.

+ +

Untuk tujuan demo, pustakan ini menggunakan fungsi, println. Fungsi tersebut bukanlah bagian dari JavaScript. Namun ia dapat dipetakan terhadap implementasi spesifik pada platform tertentu.

+ +

Misal, bila berjalan di peramban, maka fungsi di atas dapat implementasikan sebagai:

+ +
+
function println(string) {
+  window.alert(string);
+}
+
+ +

 

+
+ +

Sejarah JavaScript

+ +

Versi terbaru dari peramban berbasis Mozilla mendukung versi terbaru dari JavaScript. Tabel berikut menampilkan daftar dari versi JavaScript yang didukung oleh versi yang berbeda dari peramban berbasis Mozilla.

+ +

Peramban yang tidak mendukung versi JavaScript setidaknya versi 1.5 adalah hal yang sangat langka untuk saat ini. JavaScript versi 1.5 sudah dipublikasikan sejak tahun 1999. Bila Anda tertarik untuk mempelajari sejarahnya, silahkan mengunjungi referensi yang terdapat di Wikipedia, ECMAScript.

+ +

JavaScript/Browser support history

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
JavaScript (SpiderMonkey) versionMozilla releaseGecko version
JavaScript 1.5Navigator 6.0, Mozilla Application Suite, Firefox 1.0Gecko 0.6x-1.7
JavaScript 1.6Firefox 1.5Gecko 1.8
JavaScript 1.7Firefox 2Gecko 1.8.1
JavaScript 1.8Firefox 3Gecko 1.9
JavaScript 1.8.5Firefox 4Gecko 2.0
JavaScript 1.8.6Firefox 17Gecko 17
+ +

Sumber informasi JavaScript

+ +

Dokumentasi JavaScript dari fitur bahasa inti (murni ECMAScript, untuk sebagian besar) mencakup:

+ + + +

Bila Anda masih baru terhadap JavaScript, mulailah dari pedoman. Bila kemudian Anda sudah merasa memiliki pemahaman yang lebih mendalam, Anda dapat memanfaatkan referensi.

diff --git a/files/id/web/javascript/reference/classes/constructor/index.html b/files/id/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..8da1df9428 --- /dev/null +++ b/files/id/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,162 @@ +--- +title: constructor +slug: Web/JavaScript/Reference/Classes/constructor +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +
{{jsSidebar("Classes")}}
+ +

Metode dengan nama "constructor" adalah metode spesial untuk pembuatan dan penginisialisasian objek yang dibuat dengan kelas.

+ +

sintaks

+ +
constructor([arguments]) { ... }
+ +

Deskripsi

+ +

Hanya boleh ada satu metode spesial dengan nama "constructor" dalam sebuah kelas. {{jsxref("SyntaxError")}}  akan dilemparkan jika suatu kelas memiliki lebih dari satu metode konstruktor.

+ +

Konstruktor dapat menggunakan kata kunci {{jsxref("Operators/super", "super")}} untuk memanggil konstruktor orang-tua.

+ +

Jika metode konstruktor tidak didefinisikan dalam sebuah kelas, maka  kontruktor asali yang akan digunakan.

+ +

Contoh

+ +

Menggunakan metode constructor

+ +

Potongan kode ini diambil dari contoh kelas (demostrasi langsung).

+ +
class Square extends Polygon {
+  constructor(length) {
+    // Di sini, akan memanggil konstruktor orang-tua dengan panjang
+    // diberikan untuk panjang dan tinggi Polygon
+    super(length, length);
+    // Catatan: di kelas turunan, super() harus dipanggil sebelum
+    // bisa menggunakan kata kunci 'this'. Meninggalkan pemanggilan ini di awal
+    // akan menyebabkan kesalahan referensi.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}
+ +

Konstruktor asali

+ +

Jika metode konstruktor tidak didefinisikan dalam sebuah kelas, maka kontruktor asali yang akan digunakan. Untuk konstruktor asali untuk kelas dasar adalah:

+ +
constructor() {}
+
+ +

Konstruktor asali untuk kelas turunan adalah:

+ +
constructor(...args) {
+  super(...args);
+}
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ES6')}}Definisi awal
{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}{{Spec2('ESDraft')}} 
+ +

Kompatibilitas Peramban

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Default constructors{{CompatUnknown}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Default constructors{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Lihat Pula

+ + diff --git a/files/id/web/javascript/reference/classes/extends/index.html b/files/id/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..c6def454fe --- /dev/null +++ b/files/id/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,112 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +tags: + - ECMAScript 2015 + - JavaScript + - Kelas +translation_of: Web/JavaScript/Reference/Classes/extends +--- +
{{jsSidebar("Classes")}}
+ +

Kata kunci extends digunakan pada class declarations atau class expressions untuk membuat sebuah class yang merupakan turunan dari class lain.

+ +
{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}
+ + + +

Sintaks

+ +
class ChildClass extends ParentClass { ... }
+ +

Deskripsi

+ +

Kata kunci extends dapat digunakan untuk subclass custom classes dan built-in objects.

+ +

.prototype dari suatu ekstensi harus berupa sebuah {{jsxref("Object")}} atau {{jsxref("null")}}.

+ +

Contoh

+ +

Menggunakan extends

+ +

Contoh pertama membuat sebuah class bernama Square dari kelas bernama Polygon. Contoh ini diambil dari live demo (source).

+ +
class Square extends Polygon {
+  constructor(length) {
+    // Disini, obyek dari Square memanggil konstruktor dari parent class dengan argumen lengths yang tersedia
+    // untuk width dan height pada Polygon
+    super(length, length);
+    // Catatan: Pada kelas turunan, super() harus dipanggil sebelum Anda
+    // dapat menggunakan 'this'. Pengabaian terhadap hal tersebut akan menyebabkan reference error.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+}
+ +

Menggunakan extends dengan built-in objects

+ +

Contoh berikut mewarisi built-in {{jsxref("Date")}} object. Contoh ini diambil dari live demo (source).

+ +
class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
+  }
+}
+ +

Extending (Pewarisan) null

+ +

Extending/pewarisan dari {{jsxref("null")}} bekerja layaknya seperti normal class, dengan pengecualian prototype object tidak mewarisi dari {{jsxref("Object.prototype")}}.

+ +
class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null
+
+new nullExtends(); //ReferenceError: this is not defined
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}{{Spec2('ESDraft')}} 
+ +

Kompatibilitas peramban

+ + + +

{{Compat("javascript.classes.extends")}}

+ +

Cek juga

+ + diff --git a/files/id/web/javascript/reference/classes/index.html b/files/id/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..3a8a71f562 --- /dev/null +++ b/files/id/web/javascript/reference/classes/index.html @@ -0,0 +1,383 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +tags: + - Classes + - Constructors + - ECMAScript6 + - Inheritance + - Intermediate + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +
{{JsSidebar("Classes")}}
+ +

Kelas di JavaScript diperkenalkan pada ECMAScript 6 seperti pemanis dari prototype-based JavaScript yang sudah ada. Syntax dari kelas tidak menggunakan model object-oriented inheritance yang baru. JavaScript kelas menyediakan syntax yang lebih sederhana dan rapi untuk membuat object-object dan mengatasi / dealing dengan turunan / inheritance.

+ +

Definisi kelas

+ +

Kelas seperti "fungsi istimewa", dan seperti kamu bisa mendeklarasikan ekspresi fungsi (function expressions) dan deklarasi fungsi (function declarations), syntax kelas sendiri mempunyai dua komponen: ekspresi kelas (class expressions) dan deklarasi kelas (class declarations).

+ +

Deklarasi Kelas

+ +

Salah satu cara untuk mendefinisikan kelas adalah dengan menggunakan class declaration / deklarasi kelas. Untuk mendeklarasikan kelas, kamu bisa menggunakan kata kunci class sebagai contoh class "Polygon" di bawah ini.

+ +
class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+ +

Hoisting

+ +

Perbedaan penting antara deklarasi fungsi (function declarations) dan deklarasi kelas (class declarations) adalah deklarasi fungsi  {{Glossary("Hoisting", "hoisted")}} dan  deklarasi class tidak. Pertama-tama kamu harus mendeklarasikan kelas dan mengaksesnya, jika tidak maka kode seperti berikut akan menampilkan {{jsxref("ReferenceError")}}:

+ +
var p = new Polygon(); // ReferenceError
+
+class Polygon {}
+
+ +

Ekspresi Kelas

+ +

Ekspresi kelas (class expression) adalah cara lain untuk mendefinisikan sebuah class. Class expression bisa bernama ataupun tidak. Nama yang diberikan berbentuk lokal berada di body class.

+ +
// unnamed
+var Polygon = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+// named
+var Polygon = class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+ +

Catatan: Ekspresi kelas (Class expressions) juga mempunyai masalah yang sama terkait hoisting seperti pada Deklarasi kelas (Class declarations).

+ +

Tubuh Kelas (class body) and definisi metode

+ +

Tubuh atau body sebuah kelas berada didalam kurung {}. Disitu kamu dapat mendefinisikan isi kelas seperti method atau konstruktor.

+ +

Strict mode

+ +

Body atau bagian badan dari kelas deklarasi dan kelas ekspresi di eksekusi pada strict mode.

+ +

Konstruktor

+ +

konstruktor adalah metode (method) khusus untuk membuat dan inisialisasi sebuah objek yang dibuat dengan  class. Hanya ada satu metode khusus dengan nama "konstruktor" di kelas. Sebuah {{jsxref("SyntaxError")}} akan tampil jika kelas berisi lebih dari satu method constructor.

+ +

Sebuah konstruktor dapat digunakan keyword super untuk memanggil kostruktor dari kelas parent nya.

+ +

Prototipe method

+ +

Lihat juga definisi method

+ +
class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+
+  get area() {
+    return this.calcArea();
+  }
+
+  calcArea() {
+    return this.height * this.width;
+  }
+}
+
+const square = new Polygon(10, 10);
+
+console.log(square.area);
+ +

Metode Statis

+ +

Kata kunci statis mendefinisikan metode statis untuk suatu kelas. Metode statis dipanggil tanpa membuat instance kelasnya dan tidak bisa dipanggil ketika kelas tersebut dipakai. Metode statis sering digunakan untuk membuat fungsi utilitas untuk suatu aplikasi.

+ +
class Point {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  static distance(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+
+    return Math.sqrt(dx*dx + dy*dy);
+  }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.log(Point.distance(p1, p2));
+ +

Mem-binding this dengan prototipe dan metode statis

+ +

Ketika metode statis atau prototipe dipanggil tanpa objek yang bernilai "this" (atau "this" sebagai boolean, string, angka, tidak terdefinisi atau null), maka nilai "this" akan ditentukan dalam fungsi yang digunakan. Autoboxing tidak akan berjalan. Hal tersebut juga berlaku ketika kita menulis kode dalam mode non-strict.laku akan sama bahkan jika kita menulis kode dalam mode tidak ketat.

+ +
class Animal {
+  speak() {
+    return this;
+  }
+  static eat() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // undefined
+
+let eat = Animal.eat;
+eat(); // undefined
+ +

Jika kita menulis kode diatas menggunakan fungsi tradisional berdasarkan kelas, maka autoboxing akan berjalan sesuai dengan nilai "this" pada fungsi yang dipanggil.

+ +
function Animal() { }
+
+Animal.prototype.speak = function(){
+  return this;
+}
+
+Animal.eat = function() {
+  return this;
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // global object
+
+let eat = Animal.eat;
+eat(); // global object
+
+ +

Sub kelas dengan extends

+ +

extends digunakan pada deklarasi kelas atau kelas expresi untuk membuat suatu kelas sebagai turunan dari kelas lain.

+ +
class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+
+var d = new Dog('Mitzie');
+d.speak();
+
+ +

Jika terdapat constructor pada sub kelas saat ini, maka pertama dibutuhkan untuk memanggil super() sebelum menggunakan "this".

+ +
Seseorang juga dapat mengextend "kelas" berbasis fungsi tradisional:
+ +
function Animal (name) {
+  this.name = name;
+}
+
+Animal.prototype.speak = function () {
+  console.log(this.name + ' makes a noise.');
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+
+var d = new Dog('Mitzie');
+d.speak();
+
+ +

Perhatikan bahwa kelas tidak dapat di extend pada objek reguler atau biasa (non-constructible) . Jika ingin mewarisi regurel object,  maka dapat menggunakan {{jsxref("Object.setPrototypeOf()")}}:

+ +
var Animal = {
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+};
+
+class Dog {
+  constructor(name) {
+    this.name = name;
+  }
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+
+Object.setPrototypeOf(Dog.prototype, Animal);
+
+var d = new Dog('Mitzie');
+d.speak();
+
+ +

Species

+ +

Kamu dapat mengembalikan objek {{jsxref("Array")}}  di kelas array yang diturunkan MyArray. Pola spesies memungkinkan Kamu overide konstruktor default.

+ +

Contohnya, ketika menggunakan method seperti {{jsxref("Array.map", "map()")}} yang mana mengembalikan konstruktor default, kamu butuh method yang dapat mengembalikan objek parent Array, bukan dari objek MyArray. Simbol {{jsxref("Symbol.species")}} memungkinkan untuk melakukan:

+ +
class MyArray extends Array {
+  // Overwrite species to the parent Array constructor
+  static get [Symbol.species]() { return Array; }
+}
+
+var a = new MyArray(1,2,3);
+var mapped = a.map(x => x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true
+
+ +

Memanggil Kelas Super dengan keyword super

+ +

Keyword super digunakan untuk memanggil fungsi pada objek parent nya.

+ +
class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(this.name + ' roars.');
+  }
+}
+
+ +

Mix-ins

+ +

Subkelas Abstrak or mix-ins adalah template untuk kelas. Kelas berbasis  ECMAScript hanya dapat memiliki satu superclass (Kelas super), jadi inheritence berganda dari kelas tool sebagai contohnya, itu tidak memungkinkan. Fungsionalitas harus disediakan oleh superclass.

+ +

Sebuah fungsi dengan superclass sebagai inputanya dan sukelas as input and a subclass extend superclass sebagai output dapat mengimplemtasikan pada  ECMAScript sebagai berikut:

+ +
var calculatorMixin = Base => class extends Base {
+  calc() { }
+};
+
+var randomizerMixin = Base => class extends Base {
+  randomize() { }
+};
+
+ +

A class that uses these mix-ins can then be written like this:

+ +
class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}}
+ +

Kompatibilitas Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}[1]
+ {{CompatChrome(49.0)}}		{{CompatGeckoDesktop(45)}}13{{CompatNo}}{{CompatNo}}{{CompatSafari(9.0)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}9{{CompatChrome(42.0)}}[1]
+ {{CompatChrome(49.0)}}
+
+ +

[1] Requires strict mode. Non-strict mode support is behind the flag "Enable Experimental JavaScript", disabled by default.

+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/errors/called_on_incompatible_type/index.html b/files/id/web/javascript/reference/errors/called_on_incompatible_type/index.html new file mode 100644 index 0000000000..4fab8e8ca2 --- /dev/null +++ b/files/id/web/javascript/reference/errors/called_on_incompatible_type/index.html @@ -0,0 +1,69 @@ +--- +title: X.prototype.y called on incompatible type +slug: Web/JavaScript/Reference/Errors/Called_on_incompatible_type +tags: + - Error + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: 'this' is not a Set object (EdgE)
+TypeError: Function.prototype.toString called on incompatible object (Firefox)
+TypeError: Function.prototype.bind called on incompatible target (Firefox)
+TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
+TypeError: Bind must be called on a function (Chrome)
+
+ +

Tipe error

+ +

{{jsxref("TypeError")}}

+ +

Apa yang salah?

+ +

Ketika error ini dilempar, suatu fungsi (dari objek yang diberikan), dipanggil dengan this tidak berkorespondensi ke tipe yang diharapkan fungsi tersebut.

+ +

Isu ini bisa terbit ketika menggunakan metode {{jsxref("Function.prototype.call()")}} atau {{jsxref("Function.prototype.apply()")}}, dan menyediakan argumen this yang tak punya tipe yang diharapkan.

+ +

Isu ini juga bisa terjadi ketika menyediakan fungsi yang disimpan sebagai properti suatu objek sebagai argumen fungsi lain. Dalam hal ini, objek yang menyimpan fungsi tersebut takkan menjadi target this target dari fungsi itu ketika dipanggil oleh fungsi lain. Untuk mengatasi isu ini, kamu harus menyediakan lambda yang membuat panggilan, ataupun menggunakan fungsi {{jsxref("Function.prototype.bind()")}} untuk memaksa argumen this ke objek yang diharapkan.

+ +

Contoh

+ +

Kasus tak valid

+ +
var mySet = new Set;
+['bar', 'baz'].forEach(mySet.add);
+// mySet.add adalah fungsi, tapi "mySet" tidak dikaptur sebagai this.
+
+var myFun = function () {
+  console.log(this);
+};
+['bar', 'baz'].forEach(myFun.bind);
+// myFun.bind adalah fungsi, tapi "myFun" tidak dikaptur sebagai this.
+
+
+ +

Kasus valid

+ +
var mySet = new Set;
+['bar', 'baz'].forEach(mySet.add.bind(mySet));
+// Ini berjalan karena mengikat "mySet" sebagai this.
+
+var myFun = function () {
+  console.log(this);
+};
+['bar', 'baz'].forEach(x => myFun.bind(x));
+// Ini berjalan menggunakan fungsi "bind". Ia membuat lambda yang meneruskan argumen.
+
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/errors/index.html b/files/id/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..68e7cce3df --- /dev/null +++ b/files/id/web/javascript/reference/errors/index.html @@ -0,0 +1,12 @@ +--- +title: Referensi error JavaScript +slug: Web/JavaScript/Reference/Errors +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Errors +--- +

{{jsSidebar("Errors")}}

+ +

Error, error dimana - mana.

+ +

{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}

diff --git a/files/id/web/javascript/reference/errors/invalid_array_length/index.html b/files/id/web/javascript/reference/errors/invalid_array_length/index.html new file mode 100644 index 0000000000..3b7fd4e78e --- /dev/null +++ b/files/id/web/javascript/reference/errors/invalid_array_length/index.html @@ -0,0 +1,78 @@ +--- +title: 'RangeError: invalid array length' +slug: Web/JavaScript/Reference/Errors/Invalid_array_length +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
RangeError: Array length must be a finite positive integer (Edge)
+RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chrome)
+RangeError: Invalid array buffer length (Chrome)
+
+ +

Tipe error

+ +

{{jsxref("RangeError")}}

+ +

Apa yang salah?

+ +

Panjang array tak valid bisa muncul di situasi berikut:

+ + + +

Kenapa panjang Array dan ArrayBuffer dibatasi? Properti length dari Array atau ArrayBuffer diwakili dengan satu unsigned 32-bit integer, yang hanya menyimpan nilai dalam kisaran dari 0 hingga 232-1.

+ +

Jika kamu membuat satu Array, menggunakan constructor, kamu mungkin mau memakai notasi literal saja, karena argumen pertama diinterpretasi sebagai panjang Array.

+ +

Sebaliknya, kamu mungkin mau mengelam panjangnya sebelum mengeset properti panjangnya, atau memakainya sebagai argumen konstructor.

+ +

Contoh

+ +

Kasus tak valid

+ +
new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // set -1 to the length property
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // set 2^32 to the length property
+
+ +

Kasus valid

+ +
[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff is the hexadecimal notation for 2^32 - 1
+// which can also be written as (-1 >>> 0)
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/id/web/javascript/reference/errors/missing_semicolon_before_statement/index.html new file mode 100644 index 0000000000..32be54e5ce --- /dev/null +++ b/files/id/web/javascript/reference/errors/missing_semicolon_before_statement/index.html @@ -0,0 +1,78 @@ +--- +title: 'SyntaxError: missing ; before statement' +slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +--- +
{{jsSidebar("Errors")}}
+ +

Pesan

+ +
SyntaxError: Expected ';' (Edge)
+SyntaxError: missing ; before statement (Firefox)
+
+ +

Tipe error

+ +

{{jsxref("SyntaxError")}}.

+ +

Apa yang Salah?

+ +

Ada titik koma (;) yang hilang di suatu tempat. JavaScript statements harus diakhiri dengan semicolon. Beberapa dari mereka dipengaruhi oleh automatic semicolon insertion (ASI), tetapi dalam hal ini anda perlu memberikan titik koma, sehingga JavaScript dapat mem-parse kode sumber dengan benar.

+ +

Namun, seringkali, kesalahan ini hanya merupakan konsekuensi dari kesalahan lain, seperti tidak menempatkan string dengan benar, atau menggunakan var secara salah. Ada mungkin juga memiliki terlalu banyak tanda kurung di suatu tempat. Hati-hati memeriksa sintaks ketika kesalahan ini dilemparkan.

+ +

Contoh

+ +

Unescaped strings

+ +

Kesalahan ini dapat terjadi dengan mudah ketika tidak melepaskan string dengan benar dan engine JavaScript is expecting the end of your string already. Sebagai contoh:

+ +
var foo = 'Tom's bar';
+// SyntaxError: missing ; before statement
+ +

Anda dapat menggunakan double quotes, atau menggunakan tanda kutip dengan menambahkan backslash

+ +
var foo = "Tom's bar";
+var foo = 'Tom\'s bar';
+
+ +

Declaring properties with var

+ +

Anda tidak dapat mendeklarasikan property dari sebuah objek atau larik(array) dengan deklarasi var.

+ +
var obj = {};
+var obj.foo = 'hi'; // SyntaxError missing ; before statement
+
+var array = [];
+var array[0] = 'there'; // SyntaxError missing ; before statement
+
+ +

Sebagai gantinya, hapus kata kunci var:

+ +
var obj = {};
+obj.foo = 'hi';
+
+var array = [];
+array[0] = 'there';
+
+ +

Kata kunci yang buruk

+ +

Jika ada berasal dari bahasa pemrograman yang lain, itu juga umum untuk menggunakan kata kunci yang tidak berarti sama atau tidak memiliki arti sama sekali di JavaScript:

+ +
def print(info){
+  console.log(info);
+}; // SyntaxError missing ; before statement
+ +

Sebagai gantinya, gunakan function daripada menggunakan kata kunci def:

+ +
function print(info){
+  console.log(info);
+};
+ +

See also

+ + diff --git a/files/id/web/javascript/reference/errors/negative_repetition_count/index.html b/files/id/web/javascript/reference/errors/negative_repetition_count/index.html new file mode 100644 index 0000000000..0ea4bec83a --- /dev/null +++ b/files/id/web/javascript/reference/errors/negative_repetition_count/index.html @@ -0,0 +1,45 @@ +--- +title: 'RangeError: repeat count must be non-negative' +slug: Web/JavaScript/Reference/Errors/Negative_repetition_count +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count +--- +
{{jsSidebar("Errors")}}
+ +

Pesan

+ +
RangeError: argument out of range
+RangeError: repeat count must be non-negative (Firefox)
+RangeError: Invalid count value (Chrome)
+
+ +

Tipe error

+ +

{{jsxref("RangeError")}}

+ +

Apa yang salah?

+ +

Metode {{jsxref("String.prototype.repeat()")}} telah digunakan. Ia punya parameter count mengindikasikan jumlah pengulangan string. Ia harus bernilai antara 0 dan kurang dari positif {{jsxref("Infinity")}} dan tidak boleh angka negatif. Kisarannya nilai yang diperbolehkan bisa dijelaskan seperti ini: [0, +∞).

+ +

Contoh

+ +

Kasus tak valid

+ +
'abc'.repeat(-1); // RangeError
+ +

Kasus valid

+ +
'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/errors/not_a_codepoint/index.html b/files/id/web/javascript/reference/errors/not_a_codepoint/index.html new file mode 100644 index 0000000000..d3d8b2f934 --- /dev/null +++ b/files/id/web/javascript/reference/errors/not_a_codepoint/index.html @@ -0,0 +1,56 @@ +--- +title: 'RangeError: argument is not a valid code point' +slug: Web/JavaScript/Reference/Errors/Not_a_codepoint +tags: + - Errors + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint +--- +
{{jsSidebar("Errors")}}
+ +

Pesan

+ +
RangeError: Invalid code point {0} (Edge)
+RangeError: {0} is not a valid code point (Firefox)
+RangeError: Invalid code point {0} (Chrome)
+
+ +

 

+ +

Tipe error

+ +

{{jsxref("RangeError")}}

+ +

Apa yang salah?

+ +

{{jsxref("String.fromCodePoint()")}} throws this error when passed {{jsxref("NaN")}} values, negative Integers (-1), non-Integers (5.4), or values larger than 0x10FFFF (1114111).

+ +

Satu poin kode ialah satu nilai dalam codespace Unicode; yaitu, kisaran integer dari 0 hingga 0x10FFFF.

+ +

Contoh

+ +

Kasus tak nvalid

+ +
String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError
+ +

Kasus valid

+ +
String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/errors/not_defined/index.html b/files/id/web/javascript/reference/errors/not_defined/index.html new file mode 100644 index 0000000000..d0dc93a0c6 --- /dev/null +++ b/files/id/web/javascript/reference/errors/not_defined/index.html @@ -0,0 +1,66 @@ +--- +title: 'ReferenceError: "x" is not defined' +slug: Web/JavaScript/Reference/Errors/Not_defined +translation_of: Web/JavaScript/Reference/Errors/Not_defined +--- +
{{jsSidebar("Errors")}}
+ +

Pesan

+ +
ReferenceError: "x" is not defined
+
+ +

Type Error

+ +

{{jsxref("ReferenceError")}}.

+ +

Mengapa salah?

+ +

Tidak ditemukannya referensi variabel dimanapun. Variabel ini perlu dideklarasikan, atau anda pastikan lagi bahwa ada di dalam script atau {{Glossary("scope")}} anda.

+ +
+

Note: Ketika memanggil sebuah library (seperti jQuery), pastikan memanggilnya terlebih dahulu tanda "$" sebelum mengakses variabel library. Gunakan tag {{HTMLElement("script")}} untuk memanggil library sebelum menggunakannya pada kode anda.

+
+ +

Contoh

+ +

Variable tidak dideklarasikan

+ +
foo.substring(1); // ReferenceError: foo is not defined
+
+ +

Variabel "foo" tidak ditemukan dimanapun. Variabel tersebut diperlukan oleh beberapa string, agar metode {{jsxref("String.prototype.substring()")}} dapat bekerja.

+ +
var foo = 'bar';
+foo.substring(1); // "ar"
+ +

Ruang lingkup salah

+ +

Sebuah variabel harus tersedia dalam kontek eksekusi saat ini . Variabel yang berada di dalam sebuah fungsi tidak dapat diakses dari luar fungsi, sebab sebuah variabel mepunyai batasan pada cakupan wilayah sebuah fungsi

+ +
function numbers() {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError num1 is not defined.
+ +

Dengan demikian sebuah fungsi dapat mengakses semua variabel dan fungsi lainnya yang didefinisikan di dalam cakupan dimana ia didefinisikan. Dengan kata lain, sebiah fungsi yang didefinisikan di cakupan global dapat mengakses semua variabel yang didefinisian secara global pula.

+ +
var num1 = 2,
+    num2 = 3;
+
+function numbers() {
+  return num1 + num2;
+}
+
+console.log(numbers()); // 5
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/errors/property_access_denied/index.html b/files/id/web/javascript/reference/errors/property_access_denied/index.html new file mode 100644 index 0000000000..6cbece3868 --- /dev/null +++ b/files/id/web/javascript/reference/errors/property_access_denied/index.html @@ -0,0 +1,47 @@ +--- +title: 'Error: Permission denied to access property "x"' +slug: Web/JavaScript/Reference/Errors/Property_access_denied +tags: + - Error + - Errors + - JavaScript + - Keamanan +translation_of: Web/JavaScript/Reference/Errors/Property_access_denied +--- +
{{jsSidebar("Errors")}}
+ +

Pesan

+ +
Error: Permission denied to access property "x"
+
+ +

Tipe error

+ +

{{jsxref("Error")}}.

+ +

Apa kesalahannya?

+ +

Ada usaha pengaksesan objeck yang kamu belum punya ijinnya. Sepertinya elemen {{HTMLElement("iframe")}} diload dari domain berbeda yang kebijakan same-origin policynya kamu langgar.

+ +

Contoh

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe>
+    <script>
+      onload = function() {
+        console.log(frames[0].document);
+        // Error: Permission denied to access property "document"
+      }
+    </script>
+  </head>
+  <body></body>
+</html>
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/errors/too_much_recursion/index.html b/files/id/web/javascript/reference/errors/too_much_recursion/index.html new file mode 100644 index 0000000000..4c35bcfc83 --- /dev/null +++ b/files/id/web/javascript/reference/errors/too_much_recursion/index.html @@ -0,0 +1,70 @@ +--- +title: 'InternalError: too much recursion' +slug: Web/JavaScript/Reference/Errors/Too_much_recursion +tags: + - Errors + - InternalError + - JavaScript +translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion +--- +
{{jsSidebar("Errors")}}
+ +

Pesan

+ +
Error: Out of stack space (Edge)
+InternalError: too much recursion (Firefox)
+RangeError: Maximum call stack size exceeded (Chrome)
+
+ +

Tipe error

+ +

{{jsxref("InternalError")}}.

+ +

Apa yang salah?

+ +

Fungsi yang memanggil dirinya sendiri disebut fungsi rekursif. Sekali satu kondisi telah ketemu, fungsi itu berhenti memanggil dirinya. Ini disebut base case.

+ +

Dalam beberapa cara, rekursi analog dengan loop. Keduanya mengeksekusi kode yang sama berulang kali, dan keduanya membutuhkan satu kondisi (untuk mencegah loop tak-terbatas, atau lebih tepatnya, rekursi tak-terbatas dalam hal ini). Ketika panggilan fungsi terlalu banyak, atau tak ada base case dalam fungsi, JavaScript akan melempar error ini.

+ +

Contoh

+ +

Fungsi rekursif ini berjalan 10 kali, per kondisi exit.

+ +
function loop(x) {
+  if (x >= 10) // "x >= 10" is the exit condition
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);
+ +

Mengeset kondisi ini ke nilai extrem sangat tinggi, tak akan jalan:

+ +
function loop(x) {
+  if (x >= 1000000000000)
+    return;
+  // do stuff
+  loop(x + 1);
+}
+loop(0);
+
+// InternalError: too much recursion
+ +

Fungsi rekursif ini tak punya base case. Jika tak kondisi exit, function akan memanggil dirinya sendiri terus-terusan.

+ +
function loop(x) {
+ // The base case is missing
+
+loop(x + 1); // Recursive call
+}
+
+loop(0);
+
+// InternalError: too much recursion
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/functions/index.html b/files/id/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..adb0d13f05 --- /dev/null +++ b/files/id/web/javascript/reference/functions/index.html @@ -0,0 +1,596 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Constructor + - Function + - Functions + - JavaScript + - NeedsTranslation + - Parameter + - TopicStub + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +
{{jsSidebar("Functions")}}
+ +

Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can be passed to a function, and the function will return a value.

+ +

In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.

+ +

For more examples and explanations, see also the JavaScript guide about functions.

+ +

Description

+ +

Every function in JavaScript is a Function object. See {{jsxref("Function")}} for information on properties and methods of Function objects.

+ +

To return a value other than the default, a function must have a return statement that specifies the value to return. A function without a return statement will return a default value. In the case of a constructor called with the new keyword, the default value is the value of its this parameter. For all other functions, the default return value is {{jsxref("undefined")}}.

+ +

The parameters of a function call are the function's arguments. Arguments are passed to functions by value. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:

+ +
/* Declare the function 'myFunc' */
+function myFunc(theObject) {
+  theObject.brand = "Toyota";
+}
+
+/*
+ * Declare variable 'mycar';
+ * create and initialize a new Object;
+ * assign reference to it to 'mycar'
+ */
+var mycar = {
+  brand: "Honda",
+  model: "Accord",
+  year: 1998
+};
+
+/* Logs 'Honda' */
+console.log(mycar.brand);
+
+/* Pass object reference to the function */
+myFunc(mycar);
+
+/*
+ * Logs 'Toyota' as the value of the 'brand' property
+ * of the object, as changed to by the function.
+ */
+console.log(mycar.brand);
+
+ +

The this keyword does not refer to the currently executing function, so you must refer to Function objects by name, even within the function body.

+ +

Defining functions

+ +

There are several ways to define functions:

+ +

The function declaration (function statement)

+ +

There is a special syntax for declaring functions (see function statement for details):

+ +
function name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name.
+
+ +
+
param
+
The name of an argument to be passed to the function.
+
+ +
+
statements
+
The statements comprising the body of the function.
+
+ +

The function expression (function expression)

+ +

A function expression is similar to and has the same syntax as a function declaration (see function expression for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not hoisted onto the beginning of the scope, therefore they cannot be used before they appear in the code.

+ +
function [name]([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name. Can be omitted, in which case the function becomes known as an anonymous function.
+
+ +
+
param
+
The name of an argument to be passed to the function.
+
statements
+
The statements comprising the body of the function.
+
+ +

Here is an example of an anonymous function expression (the name is not used):

+ +
var myFunction = function() {
+    statements
+}
+ +

It is also possible to provide a name inside the definition in order to create a named function expression:

+ +
var myFunction = function namedFunction(){
+    statements
+}
+
+ +

One of the benefits of creating a named function expression is that in case we encountered an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.

+ +

As we can see, both examples do not start with the function keyword. Statements involving functions which do not start with function are function expressions.

+ +

When functions are used only once, a common pattern is an IIFE (Immediately Invokable Function Expression).

+ +
(function() {
+    statements
+})();
+ +

IIFE are function expressions that are invoked as soon as the function is declared.

+ +

The generator function declaration (function* statement)

+ +

There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):

+ +
function* name([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name.
+
+ +
+
param
+
The name of an argument to be passed to the function.
+
+ +
+
statements
+
The statements comprising the body of the function.
+
+ +

The generator function expression (function* expression)

+ +

A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):

+ +
function* [name]([param[, param[, ... param]]]) {
+   statements
+}
+
+ +
+
name
+
The function name. Can be omitted, in which case the function becomes known as an anonymous function.
+
+ +
+
param
+
The name of an argument to be passed to the function.
+
statements
+
The statements comprising the body of the function.
+
+ +

The arrow function expression (=>)

+ +

An arrow function expression has a shorter syntax and lexically binds its this value (see arrow functions for details):

+ +
([param[, param]]) => {
+   statements
+}
+
+param => expression
+
+ +
+
param
+
The name of an argument. Zero arguments need to be indicated with ().  For only one argument, the parentheses are not required. (like foo => 1)
+
statements or expression
+
Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.
+
+ +

The Function constructor

+ +
+

Note: Using the Function constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

+
+ +

As all other objects, {{jsxref("Function")}} objects can be created using the new operator:

+ +
new Function (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.
+
+ +
+
functionBody
+
A string containing the JavaScript statements comprising the function body.
+
+ +

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

+ +

The GeneratorFunction constructor

+ +
+

Note: GeneratorFunction is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).

+
+ +
+

Note: Using the GeneratorFunction constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.

+
+ +

As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the new operator:

+ +
new GeneratorFunction (arg1, arg2, ... argN, functionBody)
+
+ +
+
arg1, arg2, ... argN
+
Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "x", "theValue", or "a,b".
+
+ +
+
functionBody
+
A string containing the JavaScript statements comprising the function definition.
+
+ +

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.

+ +

Function parameters

+ +

Default parameters

+ +

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed. For more details, see default parameters.

+ +

Rest parameters

+ +

The rest parameter syntax allows representing an indefinite number of arguments as an array. For more details, see rest parameters.

+ +

The arguments object

+ +

You can refer to a function's arguments within the function by using the arguments object. See arguments.

+ + + +

Defining method functions

+ +

Getter and setter functions

+ +

You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

+ +
+
get
+
+

Binds an object property to a function that will be called when that property is looked up.

+
+
set
+
Binds an object property to a function to be called when there is an attempt to set that property.
+
+ +

Method definition syntax

+ +

Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See method definitions for more information.

+ +
var obj = {
+  foo() {},
+  bar() {}
+};
+ +

Constructor vs. declaration vs. expression

+ +

Compare the following:

+ +

A function defined with the Function constructor assigned to the variable multiply:

+ +
var multiply = new Function('x', 'y', 'return x * y');
+ +

A function declaration of a function named multiply:

+ +
function multiply(x, y) {
+   return x * y;
+} // there is no semicolon here
+
+ +

A function expression of an anonymous function assigned to the variable multiply:

+ +
var multiply = function(x, y) {
+   return x * y;
+};
+
+ +

A function expression of a function named func_name assigned to the variable multiply:

+ +
var multiply = function func_name(x, y) {
+   return x * y;
+};
+
+ +

Differences

+ +

All do approximately the same thing, with a few subtle differences:

+ +

There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or undefined if the function name was previously declared via a var statement). For example:

+ +
var y = function x() {};
+alert(x); // throws an error
+
+ +

The function name also appears when the function is serialized via Function's toString method.

+ +

On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared.

+ +

As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:

+ +

A function defined by 'new Function' does not have a function name. However, in the SpiderMonkey JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, alert(new Function()) outputs:

+ +
function anonymous() {
+}
+
+ +

Since the function actually does not have a name, anonymous is not a variable that can be accessed within the function. For example, the following would result in an error:

+ +
var foo = new Function("alert(anonymous);");
+foo();
+
+ +

Unlike functions defined by function expressions or by the Function constructor, a function defined by a function declaration can be used before the function declaration itself. For example:

+ +
foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+
+ +

A function defined by a function expression or by a function declaration inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a Function constructor does not inherit any scope other than the global scope (which all functions inherit).

+ +
/*
+ * Declare and initialize a variable 'p' (global)
+ * and a function 'myFunc' (to change the scope) inside which
+ * declare a varible with same name 'p' (current) and
+ * define three functions using three different ways:-
+ *     1. function declaration
+ *     2. function expression
+ *     3. function constructor
+ * each of which will log 'p'
+ */
+var p = 5;
+function myFunc() {
+    var p = 9;
+
+    function decl() {
+        console.log(p);
+    }
+    var expr = function() {
+        console.log(p);
+    };
+    var cons = new Function('\tconsole.log(p);');
+
+    decl();
+    expr();
+    cons();
+}
+myFunc();
+
+/*
+ * Logs:-
+ * 9  - for 'decl' by function declaration (current scope)
+ * 9  - for 'expr' by function expression (current scope)
+ * 5  - for 'cons' by Function constructor (global scope)
+ */
+
+ +

Functions defined by function expressions and function declarations are parsed only once, while those defined by the Function constructor are not. That is, the function body string passed to the Function constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "new Function(...)". Therefore the Function constructor should generally be avoided whenever possible.

+ +

It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a Function constructor 's string aren't parsed repeatedly. For example:

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

A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:

+ + + +
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() {}
+   }
+}
+
+ +

Block-level functions

+ +

In strict mode, starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.

+ +
'use strict';
+
+function f() {
+  return 1;
+}
+
+{
+  function f() {
+    return 2;
+  }
+}
+
+f() === 1; // true
+
+// f() === 2 in non-strict mode
+
+ +

Block-level functions in non-strict code

+ +

In a word: Don't.

+ +

In non-strict code, function declarations inside blocks behave strangely. For example:

+ +
if (shouldDefineZero) {
+   function zero() {     // DANGER: compatibility risk
+      console.log("This is zero.");
+   }
+}
+
+ +

ES2015 says that if shouldDefineZero is false, then zero should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define zero whether the block executed or not.

+ +

In strict mode, all browsers that support ES2015 handle this the same way: zero is defined only if shouldDefineZero is true, and only in the scope of the if-block.

+ +

A safer way to define functions conditionally is to assign a function expression to a variable:

+ +
var zero;
+if (shouldDefineZero) {
+   zero = function() {
+      console.log("This is zero.");
+   };
+}
+
+ +

Examples

+ +

Returning a formatted number

+ +

The following function returns a string containing the formatted representation of a number padded with leading zeros.

+ +
// 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;
+}
+
+ +

The following statements call the padZeros function.

+ +
var result;
+result = padZeros(42,4); // returns "0042"
+result = padZeros(42,2); // returns "42"
+result = padZeros(5,4);  // returns "0005"
+
+ +

Determining whether a function exists

+ +

You can determine whether a function exists by using the typeof operator. In the following example, a test is performed to determine if the window object has a property called noFunc that is a function. If so, it is used; otherwise, some other action is taken.

+ +
 if ('function' === typeof window.noFunc) {
+   // use noFunc()
+ } else {
+   // do something else
+ }
+
+ +

Note that in the if test, a reference to noFunc is used—there are no brackets "()" after the function name so the actual function is not called.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial 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('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ + + +

{{Compat("javascript.functions")}}

+ +

See also

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/concat/index.html b/files/id/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..c6a25609db --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,169 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +
{{JSRef}}
+ +

Method concat() mengembalikan sebuah array baru yang terdiri dari array yang dipanggil kemudian digabung dengan array dan/atau nilai yang ditambahkan pada argumen.

+ +

Syntax

+ +
var array_baru = array_lama.concat(value1[, value2[, ...[, valueN]]])
+ +

Parameter

+ +
+
valueN
+
Array dan/atau nilai untuk digabung menjadi array baru. Untuk detailnya lihat deskripsi dibawah.
+
+ +

Deskripsi

+ +

concat menciptakan array baru yang terdiri dari unsur - unsur dalam object yang disebut, berdasarkan urutannya, setiap argumen, elemen dari argumen tersebut(Jika argumen adalah array) atau argumennya sendiri (jika argumennya bukan array).

+ +

concat tidak mengubah this atau beberapa array yang tersedia sebagai argumen melainkan mengembalikan shallow copy yang berisi salinan dari elemen yang sama digabung dengan array yang asli. Elemen dari array asli disalin ke array baru sebagai berikut:

+ + + +
+

Catatan: Concatenating array/nilai akan membiarkan aslinya tidak tersentuh. Selanjutnya, setiap operasi pada array baru tidak akan mempengaruhi array yang asli, begitupun sebaliknya.

+
+ +

Contoh

+ +

Menggabungkan dua Array

+ +

Berikut kode untuk menggabunggkan dua array:

+ +
var huruf = ['a', 'b', 'c'],
+    angka = [1, 2, 3];
+
+var hurufAngka = huruf.concat(angka);
+
+console.log(hurufAngka); // Hasil: ['a', 'b', 'c', 1, 2, 3]
+
+ +

Menggabungkan tiga array

+ +

Berikut kode untuk mengabungkan tiga array:

+ +
var angka1 = [1, 2, 3],
+    angka2 = [4, 5, 6],
+    angka3 = [7, 8, 9];
+
+var angkaBaru = angka1.concat(angka2, angka3);
+
+console.log(angkaBaru); // Hasil: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+ +

Menggabungkan nilai ke sebuah array

+ +

Berikut kode untuk menggabungkan tiga nilai ke sebuah array :

+ +
var huruf = ['a', 'b', 'c'];
+
+var hurufAngka = huruf.concat(1, [2, 3]);
+
+console.log(hurufAngka);
+// Hasil: ['a', 'b', 'c', 1, 2, 3]
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/filter/index.html b/files/id/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..5c23313268 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,244 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +tags: + - Array + - ECMAScript 5 + - JavaScript + - Metode + - Referensi + - polyfill + - purwarupa +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +
{{JSRef}}
+ +

Fungsi filter() membuat array baru berisi elemen yang lolos pengecekan di dalam fungsi anonim yang dikirim sebagai parameter.

+ +
var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];
+
+var longWords = words.filter(function(word){
+  return word.length > 6;
+});
+
+// Filtered array longWords is ["exuberant", "destruction", "present"]
+
+ +

Versi ES6

+ +
const words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];
+
+let longWords = words.filter(word => word.length > 6);
+
+// Filtered array longWords is ["exuberant", "destruction", "present"]
+
+ +

Sintaksis

+ +
var newArray = arr.filter(callback[, thisArg])
+ +

Parameter-parameter

+ +
+
callback
+
Fungsi berupa tes untuk mengecek elemen yang ada di dalam array. Kembalikan nilai true untuk meloloskan element, false untuk tidak lolos, dan dapat memiliki tiga argumen:
+
+
+
element
+
Elemen saat ini yang sedang diproses.
+
index
+
Nilai indeks (posisi) dari elemen yang sedang diproses.
+
array
+
Array yang memanggil fungsi filter.
+
+
+
thisArg {{Optional_inline}}
+
Opsional. Objek yang akan digunakan sebagai this saat mengeksekusi callback.
+
+ +

Nilai balikan

+ +

Array baru yang berisi elemen lolos pengecekan.

+ +

Deskripsi

+ +

filter() akan memanggil fungsi callback sekali untuk tiap elemen di dalam array, dan membuat array baru dari semua nilai yang dianggap true dari hasil yang dikembalikan callback. callback hanya dipanggil untuk indeks dari array yang berisi sebuah nilai; fungsi tidak akan dipanggil untuk indeks yang telah dihapus atau belum diisi nilai tertentu. Elemen array yang tidak lolos tes callback akan dilewati dan tidak dimasukkan ke dalam array baru.

+ +

callback dapat dipanggil dengan tiga argumen:

+ +
    +
  1. nilai dari elemen
    2. +
  2. indeks dari elemen
    3. +
  3. objek array yang diproses
    4. +
+ +

Jika parameter thisArg tersedia juga saat memanggil filter, itu akan digunakan sebagai nilai this di dalam callback.  Jika tidak disediakan, maka undefined yang digunakan sebagai nilai this. Nilai this yang dapat digunakan dalam callback ditentukan dari aturan umum penentuan this dalam fungsi.

+ +

filter() tidak mengubah array yang memanggil fungsi ini.

+ +

Kumpulan elemen yang akan diproses oleh filter() ditentukan sebelum pemanggilan pertama callback. Elemen yang ditambahkan ke array setelah pemanggilanfilter() dimulai tidak akan diproses oleh callback. Jika elemen yang sudah ada dalam array berubah, atau dihapus, nilai yang digunakan dalam callback adalah nilai pada saat filter() menggunakannya; elemen yang dihapus tidak akan diproses.

+ +

Contoh

+ +

Menyaring semua nilai kecil

+ +

Contoh berikut ini menggunakan filter() untuk membuat array yang menyaring semua nilai di bawah 10.

+ +
function isBigEnough(value) {
+  return value >= 10;
+}
+
+var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtered is [12, 130, 44]
+
+ +

Menyaring entri invalid dari JSON

+ +

Contoh berikut ini menggunakan filter() untuk membuat json tersaring berisi semua elemen id berupa angka bukan nol.

+ +
var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var invalidEntries = 0;
+
+function isNumber(obj) {
+  return obj!== undefined && typeof(obj) === 'number' && !isNaN(obj);
+}
+
+function filterByID(item) {
+  if (isNumber(item.id)) {
+    return true;
+  }
+  invalidEntries++;
+  return false;
+}
+
+var arrByID = arr.filter(filterByID);
+
+console.log('Filtered Array\n', arrByID);
+// Filtered Array
+// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Number of Invalid Entries = ', invalidEntries);
+// Number of Invalid Entries = 4
+
+ +

Pencarian dalam array

+ +

Contoh berikut menggunakan filter() untuk menyaring isi array berdasarkan kriteria pencarian

+ +
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Array filters items based on search criteria (query)
+ */
+function filterItems(query) {
+  return fruits.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
+  })
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']
+ +

Implementasi ES2015

+ +
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * Array filters items based on search criteria (query)
+ */
+const filterItems = (query) => {
+  return fruits.filter((el) =>
+    el.toLowerCase().indexOf(query.toLowerCase()) > -1
+  );
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']
+
+
+ +

Polyfill

+ +

filter() ditambahkan ke standar ECMA-262 baru pada edisi ke-5; sehingga fungsi ini mungkin tidak terdapat pada semua implementasi standar. Anda dapat mengatasi hal ini dengan menambahkan kode berikut pada awalan skrip Anda, memungkinkan penggunaan filter() di implementasi ECMA-262 yang belum mendukung. Algoritma ini persis sepadan dengan yang dispesifikasikan dalam ECMA-262, edisi ke-5, dengan asumsi fn.call dievaluasi ke nilai asli dari {{jsxref("Function.prototype.bind()")}}, dan {{jsxref("Array.prototype.push()")}} memiliki nilai aslinya.

+ +
if (!Array.prototype.filter)
+  Array.prototype.filter = function(func, thisArg) {
+    'use strict';
+    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
+        throw new TypeError();
+
+    var len = this.length >>> 0,
+        res = new Array(len), // preallocate array
+        t = this, c = 0, i = -1;
+    if (thisArg === undefined)
+      while (++i !== len)
+        // checks to see if the key was set
+        if (i in this)
+          if (func(t[i], i, t))
+            res[c++] = t[i];
+    else
+      while (++i !== len)
+        // checks to see if the key was set
+        if (i in this)
+          if (func.call(thisArg, t[i], i, t))
+            res[c++] = t[i];
+
+    res.length = c; // shrink down array to proper size
+    return res;
+  };
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}{{Spec2('ES5.1')}}Initial definition. Implemented in JavaScript 1.6.
{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ESDraft')}} 
+ +

Kompatibilitas browser

+ +
+ + +

{{Compat("javascript.builtins.Array.filter")}}

+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/from/index.html b/files/id/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..7845da9755 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,248 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +
{{JSRef}}
+ +

Method Array.from() membuat sebuah instansi Array dari sebuah array-like atau objek iterable.

+ +

Di ES6, sintaks class memungkinkan untuk subclassing diantaranya built-in dan user defined classes; hasilnya , method statik class-side seperti Array.from  "diwariskan" oleh subclasses dari Array dan membuat instansi baru dari subclass, bukan Array.

+ +

Sintaks

+ +
Array.from(arrayLike[, mapFn[, thisArg]])
+
+ +

Parameter

+ +
+
arrayLike
+
 Array-like atau objek iterable untuk diubah menjadi array.
+
mapFn
+
Opsional. Fungsi Map untuk memanggil setiap elemen array.
+
thisArg
+
Opsional. Nilai untuk digunakan this ketika mengeksekusi mapFn.
+
+ +

Deskripsi

+ +

Array.from() memungkinkan anda membuat Arrays dari:

+ + + +

Array.from() memiliki parameter opsional mapFn, yang memungkinkan anda untuk mengeksekusi fungsi {{jsxref("Array.prototype.map", "map")}} pada setiap elemen array (atau objek subclass) yang akan dibuat. Jelasnya, Array.from(obj, mapFn, thisArg) sama dengan Array.from(obj).map(mapFn, thisArg), kecuali dengan tidak membuat array menengah. Ini sangat penting untuk setiap subclass array, seperti typed arrays, selama array menengah akan memiliki nilai yang terpisah agar bisa masuk ke tipe yang sesuai.

+ +

Properti length dari method from() adalah 1.

+ +

Contoh

+ +
// Array-like object (arguments) to Array
+function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+// [1, 2, 3]
+
+
+// Any iterable object...
+// Set
+var s = new Set(["foo", window]);
+Array.from(s);
+// ["foo", window]
+
+
+// Map
+var m = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(m);
+// [[1, 2], [2, 4], [4, 8]]
+
+
+// String
+Array.from("foo");
+// ["f", "o", "o"]
+
+
+// Using an arrow function as the map function to
+// manipulate the elements
+Array.from([1, 2, 3], x => x + x);
+// [2, 4, 6]
+
+
+// Generate a sequence of numbers
+Array.from({length: 5}, (v, k) => k);
+// [0, 1, 2, 3, 4]
+
+
+ +

Polyfill

+ +

Array.from telah di masukkan di standar ECMA-262 pada edisi ke-6; karena itu mungkin tidak bisa digunakan pada implementasi standar lain. Anda bisa menyiasatinya dengan menambahkan kode berikut ke awal script, memungkinkan penggunaan Array.from pada implementasi yang aslinya tidak mendukung.  Algoritma ini sama dengan yang di spesifikasikan di ECMA-262, edisi ke-6, dengan saumsi Object dan TypeError memiliki nilai tersendiri dan callback.call mengevaluasi nilai valur dari {{jsxref("Function.prototype.call")}}. Selain itu, sejak iterable tidak dapat di polyfill, implementasi ini tidak mendukung generik iterable seperti yang didefinisikan di edisi ke-6 di ECMA-262.

+ +
// Production steps of ECMA-262, Edition 6, 22.1.2.1
+// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    // The length property of the from method is 1.
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      // 1. Let C be the this value.
+      var C = this;
+
+      // 2. Let items be ToObject(arrayLike).
+      var items = Object(arrayLike);
+
+      // 3. ReturnIfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError("Array.from requires an array-like object - not null or undefined");
+      }
+
+      // 4. If mapfn is undefined, then let mapping be false.
+      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        // 5. else
+        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+
+        // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
+        if (arguments.length > 2) {
+          T = arguments[2];
+        }
+      }
+
+      // 10. Let lenValue be Get(items, "length").
+      // 11. Let len be ToLength(lenValue).
+      var len = toLength(items.length);
+
+      // 13. If IsConstructor(C) is true, then
+      // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len.
+      // 14. a. Else, Let A be ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      // 16. Let k be 0.
+      var k = 0;
+      // 17. Repeat, while k < len… (also steps a - h)
+      var kValue;
+      while (k < len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      // 18. Let putStatus be Put(A, "length", len, true).
+      A.length = len;
+      // 20. Return A.
+      return A;
+    };
+  }());
+}
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-array.from', 'Array.from')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Dukungan dasar{{CompatChrome("45")}}{{CompatGeckoDesktop("32")}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}9.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/index.html b/files/id/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..2b052487c4 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,484 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - Global Objects + - JavaScript + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +
{{JSRef}}
+ +

Objek JavaScript Array merupakan objek global yang berguna membangun himpunan; dimana merupakan objek level tinggi dan (seperti) daftar.

+ +

Membuat sebuah Array

+ +
var fruits = ["Apple", "Banana"];
+
+console.log(fruits.length);
+// 2
+
+ +

Akses (index) kedalam sebuah item Array

+ +
var first = fruits[0];
+// Apple
+
+var last = fruits[fruits.length - 1];
+// Banana
+
+ +

Perulangan pada Array

+ +
fruits.forEach(function (item, index, array) {
+  console.log(item, index);
+});
+// Apple 0
+// Banana 1
+
+ +

Menambahkan elemen pada bagian akhir sebuah Array

+ +
var newLength = fruits.push("Orange");
+// ["Apple", "Banana", "Orange"]
+
+ +

Menghapus elemen di akhir sebuah Array

+ +
var last = fruits.pop(); // remove Orange (from the end)
+// ["Apple", "Banana"];
+
+ +

Menghapus elemen di awal sebuah Array

+ +
var first = fruits.shift(); // remove Apple from the front
+// ["Banana"];
+
+ +

Menambahkan elemen di bagian awal sebuah Array

+ +
var newLength = fruits.unshift("Strawberry") // add to the front
+// ["Strawberry", "Banana"];
+
+ +

Mencari (nomor) index elemen pada sebuah Array

+ +
fruits.push("Mango");
+// ["Strawberry", "Banana", "Mango"]
+
+var pos = fruits.indexOf("Banana");
+// 1
+
+ +

Menghapus elemen berdasar posisi index

+ +
var removedItem = fruits.splice(pos, 1); // this is how to remove an item
+// ["Strawberry", "Mango"]
+
+ +

Menduplikat sebuah Array

+ +
var shallowCopy = fruits.slice(); // this is how to make a copy
+// ["Strawberry", "Mango"]
+
+ +

Syntax

+ +
[element0, element1, ..., elementN]
+new Array(element0, element1[, ...[, elementN]])
+new Array(arrayLength)
+ +
+
elementN
+
A JavaScript array is initialized with the given elements, except in the case where a single argument is passed to the Array constructor and that argument is a number (see the arrayLength parameter below).Note that this special case only applies to JavaScript arrays created with the Array constructor, not array literals created with the bracket syntax.
+
arrayLength
+
If the only argument passed to the Array constructor is an integer between 0 and 232-1 (inclusive), this returns a new JavaScript array with length set to that number. If the argument is any other number, a {{jsxref("RangeError")}} exception is thrown.
+
+ +

Description

+ +

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.

+ +

Some people think that you shouldn't use an array as an associative array. In any case, you can use plain {{jsxref("Global_Objects/Object", "objects")}} instead, although doing so comes with its own caveats. See the post Lightweight JavaScript dictionaries with arbitrary keys as an example.

+ +

Accessing array elements

+ +

JavaScript arrays are zero-indexed: the first element of an array is at index 0, and the last element is at the index equal to the value of the array's {{jsxref("Array.length", "length")}} property minus 1.

+ +
var arr = ['this is the first element', 'this is the second element'];
+console.log(arr[0]);              // logs 'this is the first element'
+console.log(arr[1]);              // logs 'this is the second element'
+console.log(arr[arr.length - 1]); // logs 'this is the second element'
+
+ +

Array elements are object properties in the same way that toString is a property, but trying to access an element of an array as follows throws a syntax error, because the property name is not valid:

+ +
console.log(arr.0); // a syntax error
+
+ +

There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named '3d', it can only be referenced using bracket notation. E.g.:

+ +
var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+console.log(years.0);   // a syntax error
+console.log(years[0]);  // works properly
+
+ +
renderer.3d.setTexture(model, 'character.png');     // a syntax error
+renderer['3d'].setTexture(model, 'character.png');  // works properly
+
+ +

Note that in the 3d example, '3d' had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., years['2'] instead of years[2]), although it's not necessary. The 2 in years[2] is coerced into a string by the JavaScript engine through an implicit toString conversion. It is for this reason that '2' and '02' would refer to two different slots on the years object and the following example could be true:

+ +
console.log(years['2'] != years['02']);
+
+ +

Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation(but it can be accessed by dot notation in firefox 40.0a2 at least):

+ +
var promise = {
+  'var'  : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['array']);
+
+ +

Relationship between length and numerical properties

+ +

A JavaScript array's {{jsxref("Array.length", "length")}} property and numerical properties are connected. Several of the built-in array methods (e.g., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etc.) take into account the value of an array's {{jsxref("Array.length", "length")}} property when they're called. Other methods (e.g., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, etc.) also result in updates to an array's {{jsxref("Array.length", "length")}} property.

+ +
var fruits = [];
+fruits.push('banana', 'apple', 'peach');
+
+console.log(fruits.length); // 3
+
+ +

When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's {{jsxref("Array.length", "length")}} property accordingly:

+ +
fruits[5] = 'mango';
+console.log(fruits[5]); // 'mango'
+console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
+console.log(fruits.length); // 6
+
+ +

Increasing the {{jsxref("Array.length", "length")}}.

+ +
fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 10
+
+ +

Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.

+ +
fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2
+
+ +

This is explained further on the {{jsxref("Array.length")}} page.

+ +

Creating an array using the result of a match

+ +

The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. To help explain these properties and elements, look at the following example and then refer to the table below:

+ +
// Match one d followed by one or more b's followed by one d
+// Remember matched b's and the following d
+// Ignore case
+
+var myRe = /d(b+)(d)/i;
+var myArray = myRe.exec('cdbBdbsbz');
+
+ +

The properties and elements returned from this match are as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Property/ElementDescriptionExample
inputA read-only property that reflects the original string against which the regular expression was matched.cdbBdbsbz
indexA read-only property that is the zero-based index of the match in the string.1
[0]A read-only element that specifies the last matched characters.dbBd
[1], ...[n]Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.[1]: bB
+ [2]: d
+ +

Properties

+ +
+
Array.length
+
The Array constructor's length property whose value is 1.
+
{{jsxref("Array.@@species", "get Array[@@species]")}}
+
The constructor function that is used to create derived objects.
+
{{jsxref("Array.prototype")}}
+
Allows the addition of properties to all array objects.
+
+ +

Methods

+ +
+
{{jsxref("Array.from()")}}
+
Creates a new Array instance from an array-like or iterable object.
+
{{jsxref("Array.isArray()")}}
+
Returns true if a variable is an array, if not false.
+
{{jsxref("Array.of()")}}
+
Creates a new Array instance with a variable number of arguments, regardless of number or type of the arguments.
+
+ +

Array instances

+ +

All Array instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the Array constructor can be modified to affect all Array instances.

+ +

Properties

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}
+ +

Methods

+ +

Mutator methods

+ +
{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}
+ +

Accessor methods

+ +
{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}
+ +

Iteration methods

+ +
{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}
+ +

Array generic methods

+ +
+

Array generics are non-standard, deprecated and will get removed near future. Note that you can not rely on them cross-browser. However, there is a shim available on GitHub.

+
+ +

Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable str is a letter, you would write:

+ +
function isLetter(character) {
+  return character >= 'a' && character <= 'z';
+}
+
+if (Array.prototype.every.call(str, isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}
+
+ +

This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:

+ +
if (Array.every(str, isLetter)) {
+  console.log("The string '" + str + "' contains only letters!");
+}
+
+ +

{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.

+ +

These are not part of ECMAScript standards (though the ES6 {{jsxref("Array.from()")}} can be used to achieve this). The following is a shim to allow its use in all browsers:

+ +
// Assumes Array extras already present (one may use polyfills for these as well)
+(function() {
+  'use strict';
+
+  var i,
+    // We could also build the array of methods with the following, but the
+    //   getOwnPropertyNames() method is non-shimable:
+    // Object.getOwnPropertyNames(Array).filter(function(methodName) {
+    //   return typeof Array[methodName] === 'function'
+    // });
+    methods = [
+      'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
+      'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
+      'forEach', 'map', 'reduce', 'reduceRight', 'filter',
+      'some', 'every', 'find', 'findIndex', 'entries', 'keys',
+      'values', 'copyWithin', 'includes'
+    ],
+    methodCount = methods.length,
+    assignArrayGeneric = function(methodName) {
+      if (!Array[methodName]) {
+        var method = Array.prototype[methodName];
+        if (typeof method === 'function') {
+          Array[methodName] = function() {
+            return method.call.apply(method, arguments);
+          };
+        }
+      }
+    };
+
+  for (i = 0; i < methodCount; i++) {
+    assignArrayGeneric(methods[i]);
+  }
+}());
+
+ +

Examples

+ +

Creating an array

+ +

The following example creates an array, msgArray, with a length of 0, then assigns values to msgArray[0] and msgArray[99], changing the length of the array to 100.

+ +
var msgArray = [];
+msgArray[0] = 'Hello';
+msgArray[99] = 'world';
+
+if (msgArray.length === 100) {
+  console.log('The length is 100.');
+}
+
+ +

Creating a two-dimensional array

+ +

The following creates a chess board as a two dimensional array of strings. The first move is made by copying the 'p' in (6,4) to (4,4). The old position (6,4) is made blank.

+ +
var board = [
+  ['R','N','B','Q','K','B','N','R'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','n','b','q','k','b','n','r'] ];
+
+console.log(board.join('\n') + '\n\n');
+
+// Move King's Pawn forward 2
+board[4][4] = board[6][4];
+board[6][4] = ' ';
+console.log(board.join('\n'));
+
+ +

Here is the output:

+ +
R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.4', 'Array')}}{{Spec2('ES5.1')}}New methods added: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}
{{SpecName('ES6', '#sec-array-objects', 'Array')}}{{Spec2('ES6')}}New methods added: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}
{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}{{Spec2('ESDraft')}}New method added: {{jsxref("Array.prototype.includes()")}}
+ +

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/id/web/javascript/reference/global_objects/array/isarray/index.html b/files/id/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..152b6cdfd0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,144 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Array + - ECMAScript5 + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +
{{JSRef}}
+ +

Method Array.isArray() mengembalikan nilai true jika objek adalah array, false jika bukan.

+ +

Sintaks

+ +
Array.isArray(obj)
+ +

Parameter

+ +
+
obj
+
Objek yang di cek.
+
+ +

Deskripsi

+ +

Baca artikel “Determining with absolute accuracy whether or not a JavaScript object is an array” untuk detailnya.

+ +

Contoh

+ +
// semuanya mengembalikan nilai true
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+// Sekedar fakta : Array.prototype sendiri adalah array:
+Array.isArray(Array.prototype);
+
+// semua mengembalikan nilai false
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray('Array');
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray({ __proto__: Array.prototype });
+
+ +

Polyfill

+ +

Jalankan kode berikut sebelum kode lain untuk membuat method Array.isArray() jika secara native tidak tersedia.

+ +
if (!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}{{Spec2('ES5.1')}}Initial definition. Implemented in JavaScript 1.8.5.
{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("5")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("9")}}{{CompatOpera("10.5")}}{{CompatSafari("5")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/join/index.html b/files/id/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..8ddd3bb8ed --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,132 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +tags: + - Array + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +
{{JSRef}}
+ +

Method join() menggabungkan semua elemen dari sebuah array menjadi sebuah string.

+ +

Syntax

+ +
str = arr.join([separator = ','])
+ +

Parameter

+ +
+
separator
+
Opsional. Menentukan string untuk memisahkan setiap elemen array. separator dapat di konersi ke string jika diperlukan. Jika dihilangkan, elemen array akan dipisahkan dengan koma, jika separator adalah string kosong, semua elemen digabungkan tanpa karakter pemisah.
+
+ +

Deskripsi

+ +

mengonversi string dari semua elemen array dengan menggabungkannya menjadi sebuah string. Jika elemen bernilai undefined atau null, akan dikonversi menjadi string kosong.

+ +

Contoh

+ +

Penggabungan array menggunakan empat cara yang berbeda

+ +

Berikut merupakan contoh membuat array, dengan tiga elemen, kemudian menggabungkan array dengan empa cara berbeda : menggunakan separator default, koma dan spasi, plus dan string kosong.

+ +
var a = ['Angin', 'Air', 'Api'];
+var variabel1 = a.join();      // Memberikan nilai 'Angin,Air,Api' pada variabel1
+var variabel2 = a.join(', ');  // Memberikan nilai 'Angin, Air, Api' pada variabel2
+var variabel3 = a.join(' + '); // Memberikan nilai 'Angin + Air + Api' pada variabel3
+var variabel4 = a.join('');    // Memberikan nilai 'AnginAirApi' pada variabel4
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan Dasar{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan Dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/length/index.html b/files/id/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..6e8e9e3ae8 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,145 @@ +--- +title: Array.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +tags: + - Array + - JavaScript + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +
{{JSRef}}
+ +

Properti array length merangkai atau mengembalikan angka dari sejumlah elemen pada array. berupa unsigned, 32-bit integer yang selalu lebih besar dari indeks array terbesar atau index array terakhir.

+ +
var items = ["sepatu", "kaos", "baju", "sweater"];
+items.length;
+
+// index terakhir "sweater" 3
+// returns 4
+ +

Deskripsi

+ +

Nilai properti length berupa integer positif dan nilainya lebih kecil dari 2 sampai 2 pangkat 32 (232).

+ +

Anda bisa merangkai properti length untuk memotong array kapanpun. Ketika anda memperpanjang array dengan mengubah properti length, nomor dari elemen sebenarnya tidak bertambah; contoh, jika anda merangkai length ke 3 ketika saat ini adalah 2, array tetap berisi 2 element. Dengan begitu, properti length tidak selalu menunjukkan jumlah angka dari nilai yang didefinisikan pada array. Lihat juga Hubungan antara length dan properti numerik.

+ +

{{js_property_attributes(1, 0, 0)}}

+ +

Contoh

+ +

Iterasi pada array

+ +

Pada contoh, numbers array diiterasikan melalui nilai properti array length. Nilai setiap elemen kemudian dikalikan.

+ +
var numbers = [1, 2, 3, 4, 5];
+var length = numbers.length;
+for (var i = 0; i < length; i++) {
+  numbers[i] *= 2;
+}
+// numbers is now [2, 4, 6, 8, 10]
+
+ +

Memendekan array

+ +

Pada contoh memendekkan array numbers ke panjang array 3 jika panjang array sebenarnya lebih besar dari 3.

+ +
var numbers = [1,2,3,4,5];
+
+if (numbers.length > 3) {
+  numbers.length = 3;
+}
+
+console.log(numbers); // [1, 2, 3]
+console.log(numbers.length); // 3
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/of/index.html b/files/id/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..49ca553133 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,129 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - Array + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +
{{JSRef}}
+ +

Method Array.of() membuat instansi Array baru denganjumlah variabel argumen.

+ +

Perbedaan antara Array.of() dan konstruktor Array pada penanganan argumen integer: Array.of(42) membuat sebuah array dengan sebuah elemen, 42, sedang Array(42) membuat array dengan 42 element, yang masing - masing undefined.

+ +

Sintaks

+ +
Array.of(element0[, element1[, ...[, elementN]]])
+ +

Parameter

+ +
+
elementN
+
Element yang digunakan untuk membuat array.
+
+ +

Deskripsi

+ +

Fungsi ini merupakan bagian dari ECMAScript 6 standard. Untuk informasi lengkap lihat Array.of and Array.from proposal dan Array.of polyfill.

+ +

Contoh

+ +
Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+
+ +

Polyfill

+ +

Menjalankan kode berikut sebelum kode lain membuat Array.of() jika secara native tidak tersedia.

+ +
if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-array.of', 'Array.of')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(45)}}{{CompatGeckoDesktop("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(39)}}{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/pop/index.html b/files/id/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..f8dc9f0523 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,134 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +
{{JSRef}}
+ +

Method pop() menghapus elemen terakhir dari array dan mengembalikan elemen tersebut.

+ +

Syntaks

+ +
arr.pop()
+ +

Deskripsi

+ +

Method pop menghapus elemen terakhir pada array dan mengembalikan nilai ke pemanggil.

+ +

pop adalah desain generic; method ini dapat berupa {{jsxref("Function.call", "called", "", 1)}} atau {{jsxref("Function.apply", "applied", "", 1)}} ke objek yang menyerupai array. Objek yang tidak memiliki properti length mencerminkan akhir dari urutan, properti numerik yang berbasis zero mungkin tidak memiliki makna yang berarti.

+ +

jika anda menggunakan pop() pada array yang kosong, akan mengembalikan nilai {{jsxref("undefined")}}.

+ +

Contoh

+ +

Menghapus elemen terakhir pada array

+ +

Kode berikut membuat array myFish yang memiliki empat elemen, kemudian menghapus elemen teakhirnya.

+ +
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+
+console.log(myFish); // ['angel', 'clown', 'mandarin', 'sturgeon']
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['angel', 'clown', 'mandarin' ]
+
+console.log(popped); // 'sturgeon'
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/reverse/index.html b/files/id/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..dca16b463e --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,127 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +tags: + - Array + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +
{{JSRef}}
+ +

Method reverse() membalikkan urutan array elemen. Elemen array pertama menjadi terakhir dan sebaliknya.

+ +

Sintaks

+ +
arr.reverse()
+ +

Parameter

+ +

None.

+ +

Deskripsi

+ +

Method reverse mengubah urutan elemen objek array, memutasi array, dan mengembalikan referensi ke array.

+ +

Contoh

+ +

Membalikan elemen di dalam array

+ +

Pada contoh membuat array myArray dengan tiga elemen,  kemudian membalikkan array.

+ +
var myArray = ['one', 'two', 'three'];
+myArray.reverse();
+
+console.log(myArray) // ['three', 'two', 'one']
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/shift/index.html b/files/id/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..ac20d5cd60 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,129 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +
{{JSRef}}
+ +

method shift() menghapus elemen pertama pada array dan mengembalikan elemen tersebut. Method ini mengubah panjang (jumlah elemen) array.

+ +

Sintaks

+ +
arr.shift()
+ +

Deskripsi

+ +

Method shift menghapus elemen pada index 0 dan menggeser nilai index setelahnya, kemudian mengembalikan nilai yang dihapus. Jika properti {{jsxref("Array.length", "length")}} bernilai 0, maka akan mengembalikan nilai {{jsxref("undefined")}}.

+ +

shift adalah desain generic; method ini dapat berupa {{jsxref("Function.call", "called", "", 1)}} atau {{jsxref("Function.apply", "applied", "", 1)}} pada objek yag menyerupai array. Objek yang tidak memiliki properti length akan dianggap terakhir dalam urutan, properti numerik berbasis zero mungkin tidak memiliki makna yang berarti.

+ +

Contoh

+ +

Menghapus Elemen dari sebuah Array

+ +

Kode berikut menampilkan array myFish sebelum dan sesudah menghapus elemen pertama. Juga menampilkan elemen yang dihapus:

+ +
var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
+
+console.log('myFish sebelum: ' + myFish);
+// myFish sebelum: angel,clown,mandarin,surgeon
+
+var shifted = myFish.shift();
+
+console.log('myFish sesudah: ' + myFish);
+// myFish sesudah: clown,mandarin,surgeon
+
+console.log('Elemen yang dihapus: ' + shifted);
+// Elemen yang dihapus: angel
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}{{Spec2('ESDraft')}} 
+ +

Kompabiltas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/slice/index.html b/files/id/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..44f018ba65 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,152 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +
{{JSRef}}
+ +

Method slice() mengembalikan sebuah salinan dangkal dari sebagian array menjadi sebuah objek array baru yang dimulai dari start sampai end (end tidak termasuk) dimana start dan end merupakan index dari  item yang ada di  array tersebut. Tidak merubah array asli.

+ +
{{EmbedInteractiveExample("pages/js/array-slice.html")}}
+ + + +

Sintaks

+ +
arr.slice([start[, end]])
+
+ +

Parameter

+ +
+
start {{optional_inline}}
+
Indeks berbasis nol untuk memulai ekstraksi.
+

+ Indeks negatif dapat digunakan, menunjukkan offset dari akhir urutan.. slice(-2) mengekstrak dua elemen terakhir dari urutan.
+
Jika start tidak terdefinisi, slice memulai dari indeks ke 0.
+
Jika start lebih besar dari indeks urutan, array kosong akan dikembalikan.
+
end {{optional_inline}}
+
Indeks berbasis nol untuk mengakhiri ekstraksi. slice mengekstrak hingga tapi tidak termasuk end. Sebagai contoh, slice(1,4) mengekstrak elemen kedua menuju elemen ke-empat (indeks elemen 1, 2, dan 3).
+
+

Indeks negatif bisa digunakan,
+ menunjukkan offset dari akhir urutan. slice(2,-1) mengekstrak elemen ketiga menuju elemen kedua-ke-terakhir dalam urutan.

+
+
Jika end dihillangkan, slice mengekstrak melalui akhir dari urutan (arr.length).
+
Jika end lebih besar dari panjang urutan, slice mengkstrak melalui akhir urutan (arr.length).
+
+ +

Return value

+ +

Array baru berisi elemen yang diekstrak.

+ +

Deskripsi

+ +

slice does not alter the original array. It returns a shallow copy of elements from the original array. Elements of the original array are copied into the returned array as follows:

+ + + +

If a new element is added to either array, the other array is not affected.

+ +

Contoh

+ +

Return a portion of an existing array

+ +
let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
+let citrus = fruits.slice(1, 3)
+
+// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
+// citrus contains ['Orange','Lemon']
+
+ +

Using slice

+ +

In the following example, slice creates a new array, newCar, from myCar. Both include a reference to the object myHonda. When the color of myHonda is changed to purple, both arrays reflect the change.

+ +
// Using slice, create newCar from myCar.
+let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }
+let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']
+let newCar = myCar.slice(0, 2)
+
+// Display the values of myCar, newCar, and the color of myHonda
+//  referenced from both arrays.
+console.log('myCar = ' + JSON.stringify(myCar))
+console.log('newCar = ' + JSON.stringify(newCar))
+console.log('myCar[0].color = ' + myCar[0].color)
+console.log('newCar[0].color = ' + newCar[0].color)
+
+// Change the color of myHonda.
+myHonda.color = 'purple'
+console.log('The new color of my Honda is ' + myHonda.color)
+
+// Display the color of myHonda referenced from both arrays.
+console.log('myCar[0].color = ' + myCar[0].color)
+console.log('newCar[0].color = ' + newCar[0].color)
+
+ +

This script writes:

+ +
myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
+         'cherry condition', 'purchased 1997']
+newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
+myCar[0].color = red
+newCar[0].color = red
+The new color of my Honda is purple
+myCar[0].color = purple
+newCar[0].color = purple
+
+ +

Array-like objects

+ +

slice method can also be called to convert Array-like objects/collections to a new Array. You just {{jsxref("Function.prototype.bind", "bind")}} the method to the object. The {{jsxref("Functions/arguments", "arguments")}} inside a function is an example of an 'array-like object'.

+ +
function list() {
+  return Array.prototype.slice.call(arguments)
+}
+
+let list1 = list(1, 2, 3) // [1, 2, 3]
+
+ +

Binding can be done with the {{jsxref("Function.prototype.call", "call()")}} method of {{jsxref("Function.prototype")}} and it can also be reduced using [].slice.call(arguments) instead of Array.prototype.slice.call.

+ +

Anyway, it can be simplified using {{jsxref("Function.prototype.bind", "bind")}}.

+ +
let unboundSlice = Array.prototype.slice
+let slice = Function.prototype.call.bind(unboundSlice)
+
+function list() {
+  return slice(arguments)
+}
+
+let list1 = list(1, 2, 3) // [1, 2, 3]
+ +

Spesifikasi

+ + + + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}
+ +

Kompatibilitas Peramban

+ + + +

{{Compat("javascript.builtins.Array.slice")}}

+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/splice/index.html b/files/id/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..a0c7c1cb86 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,146 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Indonesia +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +
{{JSRef}}
+ +

Metode splice() mengubah konten dari array dengan menghapus elemen yang ada dan/atau menambah elemen baru.

+ +
{{EmbedInteractiveExample("pages/js/array-splice.html")}}
+ +

Syntax

+ +
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
+
+ +

Parameters

+ +
+
start
+
Indeks di mana untuk mulai mengubah array (dengan asal 0). Jika lebih besar dari panjang array, indeks awal sebenarnya akan diatur ke panjang array. Jika negatif, akan mulai banyak elemen dari akhir array (dengan asal -1) dan akan diset ke 0 jika nilai absolut lebih besar dari panjang array.
+
deleteCount {{optional_inline}}
+
Sebuah integer yang menunjukkan jumlah elemen array lama yang akan dihapus.
+
Jika deleteCount dihilangkan, atau jika nilainya lebih besar dari array.length - start (yaitu, jika lebih besar dari jumlah elemen yang tersisa dalam array, mulai dari start), maka semua elemen dari start sampai akhir dari array akan dihapus.
+
Jika deleteCount adalah 0 atau negatif, tidak ada elemen yang dihapus. Dalam kasus ini, Anda harus menentukan setidaknya satu elemen baru (lihat di bawah).
+
item1, item2, ... {{optional_inline}}
+
Elemen yang ditambahkan ke array, dimulai pada indeks awal. Jika kamu tidak menentukan elemen apapun, splice() hanya akan menghapus elemen-elemen dari array.
+
+ +

Return value

+ +

Array berisi elemen yang dihapus. Jika hanya satu elemen yang dihapus, array dari satu elemen dikembalikan. Jika tidak ada elemen yang dihapus, sebuah array kosong akan dikembalikan.

+ +

Deskripsi

+ +

Jika anda menentukan elemen yang berbeda untuk disisipkan daripada nomor yang anda hapus, array akan memiliki panjang yang berbeda ketika kamu memanggilnya nanti.

+ +

Contoh

+ +

Remove 0 elements from index 2, and insert "drum"

+ +
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum');
+
+// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
+// removed is [], no elements removed
+
+ +

Remove 1 element from index 3

+ +
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(3, 1);
+
+// removed is ["mandarin"]
+// myFish is ["angel", "clown", "drum", "sturgeon"]
+
+ +

Remove 1 element from index 2, and insert "trumpet"

+ +
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
+var removed = myFish.splice(2, 1, 'trumpet');
+
+// myFish is ["angel", "clown", "trumpet", "sturgeon"]
+// removed is ["drum"]
+ +

Remove 2 elements from index 0, and insert "parrot", "anemone" and "blue"

+ +
var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
+
+// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
+// removed is ["angel", "clown"]
+ +

Remove 2 elements from index 2

+ +
var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(myFish.length - 3, 2);
+
+// myFish is ["parrot", "anemone", "sturgeon"]
+// removed is ["blue", "trumpet"]
+ +

Remove 1 element from index -2

+ +
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(-2, 1);
+
+// myFish is ["angel", "clown", "sturgeon"]
+// removed is ["mandarin"]
+ +

Remove all elements after index 2 (incl.)

+ +
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2);
+
+// myFish is ["angel", "clown"]
+// removed is ["mandarin", "sturgeon"]
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +
+ + +

{{Compat("javascript.builtins.Array.splice")}}

+
+ +

See also

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/unshift/index.html b/files/id/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..4df2069f54 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,135 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +
{{JSRef}}
+ +

Method unshift() menambahkan satu atau lebih elemen ke indek awal array dan mengembalikan jumlah index array yang baru.

+ +

Sintaks

+ +
arr.unshift([element1[, ...[, elementN]]])
+ +

Parameter

+ +
+
elementN
+
Elemen yang akan di tambahkan di awal array.
+
+ +

Returns

+ +

Properti {{jsxref("Array.length", "length")}} baru dari objek teratas dimana method di panggil.

+ +

Deskripsi

+ +

Method unshift menambahkan nilai yang diberikan ke awal objek array.

+ +

unshift biasanya generic; method ini bisa berupa {{jsxref("Function.call", "called", "", 1)}} atau {{jsxref("Function.apply", "applied", "", 1)}} ke objek menyerupai array. Objek yang tidak memiliki properti length mencerminkan dari serangkaian urutan, properti numerik berbasis zero kemungkinan tidak berperilaku dengan cara yang berarti.

+ +

Contoh

+ +
var arr = [1, 2];
+
+arr.unshift(0); // result of call is 3, the new array length
+// arr is [0, 1, 2]
+
+arr.unshift(-2, -1); // = 5
+// arr is [-2, -1, 0, 1, 2]
+
+arr.unshift([-3]);
+// arr is [[-3], -2, -1, 0, 1, 2]
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1.0")}}{{CompatGeckoDesktop("1.7")}}{{CompatIE("5.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/array/values/index.html b/files/id/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..dd77cc65a5 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,120 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +
{{JSRef}}
+ +

Method values() mengembalikan objek Array Iterator baru yang berisi nilai setiap index pada array.

+ +

Sintaks

+ +
arr.values()
+ +

Contoh

+ +

Iterasi menggunakan for...of loop

+ +
var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+// your browser must support for..of loop
+// and let-scoped variables in for loops
+for (let letter of eArr) {
+  console.log(letter);
+}
+
+ +

Iterasi alternatif

+ +
var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-array.prototype.values', 'Array.prototype.values')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("51")}}{{CompatGeckoDesktop(48)}}{{CompatNo}}{{CompatNo}}9
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome("51")}}{{CompatGeckoMobile(48)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/id/web/javascript/reference/global_objects/date/getfullyear/index.html new file mode 100644 index 0000000000..08e657aeec --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -0,0 +1,88 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +tags: + - Date + - JavaScript + - Metode + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +--- +
{{JSRef}}
+ +

Metode getFullYear() mengembanlikan tahun dari tanggal yang dispesifikasi, mengikuti waktu lokal.

+ +

Gunakan metode ini ketimbang metode {{jsxref("Date.prototype.getYear()", "getYear()")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}
+ + + +

Syntax

+ +
dateObj.getFullYear()
+ +

Nilai kembali

+ +

Angka yang berkorespondensi ke tahuny dari tanggal yang diberikan, mengikuti waktu lokal.

+ +

Deskripsi

+ +

Nilai yang dikembalikan oleh getFullYear() is an absolute number. For dates between the years 1000 and 9999, getFullYear() returns a four-digit number, for example, 1995. Use this function to make sure a year is compliant with years after 2000.

+ +

Contoh

+ +

Menggunakan getFullYear()

+ +

Contoh ini menggassign nilai empat-digit dari tahun saat ini ke variabel year.

+ +
var today = new Date();
+var year = today.getFullYear();
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomen
{{SpecName('ES1')}}{{Spec2('ES1')}}Definisi inisial. Diimplementasi di JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}{{Spec2('ESDraft')}} 
+ +

Kompatibilitas peramban

+ + + +

{{Compat("javascript.builtins.Date.getFullYear")}}

+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/date/index.html b/files/id/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..1fc6272dcf --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,261 @@ +--- +title: Date +slug: Web/JavaScript/Reference/Global_Objects/Date +tags: + - Date + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +
{{JSRef}}
+ +

Creates a JavaScript Date instance that represents a single moment in time. Date objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC.

+ +

Syntax

+ +
new Date();
+new Date(value);
+new Date(dateString);
+new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
+
+ +
+

Note: JavaScript Date objects can only be instantiated by calling JavaScript Date as a constructor: calling it as a regular function (i.e. without the {{jsxref("Operators/new", "new")}} operator) will return a string rather than a Date object; unlike other JavaScript object types, JavaScript Date objects have no literal syntax.

+
+ +

Parameters

+ +
+

Note: Where Date is called as a constructor with more than one argument, if values are greater than their logical range (e.g. 13 is provided as the month value or 70 for the minute value), the adjacent value will be adjusted. E.g. new Date(2013, 13, 1) is equivalent to new Date(2014, 1, 1), both create a date for 2014-02-01 (note that the month is 0-based). Similarly for other values: new Date(2013, 2, 1, 0, 70) is equivalent to new Date(2013, 2, 1, 1, 10) which both create a date for 2013-03-01T01:10:00.

+
+ +
+

Note: Where Date is called as a constructor with more than one argument, the specifed arguments represent local time. If UTC is desired, use new Date({{jsxref("Date.UTC()", "Date.UTC(...)")}}) with the same arguments.

+
+ +
+
value
+
Integer value representing the number of milliseconds since 1 January 1970 00:00:00 UTC (Unix Epoch).
+
dateString
+
String value representing a date. The string should be in a format recognized by the {{jsxref("Date.parse()")}} method (IETF-compliant RFC 2822 timestamps and also a version of ISO8601). +
+

Note: parsing of date strings with the Date constructor (and Date.parse, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.

+
+
+
year
+
Integer value representing the year. Values from 0 to 99 map to the years 1900 to 1999. See the {{anch("Example:_Two_digit_years_map_to_1900_-_1999", "example below")}}.
+
month
+
Integer value representing the month, beginning with 0 for January to 11 for December.
+
day
+
Optional. Integer value representing the day of the month.
+
hour
+
Optional. Integer value representing the hour of the day.
+
minute
+
Optional. Integer value representing the minute segment of a time.
+
second
+
Optional. Integer value representing the second segment of a time.
+
millisecond
+
Optional. Integer value representing the millisecond segment of a time.
+
+ +

Description

+ + + +

Properties

+ +
+
{{jsxref("Date.prototype")}}
+
Allows the addition of properties to a JavaScript Date object.
+
Date.length
+
The value of Date.length is 7. This is the number of arguments handled by the constructor.
+
+ +

Methods

+ +
+
{{jsxref("Date.now()")}}
+
Returns the numeric value corresponding to the current time - the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC.
+
{{jsxref("Date.parse()")}}
+
Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC. +
+

Note: Parsing of strings with Date.parse is strongly discouraged due to browser differences and inconsistencies.

+
+
+
{{jsxref("Date.UTC()")}}
+
Accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since 1 January, 1970, 00:00:00 UTC.
+
+ +

JavaScript Date instances

+ +

All Date instances inherit from {{jsxref("Date.prototype")}}. The prototype object of the Date constructor can be modified to affect all Date instances.

+ +

Date.prototype Methods

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}
+ +

Examples

+ +

Several ways to create a Date object

+ +

The following examples show several ways to create JavaScript dates:

+ +
+

Note: parsing of date strings with the Date constructor (and Date.parse, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.

+
+ +
var today = new Date();
+var birthday = new Date('December 17, 1995 03:24:00');
+var birthday = new Date('1995-12-17T03:24:00');
+var birthday = new Date(1995, 11, 17);
+var birthday = new Date(1995, 11, 17, 3, 24, 0);
+
+ +

Two digit years map to 1900 - 1999

+ +

In order to create and get dates between the years 0 and 99 the {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}} methods should be used.

+ +
var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Deprecated method, 98 maps to 1998 here as well
+date.setYear(98);           // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98);       // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
+
+ +

Calculating elapsed time

+ +

The following examples show how to determine the elapsed time between two JavaScript dates in millisconds.

+ +

Due to the differing lengths of days (due to daylight saving changeover), months and years, expressing elapsed time in units greater than hours, minutes and seconds requires addressing a number of issues and should be thoroughly researched before being attempted.

+ +
// using Date objects
+var start = Date.now();
+
+// the event to time goes here:
+doSomethingForALongTime();
+var end = Date.now();
+var elapsed = end - start; // elapsed time in milliseconds
+
+ +
// using built-in methods
+var start = new Date();
+
+// the event to time goes here:
+doSomethingForALongTime();
+var end = new Date();
+var elapsed = end.getTime() - start.getTime(); // elapsed time in milliseconds
+
+ +
// to test a function and get back its return
+function printElapsedTime(fTest) {
+  var nStartTime = Date.now(),
+      vReturn = fTest(),
+      nEndTime = Date.now();
+
+  console.log('Elapsed time: ' + String(nEndTime - nStartTime) + ' milliseconds');
+  return vReturn;
+}
+
+yourFunctionReturn = printElapsedTime(yourFunction);
+
+ +
+

Note: In browsers that support the {{domxref("window.performance", "Web Performance API", "", 1)}}'s high-resolution time feature, {{domxref("Performance.now()")}} can provide more reliable and precise measurements of elapsed time than {{jsxref("Date.now()")}}.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-date-objects', 'Date')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-15.9', 'Date')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}} [2]{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Some browsers can have issues when parsing dates: 3/14/2012 blog from danvk Comparing FF/IE/Chrome on Parsing Date Strings

+ +

[2] ISO8601 Date Format is not supported in Internet Explorer 8, and other version can have issues when parsing dates

diff --git a/files/id/web/javascript/reference/global_objects/date/now/index.html b/files/id/web/javascript/reference/global_objects/date/now/index.html new file mode 100644 index 0000000000..43760a275b --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/now/index.html @@ -0,0 +1,124 @@ +--- +title: Date.now() +slug: Web/JavaScript/Reference/Global_Objects/Date/now +tags: + - Date + - JavaScript + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +
{{JSRef}}
+ +

Method Date.now() mengembalikan jumlah milisekon sejak 1 Januari 1970 00:00:00 UTC.

+ +

Sintaks

+ +
var timeInMs = Date.now();
+ +

Parameter

+ +

None.

+ +

Deskripsi

+ +

Method now() mengembalikan nilaimillisekon sejak 1 January 1970 00:00:00 UTC hingga sekarang sebagai {{jsxref("Number")}}.

+ +

Karena now() adalah method static dari {{jsxref("Date")}}, anda bisa menggunakannya sebagai Date.now().

+ +

Polyfill

+ +

Method ini di bakukan pada ECMA-262 5th edition. Mesin yang belum diupdate untuk mendukung method ini bisa menggunkan shim berikut:

+ +
if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}{{Spec2('ES5.1')}}Initial definition. Implemented in JavaScript 1.5.
{{SpecName('ES6', '#sec-date.now', 'Date.now')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatChrome("5")}}{{CompatGeckoDesktop("1.9")}}{{CompatIE("9")}}{{CompatOpera("10.50")}}{{CompatSafari("4")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/date/tojson/index.html b/files/id/web/javascript/reference/global_objects/date/tojson/index.html new file mode 100644 index 0000000000..cb951d5fa0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/tojson/index.html @@ -0,0 +1,119 @@ +--- +title: Date.prototype.toJSON() +slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON +tags: + - Date + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON +--- +
{{JSRef}}
+ +

Method toJSON() mengembalikan string berdasarkan pada object {{jsxref("Date")}}.

+ +

Syntax

+ +
dateObj.toJSON()
+ +

Deskripsi

+ +

{{jsxref("Date")}} mengacu pada titik waktu tertentu. Memanggil toJSON() mengembalikan nilai ke string (menggunakan {{jsxref("Date.prototype.toISOString()", "toISOString()")}}) berdasarkan nilai pada object {{jsxref("Date")}}. Method ini biasanya ditujukan, secara default, guna menserialisasi object {{jsxref("Date")}} saat serialisasi {{Glossary("JSON")}}.

+ +

Contoh

+ +

Penggunaan toJSON()

+ +
var jsonDate = (new Date()).toJSON();
+var backToDate = new Date(jsonDate);
+
+console.log(jsonDate); //2015-10-26T07:46:36.611Z
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}{{Spec2('ES5.1')}}Definisi Inisial. Diimplementasikan dalam JavaScript 1.8.5.
{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/date/totimestring/index.html b/files/id/web/javascript/reference/global_objects/date/totimestring/index.html new file mode 100644 index 0000000000..90ebd23e68 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/date/totimestring/index.html @@ -0,0 +1,125 @@ +--- +title: Date.prototype.toTimeString() +slug: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +tags: + - Date + - JavaScript + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +--- +
{{JSRef}}
+ +

Method toTimeString() mengembalikan satuan waktu dari objek {{jsxref("Date")}} object dalam format yang dapat dibaca manusia.

+ +

Sintaks

+ +
dateObj.toTimeString()
+ +

Deskripsi

+ +

Instansi {{jsxref("Date")}} menunjuk pada titik waktu spesifik. Dengan memanggil {{jsxref("Date.prototype.toString()", "toString()")}} akan mengembalikan format tanggal dalam bentuk yang mudah dibaca manuasia dengan format tanggal English (Amerika). Di SpiderMonkey, Bagian tanggal terdiri dari (hari, bulan, dan tahun) di ikuti dengan waktu (Jam, menit, detik, dan waktu bagian). Terkadang kita hanya membutuhan bagian waktu dalam bentuk string; hal tersebut bisa di capai dengan menggunakan metod toTimeString().

+ +

Method toTimeString() sangatlah berguna karena berdasarkan engine (compiliant engine) yang di implementasikan ECMA-262 mungkin string yang diperoleh akan berbeda dari {{jsxref("Date.prototype.toString()", "toString()")}} untuk objek {{jsxref("Date")}}, dengan format tergantung dari implementasi; pendekatan bagian string sederhana kemungkinan tidak sama untuk engine yang berbeda.

+ +

Contoh

+ +

Dasar penggunaan of toTimeString()

+ +
var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // logs Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toTimeString()); // logs 14:39:07 GMT-0600 (PDT)
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/error/index.html b/files/id/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..c0fc3cec6f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,231 @@ +--- +title: Error +slug: Web/JavaScript/Reference/Global_Objects/Error +tags: + - Error + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +
{{JSRef}}
+ +

Konstruktor Error membuat sebuah objek error. Misal objek Error di lontarkan ketika terjadi runtime error. Objek Error juga dapat digunakan sebagai objek dasar dengan pengecualian yang ditentukan pengguna. Berikut untuk standard jenis built-in error.

+ +

Sintaks

+ +
new Error([message[, fileName[, lineNumber]]])
+ +

Parameter

+ +
+
message
+
Optional. Human-readable description of the error.
+
fileName {{non-standard_inline}}
+
Optional. The value for the fileName property on the created Error object. Defaults to the name of the file containing the code that called the Error() constructor.
+
lineNumber {{non-standard_inline}}
+
Optional. The value for the lineNumber property on the created Error object. Defaults to the line number containing the Error() constructor invocation.
+
+ +

Description

+ +

Runtime errors result in new Error objects being created and thrown.

+ +

This page documents the use of the Error object itself and its use as a constructor function. For a list of properties and methods inherited by Error instances, see {{jsxref("Error.prototype")}}.

+ +

Error types

+ +

Besides the generic Error constructor, there are six other core error constructors in JavaScript. For client-side exceptions, see Exception Handling Statements.

+ +
+
{{jsxref("EvalError")}}
+
Creates an instance representing an error that occurs regarding the global function {{jsxref("Global_Objects/eval", "eval()")}}.
+
{{jsxref("InternalError")}} {{non-standard_inline}}
+
Creates an instance representing an error that occurs when an internal error in the JavaScript engine is thrown. E.g. "too much recursion".
+
{{jsxref("RangeError")}}
+
Creates an instance representing an error that occurs when a numeric variable or parameter is outside of its valid range.
+
{{jsxref("ReferenceError")}}
+
Creates an instance representing an error that occurs when de-referencing an invalid reference.
+
{{jsxref("SyntaxError")}}
+
Creates an instance representing a syntax error that occurs while parsing code in {{jsxref("Global_Objects/eval", "eval()")}}.
+
{{jsxref("TypeError")}}
+
Creates an instance representing an error that occurs when a variable or parameter is not of a valid type.
+
{{jsxref("URIError")}}
+
Creates an instance representing an error that occurs when {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} or {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} are passed invalid parameters.
+
+ +

Properties

+ +
+
{{jsxref("Error.prototype")}}
+
Allows the addition of properties to Error instances.
+
+ +

Methods

+ +

The global Error object contains no methods of its own, however, it does inherit some methods through the prototype chain.

+ +

Error instances

+ +
{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Description')}}
+ +

Properties

+ +
{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Properties')}}
+ +

Methods

+ +
{{page('en-US/docs/JavaScript/Reference/Global_Objects/Error/prototype', 'Methods')}}
+ +

Examples

+ +

Throwing a generic error

+ +

Usually you create an Error object with the intention of raising it using the {{jsxref("Statements/throw", "throw")}} keyword. You can handle the error using the {{jsxref("Statements/try...catch", "try...catch")}} construct:

+ +
try {
+  throw new Error('Whoops!');
+} catch (e) {
+  console.log(e.name + ': ' + e.message);
+}
+
+ +

Handling a specific error

+ +

You can choose to handle only specific error types by testing the error type with the error's {{jsxref("Object.prototype.constructor", "constructor")}} property or, if you're writing for modern JavaScript engines, {{jsxref("Operators/instanceof", "instanceof")}} keyword:

+ +
try {
+  foo.bar();
+} catch (e) {
+  if (e instanceof EvalError) {
+    console.log(e.name + ': ' + e.message);
+  } else if (e instanceof RangeError) {
+    console.log(e.name + ': ' + e.message);
+  }
+  // ... etc
+}
+
+ +

Custom Error Types

+ +

You might want to define your own error types deriving from Error to be able to throw new MyError() and use instanceof MyError to check the kind of error in the exception handler. The common way to do this is demonstrated below.

+ +
+

Note that the thrown MyError will report incorrect lineNumber and fileName at least in Firefox.

+
+ +

See also the "What's a good way to extend Error in JavaScript?" discussion on Stackoverflow.

+ +
// Create a new object, that prototypically inherits from the Error constructor
+function MyError(message) {
+  this.name = 'MyError';
+  this.message = message || 'Default Message';
+  this.stack = (new Error()).stack;
+}
+MyError.prototype = Object.create(Error.prototype);
+MyError.prototype.constructor = MyError;
+
+try {
+  throw new MyError();
+} catch (e) {
+  console.log(e.name);     // 'MyError'
+  console.log(e.message);  // 'Default Message'
+}
+
+try {
+  throw new MyError('custom message');
+} catch (e) {
+  console.log(e.name);     // 'MyError'
+  console.log(e.message);  // 'custom message'
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error-objects', 'Error')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}{{Spec2('ESDraft')}} 
+ +

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/id/web/javascript/reference/global_objects/error/name/index.html b/files/id/web/javascript/reference/global_objects/error/name/index.html new file mode 100644 index 0000000000..6644fff80a --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/error/name/index.html @@ -0,0 +1,119 @@ +--- +title: Error.prototype.name +slug: Web/JavaScript/Reference/Global_Objects/Error/name +tags: + - Error + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Error/name +--- +
{{JSRef}}
+ +

Properti name menyatakan nama dari jenis error. Nilai awalnya adalah "Error".

+ +

Deskripsi

+ +

Secara default, misalnya {{jsxref("Error")}} diberi nama "Error". Properti name, sebagai tambahan utuk properti {{jsxref("Error.prototype.message", "message")}}, digunakan oleh method {{jsxref("Error.prototype.toString()")}} untuk membuat sebuah pernyataan dalam bentuk string yang menyatakan error.

+ +

Contoh

+ +

Menggunakan custom error

+ +
var e = new Error('Inputan tidak lengkap'); // e.name nilainya 'Error'
+
+e.name = 'ParseError';
+throw e;
+// e.toString() akan mengembalikan 'ParseError: Inputan tidak lengkap'
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}{{Spec2('ESDraft')}} 
+ +

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

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/function/displayname/index.html b/files/id/web/javascript/reference/global_objects/function/displayname/index.html new file mode 100644 index 0000000000..952014983b --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/displayname/index.html @@ -0,0 +1,123 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Reference/Global_Objects/Function/displayName +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +
{{JSRef}} {{non-standard_header}}
+ +

Properti function.displayName mengembalikan nama fungsi.

+ +

Deskripsi

+ +

Ketika didefinisikan, properti displayName mengembalikan nama dari sebuah fungsi:

+ +
function doSomething() {}
+
+console.log(doSomething.displayName); // "undefined"
+
+var popup = function(content) { console.log(content); };
+
+popup.displayName = 'Show Popup';
+
+console.log(popup.displayName); // "Show Popup"
+
+ +

Anda bisa mendefinisikan sebuah fungsi dengan sebuah display nama di {{jsxref("Functions", "function expression", "", 1)}}:

+ +
var object = {
+  someMethod: function() {}
+};
+
+object.someMethod.displayName = 'someMethod';
+
+console.log(object.someMethod.displayName); // logs "someMethod"
+
+try { someMethod } catch(e) { console.log(e); }
+// ReferenceError: someMethod is not defined
+
+ +

Anda bisa merubah  displayName dari sebuah fungsi secara dinamis:

+ +
var object = {
+  // anonymous
+  someMethod: function(value) {
+    this.displayName = 'someMethod (' + value + ')';
+  }
+};
+
+console.log(object.someMethod.displayName); // "undefined"
+
+object.someMethod('123')
+console.log(object.someMethod.displayName); // "someMethod (123)"
+
+ +

Contoh

+ +

Biasanya lebih banyak digunakan dengan console dan profiler melalui {{jsxref("Function.name", "func.name")}} untuk menampilkan nama function.

+ +

Dengan menuliskan kode berikut, maka seharusnya akan menampilkan "function My Function()":

+ +
var a = function() {};
+a.displayName = 'My Function';
+
+a; // "function My Function()"
+ +

Spesifikasi

+ +

Bukan bagian dari spesifikasi.

+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop(13)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/id/web/javascript/reference/global_objects/function/index.html b/files/id/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..49d1c1a114 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,241 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Constructor + - Function + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +
{{JSRef}}
+ +

Konstruktor Function membuat sebuah objek Function baru. Di Javascript setiap fungsi adalah sebuah objek Function.

+ +

Sintaks

+ +
new Function ([arg1[, arg2[, ...argN]],] functionBody)
+ +

Parameter

+ +
+
arg1, arg2, ... argN
+
Nama yang akan digunakan oleh fungsi sebagai nama formal argumen. Masing-masing harus berupa string yang sesuai dengan identifier JavaScript yang valid atau daftar string dipisahkan dengan koma; contohnya "x", "theValue", atau "a,b".
+
functionBody
+
String berisi sintaks JavaScript yang terdiri dari definisi fungsi.
+
+ +

Deskripsi

+ +

Objek  Function yang dibuat dengan konstruktor Function diuraikan ketika fungsi dibuat. Hal tersebut kurang efisien dibandingkan dengan mendeklarasikan fungsi dengan function expression atau function statement dan memanggilnya dengan kode Anda, karena fungsi-fungsi tersebut diuraikan dengan sisa kode.

+ +

Semua argumen yang diteruskan ke fungsi diperlakukan sebagai nama identifier parameter dalam fungsi yang akan dibuat, dalam urutan yang dilewatkan.

+ +
+

Catatan: Fungsi dibuat dengan konstruktor Function  jangan membuat penutup pada konteks kreasi mereka; Mereka selalu dibuat dalam ruang lingkup global. Saat menjalankannya, mereka hanya bisa mengakses variabel lokal mereka sendiri dan variabel global, bukan variabel dari ruang lingkup dimana konstruktor Function dipanggil. Berbeda dari menggunakan {{jsxref("eval")}} dengan kode untuk fungsi ekspresi.

+
+ +

memanggil konstruktor Function sebagai sebuah fungsi (tanpa menggunakan operatur baru) mempunyai efek yang sama seperti memanggilnya sebagai konstruktor

+ +

Properti dan Method Function

+ +

Objek Function global tidak memiliki method atau properti sendiri. Namun, fungsi itu sendiri mewarisi beberapa method dan properti melalui prototipe dari {{jsxref("Function.prototype")}}.

+ +

Objek prototipe Function

+ +

Properti

+ +
{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}
+ +

Method

+ +
{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}
+ +

Function instances

+ +

Function instances mewarisi method dan properti dari {{jsxref("Function.prototype")}}. Seperti halnya semua konstruktor, Anda dapat mengubah objek prototipe konstruktor untuk membuat perubahan pada semua Function instances.

+ +

Contoh

+ +

Menentukan arguman dengan konstruktor Function

+ +

Dibawah ini kode untuk membuat sebuah objek Function yang menggunakan dua argumen.

+ +
// Contoh dapat dijalankan langsung di konsol JavaScript Anda
+
+// Buat fungsi yang mengambil dua argumen dan mengembalikan jumlah argumen tersebut
+var adder = new Function('a', 'b', 'return a + b');
+
+// Memanggil fungsi
+adder(2, 6);
+// > 8
+
+ +

Argumen "a" dan "b" adalah nama argumen formal yang digunakan pada function body "return a + b".

+ +

Pintasan rekursif untuk memofikasi DOM secara masif

+ +

Membuat fungsi dengan konstruktor Function adalah salah satu cara dinamis untuk membuat objek baru dengan beberapa kode yang dapat dieksekusi ke dalam lingkup global dari suatu fungsi. Contoh berikut (pintasan rekursif untuk memodifikasi DOM secara masif) tidak dimungkinkan tanpa permintaan konstruktor Function untuk setiap kueri baru jika Anda ingin menghindari penutup tiap fungsi.

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example - a recursive shortcut to massively modify the DOM</title>
+<script type="text/javascript">
+var domQuery = (function() {
+  var aDOMFunc = [
+    Element.prototype.removeAttribute,
+    Element.prototype.setAttribute,
+    CSSStyleDeclaration.prototype.removeProperty,
+    CSSStyleDeclaration.prototype.setProperty
+  ];
+
+  function setSomething(bStyle, sProp, sVal) {
+    var bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle << 1],
+        aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2),
+        aNodeList = bStyle ? this.cssNodes : this.nodes;
+
+    if (bSet && bStyle) { aArgs.push(''); }
+    for (
+      var nItem = 0, nLen = this.nodes.length;
+      nItem < nLen;
+      fAction.apply(aNodeList[nItem++], aArgs)
+    );
+    this.follow = setSomething.caller;
+    return this;
+  }
+
+  function setStyles(sProp, sVal) { return setSomething.call(this, true, sProp, sVal); }
+  function setAttribs(sProp, sVal) { return setSomething.call(this, false, sProp, sVal); }
+  function getSelectors() { return this.selectors; };
+  function getNodes() { return this.nodes; };
+
+  return (function(sSelectors) {
+    var oQuery = new Function('return arguments.callee.follow.apply(arguments.callee, arguments);');
+    oQuery.selectors = sSelectors;
+    oQuery.nodes = document.querySelectorAll(sSelectors);
+    oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function(oInlineCSS) { return oInlineCSS.style; });
+    oQuery.attributes = setAttribs;
+    oQuery.inlineStyle = setStyles;
+    oQuery.follow = getNodes;
+    oQuery.toString = getSelectors;
+    oQuery.valueOf = getNodes;
+    return oQuery;
+  });
+})();
+</script>
+</head>
+
+<body>
+
+<div class="testClass">Lorem ipsum</div>
+<p>Some text</p>
+<div class="testClass">dolor sit amet</div>
+
+<script type="text/javascript">
+domQuery('.testClass')
+  .attributes('lang', 'en')('title', 'Risus abundat in ore stultorum')
+  .inlineStyle('background-color', 'black')('color', 'white')('width', '100px')('height', '50px');
+</script>
+</body>
+
+</html>
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.3', 'Function')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-objects', 'Function')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}{{Spec2('ESDraft')}} 
+ +

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

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/function/length/index.html b/files/id/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..901c11b336 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,148 @@ +--- +title: Function.length +slug: Web/JavaScript/Reference/Global_Objects/Function/length +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +
{{JSRef}}
+ +

Properti length menentukan jumlah argumen yang diharapkan oleh fungsi.

+ +
{{js_property_attributes(0,0,1)}}
+ +

Deskripsi

+ +

length merupakan properti dari objek fungsi, dan mengindikasikan berapa banyak argumen yang diharapkan fungsi, mis. jumlah parameter formal. Jumlah ini mengesampingkan {{jsxref("rest_parameters", "rest parameter", "", 1)}}. Sebaliknya, {{jsxref("Functions_and_function_scope/arguments/length", "arguments.length")}} adalah lokal untuk fungsi dan memberikan jumlah argumen sebenarnya ke fungsi.

+ +

Properti data dari constructor Function

+ +

Construktor {{jsxref("Function")}} sendiri adalah objek {{jsxref("Function")}}. data properti length bernilai 1. Properti atribut: Writable: false, Enumerable: false, Configurable: true.

+ +

Properti dari Function prototype object

+ +

Panjang properti dari prototype objek {{jsxref("Function")}} bernilai 0.

+ +

Contoh

+ +
console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 etc. */
+
+console.log((function(...args) {}).length);
+// 0, rest parameter is not counted
+
+console.log((function(a, b = 1, c) {}).length);
+// 1, only parameters before the first one with
+// a default value is counted
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}{{Spec2('ES6')}}The configurable attribute of this property is now true.
{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Configurable: true{{CompatUnknown}}{{CompatGeckoDesktop(37)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Configurable: true{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(37)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/function/name/index.html b/files/id/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..1a35d62020 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,191 @@ +--- +title: Function.name +slug: Web/JavaScript/Reference/Global_Objects/Function/name +tags: + - ECMAScript6 + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +
{{JSRef}}
+ +

Properti function.name mengembalikan nama fungsi.

+ +
{{js_property_attributes(0,0,1)}}
+ +
Perlu di ingat bahwa ini di dalam non-standard, implementasi pre-ES6 atribut configurable juga false.
+ +

Deskripsi

+ +

Properti name property mengembalikan nama sebuah fungsi , atau (sebelum implementasi ES6) string kosong untuk anonymous functions:

+ +
function doSomething() {}
+
+console.log(doSomething.name); // logs "doSomething"
+
+ +

Fungsi di buat menggunakan sintaks new Function(...) atau hanya Function(...) memiliki properti name di set empty string. Pada contoh anonymous functions dibuat, sehingga name mengembalikan empty string:

+ +
var f = function() {};
+var object = {
+  someMethod: function() {}
+};
+
+console.log(f.name == ''); // true
+console.log(object.someMethod.name == ''); // also true
+
+ +

Browser yang mengimplementasikan fungsi ES6 mengambil nama dari anonymous function dari posisi syntactic-nya. Contoh:

+ +
var f = function() {};
+console.log(f.name); // "f"
+ +

Anda bisa mendefinisikan sebuah fungsi dengan nama di {{jsxref("Operators/Function", "function expression", "", 1)}}:

+ +
var object = {
+  someMethod: function object_someMethod() {}
+};
+console.log(object.someMethod.name); // logs "object_someMethod"
+
+try { object_someMethod } catch(e) { console.log(e); }
+// ReferenceError: object_someMethod is not defined
+
+ +

Anda tidak bisa mengubah nama fungsi, Properti ini hanya bisa dibaca:

+ +
var object = {
+  // anonymous
+  someMethod: function() {}
+};
+
+object.someMethod.name = 'someMethod';
+console.log(object.someMethod.name); // empty string, someMethod is anonymous
+
+ +

Untuk mengubah, anda perlu menggunakan {{jsxref("Object.defineProperty()")}}.

+ +

Contoh

+ +

Anda bisa menggunakan obj.constructor.name untuk memeriksa "class" dari sebuah objek:

+ +
function a() {}
+
+var b = new a();
+
+console.log(b.constructor.name); // logs "a"
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-name', 'name')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-name', 'name')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(33.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Configurable: true{{CompatChrome(43.0)}}{{CompatGeckoDesktop(38)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Inferred names on anonymous functions{{CompatChrome(51.0)}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Configurable: true{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(38)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Inferred names on anonymous functions{{CompatNo}}{{CompatChrome(51.0)}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(51.0)}}
+
+ +

[1] See {{bug(883377)}}.

diff --git a/files/id/web/javascript/reference/global_objects/function/prototype/index.html b/files/id/web/javascript/reference/global_objects/function/prototype/index.html new file mode 100644 index 0000000000..d522a363e0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/function/prototype/index.html @@ -0,0 +1,143 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +tags: + - Function + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +
{{JSRef}}
+ +

Properti Function.prototype mewakili objek properti {{jsxref("Function")}} .

+ +

Deskripsi

+ +

Objek {{jsxref("Function")}} turunan dari Function.prototype.  Function.prototype tidak dapat di ubah.

+ +

Properti

+ +
+
{{jsxref("Function.arguments")}} {{deprecated_inline}}
+
Sebuah array berdasakan argumen yang diberikan ke sebuah fungsi. Ini telah diabaikan sebagai properti dari {{jsxref("Function")}}, gunakan objek {{jsxref("Functions/arguments", "arguments")}} yang tersedia di dalam fungsi saja.
+
{{jsxref("Function.arity")}} {{obsolete_inline}}
+
Digunakan untuk menentukan jumlah argumen yang diperlukan fungsi, tapi telah dihapus. Gunakan properti {{jsxref("Function.length", "length")}}.
+
{{jsxref("Function.caller")}} {{non-standard_inline}}
+
Menentukan fungsi yang dipanggil oleh fungsi yang sedang dijalankan saat ini.
+
{{jsxref("Function.length")}}
+
Menentukan jumlah argumen yang diperlukan oleh fungsi.
+
{{jsxref("Function.name")}}
+
Nama dari fungsi.
+
{{jsxref("Function.displayName")}} {{non-standard_inline}}
+
Tampilan nama fungsi.
+
Function.prototype.constructor
+
Menentukan fungsi yang membuat objek prototype. Lihat {{jsxref("Object.prototype.constructor")}} untuk lebih detailnya.
+
+ +

Method

+ +
+
{{jsxref("Function.prototype.apply()")}}
+
Memanggil fungsi dan menentukan nilai this berdasar nilai yang diberikan, argument bisa ditambahkan sebagai objek {{jsxref("Array")}}.
+
{{jsxref("Function.prototype.bind()")}}
+
Membuat fungsi baru dimana, ketika dipanggil, memiliki this yang diberi nilai yang tersedia, dengan urutan tertentu sesudah nilai yang tersedia ketika fungsi di jalankan.
+
{{jsxref("Function.prototype.call()")}}
+
Memanggil (menjalankan) sebuah fungsi dan memberi nilai this dari nilai yang tersedia, argumen bisa ditambahkan sebagaimana mestinya.
+
{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}
+
Mengembalikan true jika fungsi adalah sebuah generator; selain itu akan mengembalikan  nilai false.
+
{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}
+
Mengembalikan string berdasarkan kode sumber dari fungsi. Mengesampingkan method {{jsxref("Object.prototype.toSource")}}.
+
{{jsxref("Function.prototype.toString()")}}
+
Mengembalikan string berdasarkan kode sumber dari fungsi, mengesampingkan method {{jsxref("Object.prototype.toString")}}.
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1
{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ESDraft')}} 
+ +

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

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/index.html b/files/id/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..5259bde5b8 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/index.html @@ -0,0 +1,189 @@ +--- +title: Global Objek +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects +--- +
{{jsSidebar("Objects")}}
+ +

Pada bagian ini membahas standar javascript, objek built-in, Termasuk didalamnya method dan properti.

+ +
+

Istilah "Global Objek" (atau standar objek built-in)disini bukan berarti Global Objek. Disini global objek di artikan sebagai objek pada scope global (tapi hanya jika ECMAScript 5 mode strict tidak digunakan; pada kasus ini mengembalikan {{jsxref("undefined")}}).  Global objek sendiri bisa di akses menggunakan operator {{jsxref("Operators/this", "this")}} pada lingkup global. Bahkan, lingkup global terdiri dari properti pada global objek, termasuk peoperti yang diwariskan, jika ada.

+ +

Objek lain di lingkup global salah satunya dibuat oleh user script atau disediakan oleh aplikasi host. Objek host tersedia di konteks browser, didokumentasi di Referensi API. Untuk informasi lengkap tentang perbedaan antara DOM dan inti JavaScript, lihat Gambaran teknologi javaScript.

+ +

Objek standar berdasarkan kategori

+ +

Properti nilai

+ +

Properti global ini mengembalikan nilai simple; tidak memiliki properti ataupun method.

+ +
    +
  • {{jsxref("Global_Objects/Infinity", "Infinity")}}
    • +
  • {{jsxref("Global_Objects/NaN", "NaN")}}
    • +
  • {{jsxref("Global_Objects/undefined", "undefined")}}
    • +
  • {{jsxref("Global_Objects/null", "null")}} literal
    • +
+ +

Properti fungsi

+ +

Fungsi global—fungsi yang di panggil secara global bukan pada objek — langsung mengembalikan nilai ke pemenggil.

+ +
    +
  • {{jsxref("Global_Objects/eval", "eval()")}}
    • +
  • {{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
    • +
  • {{jsxref("Global_Objects/isFinite", "isFinite()")}}
    • +
  • {{jsxref("Global_Objects/isNaN", "isNaN()")}}
    • +
  • {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
    • +
  • {{jsxref("Global_Objects/parseInt", "parseInt()")}}
    • +
  • {{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
    • +
  • {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
    • +
  • {{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
    • +
  • {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
    • +
  • {{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
    • +
  • {{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
    • +
+ +

Fundamental objek

+ +

Ini merupakan fundamental, objek dasar berdasarkan pada semua objek lain yang didasarkan. Ini termasuk objek yang mewakili objek umum, fungsi dan error.

+ +
    +
  • {{jsxref("Global_Objects/Object", "Object")}}
    • +
  • {{jsxref("Global_Objects/Function", "Function")}}
    • +
  • {{jsxref("Global_Objects/Boolean", "Boolean")}}
    • +
  • {{jsxref("Global_Objects/Symbol", "Symbol")}}
    • +
  • {{jsxref("Global_Objects/Error", "Error")}}
    • +
  • {{jsxref("Global_Objects/EvalError", "EvalError")}}
    • +
  • {{jsxref("Global_Objects/InternalError", "InternalError")}}
    • +
  • {{jsxref("Global_Objects/RangeError", "RangeError")}}
    • +
  • {{jsxref("Global_Objects/ReferenceError", "ReferenceError")}}
    • +
  • {{jsxref("Global_Objects/SyntaxError", "SyntaxError")}}
    • +
  • {{jsxref("Global_Objects/TypeError", "TypeError")}}
    • +
  • {{jsxref("Global_Objects/URIError", "URIError")}}
    • +
+ +

Nomor dan tanggal

+ +

Objek dasar yang mewakili angka, tanggal dan kalkulasi matematik.

+ +
    +
  • {{jsxref("Global_Objects/Number", "Number")}}
    • +
  • {{jsxref("Global_Objects/Math", "Math")}}
    • +
  • {{jsxref("Global_Objects/Date", "Date")}}
    • +
+ +

Pengolah teks

+ +

Objek yang mewakili string dan dukungan untuk memanipulasinya.

+ +
    +
  • {{jsxref("Global_Objects/String", "String")}}
    • +
  • {{jsxref("Global_Objects/RegExp", "RegExp")}}
    • +
+ +

Koleksi Index

+ +

Objek ini mewakili koleksi data berdasarkan nilai index. Ini termasuk (jenis) array dan konstruksi mirip array (array-like).

+ +
    +
  • {{jsxref("Global_Objects/Array", "Array")}}
    • +
  • {{jsxref("Global_Objects/Int8Array", "Int8Array")}}
    • +
  • {{jsxref("Global_Objects/Uint8Array", "Uint8Array")}}
    • +
  • {{jsxref("Global_Objects/Uint8ClampedArray", "Uint8ClampedArray")}}
    • +
  • {{jsxref("Global_Objects/Int16Array", "Int16Array")}}
    • +
  • {{jsxref("Global_Objects/Uint16Array", "Uint16Array")}}
    • +
  • {{jsxref("Global_Objects/Int32Array", "Int32Array")}}
    • +
  • {{jsxref("Global_Objects/Uint32Array", "Uint32Array")}}
    • +
  • {{jsxref("Global_Objects/Float32Array", "Float32Array")}}
    • +
  • {{jsxref("Global_Objects/Float64Array", "Float64Array")}}
    • +
+ +

Koleksi keyed

+ +

Objek ini merupakan koleksi yang menggunakan key; mengandung unsur yang iterable di urutan penyisipan.

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("WeakMap")}}
    • +
  • {{jsxref("WeakSet")}}
    • +
+ +

Koleksi vektor

+ +

{{Glossary("SIMD")}} tipe data vector adalah objek dimana data diatur arahnya.

+ +
    +
  • {{jsxref("SIMD")}} {{experimental_inline}}
    • +
  • {{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}
    • +
  • {{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}
    • +
  • {{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}
    • +
  • {{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}
    • +
  • {{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}
    • +
  • {{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}
    • +
  • {{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}
    • +
  • {{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}
    • +
  • {{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}
    • +
  • {{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}
    • +
  • {{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}
    • +
  • {{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}
    • +
+ +

Data terstruktur

+ +

Objek ini mewakili dan berinteraksi dengan buffer data terstruktur dan data yang dikodekan menggunakan JavaScript Object Notation (JSON).

+ +
    +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("SharedArrayBuffer")}} {{experimental_inline}}
    • +
  • {{jsxref("Atomics")}} {{experimental_inline}}
    • +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("JSON")}}
    • +
+ +

Kontrol objek abstraksi 

+ +
    +
  • {{jsxref("Promise")}}
    • +
  • {{jsxref("Generator")}}
    • +
  • {{jsxref("GeneratorFunction")}}
    • +
+ +

Refleksi (Pantulan)

+ +
    +
  • {{jsxref("Reflect")}}
    • +
  • {{jsxref("Proxy")}}
    • +
+ +

Internasionalisasi

+ +

Penambahan inti ECMAScript untuk fungsi bahasa-sensitif.

+ +
    +
  • {{jsxref("Intl")}}
    • +
  • {{jsxref("Global_Objects/Collator", "Intl.Collator")}}
    • +
  • {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
  • {{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}
    • +
+ +

Objek Non-standar

+ +
    +
  • {{jsxref("Iterator")}} {{non-standard_inline}}
    • +
  • {{jsxref("ParallelArray")}} {{non-standard_inline}}
    • +
  • {{jsxref("StopIteration")}} {{non-standard_inline}}
    • +
+ +

Lainnya

+ + +
+ +

 

diff --git a/files/id/web/javascript/reference/global_objects/isnan/index.html b/files/id/web/javascript/reference/global_objects/isnan/index.html new file mode 100644 index 0000000000..b7a6774528 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/isnan/index.html @@ -0,0 +1,186 @@ +--- +title: isNaN() +slug: Web/JavaScript/Reference/Global_Objects/isNaN +translation_of: Web/JavaScript/Reference/Global_Objects/isNaN +--- +
{{jsSidebar("Objects")}}
+ +

Fungsi isNaN() menentukan apakah nilai adalah sebuah {{jsxref("NaN")}} atau bukan. Catatan: pemaksaan pada fungsi isNaN memiliki aturan yang menarik. Anda mungkin ingin menggunakan {{jsxref("Number.isNaN()")}}, seperti yang didefinisikan dalam ECMAScript 2015.

+ +

Syntax

+ +
isNaN(value)
+ +

Parameters

+ +
+
value
+
Nilai yang akan di uji.
+
+ +

Return value

+ +

true Jika nilai yang di uji adalah {{jsxref("NaN")}}; jika tidak, false.

+ +

Deskripsi

+ +

Kebutuhan akan fungsi isNaN

+ +

Mungkin tidak seperti nilai lainnya dalam javascript, Ini tidak memungkinkan untuk mengandalkan operator persamaan (== dan ===) untuk menentukan bahwa nilai adalah {{jsxref("NaN")}} atau bukan, karena NaN == NaN dan NaN === NaN mengevaluasi ke false. Oleh karena itu, diperlukan adanya fungsi isNaN.

+ +

Asal Mula Nilai NaN

+ +

NilaiNaN dihasilkan saat operasi aritmatika menghasilkan nilai undefined atau unrepresentable. Nilai tersebut tidak harus mewakili kondisi overflow.  NaN juga dihasilkan dari percobaan pemaksaan ke nilai numerik dari nilai non-numerik yang tidak memiliki nilai numerik primitif yang tersedia.

+ +

Misalnya, membagi nol dengan nol menghasilkan sebuah NaN — namun membagi angka lain dengan nol tidak menghasilkan sebuah NaN.

+ +

Perilaku Khusus yang membingungkan

+ +

Karena versi paling awal dari spesifikasi fungsi isNaN , perilaku untuk argumen non-numerik menjadi membingungkan. Ketika argumen ke fungsi isNaN bukan bertipe Number, Nilainya akan dipaksakan terlebih dahulu ke tipe Number. Nilai yang dihasilkan kemudian diuji untuk menentukan apakah itu {{jsxref("NaN")}}. Jadi untuk non-angka yang jika dipaksakan pada hasil numerik menghasilkan nilai numerik non-NaN (terutama string kosong dan primitif boolean, yang jika dipaksakan memberi nilai numerik nol atau satu), nilai pengembalian "false" mungkin tidak terduga; String kosong, misalnya, pastinya "not a number". Kebingungan itu berawal dari kenyataan bahwa istilah "not a number", memiliki arti khusus untuk angka yang diwakili sebagai nilai floating-point IEEE-754. Fungsi harus diinterpretasikan sebagai penjawab pertanyaan, "apakah nilai ini, jika dipaksakan pada nilai numerik, nilai IEEE-754 'Not A Number'?"

+ +

Versi terbaru dari ECMAScript (ES2015) berisi fungsi {{jsxref("Number.isNaN()")}}. Number.isNaN(x) akan menjadi cara yang andal untuk menguji apakah x adalah NaN atau bukan. Bahkan dengan Number.isNaN, namun arti NaN tetap merupakan makna numerik yang tepat, dan bukan sekadar, "not a number". Sebagai alternatif, untuk ketidakhadiran Number.isNaN, ekspresi (x != x) adalah cara yang lebih dapat diandalkan untuk menguji apakah variabel x adalah NaN atau bukan, karena hasilnya tidak sesuai dengan false positive yang membuat isNaN tidak dapat diandalkan.

+ +

Anda bisa memikirkan isNaN sebagai:

+ +
var isNaN = function(value) {
+    return Number.isNaN(Number(value));
+}
+ +

Contoh

+ +
isNaN(NaN);       // true
+isNaN(undefined); // true
+isNaN({});        // true
+
+isNaN(true);      // false
+isNaN(null);      // false
+isNaN(37);        // false
+
+// strings
+isNaN('37');      // false: "37" dikonversi ke nomor 37 yang mana bukan NaN
+isNaN('37.37');   // false: "37.37" dikonversi ke nomor 37.37 yang mana bukan NaN
+isNaN('123ABC');  // true:  parseInt("123ABC") adalah 123 namun Number("123ABC") adalah NaN
+isNaN('');        // false: string kosing dikonversi ke 0 yang mana bukan NaN
+isNaN(' ');       // false: string dengan spasi dikonversi ke 0 yang mana bukan NaN
+
+// dates
+isNaN(new Date());                // false
+isNaN(new Date().toString());     // true
+
+// Ini adalah false positif dan alasan mengapa NaN tidak sepenuhnya dapat diandalkan
+isNaN('blabla');   // true: "blabla" dikonversi ke nomor.
+                   // Parsing ini sebagai nomor gagal dan mengembalikan NaN
+
+ +

Berguna dalam perilaku khusus

+ +

Ada cara penggunaan yang lebih berorientasi untuk memikirkan isNaN isNaN(): Jika isNaN(x) mengembalikan false, anda bisa menggunakan x dalam ekspresi aritmatika tidak membuat ekspresi mengembalikan NaN. Jika itu mengembalikantrue, x akan membuat setiap ekspresi aritmatika mengembalikan NaN. Ini berarti bahwa dalam JavaScript, isNaN(x) == true setara dengan x - 0 mengembalikan NaN (meskipun di JavaScript x - 0 == NaN selalu mengembalikan false, jadi anda tidak bisa mengujinya). Sebenarnya, isNaN(x), isNaN(x - 0), isNaN(Number(x)), Number.isNaN(x - 0), dan Number.isNaN(Number(x)) selalu kembali sama dan di JavaScriptisNaN(x) hanya bentuk sesingkat mungkin untuk mengungkapkan masing-masing istilah ini.

+ +

Anda dapat menggunakan ini, misalnya, untuk menguji apakah sebuah argumen terhadap suatu fungsi secara aritmatika dapat diolah (dapat digunakan "seperti" angka), atau jika tidak dan Anda harus memberikan nilai default atau yang lainnya. Dengan cara ini Anda dapat memiliki fungsi yang memanfaatkan fleksibilitas penuh JavaScript yang disediakan oleh nilai konversi secara implisit bergantung pada konteks.

+ +

Contoh

+ +
function increment(x) {
+  if (isNaN(x)) x = 0;
+  return x + 1;
+}
+
+// Efek yang sama dengan Number.isNaN():
+function increment(x) {
+  if (Number.isNaN(Number(x))) x = 0;
+  return x + 1;
+}
+
+// Dalam kasus berikut untuk argumen fungsi x,
+// isNaN(x)selalu salah, meski x memang bukan sebuah
+// nomor, namun bisa digunakan seperti itu dalam ekspresi
+// aritmatika
+increment('');            // 1: "" dikonversi ke 0
+increment(new String());  // 1: Objek String yang mewakili string kosong dikonversi menjadi 0
+increment([]);            // 1: [] dikonversi ke 0
+increment(new Array());   // 1: Objek array yang mewakili sebuah array kosong dikonversi menjadi 0
+increment('0');           // 1: "0" dikonversi ke 0
+increment('1');           // 2: "1" dikonversi ke 1
+increment('0.1');         // 1.1: "0.1" dikonversi ke 0.1
+increment('Infinity');    // Infinity: "Infinity" dikonversi ke Infinity
+increment(null);          // 1: null dikonversi ke 0
+increment(false);         // 1: false dikonversi ke 0
+increment(true);          // 2: true dikonversi ke 1
+increment(new Date());    // mengembalikan tanggal/waktu sekarang dalam milidetik ditambah 1
+
+// Dalam kasus berikut untuk argumen fungsi x,
+// isNaN(x) selalu false dan x memang angka
+increment(-1);            // 0
+increment(-0.1);          // 0.9
+increment(0);             // 1
+increment(1);             // 2
+increment(2);             // 3
+// ... dan seterusnya ...
+increment(Infinity);      // Infinity
+
+// Dalam kasus berikut untuk argumen fungsi x,
+// isNaN(x) selalu true dan x benar-benar bukan angka,
+// sehingga fungsi tersebut menggantikannya dengan 0 dan mengembalikan 1
+increment(String);            // 1
+increment(Array);             // 1
+increment('blabla');          // 1
+increment('-blabla');         // 1
+increment(0 / 0);               // 1
+increment('0 / 0');             // 1
+increment(Infinity / Infinity); // 1
+increment(NaN);               // 1
+increment(undefined);         // 1
+increment();                  // 1
+
+// isNaN(x) selalu sama dengan isNaN(Number(x)),
+// namun kehadirannya x adalah wajib disini!
+isNaN(x) == isNaN(Number(x)); // true untuk setiap nilai x, termasuk x == undefined,
+                              // karena isNaN(undefined) == true dan Number(undefined) mengembalikan NaN,
+                              // namun ...
+isNaN() == isNaN(Number());   // false, karena isNaN() == true dan Number() == 0
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.isNaN")}}

+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/json/index.html b/files/id/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..4f07030358 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,243 @@ +--- +title: JSON +slug: Web/JavaScript/Reference/Global_Objects/JSON +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +
{{JSRef}}
+ +

Didalam object JSON terdapat banyak method untuk memparse JavaScript Object Notation ({{glossary("JSON")}}) dan mengkonversi nilai ke JSON. Hal ini tidak dapat di gunakan atau dibangun, dan selain dari kedua sifat method tersebut tidak memiliki fungsi tersendiri.

+ +

Deskripsi

+ +

JavaScript Object Notation

+ +

JSON merupakan sebuah syntax untuk menserialisasi objects, array, angka, string, boolean, dan {{jsxref("null")}}. Hal ini dilihat berdasarkan pada syntax  javascript. Akan tetapi terpisah dari dari hal tersebut: beberapa javascript bukanlah JSON, dan beberapa JSON juga tidak dapat dikatakan sebagai Javascript. Lihat juga JSON: The JavaScript subset that isn't.

+ + + + + + + + + + + + + + + + + + + + + + + +
Perbedaan JavaScript dan JSON
Type pada JavaScriptPerbedaan dengan JSON
Object dan ArrayNama properti harus menggunakan string double quotes; tidak diakhiri dengan koma.
AngkaTidak diawali dengan nol; desimal harus di ikuti setidaknya satu digit.
String +

Hanya beberapa karakter tertentu yang menggunakan escape; Kontrol karakter tertentu tidak diperbolehkan; Pemisah baris Unicode (U+2028) dan pemisah paragraf (U+2029) dapat digunakan; string harus menggunakan double-quoted. Lihat contoh dimana {{jsxref("JSON.parse()")}} bisa digunakan dan {{jsxref("SyntaxError")}} dilemparkan ketika mengevaluasi kode sebagai javascript:

+ + 
+var kode = '"\u2028\u2029"';
+JSON.parse(kode); // bisa digunakan.
+eval(kode); // gagal!
+
+
+ +

Syntax JSON lengkapnya sebagai berikut:

+ +
JSON = null
+    or true or false
+    or JSONNumber
+    or JSONString
+    or JSONObject
+    or JSONArray
+
+JSONNumber = - PositiveNumber
+          or PositiveNumber
+PositiveNumber = DecimalNumber
+              or DecimalNumber . Digits
+              or DecimalNumber . Digits ExponentPart
+              or DecimalNumber ExponentPart
+DecimalNumber = 0
+             or OneToNine Digits
+ExponentPart = e Exponent
+            or E Exponent
+Exponent = Digits
+        or + Digits
+        or - Digits
+Digits = Digit
+      or Digits Digit
+Digit = 0 through 9
+OneToNine = 1 through 9
+
+JSONString = ""
+          or " StringCharacters "
+StringCharacters = StringCharacter
+                or StringCharacters StringCharacter
+StringCharacter = any character
+                  except " or \ or U+0000 through U+001F
+               or EscapeSequence
+EscapeSequence = \" or \/ or \\ or \b or \f or \n or \r or \t
+              or \u HexDigit HexDigit HexDigit HexDigit
+HexDigit = 0 through 9
+        or A through F
+        or a through f
+
+JSONObject = { }
+          or { Members }
+Members = JSONString : JSON
+       or Members , JSONString : JSON
+
+JSONArray = [ ]
+         or [ ArrayElements ]
+ArrayElements = JSON
+             or ArrayElements , JSON
+
+ +

Whitespace yang tidak signifikan dapat digunakan dimanasaja kecuali didalam JSONNumber (angka tidak dipisahkan dengan whitespace) atau JSONString (dimana ditafsirkan sebagai karakter yang sesuai dalam string; atau akan menyebabkan kesalahan). Karakter Tab (U+0009), carriage return (U+000D), line feed (U+000A), dan karakter spasi (U+0020) merupakan karakter whitespace yang valid.

+ +

Method

+ +
+
{{jsxref("JSON.parse()")}}
+
Memparse string sebagai JSON, biasanya mengubah nilai yang diberikan beserta sifatnya, dan mengembalikan nilai.
+
{{jsxref("JSON.stringify()")}}
+
Mengembalikan string JSON berdasarkan nilai spesifik, biasanya termasuk beberapa properti tertentu saja atau mengganti nilai properti secara user-defined.
+
+ +

Polyfill

+ +

Object JSON tidak didukung oleh browser lawas. Anda bisa menyiasatinya dengan memasukkan kode berikut di awal skrip Anda, memungkinkan penggunaan JSON objek dalam implementasi yang secara native tidak mendukung Object JSON (seperti Internet Explorer 6).

+ +

Algoritma berikut adalah tiruan dari objek JSON asli:

+ +
if (!window.JSON) {
+  window.JSON = {
+    parse: function(sJSON) { return eval('(' + sJSON + ')'); },
+    stringify: (function () {
+      var toString = Object.prototype.toString;
+      var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; };
+      var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'};
+      var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); };
+      var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;
+      return function stringify(value) {
+        if (value == null) {
+          return 'null';
+        } else if (typeof value === 'number') {
+          return isFinite(value) ? value.toString() : 'null';
+        } else if (typeof value === 'boolean') {
+          return value.toString();
+        } else if (typeof value === 'object') {
+          if (typeof value.toJSON === 'function') {
+            return stringify(value.toJSON());
+          } else if (isArray(value)) {
+            var res = '[';
+            for (var i = 0; i < value.length; i++)
+              res += (i ? ', ' : '') + stringify(value[i]);
+            return res + ']';
+          } else if (toString.call(value) === '[object Object]') {
+            var tmp = [];
+            for (var k in value) {
+              if (value.hasOwnProperty(k))
+                tmp.push(stringify(k) + ': ' + stringify(value[k]));
+            }
+            return '{' + tmp.join(', ') + '}';
+          }
+        }
+        return '"' + value.toString().replace(escRE, escFunc) + '"';
+      };
+    })()
+  };
+}
+
+ +

Lebih kompleks dari polyfills yang banyak dikenal untuk object JSON adalah JSON2 dan JSON3.

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}{{Spec2('ES5.1')}}Initial definition.
{{SpecName('ES6', '#sec-json-object', 'JSON')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("8.0")}}{{CompatOpera("10.5")}}{{CompatSafari("4.0")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/json/parse/index.html b/files/id/web/javascript/reference/global_objects/json/parse/index.html new file mode 100644 index 0000000000..5eb3f60424 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/json/parse/index.html @@ -0,0 +1,171 @@ +--- +title: JSON.parse() +slug: Web/JavaScript/Reference/Global_Objects/JSON/parse +tags: + - ECMAScript5 + - JSON + - Method + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse +--- +
{{JSRef}}
+ +

Method JSON.parse() memparse string ke JSON, biasanya mengubah nilai yang dihasilkan oleh parsing.

+ +

Sintaks

+ +
JSON.parse(text[, reviver])
+ +

Parameters

+ +
+
text
+
String yang akan di parse ke JSON. Lihat objek {{jsxref("JSON")}} untuk deskripsi lengkap sintaks JSON.
+
reviver {{optional_inline}}
+
Jika sebuah fungsi, mendeskripsikan bagaimana nilai asli dihasilkan oleh parsing berubah, sebelum dikembalikan.
+
+ +

Pemulangan

+ +

Mengembalikan {{jsxref("Object")}} sesuai dengan teks JSON yang diberikan.

+ +

Lontaran

+ +

Melontarkan pengecualian {{jsxref("SyntaxError")}} jika string yang di parse tidak sesuai JSON.

+ +

Contoh

+ +

Menggunakan JSON.parse()

+ +
JSON.parse('{}');              // {}
+JSON.parse('true');            // true
+JSON.parse('"foo"');           // "foo"
+JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
+JSON.parse('null');            // null
+
+ +

Menggunakan parameter reviver

+ +

Jika reviver telah ditentukan, nilai dihitung dengan parsing transformed sebelum dikembalikan. Khususnya, nilai yang terhitung, dan semua propertinya (dimulai dari properti yang paling bersarang dan berlanjut ke nilai asli), secara individu dijalankan melalui reviver, yang di panggil dengan objek yang berada di dalam properti yang akan diproses sebagai this dan dengan nama properti sebagai string dan nilai properti sebagai argumen. jika fungsi reviver mengembalikan {{jsxref("undefined")}} (tidak mengembalikan nilai, contoh, jika eksekusi gagal di akhir fungsi), properti akan dihapus dari objek. Jika tidak, properti akan didefinisikan ulang sebagai sebuah nilai kembali.

+ +

reviver dipanggil dengan string kosong dan nilai paling atas mengizinkan tranformsi dari nilai paling atas. Jadi untuk menangani kasus ini dengan baik, biasanya dengan mengembalikan nilai yang diberikan, atau JSON.parse() akan mengembalikan {{jsxref("undefined")}}.

+ +
JSON.parse('{"p": 5}', function(k, v) {
+  if (k === '') { return v; } // if topmost value, return it,
+  return v * 2;               // else return v * 2.
+});                           // { p: 10 }
+
+JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) {
+  console.log(k); // log the current property name, the last is "".
+  return v;       // return the unchanged property value.
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""
+
+ +

JSON.parse() tidak mengizinkan trailing koma

+ +
// both will throw a SyntaxError
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}{{Spec2('ES5.1')}}Initial definition. Implemented in JavaScript 1.7.
{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("8.0")}}{{CompatOpera("10.5")}}{{CompatSafari("4.0")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Gecko-specific notes

+ +

Pada Gecko 29 {{geckoRelease("29")}}, string JSON yang gagal akan menampilkan pesan kesalahan yang lebih rinci tentang error dalam memparse. Hal ini sangat berguna ketika mendebug data JSON yang besar.

+ +
JSON.parse('[1, 2, 3, 4,]');
+// SyntaxError: JSON.parse: unexpected character at
+// line 1 column 13 of the JSON data
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/map/clear/index.html b/files/id/web/javascript/reference/global_objects/map/clear/index.html new file mode 100644 index 0000000000..2869835e02 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/map/clear/index.html @@ -0,0 +1,109 @@ +--- +title: Map.prototype.clear() +slug: Web/JavaScript/Reference/Global_Objects/Map/clear +translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear +--- +
{{JSRef}}
+ +

Method clear() menghapus semua elemen yang ada pada objek Map.

+ +

Sintaks

+ +
myMap.clear();
+ +

Contoh

+ +

Menggunakan method clear

+ +
var myMap = new Map();
+myMap.set("bar", "baz");
+myMap.set(1, "foo");
+
+myMap.size;       // 2
+myMap.has("bar"); // true
+
+myMap.clear();
+
+myMap.size;       // 0
+myMap.has("bar")  // false
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar38{{CompatGeckoDesktop("19.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasart{{CompatNo}}38{{CompatGeckoMobile("19.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/map/delete/index.html b/files/id/web/javascript/reference/global_objects/map/delete/index.html new file mode 100644 index 0000000000..ad9d1922b9 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/map/delete/index.html @@ -0,0 +1,114 @@ +--- +title: Map.prototype.delete() +slug: Web/JavaScript/Reference/Global_Objects/Map/delete +translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete +--- +
{{JSRef}}
+ +

Method  delete() menghapus elemen yang ditentukan dari objek Map.

+ +

Sintaks

+ +
myMap.delete(key);
+ +

Parameter

+ +
+
key
+
Diperlukan. Kunci dari elemen untuk menghapusnya dari objek Map.
+
+ +

Return value

+ +

Mengembalikan nilai true jika elemen yang ada di dalam objek Map ada dan telah dihapus, atau false jika elemen tidak ada.

+ +

Contoh

+ +

Menggunakan method delete

+ +
var myMap = new Map();
+myMap.set("bar", "foo");
+
+myMap.delete("bar"); // Returns true. Berhasil dihapus.
+myMap.has("bar");    // Returns false. Elemen "bar" sudah tidak tersedia.
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar38{{CompatGeckoDesktop("13.0")}}11257.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/map/index.html b/files/id/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..9e4a93cfa0 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,443 @@ +--- +title: Map +slug: Web/JavaScript/Reference/Global_Objects/Map +tags: + - ECMAScript6 + - JavaScript + - Map + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +
{{JSRef}}
+ +

The Map object is a simple key/value map. Any value (both objects and {{Glossary("Primitive", "primitive values")}}) may be used as either a key or a value.

+ +

Syntax

+ +
new Map([iterable])
+
+ +

Parameters

+ +
+
iterable
+
Iterable is an Array or other iterable object whose elements are key-value pairs (2-element Arrays). Each key-value pair is added to the new Map. null is treated as undefined.
+
+ +

Description

+ +

A Map object iterates its elements in insertion order — a {{jsxref("Statements/for...of", "for...of")}} loop returns an array of [key, value] for each iteration.

+ +

Key equality

+ +

Key equality is based on the "same-value" algorithm: NaN is considered the same as NaN (even though NaN !== NaN) and all other values are considered equal according to the semantics of the === operator. In earlier versions of the ECMAScript 6 draft -0 and +0 were considered distinct (even though -0 === +0), this has been changed in later versions and has been adapted in Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a recent nightly Chrome.

+ +

Objects and maps compared

+ +

{{jsxref("Object", "Objects")}} are similar to Maps in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), Objects have been used as Maps historically; however, there are important differences between Objects and Maps that make using a Map better:

+ + + +

This does not mean you should use Maps everywhere, objects still are used in most cases. Map instances are only useful for collections, and you should consider adapting your code where you have previously used objects for such. Objects shall be used as records, with fields and methods.
+ If you're still not sure which one to use, ask yourself the following questions:

+ + + +

Those all are signs that you want a Map for a collection. If in contrast you have a fixed amount of keys, operate on them individually, and distinguish between their usage, then you want an object.

+ +

Properties

+ +
+
Map.length
+
The value of the length property is 0.
+
{{jsxref("Map.@@species", "get Map[@@species]")}}
+
The constructor function that is used to create derived objects.
+
{{jsxref("Map.prototype")}}
+
Represents the prototype for the Map constructor. Allows the addition of properties to all Map objects.
+
+ +

Map instances

+ +

All Map instances inherit from {{jsxref("Map.prototype")}}.

+ +

Properties

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}

+ +

Methods

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}

+ +

Examples

+ +

Using the Map object

+ +
var myMap = new Map();
+
+var keyString = "a string",
+    keyObj = {},
+    keyFunc = function () {};
+
+// setting the values
+myMap.set(keyString, "value associated with 'a string'");
+myMap.set(keyObj, "value associated with keyObj");
+myMap.set(keyFunc, "value associated with keyFunc");
+
+myMap.size; // 3
+
+// getting the values
+myMap.get(keyString);    // "value associated with 'a string'"
+myMap.get(keyObj);       // "value associated with keyObj"
+myMap.get(keyFunc);      // "value associated with keyFunc"
+
+myMap.get("a string");   // "value associated with 'a string'"
+                         // because keyString === 'a string'
+myMap.get({});           // undefined, because keyObj !== {}
+myMap.get(function() {}) // undefined, because keyFunc !== function () {}
+
+ +

Using NaN as Map keys

+ +

NaN can also be used as a key. Even though every NaN is not equal to itself (NaN !== NaN is true), the following example works, because NaNs are indistinguishable from each other:

+ +
var myMap = new Map();
+myMap.set(NaN, "not a number");
+
+myMap.get(NaN); // "not a number"
+
+var otherNaN = Number("foo");
+myMap.get(otherNaN); // "not a number"
+
+ +

Iterating Maps with for..of

+ +

Maps can be iterated using a for..of loop:

+ +
var myMap = new Map();
+myMap.set(0, "zero");
+myMap.set(1, "one");
+for (var [key, value] of myMap) {
+  console.log(key + " = " + value);
+}
+// Will show 2 logs; first with "0 = zero" and second with "1 = one"
+
+for (var key of myMap.keys()) {
+  console.log(key);
+}
+// Will show 2 logs; first with "0" and second with "1"
+
+for (var value of myMap.values()) {
+  console.log(value);
+}
+// Will show 2 logs; first with "zero" and second with "one"
+
+for (var [key, value] of myMap.entries()) {
+  console.log(key + " = " + value);
+}
+// Will show 2 logs; first with "0 = zero" and second with "1 = one"
+
+ +

Iterating Maps with forEach()

+ +

Maps can be iterated using the forEach() method:

+ +
myMap.forEach(function(value, key) {
+  console.log(key + " = " + value);
+}, myMap)
+// Will show 2 logs; first with "0 = zero" and second with "1 = one"
+
+ +

Relation with Array objects

+ +
var kvArray = [["key1", "value1"], ["key2", "value2"]];
+
+// Use the regular Map constructor to transform a 2D key-value Array into a map
+var myMap = new Map(kvArray);
+
+myMap.get("key1"); // returns "value1"
+
+// Use the spread operator to transform a map into a 2D key-value Array.
+console.log(uneval([...myMap])); // Will show you exactly the same Array as kvArray
+
+// Or use the spread operator on the keys or values iterator to get
+// an array of only the keys or values
+console.log(uneval([...myMap.keys()])); // Will show ["key1", "key2"]
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-map-objects', 'Map')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support +

{{ CompatChrome(38) }} [1]

+ 		{{ CompatGeckoDesktop("13") }}11257.1
Constructor argument: new Map(iterable){{ CompatChrome(38) }}{{ CompatGeckoDesktop("13") }}{{CompatNo}}25{{CompatNo}}
iterable{{ CompatChrome(38) }}{{ CompatGeckoDesktop("17") }}{{CompatNo}}257.1
Map.clear(){{ CompatChrome(31) }}
+ {{ CompatChrome(38) }}		{{CompatGeckoDesktop("19")}}11257.1
Map.keys(), Map.values(), Map.entries(){{ CompatChrome(37) }}
+ {{ CompatChrome(38) }}		{{CompatGeckoDesktop("20")}}{{CompatNo}}257.1
Map.forEach(){{ CompatChrome(36) }}
+ {{ CompatChrome(38) }}		{{CompatGeckoDesktop("25")}}11257.1
Key equality for -0 and 0{{ CompatChrome(34) }}
+ {{ CompatChrome(38) }}		{{CompatGeckoDesktop("29")}}{{CompatNo}}25{{CompatNo}}
Constructor argument: new Map(null){{CompatVersionUnknown}}{{CompatGeckoDesktop("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Monkey-patched set() in Constructor{{CompatVersionUnknown}}{{CompatGeckoDesktop("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Map[@@species]{{CompatUnknown}}{{CompatGeckoDesktop("41")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Map() without new throws{{CompatUnknown}}{{ CompatGeckoDesktop("42") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{ CompatChrome(38) }} [1]{{ CompatGeckoMobile("13") }}{{CompatNo}}{{CompatNo}}8
Constructor argument: new Map(iterable){{CompatNo}}{{ CompatChrome(38) }}{{ CompatGeckoMobile("13") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
iterable{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("17") }}{{CompatNo}}{{CompatNo}}8
Map.clear(){{CompatNo}}{{ CompatChrome(31) }}
+ {{ CompatChrome(38) }}		{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}8
Map.keys(), Map.values(), Map.entries(){{CompatNo}}{{ CompatChrome(37) }}
+ {{ CompatChrome(38) }}		{{CompatGeckoMobile("20")}}{{CompatNo}}{{CompatNo}}8
Map.forEach(){{CompatNo}}{{ CompatChrome(36) }}
+ {{ CompatChrome(38) }}		{{CompatGeckoMobile("25")}}{{CompatNo}}{{CompatNo}}8
Key equality for -0 and 0{{CompatNo}}{{ CompatChrome(34) }}
+ {{ CompatChrome(38) }}		{{CompatGeckoMobile("29")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Constructor argument: new Map(null){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Monkey-patched set() in Constructor{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Map[@@species]{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Map() without new throws{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("42")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Starting with Chrome 31, the feature was available behind a preference. In chrome://flags, activate the entry “Enable Experimental JavaScript”.

+ +

See also

+ + diff --git a/files/id/web/javascript/reference/global_objects/math/abs/index.html b/files/id/web/javascript/reference/global_objects/math/abs/index.html new file mode 100644 index 0000000000..c15b00b315 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/abs/index.html @@ -0,0 +1,145 @@ +--- +title: Math.abs() +slug: Web/JavaScript/Reference/Global_Objects/Math/abs +tags: + - Math + - abs + - math abs +translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs +--- +
{{JSRef}}
+ +

Fungsi Math.abs() mengembalikan nilai mutlak dari sebuah bilangan, yakni

+ +

Math.abs(x)=|x|={xifx>00ifx=0-xifx<0{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x & \text{if} \quad x \geq 0 \\ -x & \text{if} \quad x < 0 \end{cases}

+ +

Sintak

+ +
Math.abs(x)
+ +

Parameter

+ +
+
x
+
Sebuah bilangan.
+
+ +

Nilai kembali

+ +

Nilai mutlak dari bilangan yang diberikan.

+ +

Deskripsi

+ +

Karena abs() merupakan sebuah metode statis dari Math, anda harus menggunakannya/menulisnya sebagai berikut Math.abs(), Bukan sebagai metode dari sebuah object Math yang anda buat (Math bukanlah sebuah konstruktor).

+ +

Contoh

+ +

Prilaku dari Math.abs()

+ +

Mengabaikan objek kosong, sebuah array dengan lebih dari satu anggota, sebuah string non-numerik atau {{jsxref("undefined")}}/variabel kosong dikembalikan{{jsxref("NaN")}}. Mengabaikan {{jsxref("null")}}, sebuah string kosong atau sebuah array kosong akan menghasilkan 0.

+ +
Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+Math.abs('');       // 0
+Math.abs([]);       // 0
+Math.abs([2]);      // 2
+Math.abs([1,2]);    // NaN
+Math.abs({});       // NaN
+Math.abs('string'); // NaN
+Math.abs();         // NaN
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Definisi awal. Diimplementasikan pada JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}{{Spec2('ESDraft')}} 
+ +

Kompatibilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome untuk AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/math/ceil/index.html b/files/id/web/javascript/reference/global_objects/math/ceil/index.html new file mode 100644 index 0000000000..cba010ffdb --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/ceil/index.html @@ -0,0 +1,174 @@ +--- +title: Math.ceil() +slug: Web/JavaScript/Reference/Global_Objects/Math/ceil +tags: + - JavaScript + - Math + - Metode + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil +--- +
{{JSRef}}
+ +

Fungsi Math.ceil() adalah memberikan nilai integer lebih-besar-dari terkecil atau sama-dengan (pembulatan ke atas) nilai yang ditentukan.

+ +

Catatan: Nilai kembalian Math.ceil(null) adalah integer 0 dan tidak memberikan kesalahan NaN.

+ +
{{EmbedInteractiveExample("pages/js/math-ceil.html")}}
+ + + +

Sintaks

+ +
Math.ceil(x)
+ +

Parameter

+ +
+
x
+
Sebuah angka.
+
+ +

Nilai kembali

+ +

Nilai integer lebih-besar-dari terkecil atau sama-dengan (pembulatan ke atas) nilai yang ditentukan.

+ +

Deskripsi

+ +

Karena ceil() adalah sebuah metode statis dari Math, Anda harus selalu menggunakan sebagai Math.ceil(), bukan sebagai metode dari object  Math yang Anda buat (Math bukanlah sebuah konstruktor).

+ +

Contoh

+ +

Menggunakan Math.ceil()

+ +

Berikut adalah contoh penggunaan dari Math.ceil().

+ +
Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7
+
+ +

Penyesuaian desimal

+ +
// Closure
+(function() {
+  /**
+   * Penyesuaian desimal dari sebuah angka.
+   *
+   * @param {String}  type  Tipe dari penyesuaian.
+   * @param {Number}  value Angka.
+   * @param {Integer} exp   Eksponen (10 logaritma basis penyesuaian).
+   * @returns {Number} Nilai yang di sesuaikan.
+   */
+  function decimalAdjust(type, value, exp) {
+    // jika exp adalah undefined atau nol...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // Jika nilai adalah bukan sebuah angka atau bilangan integer...
+    if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomen
{{SpecName('ES1')}}{{Spec2('ES1')}}Definisi awal. Diimplementasikan dalam JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}{{Spec2('ESDraft')}} 
+ +

Kompatibilitas peramban

+ +
+ +
+ +

{{Compat("javascript.builtins.Math.ceil")}}

+ +

Lihat pula

+ + diff --git a/files/id/web/javascript/reference/global_objects/math/e/index.html b/files/id/web/javascript/reference/global_objects/math/e/index.html new file mode 100644 index 0000000000..79e9f21f4a --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/e/index.html @@ -0,0 +1,81 @@ +--- +title: Math.E +slug: Web/JavaScript/Reference/Global_Objects/Math/E +translation_of: Web/JavaScript/Reference/Global_Objects/Math/E +--- +
{{JSRef}}
+ +

Properti Math.E mewakili dasar logaritma alami, e,  mendekati 2.718.

+ +

Math.E=e≈2.718\mathtt{\mi{Math.E}} = e \approx 2.718

+ +
{{EmbedInteractiveExample("pages/js/math-e.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Deskripsi

+ +

Karena E adalah sebuah properti matematika statis, saudara selalu menggunakannya sebagai Math.E, daripada sebagai sebuah properti dari objek matematika yang saudara buat. (Math bukan sebuah konstruktor).

+ +

Contoh

+ +

Menggunakan Math.E

+ +

Fungsi berikut menampilkan nilai e:

+ +
function getNapier() {
+  return Math.E;
+}
+
+getNapier(); // 2.718281828459045
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ES1')}}{{Spec2('ES1')}} +

definisi inisial. Diimplementasikan dalam  JavaScript 1.0.

+
{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.e', 'Math.E')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}{{Spec2('ESDraft')}} 
+ +

Kompatibilitas browser

+ + + +

{{Compat("javascript.builtins.Math.E")}}

+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/math/floor/index.html b/files/id/web/javascript/reference/global_objects/math/floor/index.html new file mode 100644 index 0000000000..ecd6e89cdd --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/floor/index.html @@ -0,0 +1,210 @@ +--- +title: Math.floor() +slug: Web/JavaScript/Reference/Global_Objects/Math/floor +tags: + - Math + - math floor + - pembulatan + - pembulatan bilangan + - pembulatan kebawah javascript +translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor +--- +
{{JSRef}}
+ +

Fungsi Math.floor() mengembalikan bilangan bulat terbesar yang kurang dari atau sama dengan bilangan yang diberikan.

+ +

Sintaks

+ +
Math.floor(x)
+ +

Parameter

+ +
+
x
+
Sebuah bilangan.
+
+ +

Nilai kembali

+ +

Sebuah bilangan yang merepresentasikan bilangan bulat terbesar yang kurang dari atau sama dengan nilai yang diberikan

+ +

Deskripsi

+ +

Karena floor() adalah sebuah metode statis dari Math, sintaks yang harus anda gunakan adalah Math.floor(), bukan sebagai metode dari obyek Math yang anda buat (Math bukanlah sebuah konstruktor).

+ +

Contoh

+ +

Penggunaan Math.floor()

+ +
Math.floor( 45.95); //  45
+Math.floor( 45.05); //  45
+Math.floor(  4   ); //   4
+Math.floor(-45.05); // -46
+Math.floor(-45.95); // -46
+
+ +

Penyesuaian desimal

+ +
// Closure
+(function() {
+  /**
+   * Penyesuaian desimal dari sebuah bilangan.
+   *
+   * @param {String}  type  Jenis penyesuaian.
+   * @param {Number}  value Nomor.
+   * @param {Integer} exp   Eksponen (10 logaritma dari penyesuaian dasar).
+   * @returns {Number} Nilai yang disesuaikan.
+   */
+  function decimalAdjust(jenis, nilai, eks) {
+    // Jika eks adalah undefined(belum didefinisikan) atau kosong...
+    if (typeof eks === 'undefined' || +eks === 0) {
+      return Math[jenis](nilai);
+    }
+    nilai = +nilai;
+    eks= +eks;
+    // Jika nilai bukan sebuah angka atau eks bukan sebuah bilangan integer...
+    if (isNaN(nilai) || !(typeof eks === 'number' && eks % 1 === 0)) {
+      return NaN;
+    }
+    // Pengalihan
+    nilai = nilai.toString().split('e');
+    nilai = Math[jenis](+(nilai[0] + 'e' + (nilai[1] ? (+nilai[1] - eks) : -eks)));
+    // pengalihan kembali
+    nilai = nilai.toString().split('e');
+    return +(nilai[0] + 'e' + (nilai[1] ? (+nilai[1] + eks) : eks));
+  }
+
+  // Desimal bulat
+  if (!Math.round10) {
+    Math.round10 = function(nilai, eks) {
+      return decimalAdjust('round', nilai, eks);
+    };
+  }
+  // Desimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(nilai, eks) {
+      return decimalAdjust('floor', nilai, eks);
+    };
+  }
+  // Desimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(nilai, eks) {
+      return decimalAdjust('ceil', nilai, eks);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Definisi awal. Diimplementasikan pada JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}{{Spec2('ESDraft')}} 
+ +

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

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/math/index.html b/files/id/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..4d9bb6a9bb --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,213 @@ +--- +title: Math +slug: Web/JavaScript/Reference/Global_Objects/Math +tags: + - JavaScript + - Math + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +
{{JSRef}}
+ +

Math merupakan objek built-in yang memiliki properti dan method untuk perhitungan konstan dan fungsi. bukan Fungsi Objek.

+ +

Description

+ +

Tidak seperti global objects lain, Math bukanlah constructor. Semua properti dan method dari Math adalah static. You refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method's argument. Constants are defined with the full precision of real numbers in JavaScript.

+ +

Properties

+ +
+
{{jsxref("Math.E")}}
+
Euler's constant and the base of natural logarithms, approximately 2.718.
+
{{jsxref("Math.LN2")}}
+
Natural logarithm of 2, approximately 0.693.
+
{{jsxref("Math.LN10")}}
+
Natural logarithm of 10, approximately 2.303.
+
{{jsxref("Math.LOG2E")}}
+
Base 2 logarithm of E, approximately 1.443.
+
{{jsxref("Math.LOG10E")}}
+
Base 10 logarithm of E, approximately 0.434.
+
{{jsxref("Math.PI")}}
+
Ratio of the circumference of a circle to its diameter, approximately 3.14159.
+
{{jsxref("Math.SQRT1_2")}}
+
Square root of 1/2; equivalently, 1 over the square root of 2, approximately 0.707.
+
{{jsxref("Math.SQRT2")}}
+
Square root of 2, approximately 1.414.
+
+ +

Method

+ +
+

Note that the trigonometric functions (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) expect or return angles in radians. To convert radians to degrees, divide by (Math.PI / 180), and multiply by this to convert the other way.

+
+ +
+

Note that a lot of the math functions have a precision that's implementation-dependent. This means that different browsers can give a different result, and even the same JS engine on a different OS or architecture can give different results.

+
+ +
+
{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}
+
Returns the absolute value of a number.
+
{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}
+
Returns the arccosine of a number.
+
{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}
+
Returns the hyperbolic arccosine of a number.
+
{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}
+
Returns the arcsine of a number.
+
{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}
+
Returns the hyperbolic arcsine of a number.
+
{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}
+
Returns the arctangent of a number.
+
{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}
+
Returns the hyperbolic arctangent of a number.
+
{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}
+
Returns the arctangent of the quotient of its arguments.
+
{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}
+
Returns the cube root of a number.
+
{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}
+
Returns the smallest integer greater than or equal to a number.
+
{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}
+
Returns the number of leading zeroes of a 32-bit integer.
+
{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}
+
Returns the cosine of a number.
+
{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}
+
Returns the hyperbolic cosine of a number.
+
{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}
+
Returns Ex, where x is the argument, and E is Euler's constant (2.718…), the base of the natural logarithm.
+
{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}
+
Returns subtracting 1 from exp(x).
+
{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}
+
Returns the largest integer less than or equal to a number.
+
{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}
+
Returns the nearest single precision float representation of a number.
+
{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}
+
Returns the square root of the sum of squares of its arguments.
+
{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}
+
Returns the result of a 32-bit integer multiplication.
+
{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}
+
Returns the natural logarithm (loge, also ln) of a number.
+
{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}
+
Returns the natural logarithm of 1 + x (loge, also ln) of a number.
+
{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}
+
Returns the base 10 logarithm of a number.
+
{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}
+
Returns the base 2 logarithm of a number.
+
{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}
+
Returns the largest of zero or more numbers.
+
{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}
+
Returns the smallest of zero or more numbers.
+
{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}
+
Returns base to the exponent power, that is, baseexponent.
+
{{jsxref("Global_Objects/Math/random", "Math.random()")}}
+
Returns a pseudo-random number between 0 and 1.
+
{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}
+
Returns the value of a number rounded to the nearest integer.
+
{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}
+
Returns the sign of the x, indicating whether x is positive, negative or zero.
+
{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}
+
Returns the sine of a number.
+
{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}
+
Returns the hyperbolic sine of a number.
+
{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}
+
Returns the positive square root of a number.
+
{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}
+
Returns the tangent of a number.
+
{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}
+
Returns the hyperbolic tangent of a number.
+
Math.toSource() {{non-standard_inline}}
+
Returns the string "Math".
+
{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}
+
Returns the integral part of the number x, removing any fractional digits.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.8', 'Math')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math-object', 'Math')}}{{Spec2('ES6')}}New methods {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} and {{jsxref("Math.clz32()", "clz32()")}} added.
{{SpecName('ESDraft', '#sec-math-object', 'Math')}}{{Spec2('ESDraft')}} 
+ +

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/id/web/javascript/reference/global_objects/math/ln10/index.html b/files/id/web/javascript/reference/global_objects/math/ln10/index.html new file mode 100644 index 0000000000..04e4fe5468 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/ln10/index.html @@ -0,0 +1,81 @@ +--- +title: Math.LN10 +slug: Web/JavaScript/Reference/Global_Objects/Math/LN10 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 +--- +
{{JSRef}}
+ +

Properti Math.LN10 mewakili logaritma alami dari 10, mendekati 2.302:

+ +

Math.LN10=ln(10)≈2.302\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302

+ +
{{EmbedInteractiveExample("pages/js/math-ln10.html")}}
+ + + +
{{js_property_attributes(0, 0, 0)}}
+ +

Deskripsi

+ +

Karena LN10 adalah sebuah properti matematika statis, saudara selalu menggunakannya sebagai Math.LN10, daripada sebagai sebuah properti objek matematika yang saudara buat (Math bukan sebuah konstruktor).

+ +

Contoh

+ +

+

Menggunakan Math.LN10

+

+ +

Fungsi berikut menampilkan log alami dari 10:

+ +
function getNatLog10() {
+  return Math.LN10;
+}
+
+getNatLog10(); // 2.302585092994046
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecisifikasiStatusKomentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Definisi inisial. Diimplementasikan di JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}{{Spec2('ESDraft')}} 
+ +

Kompatibilitas browser

+ + + +

{{Compat("javascript.builtins.Math.LN10")}}

+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/math/max/index.html b/files/id/web/javascript/reference/global_objects/math/max/index.html new file mode 100644 index 0000000000..aeb1b207ce --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/max/index.html @@ -0,0 +1,144 @@ +--- +title: Math.max() +slug: Web/JavaScript/Reference/Global_Objects/Math/max +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/max +--- +
{{JSRef}}
+ +

Fungsi Math.max() mengembalikan nilai terbesar dari zero atau lebih besar.

+ +

Sintaks

+ +
Math.max([value1[, value2[, ...]]])
+ +

Parameter

+ +
+
value1, value2, ...
+
Nomor.
+
+ +

Deskripsi

+ +

Karena max() merupakan method static dari Math, anda perlu menggunakan Math.max(), daripada sebagai method dari objek Math yang anda buat (Math bukan constructor).

+ +

Jika tidak diberi argumen, hasilnya akan -{{jsxref("Infinity")}}.

+ +

Jika setidaknya satu argumen tidak dapat dikonversi ke angka, maka hasilnya {{jsxref("NaN")}}.

+ +

Contoh

+ +

Penggunaan Math.max()

+ +
Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+
+ +

Pada contoh menggunakan fungsi {{jsxref("Function.prototype.apply()")}} untuk mencari nilai elemen maksimum pada sebuah numeric array. getMaxOfArray([1, 2, 3]) sama halnya dengan Math.max(1, 2, 3), tapi anda bisa menggunakan getMaxOfArray() pada programmatikal pembuatan array untuk semua ukuran.

+ +
function getMaxOfArray(numArray) {
+  return Math.max.apply(null, numArray);
+}
+
+ +

Atau dengan {{jsxref("Operators/Spread_operator", "spread operator")}} baru, mencari nilai terbesar menjadi lebih mudah.

+ +
var arr = [1, 2, 3];
+var max = Math.max(...arr);
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.max', 'Math.max')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}{{Spec2('ESDraft')}} 
+ +

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

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/math/min/index.html b/files/id/web/javascript/reference/global_objects/math/min/index.html new file mode 100644 index 0000000000..eb557f36bf --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/min/index.html @@ -0,0 +1,150 @@ +--- +title: Math.min() +slug: Web/JavaScript/Reference/Global_Objects/Math/min +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/min +--- +
{{JSRef}}
+ +

Function Math.min() mengembalikan nilai terkecil dari zero atau lebih kecil.

+ +

Sintaks

+ +
Math.min([value1[, value2[, ...]]])
+ +

Parameter

+ +
+
value1, value2, ...
+
Nomor.
+
+ +

Deskripsi

+ +

Karena min() merupakan static method dari Math, anda perlu menggunakan  Math.min(), daripada sebagai method dari objek Math yang anda buat (Math bukanlah konstruktor).

+ +

Jika tidak diberi argumen, hasilnya adalah {{jsxref("Infinity")}}.

+ +

Jika setidaknya satu argumen tidak bisa di konversi ke angka, maka hasilnya{{jsxref("NaN")}}.

+ +

Contoh

+ +

Menggunakan Math.min()

+ +

Mencari nilai terkecil diantara x dan y dan menyimpannya di variabel z:

+ +
var x = 10, y = -20;
+var z = Math.min(x, y);
+
+ +

Mengambil nilai dengan Math.min()

+ +

Math.min() biasa digunakan untuk mengambil nilai yang terkecil atau sama berdasarkan batasan yang ada. contoh sebagai berikut.

+ +
var x = f(foo);
+
+if (x > boundary) {
+  x = boundary;
+}
+
+ +

bisa ditulis sebagai berikut

+ +
var x = Math.min(f(foo), boundary);
+
+ +

{{jsxref("Math.max()")}} bisa digunakan sama halnya denga mengambil nilai pada setiap batasan.

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.min', 'Math.min')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}{{Spec2('ESDraft')}} 
+ +

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

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/math/pow/index.html b/files/id/web/javascript/reference/global_objects/math/pow/index.html new file mode 100644 index 0000000000..878fde0e04 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/math/pow/index.html @@ -0,0 +1,53 @@ +--- +title: Math.pow +slug: Web/JavaScript/Reference/Global_Objects/Math/pow +translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow +--- +

Ringkasan

+

Mengembalikan bilangan terhadap Pangkat exponent,  yaitu, bilanganeksponen.

+ + + + + + + + + + + + + + + + +
Method dari Math
Diimplementasikan padaJavaScript 1.0
Edisi ECMAScriptECMAScript 1st Edition
+

Sintaks

+
Math.pow(bilangan, eksponen)
+

Parameter

+
+
+ bilangan
+
+ Bilangan pokok.
+
+ eksponen
+
+ Eksponen yang digunakan untuk memangkatkan bilangan pokok.
+
+

Deskripsi

+

Karena pow adalah sebuah static method dari Math, anda senantiasa menggunakannya sebagai Math.pow(), daripada sebagai sebuah method dari sebuah Objek Math yang anda buat.

+

Contoh

+

Contoh: Penggunaan Math.pow

+
function raisePower(x,y) {
+   return Math.pow(x,y)
+}
+

Jika x adalah 7 dan y adalah 2, raisePower mengembalikan 49 (7 dipangkatkan 2).

+

Lihat juga

+ diff --git a/files/id/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/id/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..6ac06ec718 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,133 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +
{{JSRef}}
+ +

Metode Object.getPrototypeOf() mengembalikan nilai prototipe dari obyek yang disebutkan (misalnya,  nilai dari properti internal [[Prototype]]).

+ +

Sintaks

+ +
Object.getPrototypeOf(obj)
+ +

Parameter

+ +
+
obj
+
Obyek yang memiliki prototipe.
+
+ +

Nilai kembali

+ +

Prototipe dari obyek yang diberikan. Jika tidak ada property yang ditemukan, {{jsxref("null")}} yang akan dikembalikan.

+ +

Contoh

+ +
var proto = {};
+var obj = Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+
+ +

Catatan

+ +

Dalam ES5, akan melemparkan eksepsi {{jsxref("TypeError")}} jika parameter obj parameter bukanlah sebuah obyek. Dalam ES6, parameter akan dipaksa menjadi {{jsxref("Object")}}.

+ +
Object.getPrototypeOf("foo");
+// TypeError: "foo" is not an object (ES5 code)
+Object.getPrototypeOf("foo");
+// String.prototype                  (ES6 code)
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}{{Spec2('ES5.1')}}Definisi awal.
{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}{{Spec2('ESDraft')}} 
+ +

Kompatibilitas perambah

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatChrome("5")}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9")}}{{CompatOpera("12.10")}}{{CompatSafari("5")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Catatan khusus Opera

+ +

Meskipun Opera dengan versi yang lebih lama belum mendukung Object.getPrototypeOf(), Opera mendukung properti non-standar {{jsxref("Object.proto", "__proto__")}} sejak Opera 10.50.

+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/object/index.html b/files/id/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..cc79ab6890 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,221 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +
{{JSRef}}
+ +

Konstruktor Object membuat sebuah pembungkus objek.

+ +

Sintaks

+ +
// Persiapan literasi objek
+{ [ nameValuePair1[, nameValuePair2[, ...nameValuePairN] ] ] }
+
+// Panggil konstruktor
+new Object([value])
+ +

Parameter

+ +
+
nameValuePair1, nameValuePair2, ... nameValuePairN
+
Pasangan dari nama (strings) dan nilai dimana nama dipisahkan dari nilai menggunakan titik dua (colon).
+
value
+
Nilai bebas.
+
+ +

Keterangan

+ +

Konstruktor Object membuat sebuah pembungkus objek dari nilai yang diberikan. Jika nilainya {{jsxref("null")}} atau {{jsxref("undefined")}}, maka akan menghasilkan dan mengembalikan objek kosong. Sebaliknya, akan mengembalikan sebuah objek dari Type yang bergantung pada nilai yang diberikan. Jika nilai adalah objek, maka nilai akan langsung dikembalikan.

+ +

Ketika memanggil konteks non-constructor, Object berperilaku seperti layaknya new Object().

+ +

Lihat juga object initializer / literal syntax.

+ +

Properti dari konstruktor Object

+ +
+
Object.length
+
Bernilai 1.
+
{{jsxref("Object.prototype")}}
+
Memungkinkan untuk menambahkan properti ke semua objek dari type Object.
+
+ +

Method dari konstruktor Object

+ +
+
{{jsxref("Object.assign()")}}
+
Membuat objek baru dengan menyalin nilai dari semua properti enumerable dari satu atau lebih sumber ke sebuah objek target.
+
{{jsxref("Object.create()")}}
+
Membuat objek baru dengan prototype dan properti objek tertentu.
+
{{jsxref("Object.defineProperty()")}}
+
Menambahkan nama properti berdasarkan deskripsi yang diberikan oleh descriptor pada sebuah objek.
+
{{jsxref("Object.defineProperties()")}}
+
Menambahkan nama properti yang dideskripsikan descriptors pada sebuah object.
+
{{jsxref("Object.entries()")}} {{experimental_inline}}
+
Mengembalikan sebuah array dari enumerable objek dengan  pasangan properti [key, value].
+
{{jsxref("Object.freeze()")}}
+
Membekukan objek: kode lain tidak dapat dihapus atau diubah oleh semua properti.
+
{{jsxref("Object.getOwnPropertyDescriptor()")}}
+
Mengembalikan sebuah properti descriptor untuk nama propeti pada sebuah object.
+
{{jsxref("Object.getOwnPropertyNames()")}}
+
Mengembalikan array berisi nama dari semua objek yang diberikan own enumerable dan properti non-enumerable.
+
{{jsxref("Object.getOwnPropertySymbols()")}}
+
Mengembalikan sebuah array dari semua properti simbol yang ditemukan secara langsung atas objek yang diberikan.
+
{{jsxref("Object.getPrototypeOf()")}}
+
Mengembalikan prototype dari objek tertentu.
+
{{jsxref("Object.is()")}}
+
Membandingkan dua nilai yang berbeda (mis. the same)
+
{{jsxref("Object.isExtensible()")}}
+
Menentukan apakah memperluas objek di perbolehkan.
+
{{jsxref("Object.isFrozen()")}}
+
Menentukan apakah objek telah beku.
+
{{jsxref("Object.isSealed()")}}
+
Menentukan apakah objek adalah sealed.
+
{{jsxref("Object.keys()")}}
+
Menegembalikan array berisi nama dari semua objek properti own enumerable.
+
{{jsxref("Object.preventExtensions()")}}
+
Mencegah ekstensi dari sebuah objek.
+
{{jsxref("Object.seal()")}}
+
Mencegah kode lain dari penghapusan properti dari sebuah objek.
+
{{jsxref("Object.setPrototypeOf()")}}
+
Mengatur prototype (mis., internal properti [[Prototype]])
+
{{jsxref("Object.values()")}} {{experimental_inline}}
+
Mengembalikan array dari objek nilai own enumerable.
+
+ +

Perumpamaan Object dan Object prototype objek

+ +

Pada JavaScript, semua objek diturunkan dari Object; dan semua objek mewarisi method dan property dari {{jsxref("Object.prototype")}}, meskipun hal tersebut telah di-override (diganti). Sebagai contoh, prototipe konstruktor lain mengesampingkan properti konstruktor dan menyediakan metode toString() yang spesifik. Perubahan ke objek prototipe Object disebarkan ke semua objek kecuali properti dan metode yang telah diubah sebelumnya diganti di sepanjang rantai prototipe.

+ +

Properti

+ +
{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}
+ +

Method

+ +
{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}
+ +

Contoh

+ +

Using Object given undefined and null types

+ +

Dibawah ini adalah contoh menyimpan objek kosong pada variabel o:

+ +
var o = new Object();
+
+ +
var o = new Object(undefined);
+
+ +
var o = new Object(null);
+
+ +

Using Object to create Boolean objects

+ +

Dibawah ini adalah contoh menyimpan objek {{jsxref("Boolean")}} pada variabel o:

+ +
// equivalent to o = new Boolean(true);
+var o = new Object(true);
+
+ +
// equivalent to o = new Boolean(false);
+var o = new Object(Boolean());
+
+ +

Rincian Teknis

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definisi awal. Diterapkan di JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2', 'Object')}}{{Spec2('ES5.1')}}-
{{SpecName('ES6', '#sec-object-objects', 'Object')}}{{Spec2('ES6')}} +

Penambahan Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is

+
{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}{{Spec2('ESDraft')}}Penambahan Object.entries, Object.values, dan Object.getOwnPropertyDescriptors.
+ +

Kesesuaian browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/object/keys/index.html b/files/id/web/javascript/reference/global_objects/object/keys/index.html new file mode 100644 index 0000000000..cc1c7dc1a9 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/keys/index.html @@ -0,0 +1,197 @@ +--- +title: Object.keys() +slug: Web/JavaScript/Reference/Global_Objects/Object/keys +translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys +--- +
{{JSRef}}
+ +

Object.keys() Metode mengembalikan array dari objek yang diberikan sendiri enumerable properti, dalam urutan yang sama seperti yang disediakan oleh loop {{jsxref("Statements/for...in", "for...in")}} (perbedaan adalah bahwa sebuah loop for-in enumerates properti dalam mata rantai prototipe juga).

+ +

Syntax

+ +
Object.keys(obj)
+ +

Parameters

+ +
+
obj
+
Objek yang propertinya sendiri enumerable yang harus dikembalikan.
+
+ +

Description

+ +

Object.keys() mengembalikan array yang elemen string yang sesuai dengan properti enumerable yang ditemukan langsung pada objek. Urutan properti adalah sama dengan yang diberikan oleh perulangan / looping melalui properti dari objek secara manual.

+ +

Examples

+ +
var arr = ['a', 'b', 'c'];
+console.log(Object.keys(arr)); // console: ['0', '1', '2']
+
+// array like object
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.keys(obj)); // console: ['0', '1', '2']
+
+// array like object with random key ordering
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.keys(an_obj)); // console: ['2', '7', '100']
+
+// getFoo is property which isn't enumerable
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = 1;
+
+console.log(Object.keys(my_obj)); // console: ['foo']
+
+ +

Jika Anda ingin semua properti, bahkan tidak enumerables, lihat {{jsxref("Object.getOwnPropertyNames()")}}.

+ +

Notes

+ +

Dalam ES5, jika argumen untuk metode ini bukan merupakan objek (primitive), maka akan menyebabkan {{jsxref("TypeError")}}. Dalam ES6, argumen tidak-objek akan dipaksa untuk sebuah objek.

+ +
Object.keys("foo");
+// TypeError: "foo" is not an object (ES5 code)
+
+Object.keys("foo");
+// ["0", "1", "2"]                   (ES6 code)
+
+ +

Polyfill

+ +

Untuk menambahkan kompatibel Object.keys dukungan dalam lingkungan yang lebih tua yang tidak native mendukung itu, copy potongan berikut:

+ +
// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
+if (!Object.keys) {
+  Object.keys = (function() {
+    'use strict';
+    var hasOwnProperty = Object.prototype.hasOwnProperty,
+        hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
+        dontEnums = [
+          'toString',
+          'toLocaleString',
+          'valueOf',
+          'hasOwnProperty',
+          'isPrototypeOf',
+          'propertyIsEnumerable',
+          'constructor'
+        ],
+        dontEnumsLength = dontEnums.length;
+
+    return function(obj) {
+      if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
+        throw new TypeError('Object.keys called on non-object');
+      }
+
+      var result = [], prop, i;
+
+      for (prop in obj) {
+        if (hasOwnProperty.call(obj, prop)) {
+          result.push(prop);
+        }
+      }
+
+      if (hasDontEnumBug) {
+        for (i = 0; i < dontEnumsLength; i++) {
+          if (hasOwnProperty.call(obj, dontEnums[i])) {
+            result.push(dontEnums[i]);
+          }
+        }
+      }
+      return result;
+    };
+  }());
+}
+
+ +

Harap dicatat bahwa kode di atas termasuk kunci non-enumerable di  IE7 (dan mungkin IE8), ketika lewat di sebuah objek dari berbagai window.

+ +

Untuk Browser sederhana Polyfill, lihat Javascript - Object.keys Browser Compatibility.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}{{Spec2('ES5.1')}}Initial definition. Implemented in JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.keys', 'Object.keys')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("5")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("9")}}{{CompatOpera("12")}}{{CompatSafari("5")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/id/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/id/web/javascript/reference/global_objects/object/preventextensions/index.html new file mode 100644 index 0000000000..3899fef48f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/object/preventextensions/index.html @@ -0,0 +1,185 @@ +--- +title: Object.preventExtensions() +slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +--- +
{{JSRef}}
+ +

Metode Object.preventExtensions() mencegah properti-properti baru untuk ditambahkan pada sebuah obyek (mencegah ekstensi di masa depan pada sebuah obyek).

+ +

Sintaks

+ +
Object.preventExtensions(obj)
+ +

Parameter

+ +
+
obj
+
Obyek yang akan dibuat menjadi non-ekstensibel.
+
+ +

Pengembalian nilai

+ +

Obyek yang telah dibuat non-ekstensibel.

+ +

Deskripsi

+ +

 

+ +

Sebuah obyek disebut ekstensibel jika properti baru dapat ditambahkan ke dalamnya . Object.preventExtensions() menandai suatu obyek untuk menjadi tidak ekstensibel, sehingga tidak akan pernah memiliki properti diluar properti-properti yang dimiliki sebelum ditandai sebagai non-ekstensibel. Perhatikan bahwa properti-properti obyek non-ekstensibel, secara umum, masih dapat dihapus. Mencoba untuk menambah properti baru ke obyek non-ekstensibel akan gagal, baik secara diam-diam atau dengan melemparkan {{jsxref("TypeError")}} (paling umum, tetapi tidak secara eksklusif,  ketika berada di {{jsxref("Functions_and_function_scope/Strict_mode", "strict mode", "", 1)}}).

+ +

Object.preventExtensions() hanya mencegah penambahan properti sendiri . Sifat masih bisa ditambahkan ke prototipe obyek. Namun, memanggil Object.preventExtensions() pada obyek juga akan mencegah ekstensi / penambahan properti {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}.

+ +

Jika ada cara untuk mengubah suatu obyek ekstensibel untuk satu non-ekstensibel, tidak ada cara untuk melakukan yang sebaliknya di ECMAScript 5 .

+ +

Contoh

+ +
// Object.preventExtensions returns the object being made non-extensible.
+var obj = {};
+var obj2 = Object.preventExtensions(obj);
+obj === obj2; // true
+
+// Objects are extensible by default.
+var empty = {};
+Object.isExtensible(empty); // === true
+
+// ...but that can be changed.
+Object.preventExtensions(empty);
+Object.isExtensible(empty); // === false
+
+// Object.defineProperty throws when adding a new property to a non-extensible object.
+var nonExtensible = { removable: true };
+Object.preventExtensions(nonExtensible);
+Object.defineProperty(nonExtensible, 'new', { value: 8675309 }); // throws a TypeError
+
+// In strict mode, attempting to add new properties to a non-extensible object throws a TypeError.
+function fail() {
+  'use strict';
+  nonExtensible.newProperty = 'FAIL'; // throws a TypeError
+}
+fail();
+
+// EXTENSION (only works in engines supporting __proto__
+// (which is deprecated. Use Object.getPrototypeOf instead)):
+// A non-extensible object's prototype is immutable.
+var fixed = Object.preventExtensions({});
+fixed.__proto__ = { oh: 'hai' }; // throws a TypeError
+
+ +

Catatan

+ +

Pada ES5, jika argumen pada fungsi metode ini adalah bukan sebuah obyek (sebuah tipe data primitif), maka hal itu akan menyebabkan {{jsxref("TypeError")}}. Pada ES6, sebuah argumen non-obyek akan diperlakukan seperti obyek tersebut obyek biasa yang non-ekstensibel, dan langsung mengembalikan nilai. 

+ +
Object.preventExtensions(1);
+// TypeError: 1 is not an object (ES5 code)
+
+Object.preventExtensions(1);
+// 1                             (ES6 code)
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}{{Spec2('ES5.1')}}Definisi awal. Terimplementasi pada JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}{{Spec2('ESDraft')}} 
+ +

Browser kompatibilitas

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("6")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("9")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
ES6 behavior for non-object argument{{CompatChrome("44")}}{{CompatGeckoDesktop("35.0")}}{{CompatIE("11")}}{{CompatOpera("31")}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ES6 behavior for non-object argument{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("35.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/id/web/javascript/reference/global_objects/promise/catch/index.html b/files/id/web/javascript/reference/global_objects/promise/catch/index.html new file mode 100644 index 0000000000..f2d5e38e8f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/catch/index.html @@ -0,0 +1,127 @@ +--- +title: Promise.prototype.catch() +slug: Web/JavaScript/Reference/Global_Objects/Promise/catch +tags: + - ECMAScript6 + - Method + - Promise + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch +--- +
{{JSRef}}
+ +

Method catch() mengembalikan Promise dan hanya setuju jika kasusnya gagal. Sama halnya dengan memenggil method {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}}.

+ +

Sintaks

+ +
p.catch(onRejected);
+
+p.catch(function(reason) {
+   // rejection
+});
+
+ +

Parameter

+ +
+
onRejected
+
 {{jsxref("Function")}} dipanggil ketika Promise ditolak. Fungsi ini memiliki satu argumen, alasan penolakan.
+
+ +

Deskripsi

+ +

Method catch sangat berguna untuk menangani error di gabungan promis anda.

+ +

Contoh

+ +

Penggunaan method catch

+ +
var p1 = new Promise(function(resolve, reject) {
+  resolve('Success');
+});
+
+p1.then(function(value) {
+  console.log(value); // "Success!"
+  throw 'oh, no!';
+}).catch(function(e) {
+  console.log(e); // "oh, no!"
+}).then(function(){
+  console.log('after a catch the chain is restored');
+}, function () {
+  console.log('Not fired due to the catch');
+});
+
+// The following behaves the same as above
+p1.then(function(value) {
+  console.log(value); // "Success!"
+  return Promise.reject('oh, no!');
+}).catch(function(e) {
+  console.log(e); // "oh, no!"
+}).then(function(){
+  console.log('after a catch the chain is restored');
+}, function () {
+  console.log('Not fired due to the catch');
+});
+
+
+ +

Promis tidak dapat mendeteksi error pada asynchronous callback

+ +
var p1 = new Promise(function(resolve, reject) {
+  throw 'Uh-oh!';
+});
+
+p1.catch(function(e) {
+  console.log(e); // "Uh-oh!"
+});
+
+
+var p2 = new Promise(function(resolve, reject) {
+  setTimeout(function() {
+    throw 'Uncaught Exception!';
+  }, 1000);
+});
+
+p2.catch(function(e) {
+  console.log(e); // This is never called
+});
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}{{Spec2('ES6')}}Initial definition in an ECMA standard.
{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +

 

+ + + +

{{Compat("javascript.builtins.Promise.catch")}}

+ +

 

+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/promise/index.html b/files/id/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..240915ba23 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,317 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +tags: + - ECMAScript6 + - JavaScript + - NeedsTranslation + - Promise + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +
{{JSRef}}
+ +

The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future.

+ +

Syntax

+ +
new Promise( /* executor */ function(resolve, reject) { ... } );
+ +

Parameters

+ +
+
executor
+
A function that will be passed to other functions via the arguments resolve and reject. The executor function is executed immediately by the Promise implementation which provides the resolve and reject functions (the executor is called before the Promise constructor even returns the created object). The resolve and reject functions are bound to the promise and calling them fulfills or rejects the promise, respectively. The executor is expected to initiate some asynchronous work and then, once that completes, call either the resolve or reject function to resolve the promise's final value or else reject it if an error occurred.
+
+ +

Description

+ +

A Promise represents a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers to an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of the final value, the asynchronous method returns a promise of having a value at some point in the future.

+ +

A Promise is in one of these states:

+ + + +

A pending promise can become either fulfilled with a value, or rejected with a reason (error). When either of these happens, the associated handlers queued up by a promise's then method are called. (If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.)

+ +

As the {{jsxref("Promise.then", "Promise.prototype.then()")}} and {{jsxref("Promise.catch", "Promise.prototype.catch()")}} methods return promises, they can be chained—an operation called composition.

+ +

+ +
+

Note: A promise is said to be settled if it is either fulfilled or rejected, but not pending. You will also hear the term resolved used with promises — this means that the promise is settled, or it is locked into a promise chain. Domenic Denicola's States and fates contains more details about promise terminology.

+
+ +

Properties

+ +
+
Promise.length
+
Length property whose value is 1 (number of constructor arguments).
+
{{jsxref("Promise.prototype")}}
+
Represents the prototype for the Promise constructor.
+
+ +

Methods

+ +
+
{{jsxref("Promise.all", "Promise.all(iterable)")}}
+
Returns a promise that either resolves when all of the promises in the iterable argument have resolved or rejects as soon as one of the promises in the iterable argument rejects. If the returned promise resolves, it is resolved with an array of the values from the resolved promises in the iterable. If the returned promise rejects, it is rejected with the reason from the promise in the iterable that rejected. This method can be useful for aggregating results of multiple promises together.
+
{{jsxref("Promise.race", "Promise.race(iterable)")}}
+
Returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, with the value or reason from that promise.
+
+ +
+
{{jsxref("Promise.reject", "Promise.reject(reason)")}}
+
Returns a Promise object that is rejected with the given reason.
+
+ +
+
{{jsxref("Promise.resolve", "Promise.resolve(value)")}}
+
Returns a Promise object that is resolved with the given value. If the value is a thenable (i.e. has a then method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value. Generally, if you want to know if a value is a promise or not - {{jsxref("Promise.resolve", "Promise.resolve(value)")}} it instead and work with the return value as a promise.
+
+ +

Promise prototype

+ +

Properties

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}

+ +

Methods

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}

+ +

Examples

+ +

Creating a Promise

+ + + +

This small example shows the mechanism of a Promise. The testPromise() method is called each time the {{HTMLElement("button")}} is clicked. It creates a promise that will resolve, using {{domxref("window.setTimeout()")}}, to the promise count (number starting from 1) every 1-3 seconds, at random. The Promise() constructor is used to create the promise.

+ +

The fulfillment of the promise is simply logged, via a fulfill callback set using {{jsxref("Promise.prototype.then()","p1.then()")}}. A few logs shows how the synchronous part of the method is decoupled of the asynchronous completion of the promise.

+ +
'use strict';
+var promiseCount = 0;
+
+function testPromise() {
+    var thisPromiseCount = ++promiseCount;
+
+    var log = document.getElementById('log');
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') Started (<small>Sync code started</small>)<br/>');
+
+    // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s)
+    var p1 = new Promise(
+        // The resolver function is called with the ability to resolve or
+        // reject the promise
+        function(resolve, reject) {
+            log.insertAdjacentHTML('beforeend', thisPromiseCount +
+                ') Promise started (<small>Async code started</small>)<br/>');
+            // This is only an example to create asynchronism
+            window.setTimeout(
+                function() {
+                    // We fulfill the promise !
+                    resolve(thisPromiseCount);
+                }, Math.random() * 2000 + 1000);
+        }
+    );
+
+    // We define what to do when the promise is resolved/fulfilled with the then() call,
+    // and the catch() method defines what to do if the promise is rejected.
+    p1.then(
+        // Log the fulfillment value
+        function(val) {
+            log.insertAdjacentHTML('beforeend', val +
+                ') Promise fulfilled (<small>Async code terminated</small>)<br/>');
+        })
+    .catch(
+        // Log the rejection reason
+        function(reason) {
+            console.log('Handle rejected promise ('+reason+') here.');
+        });
+
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') Promise made (<small>Sync code terminated</small>)<br/>');
+}
+ + + +

This example is executed when clicking the button. You need a browser supporting Promise. By clicking several times the button in a short amount of time, you'll even see the different promises being fulfilled one after the other.

+ +

{{EmbedLiveSample("Creating_a_Promise", "500", "200")}}

+ +

Example using new XMLHttpRequest()

+ +

Creating a Promise

+ +

This example shows the implementation of a method which uses a Promise to report the success or failure of an {{domxref("XMLHttpRequest")}}.

+ +
'use strict';
+
+// A-> $http function is implemented in order to follow the standard Adapter pattern
+function $http(url){
+
+  // A small example of object
+  var core = {
+
+    // Method that performs the ajax request
+    ajax : function (method, url, args) {
+
+      // Creating a promise
+      var promise = new Promise( function (resolve, reject) {
+
+        // Instantiates the XMLHttpRequest
+        var client = new XMLHttpRequest();
+        var uri = url;
+
+        if (args && (method === 'POST' || method === 'PUT')) {
+          uri += '?';
+          var argcount = 0;
+          for (var key in args) {
+            if (args.hasOwnProperty(key)) {
+              if (argcount++) {
+                uri += '&';
+              }
+              uri += encodeURIComponent(key) + '=' + encodeURIComponent(args[key]);
+            }
+          }
+        }
+
+        client.open(method, uri);
+        client.send();
+
+        client.onload = function () {
+          if (this.status >= 200 && this.status < 300) {
+            // Performs the function "resolve" when this.status is equal to 2xx
+            resolve(this.response);
+          } else {
+            // Performs the function "reject" when this.status is different than 2xx
+            reject(this.statusText);
+          }
+        };
+        client.onerror = function () {
+          reject(this.statusText);
+        };
+      });
+
+      // Return the promise
+      return promise;
+    }
+  };
+
+  // Adapter pattern
+  return {
+    'get' : function(args) {
+      return core.ajax('GET', url, args);
+    },
+    'post' : function(args) {
+      return core.ajax('POST', url, args);
+    },
+    'put' : function(args) {
+      return core.ajax('PUT', url, args);
+    },
+    'delete' : function(args) {
+      return core.ajax('DELETE', url, args);
+    }
+  };
+};
+// End A
+
+// B-> Here you define its functions and its payload
+var mdnAPI = 'https://developer.mozilla.org/en-US/search.json';
+var payload = {
+  'topic' : 'js',
+  'q'     : 'Promise'
+};
+
+var callback = {
+  success : function(data){
+     console.log(1, 'success', JSON.parse(data));
+  },
+  error : function(data){
+     console.log(2, 'error', JSON.parse(data));
+  }
+};
+// End B
+
+// Executes the method call
+$http(mdnAPI)
+  .get(payload)
+  .then(callback.success)
+  .catch(callback.error);
+
+// Executes the method call but an alternative way (1) to handle Promise Reject case
+$http(mdnAPI)
+  .get(payload)
+  .then(callback.success, callback.error);
+
+// Executes the method call but an alternative way (2) to handle Promise Reject case
+$http(mdnAPI)
+  .get(payload)
+  .then(callback.success)
+  .then(undefined, callback.error);
+
+ +

Loading an image with XHR

+ +

Another simple example using Promise and XMLHttpRequest to load an image is available at the MDN GitHub promise-test repository. You can also see it in action. Each step is commented and allows you to follow the Promise and XHR architecture closely.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-promise-objects', 'Promise')}}{{Spec2('ES6')}}Initial definition in an ECMA standard.
{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +

 

+ +
+ + +

{{Compat("javascript.builtins.Promise")}}

+
+ +

 

+ +

See also

+ + diff --git a/files/id/web/javascript/reference/global_objects/promise/reject/index.html b/files/id/web/javascript/reference/global_objects/promise/reject/index.html new file mode 100644 index 0000000000..180fcc5571 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/reject/index.html @@ -0,0 +1,81 @@ +--- +title: Promise.reject() +slug: Web/JavaScript/Reference/Global_Objects/Promise/reject +tags: + - ECMAScript6 + - Method + - Promise + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject +--- +
{{JSRef}}
+ +

Method Promise.reject(reason) mengembalikan objek Promise yang ditolak dengan alasan yang diberikan.

+ +

Sintaks

+ +
Promise.reject(reason);
+ +

Parameter

+ +
+
reason
+
Alasan kenapa Promise ditolak.
+
+ +

Deskripsi

+ +

Fungsi static Promise.reject mengembalikan Promise yang ditolak. Untuk keperluan debugging dan seleksi penankapan error, sangat berguna untuk membuat reason pada instanceof {{jsxref("Error")}}.

+ +

Contoh

+ +

Penggunaan mthod static Promise.reject()

+ +
Promise.reject("Testing static reject").then(function(reason) {
+  // not called
+}, function(reason) {
+  console.log(reason); // "Testing static reject"
+});
+
+Promise.reject(new Error("fail")).then(function(error) {
+  // not called
+}, function(error) {
+  console.log(error); // Stacktrace
+});
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-promise.reject', 'Promise.reject')}}{{Spec2('ES6')}}Initial definition in an ECMA standard.
{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ + + +

{{Compat("javascript.builtins.Promise.reject")}}

+ +

 

+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/promise/resolve/index.html b/files/id/web/javascript/reference/global_objects/promise/resolve/index.html new file mode 100644 index 0000000000..d958ab4d52 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/resolve/index.html @@ -0,0 +1,140 @@ +--- +title: Promise.resolve() +slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve +tags: + - ECMAScript6 + - JavaScript + - Method + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve +--- +
{{JSRef}}
+ +

Method Promise.resolve(value) mengembalikan objek {{jsxref("Promise.then")}} yang diselesaikan dengan nilai yang diberikan. jika nilainya thenable (mis. memiliki {{jsxref("Promise.then", "\"then\" method")}}), promise yang dikembalikan akan "mengikuti" thenable-nya, menggunakan keadaan ini; sebaliknya promise akan dikembalikan sesuai nilai yang terpenuhi.

+ +

Sintaks

+ +
Promise.resolve(value);
+Promise.resolve(promise);
+Promise.resolve(thenable);
+
+ +

Parameter

+ +
+
value
+
Argumen untuk diselesaikan oleh Promise. Dapat juga sebuah Promise atau thenable untuk diselesaikan.
+
+ +

Deskripsi

+ +

Fungsi statis Promise.resolve mengembalikan Promise yang terselesaikan.

+ +

Contoh

+ +

Penggunaan method static Promise.resolve

+ +
Promise.resolve("Success").then(function(value) {
+  console.log(value); // "Success"
+}, function(value) {
+  // not called
+});
+
+ +

Penyelesaian pada array

+ +
var p = Promise.resolve([1,2,3]);
+p.then(function(v) {
+  console.log(v[0]); // 1
+});
+
+ +

Penyelesaian pada Promise lain

+ +
var original = Promise.resolve(true);
+var cast = Promise.resolve(original);
+cast.then(function(v) {
+  console.log(v); // true
+});
+
+ +

Penyelesaian thenables dan throwing Errors

+ +
// Resolving a thenable object
+var p1 = Promise.resolve({
+  then: function(onFulfill, onReject) { onFulfill("fulfilled!"); }
+});
+console.log(p1 instanceof Promise) // true, object casted to a Promise
+
+p1.then(function(v) {
+    console.log(v); // "fulfilled!"
+  }, function(e) {
+    // not called
+});
+
+// Thenable throws before callback
+// Promise rejects
+var thenable = { then: function(resolve) {
+  throw new TypeError("Throwing");
+  resolve("Resolving");
+}};
+
+var p2 = Promise.resolve(thenable);
+p2.then(function(v) {
+  // not called
+}, function(e) {
+  console.log(e); // TypeError: Throwing
+});
+
+// Thenable throws after callback
+// Promise resolves
+var thenable = { then: function(resolve) {
+  resolve("Resolving");
+  throw new TypeError("Throwing");
+}};
+
+var p3 = Promise.resolve(thenable);
+p3.then(function(v) {
+  console.log(v); // "Resolving"
+}, function(e) {
+  // not called
+});
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-promise.resolve', 'Promise.resolve')}}{{Spec2('ES6')}}Initial definition in an ECMA standard.
{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +

 

+ + + +

{{Compat("javascript.builtins.Promise.resolve")}}

+ +

 

+ +

See also

+ + diff --git a/files/id/web/javascript/reference/global_objects/promise/then/index.html b/files/id/web/javascript/reference/global_objects/promise/then/index.html new file mode 100644 index 0000000000..5a1e275c8c --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/promise/then/index.html @@ -0,0 +1,132 @@ +--- +title: Promise.prototype.then() +slug: Web/JavaScript/Reference/Global_Objects/Promise/then +tags: + - ECMAScript6 + - JavaScript + - Method + - Promise + - Prototype + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then +--- +
{{JSRef}}
+ +

Method then() mengembalikan {{domxref("Promise")}}. Menggunakan dua argumen: fungsi callback untuk kasus sukses dan gagal pada Promise.

+ +

Sintaks

+ +
p.then(onFulfilled, onRejected);
+
+p.then(function(value) {
+   // fulfillment
+  }, function(reason) {
+  // rejection
+});
+
+ +

Parameter

+ +
+
onFulfilled
+
{{jsxref("Function")}} dipanggil ketika Promise dipenuhi. Fungsi ini memiliki satu argumen, value pemenuhan.
+
onRejected
+
{{jsxref("Function")}} dipangil ketika Promise ditolak. fungsi ini memiliki satau argumen, alasan penolakan.
+
+ +

Deskripsi

+ +

Kedua method then dan {{jsxref("Promise.prototype.catch()")}} megembalikan promis, juga dapat dirantaikan — operasi yang disebut composition.

+ +

Contoh

+ +

Meggunakan method then

+ +
var p1 = new Promise(function(resolve, reject) {
+  resolve("Success!");
+  // or
+  // reject ("Error!");
+});
+
+p1.then(function(value) {
+  console.log(value); // Success!
+}, function(reason) {
+  console.log(reason); // Error!
+});
+
+ +

Perantaian

+ +

Karena method then mengembalikan Promise, anda bisa merantaikan pemanggilan then.

+ +
var p2 = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+  return value + 1;
+}).then(function(value) {
+  console.log(value); // 2
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+});
+
+ +

Anda juga bisa menggunakan perantaian untuk melaksanakan satu fungsi dengan sebuah Promise berbasis API diatas fungsi lainnya.

+ +
function fetch_current_data() {
+  // The fetch() API returns a Promise.  This function
+  // exposes a similar API, except the fulfillment
+  // value of this function's Promise has had more
+  // work done on it.
+  return fetch("current-data.json").then((response) => {
+    if (response.headers.get("content-type") != "application/json") {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // maybe do something with j
+    return j; // fulfillment value given to user of
+              // fetch_current_data().then()
+  });
+}
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-promise.prototype.then', 'Promise.prototype.then')}}{{Spec2('ES6')}}Initial definition in an ECMA standard.
{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ + + +

{{Compat("javascript.builtins.Promise.then")}}

+ +

 

+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/regexp/index.html b/files/id/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..8bd6dce4b9 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,231 @@ +--- +title: RegExp +slug: Web/JavaScript/Reference/Global_Objects/RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +
{{JSRef}}

The RegExpobjek digunakan untuk pencocokan teks dengan pola.

+ +

Untuk pengantar ekspresi reguler, baca bab Ekspresi Reguler di Panduan JavaScript .

+ +

Deskripsi

+ +

Notasi dan konstruktor literal

+ +

Ada dua cara untuk membuat RegExpobjek: notasi literal dan konstruktor .

+ + + +

Tiga ekspresi berikut membuat ekspresi reguler yang sama:

+ +
/ab+c/i
+new RegExp(/ab+c/, 'i') // literal notation
+new RegExp('ab+c', 'i') // constructor
+
+ +

Notasi literal menghasilkan kompilasi dari ekspresi reguler ketika ekspresi dievaluasi. Gunakan notasi literal ketika ekspresi reguler akan tetap konstan. Misalnya, jika Anda menggunakan notasi literal untuk membuat ekspresi reguler yang digunakan dalam satu lingkaran, ekspresi reguler tidak akan dikompilasi ulang pada setiap iterasi.

+ +

Konstruktor objek ekspresi reguler — misalnya, new RegExp('ab+c')—menghasilkan kompilasi runtime dari ekspresi reguler. Gunakan fungsi konstruktor ketika Anda tahu pola ekspresi reguler akan berubah, atau Anda tidak tahu pola dan mendapatkannya dari sumber lain, seperti input pengguna.

+ +

Bendera dalam konstruktor

+ +

Dimulai dengan ECMAScript 6, new RegExp(/ab+c/, 'i')tidak lagi melempar a TypeError( "can't supply flags when constructing one RegExp from another") ketika argumen pertama adalah a RegExpdan flagsargumen kedua hadir. Sebagai RegExpgantinya, argumen baru dibuat.

+ +

Saat menggunakan fungsi konstruktor, aturan pelolosan string normal (mendahului karakter khusus \ketika disertakan dalam string) diperlukan.

+ +

Misalnya, yang berikut ini setara:

+ +
let re = /\w+/
+let re = new RegExp('\\w+')
+
+ +

Properti Reg-suka seperti Perl

+ +

Perhatikan bahwa beberapa RegExpproperti memiliki nama panjang dan pendek (seperti Perl). Kedua nama selalu merujuk pada nilai yang sama. (Perl adalah bahasa pemrograman tempat JavaScript memodelkan ekspresi regulernya.). Lihat juga properti yang sudah usang RegExp.

+ +

Konstruktor

+ +
+
RegExp()
+
Menciptakan RegExpobjek baru .
+
+ +

Sifat statis

+ +
+
get RegExp[@@species]
+
The constructor function that is used to create derived objects.
+
RegExp.lastIndex
+
The index at which to start the next match.
+
+ +

Instance properties

+ +
+
RegExp.prototype.flags
+
A string that contains the flags of the RegExp object.
+
RegExp.prototype.dotAll
+
Whether . matches newlines or not.
+
RegExp.prototype.global
+
Whether to test the regular expression against all possible matches in a string, or only against the first.
+
RegExp.prototype.ignoreCase
+
Whether to ignore case while attempting a match in a string.
+
RegExp.prototype.multiline
+
Whether or not to search in strings across multiple lines.
+
RegExp.prototype.source
+
The text of the pattern.
+
RegExp.prototype.sticky
+
Whether or not the search is sticky.
+
RegExp.prototype.unicode
+
Whether or not Unicode features are enabled.
+
+ +

Instance methods

+ +
+
RegExp.prototype.compile()
+
(Re-)compiles a regular expression during execution of a script.
+
RegExp.prototype.exec()
+
Executes a search for a match in its string parameter.
+
RegExp.prototype.test()
+
Tests for a match in its string parameter.
+
RegExp.prototype.toString()
+
Returns a string representing the specified object. Overrides the Object.prototype.toString() method.
+
RegExp.prototype[@@match]()
+
Performs match to given string and returns match result.
+
RegExp.prototype[@@matchAll]()
+
Returns all matches of the regular expression against a string.
+
RegExp.prototype[@@replace]()
+
Replaces matches in given string with new substring.
+
RegExp.prototype[@@search]()
+
Searches the match in given string and returns the index the pattern found in the string.
+
RegExp.prototype[@@split]()
+
Splits given string into an array by separating the string into substring.
+
+ +

Examples

+ +

Using a regular expression to change data format

+ +

The following script uses the replace() method of the String instance to match a name in the format first last and output it in the format last, first.

+ +

In the replacement text, the script uses $1 and $2 to indicate the results of the corresponding matching parentheses in the regular expression pattern.

+ +
let re = /(\w+)\s(\w+)/
+let str = 'John Smith'
+let newstr = str.replace(re, '$2, $1')
+console.log(newstr)
+
+ +

This displays "Smith, John".

+ +

Using regular expression to split lines with different line endings/ends of line/line breaks

+ +

The default line ending varies depending on the platform (Unix, Windows, etc.). The line splitting provided in this example works on all platforms.

+ +
let text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end'
+let lines = text.split(/\r\n|\r|\n/)
+console.log(lines) // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ]
+
+ +

Note that the order of the patterns in the regular expression matters.

+ +

Using regular expression on multiple lines

+ +
let s = 'Please yes\nmake my day!'
+
+s.match(/yes.*day/);
+// Returns null
+
+s.match(/yes[^]*day/);
+// Returns ["yes\nmake my day"]
+
+ +

Using a regular expression with the sticky flag

+ +

The sticky flag indicates that the regular expression performs sticky matching in the target string by attempting to match starting at RegExp.prototype.lastIndex.

+ +
let str = '#foo#'
+let regex = /foo/y
+
+regex.lastIndex = 1
+regex.test(str)      // true
+regex.lastIndex = 5
+regex.test(str)      // false (lastIndex is taken into account with sticky flag)
+regex.lastIndex      // 0 (reset after match failure)
+ +

The difference between the sticky flag and the global flag

+ +

With the sticky flag y, the next match has to happen at the lastIndex position, while with the global flag g, the match can happen at the lastIndex position or later:

+ +
re = /\d/y;
+while (r = re.exec("123 456")) console.log(r, "AND re.lastIndex", re.lastIndex);
+
+// [ '1', index: 0, input: '123 456', groups: undefined ] AND re.lastIndex 1
+// [ '2', index: 1, input: '123 456', groups: undefined ] AND re.lastIndex 2
+// [ '3', index: 2, input: '123 456', groups: undefined ] AND re.lastIndex 3
+//   ... and no more match.
+ +

With the global flag g, all 6 digits would be matched, not just 3.

+ +

Regular expression and Unicode characters

+ +

As mentioned above, \w or \W only matches ASCII based characters; for example, a to z, A to Z, 0 to 9, and _.

+ +

To match characters from other languages such as Cyrillic or Hebrew, use \uhhhh, where hhhh is the character's Unicode value in hexadecimal.

+ +

This example demonstrates how one can separate out Unicode characters from a word.

+ +
let text = 'Образец text на русском языке'
+let regex = /[\u0400-\u04FF]+/g
+
+let match = regex.exec(text)
+console.log(match[0])        // logs 'Образец'
+console.log(regex.lastIndex) // logs '7'
+
+let match2 = regex.exec(text)
+console.log(match2[0])       // logs 'на' [did not log 'text']
+console.log(regex.lastIndex) // logs '15'
+
+// and so on
+
+ +

The Unicode property escapes feature introduces a solution, by allowing for a statement as simple as \p{scx=Cyrl}. One can also use an external resource for getting the complete Unicode block range for different scripts, such as Regexp-Unicode-block.

+ +

Extracting sub-domain name from URL

+ +
let url = 'http://xxx.domain.com'
+console.log(/[^.]+/.exec(url)[0].substr(7)) // logs 'xxx'
+
+ +

Instead of using regular expressions for parsing URLs, it is usually better to use the browsers built-in URL parser by using the URL API.

+ +

Specifications

+ + + + + + + + + + + + +
Specification
ECMAScript (ECMA-262)
+ The definition of 'RegExp' in that specification.
+ +

Browser compatibility

+ +

{{Compat("javascript.builtins.RegExp")}}

+ +

See also

+ + diff --git a/files/id/web/javascript/reference/global_objects/string/concat/index.html b/files/id/web/javascript/reference/global_objects/string/concat/index.html new file mode 100644 index 0000000000..0ba2b2a156 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/concat/index.html @@ -0,0 +1,134 @@ +--- +title: String.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/String/concat +tags: + - JavaScript + - Referensi + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/concat +--- +
{{JSRef}}
+ +

Method concat() menggabungkan dua teks atau lebih menjadi sebuah string baru.

+ +

Syntax

+ +
str.concat(string2, string3[, ..., stringN])
+ +

Parameter

+ +
+
string2...stringN
+
String untuk menggabungkan string.
+
+ +

Deskripsi

+ +

Fungsi concat() menggabungkan teks dari satu atau lebih string dan mengembalikanya menjadi sebuah string. Perubahan pada salah satu teks tidak mempengaruhi string lainnya.

+ +

Contoh

+ +

Penggunaan concat()

+ +

Untuk menggabungkan string menjadi sebuah string baru seperti pada contoh dibawah.

+ +
var halo = 'Halo, ';
+console.log(halo.concat('Didik', ' semoga hari ini menyenangkan.'));
+
+/* Halo, Didik semoga hari ini menyenangkan. */
+
+ +

Performa

+ +

Sangat disarankan untuk menggunakan {{jsxref("Operators/Assignment_Operators", "assignment operators", "", 1)}} (+, +=) pada method concat(). lihat test performa berikut ini.

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome untuk AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/id/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/id/web/javascript/reference/global_objects/string/fromcharcode/index.html new file mode 100644 index 0000000000..786e32883e --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/fromcharcode/index.html @@ -0,0 +1,143 @@ +--- +title: String.fromCharCode() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +tags: + - JavaScript + - Method + - Metode + - Reference + - Referensi + - String + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +--- +
{{JSRef}}
+ +

Metode statis String.fromCharCode() mengembalikan sebuah string yang dibuat dari barisan nilai Unicode tertentu.

+ +

Sintak

+ +
String.fromCharCode(num1[, ...[, numN]])
+ +

Parameter

+ +
+
num1, ..., numN
+
Barisan dari angka-angka yang merupakan nilai Unicode.Jangkauannya antara 0 sampai dengan 65535(0xFFFF).Nomor yang lebih besar dari 0xFFFF dipotong.Tidak ada cek validasi yang dilakukan.   
+
+ +

Nilai kembalian

+ +

Sebuah string yang di dalamnya terdapat karakter-karakter sesuai nilai Unicode dari barisan angka yang diberikan.

+ +

Deskripsi

+ +

Metode ini mengembalikan sebuah string dan bukan objek {{jsxref("String")}}.

+ +

Karena fromCharCode() merupakan metode statis dari {{jsxref("String")}}, Anda selalu bisa menggunakannya sebagai String.fromCharCode(), daripada sebagai metode dari objek {{jsxref("String")}} yang Anda buat.

+ +

Contoh

+ +

Menggunakan fromCharCode()

+ +

Contoh di bawah ini mengembalikan string "ABC".

+ +
String.fromCharCode(65, 66, 67);  // "ABC"
+
+ +

Membuatnya bekerja dengan nilai yang lebih tinggi

+ +

Meskipu nilai Unicode yang umum dapat digambarkan dengan satu angka 16-bit (seperti yang diharapkan pada awal mula standarisasi JavaScript) dan fromCharCode() dapat digunakan untuk mengembalikan sebuah karakter dari nilai yang paling umum (misal. nilai UCS-2 yang merupakan bagian dari UTF-16 dengan karakter yang paling umum digunakan). Untuk menghadapi SEMUA nilai Unicode yang sah (hingga 21 bit), fromCharCode() sendiri tidak dapat menghadapinya. Semenjak nilai code point karakter yang lebih tinggi menggunakan dua angka "pengganti"  (dengan nilai yang lebih rendah) untuk membuat sebuah karakter tunggal, {{jsxref("String.fromCodePoint()")}} (bagian dari draf ES6) dapat digunakan untuk menggunakan sepasang angka tersebut, sehingga dapat menampilkan karakter dengan nilai yang lebih tinggi.

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ES1')}}{{Spec2('ES1')}}Definisi awal. Diimplementasikan dalam JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}{{Spec2('ESDraft')}}
+ +

Kompabilitas peramban

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/id/web/javascript/reference/global_objects/string/fromcodepoint/index.html new file mode 100644 index 0000000000..dc4024f941 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/fromcodepoint/index.html @@ -0,0 +1,149 @@ +--- +title: String.fromCodePoint() +slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +tags: + - ECMAScript 2015 + - JavaScript + - Metode + - Referensi + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +--- +
{{JSRef}}
+ +

Metode String.fromCodePoint() mengembalikan string yang dibuat dengan menggunakan urutan titik kode yang ditentukan.

+ +
{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html")}}
+ + + +

Syntax

+ +
String.fromCodePoint(num1[, ...[, numN]])
+ +

Parameters

+ +
+
num1, ..., numN
+
Urutan Poin Kode
+
+ +

Return value

+ +

String yang dibuat dengan menggunakan urutan titik kode yang ditentukan.

+ +

Exceptions

+ + + +

Description

+ +

Metode ini mengembalikan string dan bukan sebuah objek. {{jsxref("String")}} .

+ +

Karena fromCodePoint() adalah metode statik dari {{jsxref("String")}}, dan anda selalu menggunakannya sebagai String.fromCodePoint(), alih-alih sebagai sebuah metode yang anda buat {{jsxref("String")}}

+ +

Examples

+ +

Using fromCodePoint()

+ +
String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+
+String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError
+
+ +
// String.fromCharCode() sendiri tidak bisa mendapatkan karakter pada titik kode tinggi seperti itu
+// Disisi lain, dapat juga mengembalikan karakter 4-byte dan juga
+// yang biasa 2-byte (i.e., dapat mengembalikan satu karakter yang sebenarnya sudah dimiliki
+// string 2 daripada 1!)
+console.log(String.fromCodePoint(0x2F804)); // atau 194564 dalam bilangan desimal
+
+ +

Polyfill

+ +

Metode String.fromCodePoint telah ditambahkan ke ECMAScript 2015 dan mungkin belum didukung di semua browser web atau lingkungannya. Gunakan kode dibawah ini untuk polyfill:

+ +
if (!String.fromCodePoint) (function(stringFromCharCode) {
+    var fromCodePoint = function(_) {
+      var codeUnits = [], codeLen = 0, result = "";
+      for (var index=0, len = arguments.length; index !== len; ++index) {
+        var codePoint = +arguments[index];
+        // correctly handles all cases including `NaN`, `-Infinity`, `+Infinity`
+        // The surrounding `!(...)` is required to correctly handle `NaN` cases
+        // The (codePoint>>>0) === codePoint clause handles decimals and negatives
+        if (!(codePoint < 0x10FFFF && (codePoint>>>0) === codePoint))
+          throw RangeError("Invalid code point: " + codePoint);
+        if (codePoint <= 0xFFFF) { // BMP code point
+          codeLen = codeUnits.push(codePoint);
+        } else { // Astral code point; split in surrogate halves
+          // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          codePoint -= 0x10000;
+          codeLen = codeUnits.push(
+            (codePoint >> 10) + 0xD800,  // highSurrogate
+            (codePoint % 0x400) + 0xDC00 // lowSurrogate
+          );
+        }
+        if (codeLen >= 0x3fff) {
+          result += stringFromCharCode.apply(null, codeUnits);
+          codeUnits.length = 0;
+        }
+      }
+      return result + stringFromCharCode.apply(null, codeUnits);
+    };
+    try { // IE 8 only supports `Object.defineProperty` on DOM elements
+      Object.defineProperty(String, "fromCodePoint", {
+        "value": fromCodePoint, "configurable": true, "writable": true
+      });
+    } catch(e) {
+      String.fromCodePoint = fromCodePoint;
+    }
+}(String.fromCharCode));
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}{{Spec2('ES2015')}}Definisi Awal
{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.String.fromCodePoint")}}

+ +

See also

+ + diff --git a/files/id/web/javascript/reference/global_objects/string/index.html b/files/id/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..35f78502d5 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,371 @@ +--- +title: String +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript6 + - JavaScript + - Reference + - Referensi + - Referensı(2) + - Référence(2) + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +
{{JSRef("Global_Objects", "String")}}
+ +

Ringkasan

+ +

Objek global String adalah sebuah pembangun untuk string, atau sebuah rangkaian dari karakter.

+ +

Sintak

+ +

String secara harfiah berbentuk:

+ +
'string text'
+"string text"
+"中文 español English हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ்"
+
+ +

Sejak ECMAScript 6 String secara harfiah dapat juga menjadi Template Strings:

+ +
`hello world`
+`hello!
+ world!`
+`hello ${who}`
+escape `<a>${who}</a>`
+ +

Selain karakter biasa yang dapat dicetak, karakter spesial dapat disandikan dengan notasi lepas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KodeKeluaran
\0karakter NUL
\'petik satu
\"petik dua
\\garis miring
\nbaris baru
\rcarriage return
\vtab vertikal
\ttab
\bbackspace
\fform feed
\uXXXXunicode codepoint
\u{X} ... \u{XXXXXX}unicode codepoint {{experimental_inline}}
\xXXkarakter Latin-1
+ +

Atau, menggunakan objek global String langsung:

+ +
String(benda)
+new String(benda)
+
+ +

Parameter

+ +
+
benda
+
Apapun yang akan diubah ke string.
+
+ +

Deskripsi

+ +

String berguna untuk membawa data yang dapat diitampilkan dalam bentuk teks. Beberapa operasi yang paling sering digunakan dalam string adalah untuk memeriksa {{jsxref("String.length", "panjangnya")}}, untuk membuat dan menggabungkannya dengan operator string + dan +=, mengecek adanya atau lokasi dari substring dengan metode {{jsxref("String.prototype.indexOf()", "indexOf()")}}, atau mendapatkan substring dengan metode {{jsxref("String.prototype.substring()", "substring()")}}.

+ +

Akses karakter

+ +

Ada dua cara untuk mengakses sebuah karakter dalam string. Cara yang pertama adalah metode {{jsxref("String.prototype.charAt()", "charAt()")}}:

+ +
return 'cat'.charAt(1); // mengembalikan "a"
+
+ +

Cara yang lain (diperkenalkan dalam ECMAScript 5) adalah menganggap string sebagai objek mirip-susunan, di mana setiap karakter disesuaikan dengan indeks angka:

+ +
return 'cat'[1]; // mengembalikan "a"
+
+ +

Untuk akses karakter dengan menggunakan notasi kurung, mencoba untuk menghapus atau menetapkan nilai ke propertinya tidak akan berhasil. Properti yang terlibat tidak dapat ditulis maupun diubah. (Lihat {{jsxref("Object.defineProperty()")}} untuk informasi lebih.)

+ +

Membandingkan string

+ +

Pengembang C mempunyai fungsi strcmp() untuk membandingkan string. Dalam JavaScript, Anda cukup menggunakan operas kurang dari dan lebih dari:

+ +
var a = 'a';
+var b = 'b';
+if (a < b) { // benar
+  print(a + ' kurang dari ' + b);
+} else if (a > b) {
+  print(a + ' lebih dari ' + b);
+} else {
+  print(a + ' sama dengan ' + b);
+}
+
+ +

Hasil yang serupa dapat didapatkan dengan metode {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} yang diwariskan oleh benda String.

+ +

Perbedaan antara string primitif dan objek String

+ +

Ingat bahwa JavaScript membedakan nilai antara objek String dan string primitif. (Serupa dengan {{jsxref("Global_Objects/Boolean", "Boolean")}} dan {{jsxref("Global_Objects/Number", "Angka")}}.)

+ +

String yang harfiah (ditandai dengan petik satu atau dua) dan string yang dikembalikan dari panggilan String dalam sebuah konteks non-pembangun (misal, tanpa menggunakan kata kunci {{jsxref("Operators/new", "new")}}) adalah string primitif. JavaScript secara otomatis mengubah primitif ke objek String, jadi mungkin untuk menggunakan metode objek String untuk string primitif. Dalam konteks di mana sebuah metode dipanggil pada string primitif atau sebuah pembacaan properti terjadi, JavaScript akan secara otomatis membungkus string primitif dan memanggil metode tersebut atau melakukan pembacaan properti.

+ +
var s_prim = 'foo';
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // "string"
+console.log(typeof s_obj);  // "object"
+
+ +

String primitif dan objek String juga memberikan hasil berbeda saat menggunakan {{jsxref("Global_Objects/eval", "eval()")}}. Primitif melewati eval sebagai kode sumber; Objek String dianggap semua objek lain, dengan mengembalikan objek tersebut. Sebagai contoh:

+ +
var s1 = '2 + 2';             // membuat sebuah string primitif
+var s2 = new String('2 + 2'); // membuat sebuah objek String
+console.log(eval(s1));        // mengembalikan angka 4
+console.log(eval(s2));        // mengembalikan string "2 + 2"
+
+ +

Untuk itu, kode mungkin berhenti saat menemui objek String saat mengharapkan string primitif, meskipun secara umum pembuat tidak perlu khawatir tentang perbedaannya.

+ +

Sebuah objek String dapat selalu diubah menjadi kawan primitifnya dengan metode {{jsxref("String.prototype.valueOf()", "valueOf()")}}.

+ +
console.log(eval(s2.valueOf())); // mengembalikan angka 4
+
+ +
Catatan: Untuk kemungkinan lain ke string dalam JavaScript, mohon baca artikel tentang StringView — a C-like representation of strings based on typed arrays (bahasa Inggris).
+ +

Properti

+ +
+
{{jsxref("String.prototype")}}
+
Membolehkan penambahan properti ke sebuahobjek String.
+
+ +
{{jsOverrides("Function", "Properties", "prototype")}}
+ +

Metode

+ +
+
{{jsxref("String.fromCharCode()")}}
+
Mengembalikan sebuah string yang dibuat dengan menggunakan nilai urutan Unicode.
+
{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}
+
Mengembalikan sebuah string dibuat dengan menggunakan urutan code points.
+
{{jsxref("String.raw()")}} {{experimental_inline}}
+
Mengembalikan sebuah string yang dibuat dari sebuah templat string mentah.
+
+ +
{{jsOverrides("Function", "Methods", "fromCharCode", "fromCodePoint", "raw")}}
+ +

Metode umum String

+ +

Metode benda String juga terdapat dalam Firefox sejak JavaScript 1.6 (meskipun bukan bagian dari standar ECMAScript) salam objek String untuk menerapkan metode String ke objek lain:

+ +
var num = 15;
+console.log(String.replace(num, /5/, '2'));
+
+ +

{{jsxref("Global_Objects/Array", "Metode umum", "#Metode_umum_Array", 1)}} juga terdapat dalam metode {{jsxref("Global_Objects/Array", "Array")}}.

+ +

Berikut ini sebuah pengisi untuk memberikan dukungan ke peramban yang tidak mendukung:

+ +
/*globals define*/
+// Menganggap semua metode String telah ada
+(function() {
+  'use strict';
+
+  var i,
+    methods = [
+      'quote', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase',
+      'toLocaleUpperCase', 'localeCompare', 'match', 'search',
+      'replace', 'split', 'substr', 'concat', 'slice'
+    ],
+    methodCount = methods.length,
+    assignStringGeneric = function(methodName) {
+      var method = String.prototype[methodName];
+      String[methodName] = function(arg1) {
+        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
+      };
+    };
+
+  for (i = 0; i < methodCount; i++) {
+    assignStringGeneric(methods[i]);
+  }
+}());
+
+ +

Benda String

+ +

Properti

+ +
{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properti')}}
+ +

Metode

+ +

Metode yang tidak terkait dengan HTML

+ +
{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Metode_yang_tidak_terkait_dengan_HTML')}}
+ +

Metode pembungkus HTML

+ +
{{page('/id/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Metode_pembungkus_HTML')}}
+ +

Contoh

+ +

Contoh: Pengubahan String

+ +

Ini mungkin untuk menggunakan String sebagai alternatif "lebih aman" dari {{jsxref("String.prototype.toString()", "toString()")}}, meskipun masih dapat secara normal memanggil toString(), ini juga bekerja untuk {{jsxref("Global_Objects/null", "null")}} dan {{jsxref("Global_Objects/undefined", "undefined")}}. Sebagai contoh:

+ +
var outputStrings = [];
+for (var i = 0, n = inputValues.length; i < n; ++i) {
+  outputStrings.push(String(inputValues[i]));
+}
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
ECMAScript 1st Edition.StandardDefinisi pertama.
{{SpecName('ES5.1', '#sec-15.5', 'String')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string-objects', 'String')}}{{Spec2('ES6')}} 
+ +

Kompatibilitas peramban

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatChrome("0.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
\u{XXXXXX}{{CompatUnknown()}}{{CompatGeckoDesktop("40")}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
\u{XXXXXX}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("40")}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/string/indexof/index.html b/files/id/web/javascript/reference/global_objects/string/indexof/index.html new file mode 100644 index 0000000000..3b7f7d0965 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/indexof/index.html @@ -0,0 +1,190 @@ +--- +title: String.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/String/indexOf +translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf +--- +
{{JSRef}}
+ +

indexOf() method mengembalikan sebuah index saat memanggil objek  {{jsxref("String")}} pertama kali dengan value yang di tentukan, bermula dari pencarian pada fromIndex. Dan pencarian ini akan mengembalikan index dari karakter pada String,  dan akan mengembalikan -1 ketika pencarian indexOf ini tak menemukan karakter yang cocok/ value yang sesuai.

+ +

Syntax

+ +
str.indexOf(searchValue[, fromIndex])
+ +

Parameters

+ +
+
searchValue
+
Sebuah string yang me-representasikan dari nilai yang ingin di cari.
+
fromIndex {{optional_inline}}
+
Index bermulai dari awal hingga bergerak ke depan sepanjang string. Index bisa berupa bilangan bulat atau apa pun. Nilai standarnya adalah 0, jadi seluruh index dari array akan dicari. Jika fromIndex < 0 seluruh string dicari. Jika fromIndex >= str.length, string tidak dicari dan -1 sebagai kembaliannya. Kecuali kalau searchValue adalah string kosong, maka str.length sebagai kembaliannya.
+
+ +

Deskripsi

+ +

Karakter dalam sebuah string di indeks berurutan dari kiri ke kanan. Index pada karakter pertama yaitu 0, dan index pada karakter terakhir dalam sebuah String di sebut stringName is stringName.length - 1.

+ +
'Blue Whale'.indexOf('Blue');     // mengembalikan  0
+'Blue Whale'.indexOf('Blute');    // mengembalikan -1
+'Blue Whale'.indexOf('Whale', 0); // mengembalikan  5
+'Blue Whale'.indexOf('Whale', 5); // mengembalikan  5
+'Blue Whale'.indexOf('', 9);      // mengembalikan  9
+'Blue Whale'.indexOf('', 10);     // mengembalikan 10
+'Blue Whale'.indexOf('', 11);     // mengembalikan 10
+
+ +

Case-sensitivity

+ +

The indexOf() method sangat case sensitive. Sebagai contoh, expression berikut ini mengembalikan -1:

+ +
'Blue Whale'.indexOf('blue'); // mengembalikan -1
+
+ +

Checking occurrences/ Memeriksa suatu kejadian

+ +

Catat bahwa  '0' tak bernilai true dan '-1' bukan bernilali false. Oleh karena-nya, ketika memeriksa apakah sebuah String  Therefore, when checking if a specific string exists within another string the correct way to check would be:

+ +
'Blue Whale'.indexOf('Blue') !== -1; // true
+'Blue Whale'.indexOf('Bloe') !== -1; // false
+
+ +

Examples

+ +

Using indexOf() and lastIndexOf()

+ +

The following example uses indexOf() and {{jsxref("String.prototype.lastIndexOf()", "lastIndexOf()")}} to locate values in the string "Brave new world".

+ +
var anyString = 'Brave new world';
+
+console.log('The index of the first w from the beginning is ' + anyString.indexOf('w'));
+// logs 8
+console.log('The index of the last w from the beginning is ' + anyString.lastIndexOf('w'));
+// logs 10
+
+console.log('The index of "new" from the beginning is ' + anyString.indexOf('new'));
+// logs 6
+console.log('The index of "new" from the end is ' + anyString.lastIndexOf('new'));
+// logs 6
+
+ +

indexOf() and case-sensitivity

+ +

The following example defines two string variables. The variables contain the same string except that the second string contains uppercase letters. The first {{domxref("console.log()")}} method displays 19. But because the indexOf() method is case sensitive, the string "cheddar" is not found in myCapString, so the second console.log() method displays -1.

+ +
var myString    = 'brie, pepper jack, cheddar';
+var myCapString = 'Brie, Pepper Jack, Cheddar';
+
+console.log('myString.indexOf("cheddar") is ' + myString.indexOf('cheddar'));
+// logs 19
+console.log('myCapString.indexOf("cheddar") is ' + myCapString.indexOf('cheddar'));
+// logs -1
+
+ +

Using indexOf() to count occurrences of a letter in a string

+ +

The following example sets count to the number of occurrences of the letter e in the string str:

+ +
var str = 'To be, or not to be, that is the question.';
+var count = 0;
+var pos = str.indexOf('e');
+
+while (pos !== -1) {
+  count++;
+  pos = str.indexOf('e', pos + 1);
+}
+
+console.log(count); // displays 4
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}{{Spec2('ESDraft')}} 
+ +

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/id/web/javascript/reference/global_objects/string/length/index.html b/files/id/web/javascript/reference/global_objects/string/length/index.html new file mode 100644 index 0000000000..6975d8b7d3 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/length/index.html @@ -0,0 +1,126 @@ +--- +title: String.length +slug: Web/JavaScript/Reference/Global_Objects/String/length +translation_of: Web/JavaScript/Reference/Global_Objects/String/length +--- +
{{JSRef}}
+ +

Properti length mewakili panjang string.

+ +

Syntax

+ +
str.length
+ +

Deskripsi

+ +

Properti ini mengembalikan jumlah unit kode dalam string. {{interwiki("wikipedia", "UTF-16")}}, Format string yang digunakan oleh javascript, Menggunakan 16-bit unit kode tunggal untuk mewakili karakter yang paling umum, tapi perlu menggunakan dua unit kode untuk unit karakter tertentu, sehingga dapat terjadi kemungkinan nilai yang dikembalikan oleh ​​​length tidak sesuai dengan jumlah karakter pada string.

+ +

Untuk string kosong, jumlahnya 0.

+ +

Properti static String.length mengembalikan nilai 1.

+ +

Contoh

+ +

Penggunaan Dasar

+ +
var x = 'Mozilla';
+var kosong = '';
+
+console.log('Mozilla memiliki ' + x.length + ' unit kode');
+/* "Mozilla memiliki 7 unit kode" */
+
+console.log('String kosong memiliki jumlah unit kode ' + kosong.length);
+/* "String kosong memiliki jumlah unit kode 0" */
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definisi Inisial. Diimplementasikan dalam JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/string/link/index.html b/files/id/web/javascript/reference/global_objects/string/link/index.html new file mode 100644 index 0000000000..914eff9955 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/link/index.html @@ -0,0 +1,130 @@ +--- +title: String.prototype.link() +slug: Web/JavaScript/Reference/Global_Objects/String/link +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/link +--- +
{{JSRef}}
+ +

Method link() membuat sebuah string seperti halnya kode untuk sebuah elemen HTML {{HTMLElement("a")}} untuk digunakan sebagai link hypertext ke URL lain.

+ +

Sintaks

+ +
str.link(url)
+ +

Parameters

+ +
+
url
+
String yang menentukan atribut href dai tag <a>; harus merupakan URL yang valid (relative ataupun absolute), dengan setiap karakter & harus ditulis &amp;, dan setiap karakter " harus ditulis &quot;.
+
+ +

Deskripsi

+ +

Menggunakan method link() untuk membuat snippet HTML untuk sebuah link hypertext. Mengembalikan string  yang kemudian dapat di tambahkan ke dokumen html menggunakan {{domxref("document.write()")}} atau {{domxref("element.innerHTML")}}.

+ +

Link yang dibuat menggunakan method link() akan menjadi elemen di array links dari sebuah objek document. Lihat juga {{domxref("document.links")}}.

+ +

Contoh

+ +

Penggunaan link()

+ +

Pada contoh berikut menampilkan kata "MDN" sebagai sebuah link hypertext yang mengembalikan pengguna ke halaman Mozilla Developer Network.

+ +
var hotText = 'MDN';
+var URL = 'https://developer.mozilla.org/';
+
+console.log('Klik untuk kembali ke ' + hotText.link(URL));
+// Klik untuk kembali ke <a href="https://developer.mozilla.org/">MDN</a>
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-string.prototype.link', 'String.prototype.link')}}{{Spec2('ES6')}}Initial definition. Implemented in JavaScript 1.0. Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers.
{{SpecName('ESDraft', '#sec-string.prototype.link', 'String.prototype.link')}}{{Spec2('ESDraft')}}Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers.
+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Catatan Gecko-specific

+ + + +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/string/purwarupa/index.html b/files/id/web/javascript/reference/global_objects/string/purwarupa/index.html new file mode 100644 index 0000000000..3570a3627a --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/purwarupa/index.html @@ -0,0 +1,221 @@ +--- +title: String.prototype +slug: Web/JavaScript/Reference/Global_Objects/String/purwarupa +tags: + - JavaScript + - Property + - Prototype + - Reference + - Referensi + - String + - purwarupa +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +
{{JSRef}}
+ +

Properti String.prototype mewakili objek prototype {{jsxref("Global_Objects/String", "String")}}.

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

Deskripsi

+ +

Semua benda {{jsxref("Global_Objects/String", "String")}} diwariskan dari String.prototype. Perubahan ke objek purwarupa String disebarkan ke semua benda {{jsxref("Global_Objects/String", "String")}}.

+ +

Properti

+ +
+
String.prototype.constructor
+
Menentukan fungsi yang membuat sebuah purwarupa dari objek.
+
{{jsxref("String.prototype.length")}}
+
Menggambarkan panjang dari string.
+
N
+
Digunakan untuk mengakses karakter pada posisi ke-N di mana N adalah sebuah bilangan bulat positif antara 0 dan nilai dari {{jsxref("String.length", "panjang")}} dikurangi satu. Nilai ini baca-saja.
+
+ +

Metode

+ +

Metode yang tidak terkait dengan HTML

+ +
+
{{jsxref("String.prototype.charAt()")}}
+
Mengembalikan karakter pada indeks yang diberikan.
+
{{jsxref("String.prototype.charCodeAt()")}}
+
Mengembalikan sebuah angka yang menggambarkan nilai Unicode dari karakter pada indeks yang diberikan.
+
{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}
+
Mengembalikan sebuah bilangan bulat non negatif yang merupakan nilai penyandian code point UTF-16 pada posisi yang diberikan.
+
{{jsxref("String.prototype.concat()")}}
+
Menggabungkan teks dari dua string dan mengembalikan sebuah string baru.
+
{{jsxref("String.prototype.includes()")}} {{experimental_inline}}
+
Menentukan apakah satu string mungkin terdapat pada string lain.
+
{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}
+
Menentukan apakah sebuah string berakhir dengan karakter dari string lain.
+
{{jsxref("String.prototype.indexOf()")}}
+
Mengembalikan indeks pada objek {{jsxref("Global_Objects/String", "String")}} terpanggil dari pertemuan pertama dari nilai yang diberikan, atau -1 jika tidak ditemukan.
+
{{jsxref("String.prototype.lastIndexOf()")}}
+
Mengembalikan indeks pada objek {{jsxref("Global_Objects/String", "String")}} terpanggil dari pertemuan terakhir dari nilai yang diberikan, atau -1 jika tidak ditemukan.
+
{{jsxref("String.prototype.localeCompare()")}}
+
Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.
+
{{jsxref("String.prototype.match()")}}
+
Digunakan untuk mencocokkan sebuah regular expression pada string.
+
{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}
+
Mengembalikan Unicode Normalization Form dari string terpanggil.
+
{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}
+
Membungkus string dalam petik ganda (""").
+
{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}
+
Mengembalikan sebuah string yang tersiri dari elemen-elemen dari objek yang diulangi sebanyak yang diberikan.
+
{{jsxref("String.prototype.replace()")}}
+
Digunakan untuk mencari kecocokkan antara sebuah regular expression dan sebuah string, dan untuk menggantikan substring yang cocok dengan substring yang baru.
+
{{jsxref("String.prototype.search()")}}
+
Menjalankan pencarian untuk sebuah kecocokan antara sebuah regular expression dan sebuah string yang diberikan.
+
{{jsxref("String.prototype.slice()")}}
+
Menghasilkan sebuah bagian dari string dan mengembalikan sebuah string baru.
+
{{jsxref("String.prototype.split()")}}
+
Memisahkan sebuah objek {{jsxref("Global_Objects/String", "String")}} ke dalam sebuah susunan dari string dengan memisahkan string ke dalam substring.
+
{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}
+
Menentukan apakah sebuah string dimulai dengan karakter dari string lain.
+
{{jsxref("String.prototype.substr()")}}
+
Mengembalikan karakter-karakter dalam sebuah string yang dimulai dari indeks yang diberikan sebanyak jumlah karakter yang diberikan.
+
{{jsxref("String.prototype.substring()")}}
+
Mengembalikan karakter-karakter dalam sebuah string antara dua indeks ke dalam string.
+
{{jsxref("String.prototype.toLocaleLowerCase()")}}
+
Karakter-karakter di dalam string diubah menjadi huruf kecil dengan menjunjung tempat sekarang. Kebanyakan bahasa akan mengembalikan hasil yang sama seperti {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.
+
{{jsxref("String.prototype.toLocaleUpperCase()")}}
+
Karakter-karakter di dalam string diubah menjadi huruf kapital dengan menjunjung tempat sekarang. Kebanyakan bahasa akan mengembalikan hasil yang sama seperti {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.
+
{{jsxref("String.prototype.toLowerCase()")}}
+
Mengembalikan nilai string terpanggil yang diubah menjadi huruf kecil.
+
{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}
+
Mengembalikan sebuah objek harfiah yang menggambarkan objek yang diberikan; Anda dapat menggunakan nilai ini untuk membuat sebuah objek baru. Mengesampingkan metode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("String.prototype.toString()")}}
+
Mengembalikan sebuah string menggambarkan objek yang diberikan. Mengesampingkan metode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("String.prototype.toUpperCase()")}}
+
Mengembalikan nilai string terpanggil yang diubah menjadi huruf kapital.
+
{{jsxref("String.prototype.trim()")}}
+
Memotong whitespace dari permulaan dan akhir string. Bagian dari standar ECMAScript 5.
+
{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
+
Memotong whitespace dari sisi kiri dari string.
+
{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
+
Memotong whitespace dari sisi kanan dari string.
+
{{jsxref("String.prototype.valueOf()")}}
+
Mengembalikan nilai primitif dari objek yang diberikan. Mengesampingkan metode {{jsxref("Object.prototype.valueOf()")}}.
+
{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}
+
Mengembalikan sebuah objek Iterator baru yang mengulangi melewati code points dari nilai String, mengembalikan setiap code point sebagai sebuah nilai String.
+
+ +

Metode pembungkus HTML

+ +

Metode-metode ini merupakan penggunaan terbatas, karena mereka hanya memberikan sebuah subset dari tag dan atribut HTML yang tersedia.

+ +
+
{{jsxref("String.prototype.anchor()")}}
+
{{htmlattrxref("name", "a", "<a name=\"name\">")}} (menarget hiperteks)
+
{{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()")}}
+
{{htmlattrxref("href", "a", "<a href=\"url\">")}} (tautan ke 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")}}
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
ECMAScript 1st Edition.StandardDefinisi awal.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}} 
+ +

Kompatibilitas peramban

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/string/split/index.html b/files/id/web/javascript/reference/global_objects/string/split/index.html new file mode 100644 index 0000000000..21f19d353f --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/split/index.html @@ -0,0 +1,241 @@ +--- +title: String.prototype.split() +slug: Web/JavaScript/Reference/Global_Objects/String/split +tags: + - JavaScript + - Method + - Prototype + - Reference + - Regular Expressions + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/split +--- +
{{JSRef}}
+ +

Method split() membagi sebuah objek {{jsxref("String")}} ke sebuah array string dengan memisahkannya menjadi substring.

+ +

Sintaks

+ +
str.split([separator[, limit]])
+ +

Parameter

+ +
+
separator
+
Opsional. Menentukan karakter yang digunakan untuk memisahkan string. separator dapat berupa string atau sebuah {{jsxref("Global_Objects/RegExp", "regular expression", "", 1)}}. Jika separator dihilangkan / tidak digunakan, array yang dikembalikan akan terdiri dari satu elemen yang berisi seluruh string. Jika separator dikosongkan atau empty string, str akan dikonversikan sebagai sebuah array dari karakter.
+
limit
+
+

Opsional. Nilai integer yang digunakan untuk menentukan jumlah batas yang dapat ditemukan. Method split() tetap membagi pada setiap kecocokan pada separator, sampai jumlah pembagi item sama dengan limit atau string jatuh lebih pendek dari separator.

+
+
+ +

Deskripsi

+ +

Method split() mengembalikan array baru.

+ +

Saat ditemukan, separator akan dihapus dari string dan substrings akan di kembalikan ke dalam array. Jika separator tidak ditemukan atau di hilangkan, array terdiri satu elemen array yang terdiri dari keseluruhan string. Jika separator merupakan empty string, str dikonversi menjadi sebuah array karakter.

+ +

Jika separator adalah ekspesi reguler yang terdapat tanda kurung , maka setiap kali separator cocok, hasilnya (termasuk hasil yang tidak didefinisikan) dari penangkap tanda kurung akan di sambungkan ke dalam output array. Namun, tidak semua browser mendukung kemampuan ini.

+ +

{{Note("Ketika string kosong, method split() mengembalikan array berisi satu string kosong, dari pada array kosong. Jika string dan separator keduanya string kosong, array kosong akan dikembalikan.")}}

+ +

Contoh

+ +

Penggunaan split()

+ +

Contoh berikut menjelaskan fungsi yang membagi string ke dalam sebuah array string menggunakan separator tertentu. Setelah memisahkan string , fungsi menampilkan pesan yang menunjukan string asli (sebelum dibagi), separator yang digunakan, jumlah elemen pada array, dan elemen array secara individual.

+ +
function splitString(stringToSplit, separator) {
+  var arrayOfStrings = stringToSplit.split(separator);
+
+  console.log('The original string is: "' + stringToSplit + '"');
+  console.log('The separator is: "' + separator + '"');
+  console.log('The array has ' + arrayOfStrings.length + ' elements: ' + arrayOfStrings.join(' / '));
+}
+
+var tempestString = 'Oh brave new world that has such people in it.';
+var monthString = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec';
+
+var space = ' ';
+var comma = ',';
+
+splitString(tempestString, space);
+splitString(tempestString);
+splitString(monthString, comma);
+
+ +

Contoh ini menghasilkan output berikut:

+ +
The original string is: "Oh brave new world that has such people in it."
+The separator is: " "
+The array has 10 elements: Oh / brave / new / world / that / has / such / people / in / it.
+
+The original string is: "Oh brave new world that has such people in it."
+The separator is: "undefined"
+The array has 1 elements: Oh brave new world that has such people in it.
+
+The original string is: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
+The separator is: ","
+The array has 12 elements: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec
+
+ +

Menghapus spasi dari string

+ +

Pada contoh berikut, split() mencari 0 atau lebih spasi diikuti semikolon, dan di ikuti 0 atau lebih spasi dan, saat ditemukan, menghapus spasi dari string. nameList merupakan array yang dikembalikan dari hasil split().

+ +
var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ';
+
+console.log(names);
+
+var re = /\s*;\s*/;
+var nameList = names.split(re);
+
+console.log(nameList);
+
+ +

Dua baris log ini; log baris pertama string asli, dan log baris kedua array yang dihasilkan.

+ +
Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
+[ "Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand " ]
+
+ +

Mengembalikan batas jumlah pembagi

+ +

Pada contoh berikut, split() mencari 0 atau lebih spasi didalam string dan mengembalikan 3 pembagian pertama yang ditemukan.

+ +
var myString = 'Hello World. How are you doing?';
+var splits = myString.split(' ', 3);
+
+console.log(splits);
+
+ +

Script ini akan menampilkan seperti berikut:

+ +
Hello,World.,How
+
+ +

Tanda kurung

+ +

Jika separator terdapat tanda kurung, hasil yang cocok akan dikembalikan ke dalam array.

+ +
var myString = 'Hello 1 word. Sentence number 2.';
+var splits = myString.split(/(\d)/);
+
+console.log(splits);
+
+ +

Script tersebut menampilkan seperti berikut:

+ +
[ 'Hello ', '1', ' word. Sentence number ', '2', '.' ]
+
+ +

Membalikkan String menggunakan split()

+ +
var str = 'asdfghjkl';
+var strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa'
+// split() returns an array on which reverse() and join() can be applied
+
+ +

Bonus: Gunakan operator {{jsxref("Operators/Comparison_Operators", "===", "#Identity_strict_equality_(===)")}} untuk mengetahui apakah string asli adalah palindrome.

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
+ + + + + + + +
Dukungan dasar 
+ 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/id/web/javascript/reference/global_objects/string/tolowercase/index.html new file mode 100644 index 0000000000..69fdfd1bec --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/tolowercase/index.html @@ -0,0 +1,121 @@ +--- +title: String.prototype.toLowerCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +tags: + - JavaScript + - Method + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +--- +
{{JSRef}}
+ +

Method toLowerCase() mengembalikan nilai string yang dipanggil yang telah dikonversi ke lowercase (huruf kecil).

+ +

Sintaks

+ +
str.toLowerCase()
+ +

Deskripsi

+ +

Method toLowerCase() mengembaikan nilai dari string yang telah dikonversi ke lowercase. toLowerCase() tidak berdampak pada nilai string pada variabel str itu sendiri.

+ +

Contoh

+ +

Penggunaan toLowerCase()

+ +
console.log('ALPHABET'.toLowerCase()); // 'alphabet'
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/string/tostring/index.html b/files/id/web/javascript/reference/global_objects/string/tostring/index.html new file mode 100644 index 0000000000..dba9c9f792 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/tostring/index.html @@ -0,0 +1,118 @@ +--- +title: String.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/String/toString +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +--- +
{{JSRef}}
+ +

Method toString() mengembalikan sebuah string berdasarkan objek spesifik.

+ +

Sintaks

+ +
str.toString()
+ +

Deskripsi

+ +

Objek {{jsxref("String")}} akan menimpa method toString() dari objek {{jsxref("Object")}}; bukan turunan {{jsxref("Object.prototype.toString()")}}. Untuk objek {{jsxref("String")}}, method toString() mengembalikan sebuah string berdasarkan objek dan seperti halnya pada method {{jsxref("String.prototype.valueOf()")}}.

+ +

Contoh

+ +

Penggunaan toString()

+ +

Pada contoh menampilkan nilai string dari sebuah objek {{jsxref("String")}}:

+ +
var x = new String('Halo Dunia');
+
+console.log(x.toString()); // logs 'Halo Dunia'
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan Dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan Dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/global_objects/string/touppercase/index.html b/files/id/web/javascript/reference/global_objects/string/touppercase/index.html new file mode 100644 index 0000000000..bf8182a590 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/string/touppercase/index.html @@ -0,0 +1,115 @@ +--- +title: String.prototype.toUpperCase() +slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +--- +
{{JSRef}}
+ +

Method toUpperCase() mengembalikan nilai string pemanggil dikonversi ke huruf besar.

+ +

Sintaks

+ +
str.toUpperCase()
+ +

Deskripsi

+ +

Method toUpperCase() mengembalikan nilai string diconversikan ke huruf besar. toUpperCase() tidak mempengaruhi nilai string itu sendiri.

+ +

Contoh

+ +

Penggunaan toUpperCase()

+ +
console.log('alphabet'.toUpperCase()); // 'ALPHABET'
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}{{Spec2('ESDraft')}} 
+ +

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

Lihat Pula

+ + diff --git a/files/id/web/javascript/reference/global_objects/typedarray/index.html b/files/id/web/javascript/reference/global_objects/typedarray/index.html new file mode 100644 index 0000000000..e0b8d942c1 --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/typedarray/index.html @@ -0,0 +1,344 @@ +--- +title: TypedArray +slug: Web/JavaScript/Reference/Global_Objects/TypedArray +tags: + - JavaScript + - NeedsTranslation + - TopicStub + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +--- +
{{JSRef}}
+ +

A TypedArray object describes an array-like view of an underlying binary data buffer. There is no global property named TypedArray, nor is there a directly visible TypedArray constructor.  Instead, there are a number of different global properties, whose values are typed array constructors for specific element types, listed below. On the following pages you will find common properties and methods that can be used with any typed array containing elements of any type.

+ +

Syntax

+ +
new TypedArray(length);
+new TypedArray(typedArray);
+new TypedArray(object);
+new TypedArray(buffer [, byteOffset [, length]]);
+
+where TypedArray() is one of:
+
+Int8Array();
+Uint8Array();
+Uint8ClampedArray();
+Int16Array();
+Uint16Array();
+Int32Array();
+Uint32Array();
+Float32Array();
+Float64Array();
+
+ +

Parameters

+ +
+
length
+
When called with a length argument, a typed array containing length zeroes is created.
+
typedArray
+
When called with a typedArray argument, which can be an object of any of the typed array types (such as Int32Array), the typedArray gets copied into a new typed array. Each value in typedArray is converted to the corresponding type of the constructor before being copied into the new array.
+
object
+
When called with an object argument, a new typed array is created as if by the TypedArray.from() method.
+
buffer, byteOffset, length
+
When called with a buffer, and optionally a byteOffset and a length argument, a new typed array view is created that views the specified {{jsxref("ArrayBuffer")}}. The byteOffset and length parameters specify the memory range that will be exposed by the typed array view.  If both are omitted, all of buffer is viewed; if only length is omitted, the remainder of buffer is viewed.
+
+ +

Description

+ +

ECMAScript 6 defines a TypedArray constructor that serves as the [[Prototype]] of all TypedArray constructors.  This constructor is not directly exposed: there is no global %TypedArray% or TypedArray property.  It is only directly accessible through Object.getPrototypeOf(Int8Array.prototype) and similar.  All TypedArrays constructors inherit common properties from the %TypedArray% constructor function.  Additionally, all typed array prototypes (TypedArray.prototype) have %TypedArray%.prototype as their [[Prototype]].

+ +

The %TypedArray% constructor on its own is not particularly useful.  Calling it or using it in a new expression will throw a TypeError, except when used during object creation in JS engines that support subclassing.  There are at present no such engines, so %TypedArray% is only useful to polyfill functions or properties onto all TypedArray constructors.

+ +

Property access

+ +

You can reference elements in the array using standard array index syntax (that is, using bracket notation). However, getting or setting indexed properties on typed arrays will not search in the prototype chain for this property, even when the indices are out of bound. Indexed properties will consult the {{jsxref("ArrayBuffer")}} and will never look at object properties. You can still use named properties, just like with all objects.

+ +
// Setting and getting using standard array syntax
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+
+// Indexed properties on prototypes are not consulted (Fx 25)
+Int8Array.prototype[20] = "foo";
+(new Int8Array(32))[20]; // 0
+// even when out of bound
+Int8Array.prototype[20] = "foo";
+(new Int8Array(8))[20]; // undefined
+// or with negative integers
+Int8Array.prototype[-1] = "foo";
+(new Int8Array(8))[-1]; // undefined
+
+// Named properties are allowed, though (Fx 30)
+Int8Array.prototype.foo = "bar";
+(new Int8Array(32)).foo; // "bar"
+ +

TypedArray objects

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeSize in bytesDescriptionWeb IDL typeEquivalent C type
{{jsxref("Int8Array")}}18-bit two's complement signed integerbyteint8_t
{{jsxref("Uint8Array")}}18-bit unsigned integeroctetuint8_t
{{jsxref("Uint8ClampedArray")}}18-bit unsigned integer (clamped)octetuint8_t
{{jsxref("Int16Array")}}216-bit two's complement signed integershortint16_t
{{jsxref("Uint16Array")}}216-bit unsigned integerunsigned shortuint16_t
{{jsxref("Int32Array")}}432-bit two's complement signed integerlongint32_t
{{jsxref("Uint32Array")}}432-bit unsigned integerunsigned longuint32_t
{{jsxref("Float32Array")}}432-bit IEEE floating point numberunrestricted floatfloat
{{jsxref("Float64Array")}}864-bit IEEE floating point numberunrestricted doubledouble
+ +

Properties

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}
+
Returns a number value of the element size for the different typed array objects.
+
TypedArray.length
+
Length property whose value is 3.
+
{{jsxref("TypedArray.name")}}
+
Returns the string value of the constructor name. E.g "Int8Array".
+
{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}
+
The constructor function that is used to create derived objects.
+
{{jsxref("TypedArray.prototype")}}
+
Prototype for the TypedArray objects.
+
+ +

Methods

+ +
+
{{jsxref("TypedArray.from()")}}
+
Creates a new typed array from an array-like or iterable object. See also {{jsxref("Array.from()")}}.
+
{{jsxref("TypedArray.of()")}}
+
Creates a new typed array with a variable number of arguments. See also {{jsxref("Array.of()")}}.
+
+ +

TypedArray prototype

+ +

All TypedArrays inherit from {{jsxref("TypedArray.prototype")}}.

+ +

Properties

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','Properties')}}

+ +

Methods

+ +

{{page('en-US/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','Methods')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Defined as TypedArray and ArrayBufferView interface with typed array view types. Superseded by ECMAScript 6.
{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}{{Spec2('ES6')}}Initial definition in an ECMA standard. Specified behaviour for indexed and named properties. Specified that new is required.
{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(7.0)}}{{CompatGeckoDesktop("2")}}1011.65.1
Indexed properties not consulting prototype{{CompatVersionUnknown}} [1]{{CompatGeckoDesktop("25")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Named properties{{CompatVersionUnknown}}{{CompatGeckoDesktop("30")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
new is required{{CompatUnknown}}{{CompatGeckoDesktop("44")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support4.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("2") }}1011.64.2{{CompatVersionUnknown}}
Indexed properties not consulting prototype{{CompatUnknown}}{{CompatVersionUnknown}} [1]{{ CompatGeckoMobile("25") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} [1]
Named properties{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("30") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
new is required{{CompatUnknown}}{{CompatUnknown}}{{ CompatGeckoMobile("44") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] -1 and similar are not considered as indexed properties and therefore return the value of the prototype property.

+ +

Compatibility notes

+ +

Starting with ECMAScript 2015 (ES6), TypedArray constructors require to be constructed with a {{jsxref("Operators/new", "new")}} operator. Calling a TypedArray constructor as a function without new, will throw a {{jsxref("TypeError")}} from now on.

+ +
var dv = Int8Array([1, 2, 3]);
+// TypeError: calling a builtin Int8Array constructor
+// without new is forbidden
+ +
var dv = new Int8Array([1, 2, 3]);
+ +

See also

+ + diff --git a/files/id/web/javascript/reference/global_objects/typedarray/join/index.html b/files/id/web/javascript/reference/global_objects/typedarray/join/index.html new file mode 100644 index 0000000000..84f328ae1b --- /dev/null +++ b/files/id/web/javascript/reference/global_objects/typedarray/join/index.html @@ -0,0 +1,114 @@ +--- +title: TypedArray.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/join +tags: + - ECMAScript6 + - JavaScript + - Method + - Prototype + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/join +--- +
{{JSRef}}
+ +

Method join() menggabungkan semua elemen dari array menjadi sebuah string. Alogaritma method ini memiliki kesamaan dengan {{jsxref("Array.prototype.join()")}}. TypedArray di sini merupakan salah datu typed array types.

+ +

Sintaks

+ +
typedarray.join([separator = ',']);
+ +

Parameter

+ +
+
separator
+
Opsional. Menentukan sebuah string untuk memisahkan setiap elemen. Separator perlu di konversi ke string jika dianggap penting. Jika dikosongkan, elemen array akan dipisahkan dengan tanda koma (",").
+
+ +

Contoh

+ +
var uint8 = new Uint8Array([1,2,3]);
+uint8.join();      // '1,2,3'
+uint8.join(' / '); // '1 / 2 / 3'
+uint8.join('');    // '123'
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop("37")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("37")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/index.html b/files/id/web/javascript/reference/index.html new file mode 100644 index 0000000000..261b76a5b5 --- /dev/null +++ b/files/id/web/javascript/reference/index.html @@ -0,0 +1,48 @@ +--- +title: Referensi JavaScript +slug: Web/JavaScript/Reference +tags: + - JavaScript +translation_of: Web/JavaScript/Reference +--- +
{{JsSidebar}}
+ +

Laman ini merupakan bagian dari sesi JavaScript pada MDN yang berfungsi sebagai acuan mengenai bahasa pemrograman JavaScript. Pelajari lebih lanjut perihal acuan ini.

+ +

Objek Global

+ +

Bagian ini mendokumentasikan semua object standar built-in JavaScript, beserta method dan propertinya.

+ +
{{page('/id/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}
+ +

Pernyataan

+ +

Bagian ini mendekumentasikan semua pernyataan dan deklarasi  JavaScript.

+ +
{{page('/id/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}
+ +

Ungkapan dan operator

+ +

Bagian ini mendokumentasikan semua ungkapan dan operator JavaScript .

+ +
{{page('/id/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}
+ +

Fungsi

+ +

Bagian ini mendokumentasikan tentang Fungsi JavaScrip dan penggunaanya untuk pengembangan aplikasi anda.

+ + + +

Acuan tambahan

+ + diff --git a/files/id/web/javascript/reference/lexical_grammar/index.html b/files/id/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..83e5696ccd --- /dev/null +++ b/files/id/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,670 @@ +--- +title: Lexical grammar +slug: Web/JavaScript/Reference/Lexical_grammar +translation_of: Web/JavaScript/Reference/Lexical_grammar +--- +
{{JsSidebar("More")}}
+ +

Halaman ini menjelaskan tata bahasa leksikal JavaScript. Teks sumber skrip JavaScript dipindai dari kiri ke kanan dan diubah menjadi urutan elemen masukan yang merupakan token, karakter kontrol, terminator baris, komentar atau whitespace. ECMAScript juga mendefinisikan kata kunci dan literal tertentu dan memiliki aturan untuk penyisipan titik koma secara otomatis untuk mengakhiri pernyataan.

+ +

Karakter-karakter kontrol

+ +

Karakter kontrol tidak memiliki representasi visual namun digunakan untuk mengendalikan interpretasi teks.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Karakter-karakter kontrol format unicode
KodeNamaSingkatanDeskripsi
U+200CZero width non-joiner<ZWNJ>Ditempatkan di antara karakter untuk mencegah terhubung ke ligatur dalam bahasa tertentu (Wikipedia).
U+200DZero width joiner<ZWJ>Ditempatkan di antara karakter yang biasanya tidak terhubung agar karakter dapat dirender menggunakan bentuknya yang terhubung dalam bahasa tertentu. (Wikipedia).
U+FEFFByte order mark<BOM>Digunakan pada awal skrip untuk menandainya sebagai Unicode dan urutan byte teks (Wikipedia).
+ +

White space

+ +

Karakter whitespace meningkatkan keterbacaan teks sumber dan memisahkan token-token. Karakter ini biasanya tidak diperlukan untuk fungsionalitas kode. Alat minifikasi sering digunakan untuk membuang whitespace agar mengurangi jumlah data yang perlu ditransfer.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Karakter-karakter whitespace
KodeNamaSingkatanDeskripsi +

Rangkaian pelolosan/Escape

+
U+0009Tabulasi karakter<HT>Tabulasi horisontal\t
U+000BTabulasi baris<VT>Tabulasi vertikal\v
U+000CForm feed<FF>Karakter kontrol pemecah halaman (Wikipedia).\f
U+0020Space<SP>Spasi normal 
U+00A0No-break space<NBSP>Spasi normal, tetapi tidak ada petunjuk dimana baris terputus. 
OthersOther Unicode space characters<USP>Spasi di Unicode on Wikipedia 
+ +

Terminator baris

+ +

Selain karakter whitespace, karakter terminator baris digunakan untuk meningkatkan keterbacaan teks sumber. Namun, dalam beberapa kasus, terminator baris dapat mempengaruhi eksekusi kode JavaScript karena ada beberapa tempat di mana mereka dilarang. Terminator baris juga mempengaruhi proses penyisipan titik koma otomatis. Terminator baris dicocokkan dengan kelas \s dalam regular expressions.

+ +

Hanya kode Unicode berikut yang diperlakukan sebagai terminator baris di ECMAScript, karakter pemecah baris lainnya diperlakukan sebagai whitespace (misalnya, Next Line, NEL, U+0085 dianggap sebagai whitespace).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Karakter-karakter terminator baris
KodeNamaSingkatanDeskripsiRangkaian pelolosan/escape 
U+000ALine Feed<LF>Karakter baris baru di sistem UNIX.\n
U+000DCarriage Return<CR>Karakter baris baru di Commodore dan sistem Mac awal.\r
U+2028Line Separator<LS>Wikipedia 
U+2029Paragraph Separator<PS>Wikipedia 
+ +

Komentar

+ +

Komentar digunakan untuk menambahkan petunjuk, catatan, saran, atau peringatan ke kode JavaScript. Hal ini dapat mempermudah membaca dan memahami. Mereka juga dapat digunakan untuk menonaktifkan kode agar tidak dieksekusi; Ini juga dapat menjadi alat debugging yang berharga.

+ +

JavaScript memiliki dua cara untuk memberi komentar pada kodenya.

+ +

Cara pertama adalah komentar //; Ini membuat semua teks yang mengikutinya pada baris yang sama menjadi sebuah komentar. Sebagai contoh:

+ +
function komentar() {
+  // Ini adalah komentar JavaScript satu baris
+  console.log('Hello world!');
+}
+komentar();
+
+ +

Cara kedua adalah komentar gaya  /* */ , yang jauh lebih fleksibel.

+ +

Misalnya, Anda bisa menggunakannya dalam satu baris:

+ +
function komentar() {
+  /* Ini adalah komentar JavaScript satu baris */
+  console.log('Hello world!');
+}
+komentar();
+ +

Anda juga bisa membuat komentar beberapa baris, seperti ini:

+ +
function komentar() {
+  /* Komentar ini merentang dalam beberapa baris. Perhatikan
+     bahwa kita tidak perlu mengakhir komentar sebelum selesai. */
+  console.log('Hello world!');
+}
+komentar();
+ +

Anda juga bisa menggunakannya di tengah baris, jika Anda mau, meskipun ini bisa membuat kode Anda lebih sulit dibaca sehingga harus digunakan dengan hati-hati:

+ +
function komentar(x) {
+  console.log('Hello ' + x /* menysipkan nilai dari x */ + ' !');
+}
+comment('world');
+ +

Selain itu, Anda bisa menggunakannya untuk menonaktifkan kode agar tidak berjalan, dengan membungkus kode dalam komentar, seperti ini:

+ +
function comment() {
+  /* console.log('Hello world!'); */
+}
+comment();
+ +

Dalam hal ini, pemaggilan console.log() tidak pernah dikeluarkan, karena itu ada di dalam komentar. Sejumlah baris kode dapat dinonaktifkan dengan cara ini.

+ +

Kata kunci

+ +

Reserved keywords as of ECMAScript 2015

+ + + +

Kata kunci akan datang yang dicadangkan

+ +

Berikut ini disediakan sebagai kata kunci akan datang menurut spesifikasi ECMAScript. Mereka tidak memiliki fungsi khusus saat ini, namun mungkin pada beberapa waktu mendatang, sehingga tidak dapat digunakan sebagai pengidentifikasi.

+ +

Selalu dicadangkan:

+ + + +

Berikut ini hanya dicadangkan saat ditemukan dalam kode mode strict "ketat":

+ + + +

Berikut ini hanya dicadangkan saat ditemukan dalam kode modul:

+ + + +

Kata kunci standart lama yang masih dingunakan hingga sekarang

+ +

Berikut adalah dicadankan sebagai kata kunci akan datang pada spesifikasi ECMAScript usang (ECMAScript 1 s/d 3).

+ + + +

Selain itu literal-literal null, true, dan false tidak dapat digunakan sebagai pengidentifikasi didalam ECMAScript.

+ +

Penggunaan kata dicadangkan

+ +

Kata yang dicadangkan sebenarnya hanya berlaku untuk pengidentifikasi (vs. IdentifierNames ). Seperti yang dijelaskan di es5.github.com/#A.1, ini semua adalah IdentifierNames yang tidak mengecualikan ReservedWords .

+ +
a.import
+a['import']
+a = { import: 'test' }.
+
+ +

Di sisi lain, hal-hal berikut ini ilegal karena ini adalah pengidentifikasi, yaitu IdentifierName tanpa kata-kata yang dicadangkan. Pengidentifikasi digunakan untuk FunctionDeclaration dan FunctionExpression.

+ +
function import() {} // Illegal.
+ +

Literal

+ +

Literal null

+ +

Lihat juga null untuk informasi lebih lanjut.

+ +
null
+ +

Literal Boolean

+ +

Lihat juga Boolean untuk informasi lebih lanjut.

+ +
true
+false
+ +

Literal numerik

+ +

Decimal

+ +
1234567890
+42
+
+// Waspada saat mengunakan nol dimuka:
+0888 // 888 diuraikan sebagai desimal
+0777 // diuraikan sebagai oktal, 511 dalam desimal
+
+ +

Perhatikan bahwa literal desimal dapat dimulai dengan angka nol ( 0 ) diikuti oleh digit desimal lainnya, namun jika semua digit setelah angka 0 teratas lebih kecil dari 8, angka tersebut diartikan sebagai angka oktal. Ini tidak akan melempar JavaScript, lihat {{bug(957513)}}. Lihat juga halaman tentang parseInt().

+ +

Biner

+ +

Sintaksis bilangan biner menggunakan nol dimuka diikuti huruf kecil atau huruf besar Latin "B" ( 0b atau 0B ). Karena sintaksis ini baru di ECMAScript 2015, lihat tabel kompatibilitas browser, di bawah ini. Jika digit setelah 0b tidak 0 atau 1, SyntaxError berikut dilempar: "Missing binary digits after 0b".

+ +
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
+ +

Oktal

+ +

Sintaksis bilangan oktal menggunakan nol dimuka diikuti huruf kecil atau huruf besar Latin "O" ( 0o atau 0O). Karena sintaks ini baru di ECMAScript 2015, lihat tabel kompatibilitas browser, di bawah ini. Jika digit setelah 0o berada di luar kisaran (01234567), SyntaxError berikut dilempar: "Missing octal digits after 0o".

+ +
var n = 0O755; // 493
+var m = 0o644; // 420
+
+// Juga dimungkinkan hanya menggunakan nol dimuka (lihat tentang desimal diatas)
+0755
+0644
+
+ +

Heksadesimal

+ +

Sintaksis bilangan heksadesimal menggunakan nol dimuka diikuti huruf kecil atau huruf besar Latin "X" ( 0x atau 0X). Jika digit setelah 0x berada di luar rentang (0123456789ABCDEF), SyntaxError berikut dilempar: "Identifier starts immediately after numeric literal".

+ +
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+
+ +

Literal objek

+ +

Lihat juga Objek and Penginisialisasi objek untuk informasi lebih lanjut.

+ +
var o = { a: 'foo', b: 'bar', c: 42 };
+
+// notasi singkat. baru di ES2015
+var a = 'foo', b = 'bar', c = 42;
+var o = {a, b, c};
+
+// bukannya
+var o = { a: a, b: b, c: c };
+
+ +

Literal array

+ +

Lihat juga Array untuk informasi lebih lanjut.

+ +
[1954, 1974, 1990, 2014]
+ +

Literal string

+ +
'foo'
+"bar"
+ +

Rangkaian pelolosan/escape heksadesimal

+ +
'\xA9' // "©"
+
+ +

Rangkaian pelolosan/escape Unicode

+ +

Rangkaian pelolosan Unicode memerlukan setidaknya empat karakter diawali \u.

+ +
'\u00A9' // "©"
+ +

Penerapan point kode Unicode

+ +

Baru di ECMAScript 2015. Dengan pelolosan kode Unicode, tiap karakter dapat diloloskan menggunakan bilangan hexadesimal jadi dimungkinkan untuk menggunkan kode Unicode sampai 0x10FFFF. Dengan pelolosan Unicode sederhana terkadang lebih dibutuhkan untuk menulis bagian pengganti secara terpisah untuk mencapai tujuan yang sama.

+ +

Lihat juga String.fromCodePoint() atau String.prototype.codePointAt().

+ +
'\u{2F804}'
+
+// ekuivalen dengan pelolosan Unicode sederhana
+'\uD87E\uDC04'
+ +

Literal regular expression

+ +

Lihat juga RegExp untuk informasi lebih lanjut.

+ +
/ab+c/g
+
+// Suatu literal "kosong" regular expression
+// diperlukan grup bukan penangkap
+// untuk menghindarkan ambiguitas denga komentar satu baris
+/(?:)/
+ +

Literal template

+ +

Lihat juga template strings untuk informasi lebih lanjut.

+ +
`string text`
+
+`string text baris 1
+ string text baris 2`
+
+`string text ${expression} string text`
+
+tag `string text ${expression} string text`
+ +

Penyisipan titik koma otomatis

+ +

Beberapa pernyataan JavaScript harus diakhiri dengan titik koma an oleh karena itu dipengaruhi oleh penyisipan otomatis semicolon (ASI):

+ + + +

Spesifikasi ECMAScript menyebutkan tiga aturan penyisipan titik koma.

+ +

1.  Titik koma disisipkan sebelumnya, bila terminator baris or "}" diteramukan yang tidak diizinkan oleh tata bahasa.

+ +
{ 1 2 } 3
+
+// di transformasikan ke ASI kedalam
+
+{ 1 2 ;} 3;
+ +

2.  Titik koma disisipkan di bagian akhir, saat akhir aliran input token terdeteksi dan parser tidak dapat mengurai aliran input tunggal aliran sebagai program yang lengkap.

+ +

Disini ++ tidak diperlakukan sebagai operator postfix yang menerapkan variabel b, karena terminator baris terjadi antara b dan ++.

+ +
a = b
+++c
+
+// di transformasikan ke ASI kedalam
+
+a = b;
+++c;
+
+ +

3. Titik koma disisipkan pada akhirnya, ketika sebuah pernyataan dengan produksi terbatas dalam tata bahasa diikuti oleh terminator baris. Pernyataan-pernyataan ini dengan aturan "tidak diperlukan terminator baris" adalah:

+ + + +
return
+a + b
+
+// di transformasikan ke ASI kedalam
+
+return;
+a + b;
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2("ES1")}}Definisi awal.
{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}{{Spec2('ES6')}} +

Ditambahkan: Literal Bilangan Biner dan Octal, pelolosan kode Unicode, Templates

+
{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Literal numerik biner dan oktal (0b dan 0o){{CompatChrome(41)}}12{{CompatGeckoDesktop(25)}}{{CompatUnknown}}{{CompatOpera(28)}}{{CompatSafari(9)}}
Pelolosan kode Unicode (\u{}){{CompatChrome(44)}}12{{CompatGeckoDesktop(40)}}{{CompatNo}}{{CompatOpera(31)}}{{CompatSafari(9)}}
Notasi singkat untuk literal objek{{CompatChrome(43)}}12{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatChrome(30)}}{{CompatSafari(9)}}
Literal template{{CompatChrome(41)}}12{{CompatGeckoDesktop(34)}}{{CompatNo}}{{CompatOpera(28)}}{{CompatSafari(9)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Literal numerik biner dan oktal (0b dan 0o){{CompatUnknown}}41{{CompatGeckomobile(33)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Pelolosan kode Unicode (\u{}){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckomobile(40)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Notasi singkat untuk literal objek{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Literal template{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(34)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Firefox-specific notes

+ + + +

See also

+ + diff --git a/files/id/web/javascript/reference/operators/conditional_operator/index.html b/files/id/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..1a64158acb --- /dev/null +++ b/files/id/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,167 @@ +--- +title: Operasional Kondisi (ternary) +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +
{{jsSidebar("Operators")}}
+ +

Operasianal kondisional (ternary) adalah satu-satunya operator yang hanya membutuhkan tiga operator. Operator ini sering digunakan sebagai jalan pintas untuk `if` statement.

+ +

Syntax

+ +
condition ? expr1 : expr2
+ +

Parameters

+ +
+
condition (atau conditions)
+
Sebuah ekspresi akan menguji apakah menghasilkan true atau false.
+
+ +
+
expr1, expr2
+
Ekspresi yang akan dilakukan setelah kondisi terpenuhi.
+
+ +

Description

+ +

Jika condition menghasilkan true, maka operator ini akan menghasilkan/mengembalikan nilai dari expr1; dan jika sebaliknya, ini akan menghasilkan/mengembalikan nilai dari expr2. Sebagai contoh, untuk menampilkan pesan yang berbeda berdasarkan nilai dari variabel isMember, anda bisa menggunakan contoh kode berikut:

+ +
var isMember = true;
+'The fee is ' + (isMember ? '$2.00' : '$10.00'); //$2.00
+
+ +

Anda juga dapat mendefinisikan sebuah variabel secara langsung:

+ +
var elvisLives = Math.PI > 4 ? 'Yep' : 'Nope';
+ +

Anda juga bisa menggunakan operator ternary secara jamak (catatan: conditional operator adalah associative yang lebih baik):

+ +
var firstCheck = false, secondCheck = false, access = firstCheck ? 'Access denied' : secondCheck ? 'Access denied' : 'Access granted';
+console.log(access); // logs "Access granted"
+ +

Anda juga dapat menggunakan pengondisian jamak seperti pengondisian jamak pada statement IF pada umumnya:

+ +
var condition1 = true,
+    condition2 = false,
+    access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false");
+
+console.log(access); // logs "true false"
+
+ +

 

+ +

Note: The parentheses are not required, and do not affect the functionality. They are there to help visualize how the outcome is processed.

+ +

You can also use ternary evaluations in free space in order to do different operations:

+ +
var stop = false, age = 16;
+
+age > 18 ? location.assign('continue.html') : stop = true;
+
+ +

You can also do more than one single operation per case, separating them with a comma, and enclosing them in parenthesis:

+ +
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!')
+);
+
+ +

You can also do more than one operation during the assignation of a value. In this case, the last comma-separated value of the parenthesis will be the value to be assigned.

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

Returning Ternary Statements

+ +

The ternary operator lends itself well to function returns that would otherwise require an if/else statement.

+ +
var func1 = function( .. ) {
+  if (condition1) { return value1 }
+  else { return value2 }
+}
+
+var func2 = function( .. ) {
+  return condition1 ? value1 : value2
+}
+ +

A good way to spot that the ternary will be a suitable replacement for an if/else statement is when the return keyword is used multiple times and is the only expression inside of the if block.

+ +

By breaking the ternary onto multiple lines and making use of extra whitespace, the ternary operator can be used to very cleanly replace a lengthy series of if/else statements. This provides a syntactically light way of expressing the same logic:

+ +
var func1 = function( .. ) {
+  if (condition1) { return value1 }
+  else if (condition2) { return value2 }
+  else if (condition3) { return value3 }
+  else { return value4 }
+}
+
+var func2 = function( .. ) {
+  return condition1 ? value1
+       : condition2 ? value2
+       : condition3 ? value3
+       :              value4
+}
+ +

Specifications

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

Browser compatibility

+ + + +

{{Compat("javascript.operators.conditional")}}

+ +

See also

+ + diff --git a/files/id/web/javascript/reference/operators/fungsi/index.html b/files/id/web/javascript/reference/operators/fungsi/index.html new file mode 100644 index 0000000000..5366891a5c --- /dev/null +++ b/files/id/web/javascript/reference/operators/fungsi/index.html @@ -0,0 +1,153 @@ +--- +title: ungkapan fungsi +slug: Web/JavaScript/Reference/Operators/fungsi +tags: + - Fungsi + - JavaScript + - Operator + - Ungkapan Utama +translation_of: Web/JavaScript/Reference/Operators/function +--- +
{{jsSidebar("Operators")}}
+ +
Kata kunci fungsi digunakan untuk mendefinisikan fungsi dalam sebuah ungkapan.
+ +
 
+ +

Sintaksis

+ +
function [nama]([param1[, param2[, ..., paramN]]]) {
+   pernyataan
+}
+ +

Parameters

+ +
+
nama
+
Bisa dihilangkan apabila fungsi merupaka fungsi anonim. Nama fungsi bersifat lokal, relatif terhadap tubuh fungsi.
+
paramN
+
Nama argumen yang akan diumpankan kepada fungsi.
+
pernyataan
+
Pernyataan yang menyusun tubuh fungsi.
+
+ +

Deskripsi

+ +

Sintaksis ungkapan fungsi nyaris sama apabila dibandingkan dengan sintaksis pernyataan fungsi(lihat pernyataan fungsi untuk lebih jelasnya). Perbedaan utama antara ungkapan fungsi dengan pernyataan fungsi ialah; ungkapan fungsi memperbolehkan nama fungsi untuk tidak digunakan/dihilangkan apabila ungkapan fungsi tersebut merupakan fungsi anonim. Ungkapan fungsi dapat digunakan sebagai IIFE (immediately Invoked Function Expression), sebuah fungsi yang otomatis dijalankan apabila didefinisikan. Untuk informasi lebih lanjut, lihat juga bab tentang fungsi.

+ +

Contoh

+ +

Dibawah ini merupakan contoh definisi sebuah fungsi tanpa nama yang kemudian ditugaskan kedalam variabel x:

+ +
var x = function(y) {
+   return y * y;
+};
+
+ +

Ungkapan fungsi bernama (Named function expression)

+ +

Apabila sebuah fungsi hendak dipanggil dari dalam tubuh fungsi itu sendiri, pergunakanlah ungkapan fungsi bernama. Nama fungsi bersifat lokal relatif terhadap tubuh fungsi. Manfaat penggunaan ungkapan fungsi bernama ialah menghindarkan penggunaan properti non-standar arguments.callee.

+ +
var math = {
+  'factorial': function factorial(n) {
+    if (n <= 1)
+      return 1;
+    return n * factorial(n - 1);
+  }
+};
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}}Definisi awal. Diterapkan pada JavaScript 1.5.
+ +

Kesesuaian Perambah (Browser)

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan Mendasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan Mendasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/operators/index.html b/files/id/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..ef3afeb763 --- /dev/null +++ b/files/id/web/javascript/reference/operators/index.html @@ -0,0 +1,269 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - NeedsTranslation + - Operators + - TopicStub +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

This chapter documents all the JavaScript language operators, expressions and keywords.

+ +

Ekspresi and operator sesuai kategori

+ +

Untuk daftar isi sesuai Alfabet, silahkan lihat sisi sebelah kiri artikel ini.

+ +

Primary expressions

+ +

Basic keywords and general expressions in JavaScript.

+ +

Keyword-keyword dasar dan ekspersi-ekspresi umum di javascript

+ +
+
{{jsxref("Operators/this", "this")}}
+
The this keyword refers to the function's execution context.
+
{{jsxref("Operators/function", "function")}}
+
The function keyword defines a function expression.
+
{{jsxref("Global_Objects/Array", "[]")}}
+
Array literal syntax.
+
{{jsxref("Global_Objects/Object", "{}")}}
+
Object literal syntax.
+
{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}
+
Regular expression literal syntax.
+
{{experimental_inline()}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}
+
Array comprehensions.
+
{{experimental_inline()}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}
+
Generator comprehensions.
+
{{jsxref("Operators/Grouping", "( )")}}
+
Grouping operator.
+
+ +

Left-hand-side expressions

+ +

Left values are the destination of an assignment.

+ +
+
{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}
+
Member operators provide access to a property or method of an object
+ (object.property and object["property"]).
+
{{jsxref("Operators/new", "new")}}
+
The new operator creates an instance of a constructor.
+
{{experimental_inline()}} {{jsxref("Operators/super", "super")}}
+
The super keyword calls the parent constructor.
+
{{experimental_inline()}} {{jsxref("Operators/Spread_operator", "...obj")}}
+
The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.
+
+ +

Increment and decrement

+ +

Postfix/prefix increment and postfix/prefix decrement operators.

+ +
+
{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}
+
Postfix increment operator.
+
{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}
+
Postfix decrement operator.
+
{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}
+
Prefix increment operator.
+
{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}
+
Prefix decrement operator.
+
+ +

Unary operators

+ +

A unary operation is operation with only one operand.

+ +
+
{{jsxref("Operators/delete", "delete")}}
+
The delete operator deletes a property from an object.
+
{{jsxref("Operators/void", "void")}}
+
The void operator discards an expression's return value.
+
{{jsxref("Operators/typeof", "typeof")}}
+
The typeof operator determines the type of a given object.
+
{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}
+
The unary plus operator converts its operand to Number type.
+
{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}
+
The unary negation operator converts its operand to Number type and then negates it.
+
{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}
+
Bitwise NOT operator.
+
{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}
+
Logical NOT operator.
+
+ +

Arithmetic operators

+ +

Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.

+ +
+
{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}
+
Addition operator.
+
{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}
+
Subtraction operator.
+
{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}
+
Division operator.
+
{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}
+
Multiplication operator.
+
{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}
+
Remainder operator.
+
+ +

Relational operators

+ +

A comparison operator compares its operands and returns a Boolean value based on whether the comparison is true.

+ +
+
{{jsxref("Operators/in", "in")}}
+
The in operator determines whether an object has a given property.
+
{{jsxref("Operators/instanceof", "instanceof")}}
+
The instanceof operator determines whether an object is an instance of another object.
+
{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}
+
Less than operator.
+
{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}
+
Greater than operator.
+
{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}
+
Less than or equal operator.
+
{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}
+
Greater than or equal operator.
+
+ +

Equality operators

+ +

The result of evaluating an equality operator is always of type Boolean based on whether the comparison is true.

+ +
+
{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}
+
Equality operator.
+
{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}
+
Inequality operator.
+
{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}
+
Identity operator.
+
{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}
+
Nonidentity operator.
+
+ +

Bitwise shift operators

+ +

Operations to shift all bits of the operand.

+ +
+
{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}
+
Bitwise left shift operator.
+
{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}
+
Bitwise right shift operator.
+
{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}
+
Bitwise unsigned right shift operator.
+
+ +

Binary bitwise operators

+ +

Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.

+ +
+
{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}
+
Bitwise AND.
+
{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}
+
Bitwise OR.
+
{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}
+
Bitwise XOR.
+
+ +

Binary logical operators

+ +

Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.

+ +
+
{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}
+
Logical AND.
+
{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}
+
Logical OR.
+
+ +

Conditional (ternary) operator

+ +
+
{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}
+
+

The conditional operator returns one of two values based on the logical value of the condition.

+
+
+ +

Assignment operators

+ +

An assignment operator assigns a value to its left operand based on the value of its right operand.

+ +
+
{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}
+
Assignment operator.
+
{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}
+
Multiplication assignment.
+
{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}
+
Division assignment.
+
{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}
+
Remainder assignment.
+
{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}
+
Addition assignment.
+
{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}
+
Subtraction assignment
+
{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}
+
Left shift assignment.
+
{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}
+
Right shift assignment.
+
{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}
+
Unsigned right shift assignment.
+
{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}
+
Bitwise AND assignment.
+
{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}
+
Bitwise XOR assignment.
+
{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}
+
Bitwise OR assignment.
+
{{experimental_inline()}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}
+ {{experimental_inline()}} {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}
+
+

Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.

+
+
+ +

Comma operator

+ +
+
{{jsxref("Operators/Comma_Operator", ",")}}
+
+

The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.

+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-11', 'Expressions')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ES6')}}New: Spread operator, destructuring assignment, super keyword, Array comprehensions, Generator comprehensions
+ +

See also

+ + diff --git a/files/id/web/javascript/reference/operators/yield/index.html b/files/id/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..366f2aaa38 --- /dev/null +++ b/files/id/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,109 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +translation_of: Web/JavaScript/Reference/Operators/yield +--- +
{{jsSidebar("Operators")}}
+ +

Keyword yield digunakan untuk menghentikan sementara dan melanjutkan sebuah fungsi generator ({{jsxref("Statements/function*", "function*")}} atau legacy generator function).

+ +

Sintak

+ +
[rv] = yield [expression];
+ +
+
expression
+
Mendefeniskan nilai yang akan dikembalikan melalui iterator protocol. Apabila diabaikan, maka undefined akan dikembalikan.
+
rv
+
+

Mengembalikan nilai opsional yang diberikan pada generator method next() untuk melanjutkan eksekusinya.

+
+
+ +

Deskripsi

+ +

Keyword yield menghentikan secara sementara eksekusi dari fungsi generator dan nilai setelah keyword yield dikembalikan pada pemanggil generator tersebut. yield bisa juga disebut sebagai versi generator dari keywordreturn.

+ +

Keyword yield sebenarnya mengembalikan sebuah obyek IteratorResult dengan dua properti, value dan done. Propertivalue adalah hasi dari evaluasi ekspresi yield, dan done yang false, mengindikasikan bahwa fungsi generator tersebut belum selesai sepenuhnya.

+ +

Sekali berhenti pada ekspresi yield , eksekusi dari code generator tersebut akan terus dihentikan sampai generator method next() dipanggil. Setiap kali method generator next() dipanggil, generator melanjutkan eksekusi dan berjalan hingga mencapai salah satu dari kondisi berikut ini :

+ + + +

JIka sebuah nilai opsional diberikan pada generator method next(), nilai tersebut menjadi nilai yang dikembalikan oleh operasi yield dari generator pada saat itu.

+ +

Di antara kode generator, operatoryield -nya, dan kemampuan untuk menentukan sebua nilai awal baru dengan memberikannya pada {{jsxref("Generator.prototype.next()")}}, generator menawarkan power dan kontrol yang luar biasa.

+ +

Contoh

+ +

Kode berikut merupakan deklarasi dari sebuah contoh fungsi generator.

+ +
function* countAppleSales () {
+  var saleList = [3, 7, 5];
+  for (var i = 0; i < saleList.length; i++) {
+    yield saleList[i];
+  }
+}
+ +

Setelah sebuah fungsi generator didefenisikan, maka fungsi tersebut dapat digunakan untuk menghasilkan sebuah iterator seperti berikut.

+ +
var appleStore = countAppleSales(); // Generator { }
+console.log(appleStore.next()); // { value: 3, done: false }
+console.log(appleStore.next()); // { value: 7, done: false }
+console.log(appleStore.next()); // { value: 5, done: false }
+console.log(appleStore.next()); // { value: undefined, done: true }
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ES2015', '#', 'Yield')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#', 'Yield')}}{{Spec2('ESDraft')}}
+ +

Kompatabilitas Browser

+ + + +

{{Compat("javascript.operators.yield")}}

+ +

Catatan Firefox-specific

+ + + +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/statements/class/index.html b/files/id/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..6ca35e9c71 --- /dev/null +++ b/files/id/web/javascript/reference/statements/class/index.html @@ -0,0 +1,171 @@ +--- +title: class +slug: Web/JavaScript/Reference/Statements/class +tags: + - Classes + - Declaration + - ECMAScript6 + - Referensi +translation_of: Web/JavaScript/Reference/Statements/class +--- +
{{jsSidebar("Statements")}}
+ +

Deklarasi class digunakan untuk membuat class baru dengan nama menggunakan turunan berbasis prototype.

+ +
+

Anda juga bisa mendefinisikan kelas menggunakan{{jsxref("Operators/class", "class expression", "", 1)}}.

+
+ +

Sintaks

+ +
class name [extends] {
+  // class body
+}
+
+ +

Deskripsi

+ +

Seperti halnya dengan ekspresi class,  pembentuk (body) class dari deklarasi class di jalankan pada strict mode.

+ +

Deklarasi class bukanlah {{Glossary("Hoisting", "hoisted")}} (Tidak seperti function declarations).

+ +

Contoh

+ +

Dasar deklarasi class

+ +

Pada contoh, hal pertama yang kita lakukan adalah mendefinisikan class dengan nama Polygon, kemudian membentangkannya ( extend ) untuk membuat class bernama Square. Perlu diperhatikan bahwa super(), digunakan pada constructor, hanya dapat digunakan di konstruktor dan harus dipanggil setelah keyword 'this' dapat digunakan.

+ +
class Polygon {
+  constructor(height, width) {
+    this.name = 'Polygon';
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    super(length, length);
+    this.name = 'Square';
+  }
+}
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 
+ +

Kompabilitas Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatChrome(42.0)}}{{CompatGeckoDesktop(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Array subclassing{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Allowed in sloppy mode{{CompatChrome(49.0)}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FiturAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Dukungan dasar{{CompatNo}}{{CompatChrome(42.0)}}{{CompatGeckoMobile(45)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
Array subclassing{{CompatNo}}{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
Allowed in sloppy mode{{CompatNo}}{{CompatChrome(49.0)}}    {{CompatChrome(49.0)}}
+
+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/statements/do...while/index.html b/files/id/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..01c518ad84 --- /dev/null +++ b/files/id/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,101 @@ +--- +title: do...while +slug: Web/JavaScript/Reference/Statements/do...while +tags: + - JavaScript + - Referensi +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +
{{jsSidebar("Statements")}}
+ +

Pernyataan do...while digunakan untuk membuat perulangan yang mengeksekusi penyataan tertentu hingga kondisi pemeriksaan penyataan tersebut bernilai false. Kondisi akan diperiksa setelah pernyataan dieksekusi/dijalankan dengan hasil penyataan tersebut yang dijalankan sekurangnya sekali.

+ +
{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}
+ + + +

Sintaks

+ +
do
+   penyataan
+while (kondisi);
+
+ +
+
penyataan
+
Sebuah penyataan yang dieksekusi setidaknya sekali dan akan kembali dieksekusi setiap kali kondisi pemeriksaan bernial true. Untuk mengeksekusi lebih dari satu penyataan di dalam perulangan, gunakan pernyataan {{jsxref("Statements/block", "block")}}  ({ ... }) untuk mengelompokkan penyataan.
+
+ +
+
kondisi
+
Sebuah ekspresi yang periksa setelah perulangan. Bila kondisi periksa bernilai true, maka pernyataan akan kembali dieksekusi. Bila kondisi periksa bernilai false, maka kendali akan melewati do...while dan meneruskan ke pernyataan selanjutnya.
+
+ +

Contoh

+ +

Penggunaan do...while

+ +

Pada contoh berikut, perulangan do...while diiterasikan setidaknya sekali dan kembali di iterasikan sampai nilai i tidak kurang dari 5.

+ +

Kode HTML

+ +
<div id="example"></div>
+ +

Kode JavaScript

+ +
var result = '';
+var i = 0;
+do {
+   i += 1;
+   result += i + ' ';
+} while (i < 5);
+document.getElementById('example').innerHTML = result;
+ +

Hasil

+ +

{{ EmbedLiveSample('Examples') }}

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition. Implemented in JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}{{Spec2('ES6')}}Trailing ; is now optional.
{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}{{Spec2('ESDraft')}} 
+ +

Kompatibilitas Peramban

+ + + +

{{Compat("javascript.statements.do_while")}}

+ +

Lihat pula

+ + diff --git a/files/id/web/javascript/reference/statements/empty/index.html b/files/id/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..26b2bf8d20 --- /dev/null +++ b/files/id/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,147 @@ +--- +title: empty +slug: Web/JavaScript/Reference/Statements/Empty +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +
{{jsSidebar("Statements")}}
+ +

Pernyataan empty digunakan untuk menyediakan statement kosong, walaupun begitu sintaks JavaScript tetap menghitungnya sebagai sebuah Pernyataan.

+ +

Sintak

+ +
;
+
+ +

Deskripsi

+ +

Statemen atau penyataan kosong hanya berupa semicolon (;) menunjukkan bahawa tidak ada statement untuk dijalankan, meskipun jika sintak JavaScript membutuhkan salah satunya. Sifat kebalikan, dimana anda ingin menggunakan lebih dari satu statemen, namun javascript hanya memperbolehkan sebuah statemen kosong, anda bisa menggunakan block statement; yang merupakan gabungan dari beberapa statement menjadi satu.

+ +

Contoh

+ +

Statement kosong terkadang digunakan pada perulangan. Lihat pada contoh dengan body berisi sebuah statement kosong:

+ +
var arr = [1, 2, 3];
+
+// Assign all array values to 0
+for (i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ;
+
+console.log(arr)
+// [0, 0, 0]
+
+ +

Catatan: Ini merupakan ide yang bagus dengan menggunakan komentar pada penggunaan statement kosong, karena ini tidak benar - benar jelas seperti halnya penggunaan semicolon (;) pada umumnya. Contoh berikut bisa dikatakan merupakan penggunaan yang tidak disengaja:

+ +
if (condition);       // Perhatian, "if" tidak menjalankan apapun!
+   killTheUniverse()  // Jadi ini akan selalu di jalankan!!!
+
+ +

Contoh lain: Statemen if...else tanpa tanda kurung keriting ({}). Jika three bernilai true, tidak akan terjadi apapun, four tidak begitu penting, dan juga fungsi launchRocket() pada kasus else tidak akan dijalankan.

+ +
if (one)
+  doOne();
+else if (two)
+  doTwo();
+else if (three)
+  ; // nothing here
+else if (four)
+  doFour();
+else
+  launchRocket();
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}{{Spec2('ES1')}}Initial definition.
+ +

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

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/statements/export/index.html b/files/id/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..1f6d26b71d --- /dev/null +++ b/files/id/web/javascript/reference/statements/export/index.html @@ -0,0 +1,171 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +translation_of: Web/JavaScript/Reference/Statements/export +--- +
{{jsSidebar("Statements")}}
+ +

export statement digunakan untuk meng-ekspor fungsi, objects atau primitives dari file yang di berikan (atau module).

+ +
+

Catatan: Fitur ini tidak di implementasikan di browser secara bawaan untuk saat ini. ini hanya diimplementasikan di beberapa transpilers, seperti Traceur Compiler, Babel atau Rollup.

+
+ +

Syntax

+ +
export { name1, name2, …, nameN };
+export { variable1 as name1, variable2 as name2, …, nameN };
+export let name1, name2, …, nameN; // also var
+export let name1 = …, name2 = …, …, nameN; // also var, const
+
+export default expression;
+export default function (…) { … } // also class, function*
+export default function name1(…) { … } // also class, function*
+export { name1 as default, … };
+
+export * from …;
+export { name1, name2, …, nameN } from …;
+export { import1 as name1, import2 as name2, …, nameN } from …;
+ +
+
nameN
+
+ +

Identitas yang akan diekspor ( sehingga dapat di impor via import di lain skrip).

+ +

Deskripsi

+ +

Ada dua jenis tipe yang berbeda-beda dari export, masing-masing sesuai dengan salah satu sintaks di atas:

+ + + +

Named exports berguna untuk mengekspor beberapa nilai. Selama import, satu akan menggunakan nama yang sama untuk mengacu pada nilai yang sesuai.

+ +

Mengenai default export, hanya ada satu default export per modul. default export bisa menjadi fungsi, class, objek atau yang lainya. Nilai ini dianggap sebagai  "Pokok" pengeluaran nilai karena akan menjadi sederhana untuk di import.

+ +

Contoh

+ +

Menggunakan named exports

+ +

dalam modul, kita bisa menggunakan kode berikut:

+ +
// module "my-module.js"
+export function cube(x) {
+  return x * x * x;
+}
+const foo = Math.PI + Math.SQRT2;
+export { foo };
+
+ +

Cara ini, di dalam script lain  (cf. import), kita bisa memiliki:

+ +
import { cube, foo } from 'my-module';
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888
+ +

Menggunakan default export

+ +

Jika kita ingin mengekspor nilai tunggal atau memiliki nilai fallback untuk modul kita, kita bisa menggunakan default export:

+ +
// module "my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+
+ +

Kemudian, di lain skrip, akan lebih mudah untuk mengimpor export default :

+ +
import cube from 'my-module';
+console.log(cube(3)); // 27
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusComment
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 
+ +

Kompatibilitas browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/statements/for...in/index.html b/files/id/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..0162c204ee --- /dev/null +++ b/files/id/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,201 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Statements/for...in +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +
{{jsSidebar("Statements")}}
+ +

Pernyataan for...in mengulang setiap properti enumerable dari sebuah objek, dalam urutan sembarang. Untuk setiap properti yang berbeda, pernyataan dapat dieksekusi.

+ +

Sintak

+ +
for (variable in object) {...
+}
+ +
+
variable
+
Sebuah nama properti yang berbeda ditugaskan untuk variabel pada setiap iterasi.
+
object
+
Objek yang propertinya enumerable yang diiterasi.
+
+ +

Deskripsi

+ +

Perulangan for...in hanya mengiterasi pada properti enumerable. Objek yang dibuat dari built-in konstruktor seperti Array dan Object telah mewarisi properti non-enumerable dari Object.prototype dan String.prototype, seperti {{jsxref("String")}}'s {{jsxref("String.indexOf", "indexOf()")}} metode atau {{jsxref("Object")}}'s {{jsxref("Object.toString", "toString()")}} metode. Perulangan akan iterate atas semua properti enumerable dari objek itu sendiri dan mereka objek mewarisi dari prototipe konstruktor ini (properti lebih dekat ke objek di properti mata rantai prototipe menggantikan prototipe' properti).

+ +

Penghapusan, penambahan atau perubahan pada properti

+ +

Perulangan for...in mengiterasi properti suatu objek dalam urutan sembarang (lihat {{jsxref("Operators/delete", "delete")}} Operator untuk lebih lanjut tentang mengapa salah satu tidak dapat bergantung pada keteraturan tampak dari iterasi, setidaknya dalam pengaturan lintas-browser). Jika properti yang diubah dalam satu iterasi dan kemudian mengunjungi di lain waktu, nilainya dalam lingkaran adalah nilai pada waktu kemudian. Sebuah properti yang dihapus sebelum telah dikunjungi tidak akan dikunjungi nanti. Sifat ditambahkan ke objek dimana iterasi terjadi baik dapat dikunjungi atau dihilangkan dari iterasi. Secara umum yang terbaik adalah tidak untuk menambah, mengubah atau menghapus properti dari objek selama iterasi, selain properti saat ini sedang mengunjungi. Tidak ada jaminan apakah properti menambahkan akan dikunjungi, apakah properti dimodifikasi (selain yang saat ini) akan dikunjungi sebelum atau setelah dimodifikasi, atau apakah properti dihapus akan dikunjungi sebelum dihapus.

+ +

Iterasi Array dan for...in

+ +
+

Catatan: for...in tidak perlu digunakan untuk mengiterasi sebuah {{jsxref("Array")}} dimana urutan indeksnya sangat penting.

+
+ +

Index array hanyalah properti enumerable dengan nama integer dan tidak sama dengan properti Objek pada umumnya. Disini tidak akan menjamin jika for...in akan mengembalikan indek pada urutan tertentu.  Pernyataan for...in akan mengembalikan semua properti enumerable, termasuk didalamnya dengan nama non–integer dan serta turunannya.

+ +

Karena urutan iterasi merupakan implementation-dependent, pengiterasian pada array mungkin tidak membaca elemen pada urutan yang urut. Karena itu lebih baik menggunakan perulangan {{jsxref("Statements/for", "for")}} dengan menggunakan nomor indek (atau {{jsxref("Array.prototype.forEach()")}} atau {{jsxref("Statements/for...of", "for...of")}} loop) ketika mengiterasi array dimana urutan akses sangat penting.

+ +

Iterasi hanya pada properti sendiri

+ +

Jika anda hanya ingin mempertimbangkan properti yang melekat pada objek itu sendri, dan bukan prototypes-nya, gunakan {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} atau lakukan {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} cek ({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable")}} juga dapat digunakan). Alternatifnya, jika anda tahu disana tidak ada campur tangan kode luar , anda dapat memperpanjang built-in prototypes dengan metode cek.

+ +

Contoh

+ +

Pada fungsi berikut menggunakan sebuah objek argumen. kemudian mengiterasi pada semua properti enumerable pada objek tersebut dan mengembalikan string dari nama properti dan nilainya.

+ +
var obj = {a:1, b:2, c:3};
+
+for (var prop in obj) {
+  console.log("obj." + prop + " = " + obj[prop]);
+}
+
+// Output:
+// "obj.a = 1"
+// "obj.b = 2"
+// "obj.c = 3"
+ +

Fungsi berikut mengiterasi menggunakan {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: properti turunannya tidak akan di tampilkan.

+ +
var triangle = {a:1, b:2, c:3};
+
+function ColoredTriangle() {
+  this.color = "red";
+}
+
+ColoredTriangle.prototype = triangle;
+
+var obj = new ColoredTriangle();
+
+for (var prop in obj) {
+  if( obj.hasOwnProperty( prop ) ) {
+    console.log("obj." + prop + " = " + obj[prop]);
+  }
+}
+
+// Output:
+// "obj.color = red"
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}{{Spec2('ES1')}}Initial definition.
+ +

Kompabilitas Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FiturChromeFirefox (Gecko)Internet ExplorerOperaSafari
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FiturAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Dukungan dasar{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Kompabilitas: Ekspresi Initializer

+ +

Pada SpiderMonkey 40 {{geckoRelease(40)}} atau sebelumnya, bisa menggunakan ekspersi initializer (i=0) pada perulangan for...in :

+ +
var obj = {a:1, b:2, c:3};
+for(var i=0 in obj) {
+  console.log(obj[i]);
+}
+// 1
+// 2
+// 3
+
+ +

Perilaku non-standard ini sekarang diabaikan pada versi 40 dan selanjutnya akan disajikan dengan {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers") Peringatan pada konsole ({{bug(748550)}} dan {{bug(1164741)}}).

+ +

Pada mesin lain seperti v8 (Chrome), Chakra (IE/Edge), dan JSC (WebKit/Safari) juga telah menyelidiki untuk menghapus perilaku non standar tersebut.

+ +

Lihat Juga

+ + diff --git a/files/id/web/javascript/reference/statements/fungsi/index.html b/files/id/web/javascript/reference/statements/fungsi/index.html new file mode 100644 index 0000000000..8ac13d31af --- /dev/null +++ b/files/id/web/javascript/reference/statements/fungsi/index.html @@ -0,0 +1,232 @@ +--- +title: Deklarasi Fungsi +slug: Web/JavaScript/Reference/Statements/fungsi +tags: + - JavaScript + - Pernyataan + - Statement +translation_of: Web/JavaScript/Reference/Statements/function +--- +
{{jsSidebar("Statements")}}
+ +

Deklarasi fungsi mendefinisikan sebuah fungsi dengan parameter-parameter yang ditentukan.

+ +

Fungsi juga dapat didefinisikan menggukanan konstruktor {{jsxref("Function")}} dan {{jsxref("Operators/function", "function expression")}}.

+ +

Sintak

+ +
function name([param,[, param,[..., param]]]) {
+   [statements]
+}
+
+ +
+
name
+
Nama dari fungsi.
+
+ +
+
param
+
Nama dari argumen yang akan dilewatkan kepada fungsi. Jumlah maksimal dari argumen berbeda-beda di setiap mesin.
+
+ +
+
statements
+
Statemen-statemen yang membentuk tubuh dari sebuah fungsi.
+
+ +

Deskripsi

+ +

Sebuah fungsi yang diciptakan dengan deklarasi fungsi adalah sebuah objek Function dan memiliki semua properti, method-method dan tingkah laku dari objek Function. Lihat {{jsxref("Function")}} untuk informasi mendetail tentang fungsi-fungsi.

+ +

Sebuah fungsi juga dapat diciptakan menggunakan sebuah ekspresi (lihat  {{jsxref("Operators/function", "function expression")}}).

+ +

Secara default, fungsi mengembalikan nilai undefined. Untuk mengembalikan nilai lain, fungsi tersebut harus memiliki sebuah {{jsxref("Statements/return", "return")}} statement yang menentukan nilai untuk dikembalikan.

+ +

Fungsi yang dibuat secara kondisional

+ +

Fungsi dapat dideklarasikan secara kondisional, yaitu sebuah statement fungsi dapat disarangkan di dalam sebuah statement if. Kebanyakan aplikasi perambah selain Mozilla akan memperlakukan deklarasi kondisional seperti itu sebagai sebuah deklarasi non kondisional dan menciptakan fungsi tersebut meskipun kondisi bernilai benar atau salah, lihat artikel berikut untuk ikhtisar. Untuk alasan tersebut, deklarasi kondisional seharusnya tidak digunakan -- untuk pembuatakan kondisional gunakan ekspresi fungsi sebagai gantinya.

+ +

Pengangkatan deklarasi fungsi

+ +

Deklarasi fungsi di javaScript mengangkat definisi fungsi. Kamu dapat menggunakan fungsi sebelum kamu mendeklarasikan fungsi tersebut.

+ +
hoisted(); // logs "foo"
+
+function hoisted() {
+  console.log('foo');
+}
+
+ +

Dicatat bahwa {{jsxref("Operators/function", "function expressions")}} tidak terangkat:

+ +
notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log('bar');
+};
+
+ +

Contoh

+ +

Menggunakan fungsi

+ +

Kode berikut mendeklarasikan sebuah fungsi yang mengembalikan jumlah total penjualan ketika diberikan angka dari unit-unit yang terjual dari produk a, b, dan c.

+ +
function calc_sales(units_a, units_b, units_c) {
+   return units_a * 79 + units_b * 129 + units_c * 699;
+}
+
+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Function definition')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Function definition')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-13', 'Function definition')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
+ +

Kompabilitas Perambah

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatChrome(49.0)}}{{CompatUnknown}}    
Trailing comma in parameters{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Allowed in sloppy mode{{CompatNo}} +

{{CompatChrome(49.0)}}

+ 		{{CompatUnknown}}     +

{{CompatChrome(49.0)}}

+
Trailing comma in parameters{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Lihat juga

+ + diff --git a/files/id/web/javascript/reference/statements/index.html b/files/id/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..08840f4e1a --- /dev/null +++ b/files/id/web/javascript/reference/statements/index.html @@ -0,0 +1,139 @@ +--- +title: Statements +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - Referensi + - Statement +translation_of: Web/JavaScript/Reference/Statements +--- +
{{jsSidebar("Statements")}}
+ +

Aplikasi JavaScript terdiri dari statemen dengan sebuah sintaks tertentu. Sebuah statement dapat terdiri lebih dari satu baris. Setiap statement dapat berupa sebaris kode jika di pisahkan dengan semikolon ( ; ). Bukan merupakan keyword, tapi sekumpulan keyword.

+ +

Statemen dan deklarasi berdasarkan kategori

+ +

Untuk daftar berdasarkan alfabet lihat pada sidebar sebelah kiri.

+ +

Control flow

+ +
+
{{jsxref("Statements/block", "Block")}}
+
Sebuah block statemen digunakan untuk mengelompokkan zero ( 0 ) atau lebih statement. Block ini dibatasi menggunakan kurung kurawal.
+
{{jsxref("Statements/break", "break")}}
+
Membatasi  loop, switch, atau label statement dan transfer kontrol program pada statement berdasakan statemen akhir.
+
{{jsxref("Statements/continue", "continue")}}
+
Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.
+
{{jsxref("Statements/Empty", "Empty")}}
+
An empty statement is used to provide no statement, although the JavaScript syntax would expect one.
+
{{jsxref("Statements/if...else", "if...else")}}
+
Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.
+
{{jsxref("Statements/switch", "switch")}}
+
Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.
+
{{jsxref("Statements/throw", "throw")}}
+
Throws a user-defined exception.
+
{{jsxref("Statements/try...catch", "try...catch")}}
+
Marks a block of statements to try, and specifies a response, should an exception be thrown.
+
+ +

Deklarasi

+ +
+
{{jsxref("Statements/var", "var")}}
+
Mendeklarasikan variabel, biasanya menginisialisasi ke sebuah nilai.
+
{{jsxref("Statements/let", "let")}}
+
Declares a block scope local variable, optionally initializing it to a value.
+
{{jsxref("Statements/const", "const")}}
+
Declares a read-only named constant.
+
+ +

Fungsi dan class

+ +
+
{{jsxref("Statements/function", "function")}}
+
Declares a function with the specified parameters.
+
{{jsxref("Statements/function*", "function*")}}
+
Generators functions enable writing iterators more easily.
+
{{jsxref("Statements/return", "return")}}
+
Specifies the value to be returned by a function.
+
{{jsxref("Statements/class", "class")}}
+
Declares a class.
+
+ +

Iterations

+ +
+
{{jsxref("Statements/do...while", "do...while")}}
+
Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.
+
{{jsxref("Statements/for", "for")}}
+
Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.
+
{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}
+
Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.
+
{{jsxref("Statements/for...in", "for...in")}}
+
Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.
+
{{jsxref("Statements/for...of", "for...of")}}
+
Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, iterators and generators), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
+
{{jsxref("Statements/while", "while")}}
+
Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.
+
+ +

Others

+ +
+
{{jsxref("Statements/debugger", "debugger")}}
+
Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.
+
{{jsxref("Statements/export", "export")}}
+
Used to export functions to make them available for imports in external modules, another scripts.
+
{{jsxref("Statements/import", "import")}}
+
Used to import functions exported from an external module, another script.
+
{{jsxref("Statements/label", "label")}}
+
Provides a statement with an identifier that you can refer to using a break or continue statement.
+
+ +
+
{{deprecated_inline}} {{jsxref("Statements/with", "with")}}
+
Extends the scope chain for a statement.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1', '#sec-12', 'Statements')}}{{Spec2('ES1')}}Initial definition
{{SpecName('ES3', '#sec-12', 'Statements')}}{{Spec2('ES3')}} 
{{SpecName('ES5.1', '#sec-12', 'Statements')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ES6')}}New: function*, let, for...of, yield, class
{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ESDraft')}} 
+ +

See also

+ + diff --git a/files/id/web/javascript/sekilas_teknologi_javascript/index.html b/files/id/web/javascript/sekilas_teknologi_javascript/index.html new file mode 100644 index 0000000000..adb6ec5a68 --- /dev/null +++ b/files/id/web/javascript/sekilas_teknologi_javascript/index.html @@ -0,0 +1,87 @@ +--- +title: Ikhtisar Teknologi JavaScript +slug: Web/JavaScript/sekilas_teknologi_JavaScript +translation_of: Web/JavaScript/JavaScript_technologies_overview +--- +
{{JsSidebar("Introductory")}}
+ +

Pengantar

+ +

Jika HTML untuk mengatur struktur dan konten dari halaman web dan CSS untuk menetapkan format dan tampilannya, maka JavaScript digunakan untuk menambah interaksi pada halaman web dan menciptakan aplikasi web yang kaya.

+ +

Namun, istilah "JavaScript" seperti yang dikenal pada konteks browser web berisi beberapa elemen yang sangat berbeda. Salah satunya adalah bahasa intinya (ECMAScript), yang lainnya adalah koleksi dari Web APIs, termasuk DOM (Document Object Model).

+ +

Bahasa inti (ECMAScript) JavaScript

+ +

Bahasa inti dari JavaScript distandarisasi oleh komite ECMA TC39 sebagai bahasa yang bernama ECMAScript.

+ +

Bahasa inti ini juga digunakan pada lingkungan non-browser, misalnya node.js.

+ +

Apa yang termasuk dalam lingkup ECMAScript?

+ +

Diantaranya, ECMAScript menetapkan:

+ + + +

Dukungan browser

+ +

Pada Oktober 2016, versi terbaru dari sebagian besar browser Web sudah menerapkan ECMAScript 5.1 dan ECMAScript 2015, namun versi yang lebih lama (yang masih digunakan) hanya menerapkan ECMAScript 5.

+ +

Masa depan

+ +

ECMAScript Edisi ke-6 mayor telah secara resmi disetujui dan diumumkan sebagai standar pada 17 Juni 1015 oleh ECMA General Assembly. Sejak saat itu Edisi ECMAScript diumumkan secara tahunan.

+ +

API Internasionalisasi

+ +

Spesifikasi API Internasionalisasi ECMAScript merupakan tambahan dari Spesifikasi Bahasa ECMAScript, yang juga distandarisasi oleh Ecma TC39. API internasionalisasi menyediakan kolasi (perbandingan string), format angka, format tanggal dan jam untuk aplikasi JavaScript, memungkinkan aplikasi memilih bahasa dan menyesuaikan fungsi sesuai kebutuhannya. Standar awal telah disetujui pada Desember 2012; status impementasinya dalam browser dicatat di dokumentasi Intl object. Saat ini spesifikasi Internasionalisasi juga disahkan secara tahunan dan browser secara konsisten meningkatkan implementasinya.

+ +

API DOM

+ +

WebIDL

+ +

WebIDL specification memberikan perekat antara teknologi DOM dan ECMAScript.

+ +

Inti dari DOM

+ +

Document Object Model (DOM) adalah bahasa konvensi independen lintas platform untuk mewakili dan berinteraksi dengan objects dalam dokumen HTML, XHTML dan XML. Objects didalam DOM tree dapat dialamatkan dan dimanipulasi dengan menggunakan methods pada objects. Core Document Object Model yang distandarisasi oleh {{glossary("W3C")}}, menetapkan antarmuka bahasa-agnostik untuk mengabstaraksi dokumen HTML dan XML sebagai objects, dan juga menetapkan mekanisme untuk memanipulasi abstraksi ini. Diantara yang ditetapkan oleh DOM, kita dapat menemukan:

+ + + +

Dari sudut pandang ECMAScript, objects yang didefinisikan di spesifikasi DOM disebut "host objects".

+ +

HTML DOM

+ +

Bahasa markup Web (HTML) yang ditetapkan dari sisi DOM. Seperti dalam konsep abstrak yang dibahas diatas pada Inti DOM, HTML juga didefinisikan sebagai sebuah elemen. The HTML DOM menyertakan properti className pada elemen HTML, or APIs seperti {{ domxref("document.body") }}.

+ +

Spesifikasi HTML juga menetapkan batasan pada dokumen; misalnya, ia memerlukan semua elemen anak dari sebuah ul untuk mewakili sebuah daftar tak urut, elemen li untuk mewakili daftar item. Secara umum, ia juga melarang penggunaan elemen dan atribut yang tidak didefinisikan dalam standar.

+ +

Ingin mengetahui Document object, Window object, dan elemen DOM lainnya? Baca DOM documentation.

+ +

API penting lainnya

+ + + +

Dukungan browser

+ +

Seperti kata pengembang web yang berpengalaman, DOM berantakan. Dukungan fitur-fitur DOM antar browser bervarasi, terutama disebabkan karena banyak fitur yang penting dari DOM sangat tidak jelas, spesifikasi (jika ada) dan browser web yang berbeda menambahkan fitur yang tidak kompatibel untuk overlapping use cases (misalnya Internet Explorer event model). Pada Juni 2011, W3C dan khususnya WHATWG menetapkan fitur-fitur lama secara rinci untuk meningkatkan interoperabilitas, dan browser pada akhirnya dapat meningkatkan implementasi mereka berdasarkan spesifikasi ini.

+ +

Sebuah teknik umum, meskipun mungkin bukan yang paling dapat diandalkan, pendekatan kompatibilitas lintas browser adalah dengan menggunakan pustaka JavaScript, yang menggunakan fitur DOM abstrak untuk menjaga API mereka tetap bekerja di browser yang berbeda. Beberapa framework yang paling banyak digunakan adalah jQuery, prototype, dan YUI.

diff --git a/files/id/web/mathml/element/index.html b/files/id/web/mathml/element/index.html new file mode 100644 index 0000000000..cb570e4974 --- /dev/null +++ b/files/id/web/mathml/element/index.html @@ -0,0 +1,234 @@ +--- +title: MathML element reference +slug: Web/MathML/Element +tags: + - MathML + - Referensi MathML +translation_of: Web/MathML/Element +--- +

{{MathMLRef}}

+ +

Ini adalah daftar alfabet dari elemen presentasi MathML.

+ +

Istilah Markup presentasi digunakan untuk menggambarkan struktur tata letak notasi matematika sedangkan konten markup memberikan makna matematika yang mendasari dan tidak seharusnya diberikan oleh parser MathML (lihat {{bug (276028)}}). Jika Anda ingin mempelajari lebih lanjut tentang markup konten yang harus Anda pertimbangkan Chapter 4 pada MathML 3 specification.

+ +

MathML presentation elements A  to Z

+ +
+

math

+ +
    +
  • {{MathMLElement("math")}} (Top-level element)
    • +
+ +

A

+ +
    +
  • {{MathMLElement("maction")}} (Binded actions to sub-expressions)
    • +
  • {{MathMLElement("maligngroup")}} (Alignment group)
    • +
  • {{MathMLElement("malignmark")}} (Alignment points)
    • +
+ +

E

+ +
    +
  • {{MathMLElement("menclose")}} (Enclosed contents)
    • +
  • {{MathMLElement("merror")}} (Enclosed syntax error messages)
    • +
+ +

F

+ +
    +
  • {{MathMLElement("mfenced")}} (Parentheses)
    • +
  • {{MathMLElement("mfrac")}} (Fraction)
    • +
+ +

G

+ +
    +
  • {{MathMLElement("mglyph")}} (Displaying non-standard symbols)
    • +
+ +

I

+ +
    +
  • {{MathMLElement("mi")}} (Identifier)
    • +
+ +

L

+ +
    +
  • {{MathMLElement("mlabeledtr")}} (Labeled row in a table or a matrix)
    • +
  • {{MathMLElement("mlongdiv")}} (Long division notation)
    • +
+ +

M

+ +
    +
  • {{MathMLElement("mmultiscripts")}} (Prescripts and tensor indices)
    • +
+ +

N

+ +
    +
  • {{MathMLElement("mn")}} (Number)
    • +
+ +

O

+ +
    +
  • {{MathMLElement("mo")}} (Operator)
    • +
  • {{MathMLElement("mover")}} (Overscript)
    • +
+ +

P

+ +
    +
  • {{MathMLElement("mpadded")}} (Space around content)
    • +
  • {{MathMLElement("mphantom")}} (Invisible content with reserved space)
    • +
+ +

R

+ +
    +
  • {{MathMLElement("mroot")}} (Radical with specified index)
    • +
  • {{MathMLElement("mrow")}} (Grouped sub-expressions)
    • +
+ +

S

+ +
    +
  • {{MathMLElement("ms")}} (String literal)
    • +
  • {{MathMLElement("mscarries")}} (Annotations such as carries)
    • +
  • {{MathMLElement("mscarry")}} (Single carry, child element of {{MathMLElement("mscarries")}})
    • +
  • {{MathMLElement("msgroup")}} (Grouped rows of {{MathMLElement("mstack")}} and {{MathMLElement("mlongdiv")}} elements)
    • +
  • {{MathMLElement("msline")}} (Horizontal lines inside {{MathMLElement("mstack")}} elements)
    • +
  • {{MathMLElement("mspace")}} (Space)
    • +
  • {{MathMLElement("msqrt")}} (Square root without an index)
    • +
  • {{MathMLElement("msrow")}} (Rows in {{MathMLElement("mstack")}} elements)
    • +
  • {{MathMLElement("mstack")}} (Stacked alignment)
    • +
  • {{MathMLElement("mstyle")}} (Style change)
    • +
  • {{MathMLElement("msub")}} (Subscript)
    • +
  • {{MathMLElement("msup")}} (Superscript)
    • +
  • {{MathMLElement("msubsup")}} (Subscript-superscript pair)
    • +
+ +

T

+ +
    +
  • {{MathMLElement("mtable")}} (Table or matrix)
    • +
  • {{MathMLElement("mtd")}} (Cell in a table or a matrix)
    • +
  • {{MathMLElement("mtext")}} (Text)
    • +
  • {{MathMLElement("mtr")}} (Row in a table or a matrix)
    • +
+ +

U

+ +
    +
  • {{MathMLElement("munder")}} (Underscript)
    • +
  • {{MathMLElement("munderover")}} (Underscript-overscript pair)
    • +
+ +

Other elements

+ +
    +
  • {{MathMLElement("semantics")}} (Container for semantic annotations)
    • +
  • <annotation> (Data annotations)
    • +
  • <annotation-xml> (XML annotations)
    • +
+
+ +

Elemen presentasi MathML berdasarkan kategori

+ +

 

+ +

Elemen tingkat atas

+ + + +

Elemen Token

+ + + +

Tata letak umum

+ + + +

Script dan batas elemen

+ + + +

Tabular Matematika

+ + + +

Matematika dasar

+ + + +

Elemen yang tidak terkategorikan

+ + + +

Anotasi semantik

+ + + +

Lihat juga

+ + diff --git a/files/id/web/mathml/index.html b/files/id/web/mathml/index.html new file mode 100644 index 0000000000..7c41b63f49 --- /dev/null +++ b/files/id/web/mathml/index.html @@ -0,0 +1,76 @@ +--- +title: MathML +slug: Web/MathML +tags: + - Landing + - MathML + - NeedsTranslation + - Reference + - TopicStub + - Web + - XML +translation_of: Web/MathML +--- +
{{MathMLRef}}
+ +

Mathematical Markup Language (MathML) is a dialect of XML for describing mathematical notation and capturing both its structure and content.

+ +

Here you'll find links to documentation, examples, and tools to help you work with this powerful technology. For a quick overview, see the slides for the innovation fairs at Mozilla Summit 2013.

+ +
+
+

MathML reference

+ +
+
MathML element reference
+
Details about each MathML element and compatibility information for desktop and mobile browsers.
+
MathML attribute reference
+
Information about MathML attributes that modify the appearance or behavior of elements.
+
MathML examples
+
MathML samples and examples to help you understand how it works.
+
Authoring MathML
+
Suggestions and tips for writing MathML, including suggested MathML editors and how to integrate their output into Web content.
+
+ +

View All...

+
+ +
+

Getting help from the community

+ + + +

Tools

+ + + + + + +
+
+ +

Browser compatibility

+ + + +

{{Compat("mathml.elements.math", 0)}}

diff --git a/files/id/web/reference/api/index.html b/files/id/web/reference/api/index.html new file mode 100644 index 0000000000..d8589d167f --- /dev/null +++ b/files/id/web/reference/api/index.html @@ -0,0 +1,65 @@ +--- +title: Referensi Web API +slug: Web/Reference/API +tags: + - API + - Landing + - Reference + - Web + - Web Desain +translation_of: Web/Reference/API +--- +

Web menyediakan banyak API untuk melaksanakan berbagai tugas. Seluruh API ini dapat diakses menggunakan kode Javascript, dan memungkinkan kita untuk melakukan perubahan-perubahan minor kepada {{domxref("window")}} atau {{domxref("element")}} maupun menghasilkan efek-efek video dan audio yang luar biasa menggunakan API seperti WebGL dan Web Audio.

+ +

Masing-masing antarmuka dari seluruh API yang ada didaftarkan pada index.

+ +

Ada juga daftar dari semua event yang tersedia pada referensi event.

+ +
+
+
+
Dokumen Object Model
+
DOM adalah API yang memungkinkan modifikasi pada dokumen. Memungkinkan manipulasi dari dokumen {{domxref("Node")}} dan {{domxref("Element")}}. HTML, XML, dan SVG mempunyai kelebihan itu untuk memanipulasi beberapa spesifik element.
+
Device API
+
Merupakan seperangkat APIs yang memungkinkan kita untuk mengakses ke seluruh fitur hardware yang tersedia ke halaman Web dan aplikasi. Misal. Ambient Light Sensor API, Battery Status API, Geolocation API, Pointer Lock API, Proximity API, Device Orientation API, Screen Orientation API, Vibration API.
+
Communication APIs
+
API ini memungkinkan halaman Web dan aplikasi berkomunikasi dengan halaman lain atau perangkat tertentu. Misal. Network Information API, Web Notifications, Simple Push API.
+
Data management APIs
+
Data pengguna dapat disimpan dan di kendalikan menggunakan perangkat API ini. Misal. FileHandle API, IndexedDB.
+
+ +

Tambahan dari API ini yang tersedia untuk setiap halaman Web dan aplikasi, sebuah set yang lebih powerfull yaitu Mozilla API tersedia untuk aplikasi khusus dan bersertifikat.

+ +
+
Privileged APIs
+
Aplikasi khusus merupakan aplikasi yang di install dengan hak khusus yang ditentukan pengguna. Privileged API meliputi: TCP Socket API, Contacts API, Device Storage API, Browser API, Camera API.
+
Certified APIs
+
Aplikasi bersertifikat merupakan aplikasi tingkat rendah yang melakukan operasi penting dalam sebuah sistem operasi seperti Firefox OS. Aplikasi Khusus tidak berinteraksi dengan aplikasi inimenggunakan Web Activities.  Certified APIs meliputi: Bluetooth API, Mobile Connection API, Network Stats API, Telephony, WebSMS, WiFi Information API, Power Management API, Settings API, Idle API, Permissions API, Time/Clock API.
+
+
+ +
+

Komunitas

+ +

Bergabung dengan komunitas API Web pada milis kami atau newsgroup:

+ + + +

Juga, pastikan bergabung pada diskusi secara langsung di channel #webapi di IRC.

+ + + +

Mungkin anda juga tertarik dengan topik berikut:

+ + +
+
+ +

 

diff --git a/files/id/web/reference/index.html b/files/id/web/reference/index.html new file mode 100644 index 0000000000..445d9adf8a --- /dev/null +++ b/files/id/web/reference/index.html @@ -0,0 +1,49 @@ +--- +title: Web technology reference +slug: Web/Reference +tags: + - Landing + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/Reference +--- +

{{draft()}}

+

The open Web is built using a number of technologies. Below you'll find links to our reference material for each of them.

+
+
+

Core Web technologies

+
+
+ Web API interface reference
+
+ Reference material for each of the interfaces that comprise the Web's APIs, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps. This list covers all interfaces, arranged alphabetically.
+
+ Web APIs
+
+ A list of the individual APIs and technology suites that make up the overall Web API.
+
+ HTML
+
+ HyperText Markup Language is the language used to describe and define the content of a Web page.
+
+ CSS
+
+ Cascading Style Sheets are used to describe the appearance of Web content.
+
+ SVG
+
+ Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.
+
+ MathML
+
+ The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.
+
+
+
+

Other technologies

+

To be completed soon...

+
+
+

 

diff --git a/files/id/web/security/index.html b/files/id/web/security/index.html new file mode 100644 index 0000000000..cc8b113b7a --- /dev/null +++ b/files/id/web/security/index.html @@ -0,0 +1,12 @@ +--- +title: Web security +slug: Web/Security +translation_of: Web/Security +--- +

+Memastikan bahwa situs web Anda atau aplikasi web terbuka aman sangat penting. Bahkan bug sederhana dalam kode Anda dapat menyebabkan kebocoran informasi pribadi, dan orang jahat di luar sana berusaha mencari cara untuk mencuri data. Artikel berorientasi keamanan web yang tercantum di sini menyediakan informasi yang dapat membantu Anda mengamankan situs Anda dan kode dari serangan dan pencurian data

+ + +

{{LandingPageListSubpages}}

+ +

{{QuickLinksWithSubpages}}

diff --git a/files/id/web/web_components/index.html b/files/id/web/web_components/index.html new file mode 100644 index 0000000000..326823bdbb --- /dev/null +++ b/files/id/web/web_components/index.html @@ -0,0 +1,230 @@ +--- +title: Web Components +slug: Web/Web_Components +tags: + - Artikel Web + - Gambaran + - HTML Imports + - JavaScript + - Landing + - Pengembangan Web + - Template + - Web Components + - component + - custom elements + - shadow dom + - slot +translation_of: Web/Web_Components +--- +
{{DefaultAPISidebar("Web Components")}}
+ +
+

Web Components adalah kumpulan fitur teknologi yang memungkinkan Anda membuat elemen khusus yang dapat digunakan kembali dengan fungsionalitasnya yang dikemas jauh dari sisa kode Anda dan menggunakannya di aplikasi web Anda.

+
+ +

Konsep dan penggunaan

+ +

Sebagai pengembang, kita semua tahu bahwa menggunakan kembali kode sebanyak mungkin merupakan ide yang bagus. Hal ini biasanya tidak mudah untuk struktur markup kustom memikirkan HTML kompleks (serta gaya dan skrip terkait) yang terkadang harus Anda tulis untuk memnuat kontrol UI khusus, dan bagaimana menggunakannya beberapa kali dapat mengubah halaman Anda menjadi berantankan jika Anda tidak berhati-hati.

+ +

Web Components bertujun untuk menyelesaikan masalah yang terdiri dari tiga teknologi utama, yang dapat digunakan bersama untuk membuat elemen kustom serbaguna dengan fungsionalitas terenkapsulasi yang dapat digunakan kembali di mana pun Anda suka tanpa takut benturan kode.

+ + + +

Pendekatan dasar untuk mengimplementasikan web component biasanya terlihat seperti ini:

+ +
    +
  1. Buat kelas di mana Anda menentukan fungsionalitas web component Anda, menggunakan sintaks kelas ECMAScript 2015 (lihat Kelas untuk informasi lebih lanjut).
    2. +
  2. Daftarkan elemen kustom baru Anda menggunakan metode {{domxref ("CustomElementRegistry.define ()")}}, meneruskan nama elemen yang akan ditentukan, kelas atau fungsi di mana fungsionalitasnya ditentukan, dan secara opsional, elemen apa yang diwarisi dari.
    3. +
  3. Jika perlu, lampirkan shadow DOM ke elemen khusus menggunakan metode {{domxref ("Element.attachShadow ()")}}. Tambahkan child element, event listener, dll., Ke shadow DOM menggunakan metode DOM biasa.
    4. +
  4. Jika perlu, tentukan template HTML menggunakan {{htmlelement ("template")}} dan {{htmlelement ("slot")}}. Sekali lagi gunakan metode DOM biasa untuk mengkloning template dan melampirkannya ke shadow DOM Anda.
    5. +
  5. Gunakan elemen kustom Anda di mana pun Anda suka di halaman Anda, seperti yang Anda lakukan pada elemen HTML biasa.
    6. +
+ +

Tutorial

+ +
+
Menggunakan custom element
+
Panduan yang menunjukkan cara menggunakan fitur elemen khusus untuk membuat komponen web sederhana, serta melihat callback siklus proses dan beberapa fitur lanjutan lainnya.
+
Menggunakan shadow DOM
+
Panduan yang mempelajari dasar-dasar shadow DOM, menunjukkan cara melampirkan shadow DOM ke elemen, menambahkan ke shadow DOM tree, menatanya, dan banyak lagi.
+
Menggunakan templates and slots
+
Panduan yang menunjukkan cara menentukan struktur HTML yang dapat digunakan kembali menggunakan elemen {{htmlelement ("template")}} dan {{htmlelement ("slot")}}, lalu menggunakan struktur tersebut di dalam komponen web Anda.
+
+ +

Referensi

+ +

Custom elements

+ +
+
{{domxref("CustomElementRegistry")}}
+
Berisi fungsionalitas yang terkait dengan elemen kustom, terutama metode {{domxref ("CustomElementRegistry.define()")}} yang digunakan untuk mendaftarkan elemen kustom baru sehingga dapat digunakan di dokumen Anda.
+
{{domxref("Window.customElements")}}
+
Mengembalikan referensi ke objek {{domxref("CustomElementRegistry.define()")}}.
+
Life cycle callbacks
+
Fungsi panggilan balik khusus yang ditentukan di dalam definisi kelas elemen khusus, yang memengaruhi perilakunya: +
    +
  • connectedCallback: Dipanggil saat elemen khusus pertama kali dihubungkan ke DOM dokumen.
    • +
  • disconnectedCallback: Dipanggil ketika elemen khusus terputus dari DOM dokumen.
    • +
  • adoptedCallback: Dipanggil ketika elemen kustom dipindahkan ke dokumen baru.
    • +
  • attributeChangedCallback: Dipanggil ketika salah satu atribut elemen khusus ditambahkan, dihapus, atau diubah.
    • +
+
+
+
    +
+
+
+ +
+
Ekstensi untuk membuat elemen bawaan khusus
+
+
    +
  • Atribut HTML global {{htmlattrxref ("is")}}: Memungkinkan Anda menentukan bahwa elemen HTML standar harus berperilaku seperti elemen bawaan khusus terdaftar.
    • +
  • Opsi "is" dari metode {{domxref ("Document.createElement()")}}: Memungkinkan Anda membuat instance elemen HTML standar yang berperilaku seperti elemen bawaan khusus terdaftar yang diberikan.
    • +
+
+
CSS pseudo-classes
+
Pseudo-classes yang berkaitan secara khusus dengan elemen khusus: +
    +
  • {{cssxref(":defined")}}: Mencocokkan elemen apa pun yang ditentukan, termasuk elemen bawaan dan elemen khusus yang ditentukan dengan CustomElementRegistry.define()).
    • +
  • {{cssxref(":host")}}: Memilih shadow host dari shadow DOM yang berisi CSS yang digunakan di dalamnya.
    • +
  • {{cssxref(":host()")}}: Memilih shadow host dari shadow DOM yang berisi CSS yang digunakan di dalamnya (sehingga Anda dapat memilih elemen khusus dari dalam shadow DOM-nya) tetapi hanya jika pemilih yang diberikan sebagai parameter fungsi cocok dengan shadow host.
    • +
  • {{cssxref(":host-context()")}}: Memilih shadow host dari shadow DOM yang berisi CSS yang digunakan di dalamnya (sehingga Anda dapat memilih elemen khusus dari dalam shadow DOM-nya) tetapi hanya jika pemilih yang diberikan sebagai parameter fungsi cocok dengan leluhur host bayangan di tempat itu itu berada di dalam hierarki DOM.
    • +
+
+
Pseudo-elements yang berkaitan secara khusus dengan elemen khusus: +
    +
  • {{cssxref("::part")}}: Merepresentasikan elemen apa pun dalam shadow tree yang memiliki atribut {{HTMLAttrxRef ("part")}} yang cocok.
    • +
+
+
+ +

Shadow DOM

+ +
+
{{domxref("ShadowRoot")}}
+
Merepresentasikan root node dari shadow DOM subtree.
+
{{domxref("DocumentOrShadowRoot")}}
+
Fitur penentu mixin yang tersedia di seluruh dokumen dan shadow roots.
+
Ekstensi {{domxref("Element")}}
+
Ekstensi ke antarmuka Element yang terkait dengan shadow DOM: +
    +
  • Metode {{domxref ("Element.attachShadow ()")}} melampirkan shadow DOM tree ke elemen yang ditentukan.
    • +
  • Properti {{domxref ("Element.shadowRoot")}} mengembalikan shadow root yang dilampirkan ke elemen yang ditentukan, atau null jika tidak ada shadow root yang terpasang.
    • +
+
+
Penambahan {{domxref ("Node")}} yang relevan
+
Penambahan antarmuka Node yang relevan dengan shadow DOM: +
    +
  • Metode {{domxref ("Node.getRootNode ()")}} mengembalikan root objek konteks, yang secara opsional menyertakan shadow root jika tersedia.
    • +
  • Properti {{domxref ("Node.isConnected")}} mengembalikan boolean yang menunjukkan apakah Node terhubung (langsung atau tidak langsung) ke objek konteks atau tidak, misalnya objek {{domxref ("Document")}} dalam kasus DOM normal, atau {{domxref ("ShadowRoot")}} untuk shadow DOM.
    • +
+
+
Ekstensi {{domxref("Event")}}
+
Ekstensi ke antarmuka Event yang terkait dengan shadow DOM: +
    +
  • {{domxref ("Event.composed")}}: Mengembalikan {{jsxref ("Boolean")}} yang menunjukkan apakah acara akan menyebar melintasi batas shadow DOM ke DOM standar (true), atau tidak (false).
    • +
  • {{domxref("Event.composedPath")}}: Mengembalikan event's path (objek tempat pemroses akan dipanggil). Ini tidak termasuk node dalam shadow tree jika shadow root dibuat dengan {{domxref ("ShadowRoot.mode")}} ditutup.
    • +
+
+
+ +

HTML templates

+ +
+
{{htmlelement("template")}}
+
Berisi fragmen HTML yang tidak dirender saat dokumen penampung awalnya dimuat, tetapi dapat ditampilkan saat runtime menggunakan JavaScript, terutama digunakan sebagai dasar struktur elemen khusus. Antarmuka DOM terkait adalah {{domxref ("HTMLTemplateElement")}}.
+
{{htmlelement("slot")}}
+
Placeholder di dalam web component yang dapat Anda isi dengan markup Anda sendiri, yang memungkinkan Anda membuat DOM tree terpisah dan menyajikannya bersama-sama. Antarmuka DOM terkait adalah {{domxref ("HTMLSlotElement")}}
+
Atribut HTML global slot
+
Menetapkan slot di shadow tree shadow DOM ke sebuah elemen.
+
{{domxref("Slotable")}}
+
Mixin yang diimplementasikan oleh node {{domxref ("Element")}} dan {{domxref ("Text")}}, mendefinisikan fitur yang memungkinkan mereka menjadi konten elemen {{htmlelement ("slot")}}. Mixin mendefinisikan satu atribut, {{domxref ("Slotable.assignedSlot")}}, yang mengembalikan referensi ke slot tempat node disisipkan.
+
+ +
+
Ekstensi {{domxref("Element")}}
+
Extensions ke antarmuka Element yang terkait dengan slot: +
    +
  • {{domxref("Element.slot")}}: Mengembalikan nama slot shadow DOM yang dilampirkan ke elemen.
    • +
+
+
CSS pseudo-elements
+
Pseudo-elements yang berkaitan secara khusus dengan slot: +
    +
  • {{cssxref("::slotted")}}: Mencocokkan konten apa pun yang dimasukkan ke dalam slot.
    • +
+
+
Event {{event("slotchange")}}
+
Diaktifkan pada instance {{domxref ("HTMLSlotElement")}} (elemen {{htmlelement ("slot")}}) saat node yang ada di slot itu berubah.
+
+ +

Contoh

+ +

Kami sedang membangun sejumlah contoh dalam repo GitHub contoh komponen web kami. Lebih banyak akan ditambahkan seiring berjalannya waktu.

+ +

Spesifikasi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpesifikasiStatusKomentar
{{SpecName("HTML WHATWG","scripting.html#the-template-element","<template> element")}}{{Spec2("HTML WHATWG")}}Definisi dari {{HTMLElement("template")}}.
{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}{{Spec2("HTML WHATWG")}}Definisi dari HTML Custom Elements.
{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}{{Spec2("DOM WHATWG")}}Definisi dari Shadow DOM.
{{SpecName("HTML Imports", "", "")}}{{Spec2("HTML Imports")}}Definisi Impor HTML awal.
{{SpecName("Shadow DOM", "", "")}}{{Spec2("Shadow DOM")}}Definisi Shadow DOM awal.
+ +

Kompabilitas browser

+ +

Umumnya:

+ + + +

Untuk dukungan browser mendetail dari fitur tertentu, Anda harus membaca halaman referensi yang tercantum di atas.

+ +

Lihat juga

+ + diff --git a/files/id/zones/index.html b/files/id/zones/index.html new file mode 100644 index 0000000000..1e9cf86546 --- /dev/null +++ b/files/id/zones/index.html @@ -0,0 +1,70 @@ +--- +title: Zones +slug: Zones +translation_of: Zones +--- +

MDN zones provide you one-stop access to information about specific topic areas or products. Here's a list of all the zones available to you.

+
+
+

Web and app development

+
+
+ App Center
+
+ Learn how to create open Web apps—rich experiences that run across multiple devices and form factors—using the same Web standards and open technologies you already know.
+
+ Developer tools
+
+ Learn how to use the Firefox developer tools to debug, test, and optimize your Web apps and sites.
+
+ Firefox Marketplace
+
+ An open, non-proprietary online marketplace for Web applications built using HTML, CSS, and JavaScript. Submit apps to the Firefox Marketplace or use the code to build your own marketplace.
+
+ Game development
+
+ Learn how to develop games for the Web, how to port existing games to Web technologies, and how to turn your games into Web apps.
+
+ Mozilla Developer Program
+
+ Learn more about the Mozilla Developer Program, where you can sign up for membership in the program, subscribe to our newsletter, and access our growing array of features for Web developers.
+
+
+
+

Products and projects

+
+
+ Emscripten
+
+ An LLVM to JavaScript compiler; this lets you compile, for example, C++ code into JavaScript code which can be run in any Web browser.
+
+ L20n
+
+ A JavaScript localization framework for unleashing your natural language's power with simple code.
+
+ The MDN project
+
+ The Mozilla Developer Network (this site) relies on its community of readers and contributors to grow and improve. You can learn here how to help use, contribute to, and build the code behind MDN!1
+
+ Persona
+
+ A new simple, privacy-sensitive single-sign in system developed by Mozilla which lets users log into your Web site using their email address, freeing you from password management.
+
+

Mozilla technologies

+
+
+ Add-ons
+
+ Learn how to build and install extensions, themes, and plug-ins for Mozilla-based software, including the popular Firefox Web browser.
+
+ Firefox
+
+ Learn all about Firefox, from how to build and revise it to how to build add-ons specifically for it.
+
+ Firefox OS
+
+ A new mobile operating system developed by Mozilla which lets users install and run open Web applications created using HTML, CSS, and JavaScript.
+
+
+
+

 

diff --git a/files/it/_redirects.txt b/files/it/_redirects.txt new file mode 100644 index 0000000000..0fdb919288 --- /dev/null +++ b/files/it/_redirects.txt @@ -0,0 +1,457 @@ +# FROM-URL TO-URL +/it/docs/AJAX /it/docs/Web/Guide/AJAX +/it/docs/AJAX/Iniziare /it/docs/Web/Guide/AJAX/Iniziare +/it/docs/AJAX:Iniziare /it/docs/Web/Guide/AJAX/Iniziare +/it/docs/CSS /it/docs/Web/CSS +/it/docs/CSS/-moz-font-language-override /it/docs/Web/CSS/-moz-font-language-override +/it/docs/CSS/:-moz-first-node /it/docs/Web/CSS/:-moz-first-node +/it/docs/CSS/:-moz-last-node /it/docs/Web/CSS/:-moz-last-node +/it/docs/CSS/:-moz-list-bullet /it/docs/Web/CSS/:-moz-list-bullet +/it/docs/CSS/@-moz-document /it/docs/Web/CSS/%40document +/it/docs/CSS/Getting_Started /it/docs/Conoscere_i_CSS +/it/docs/CSS/Mozilla_Extensions /it/docs/Web/CSS/Mozilla_Extensions +/it/docs/CSS/background /it/docs/Web/CSS/background +/it/docs/CSS/background-attachment /it/docs/Web/CSS/background-attachment +/it/docs/CSS/background-color /it/docs/Web/CSS/background-color +/it/docs/CSS/background-image /it/docs/Web/CSS/background-image +/it/docs/CSS/background-position /it/docs/Web/CSS/background-position +/it/docs/CSS/background-repeat /it/docs/Web/CSS/background-repeat +/it/docs/CSS/border /it/docs/Web/CSS/border +/it/docs/CSS/border-bottom /it/docs/Web/CSS/border-bottom +/it/docs/CSS/color /it/docs/Web/CSS/color +/it/docs/CSS/cursor /it/docs/Web/CSS/cursor +/it/docs/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor /it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor +/it/docs/CSS/text-align /it/docs/Web/CSS/text-align +/it/docs/CSS/text-shadow /it/docs/Web/CSS/text-shadow +/it/docs/CSS/transition-timing-function /it/docs/Web/CSS/transition-timing-function +/it/docs/CSS/vertical-align /it/docs/Web/CSS/vertical-align +/it/docs/CSS/word-break /it/docs/Web/CSS/word-break +/it/docs/CSS::-moz-first-node /it/docs/Web/CSS/:-moz-first-node +/it/docs/CSS::-moz-last-node /it/docs/Web/CSS/:-moz-last-node +/it/docs/CSS::-moz-list-bullet /it/docs/Web/CSS/:-moz-list-bullet +/it/docs/CSS:@-moz-document /it/docs/Web/CSS/%40document +/it/docs/CSS:Getting_Started /it/docs/Conoscere_i_CSS +/it/docs/CSS:background /it/docs/Web/CSS/background +/it/docs/CSS:background-attachment /it/docs/Web/CSS/background-attachment +/it/docs/CSS:background-color /it/docs/Web/CSS/background-color +/it/docs/CSS:background-image /it/docs/Web/CSS/background-image +/it/docs/CSS:text-align /it/docs/Web/CSS/text-align +/it/docs/CSS_Reference/Mozilla_Extensions /it/docs/Web/CSS/Mozilla_Extensions +/it/docs/CSS_Reference:Mozilla_Extensions /it/docs/Web/CSS/Mozilla_Extensions +/it/docs/Canvas_tutorial:Basic_usage /it/docs/Canvas_tutorial/Basic_usage +/it/docs/Canvas_tutorial:Utilizzo_di_base /it/docs/Canvas_tutorial/Utilizzo_di_base +/it/docs/Compatibilit%C3%A0_di_AJAX /it/docs/Web/Guide/AJAX +/it/docs/Conoscere_i_CSS-redirect-1 /it/docs/Conoscere_i_CSS +/it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS-redirect-1 /it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS +/it/docs/Conoscere_i_CSS:CSS_leggibili /it/docs/Conoscere_i_CSS/CSS_leggibili +/it/docs/Conoscere_i_CSS:Cascata_ed_ereditariet%C3%A0 /it/docs/Conoscere_i_CSS/Cascata_ed_ereditariet%C3%A0 +/it/docs/Conoscere_i_CSS:Che_cosa_sono_i_CSS /it/docs/Conoscere_i_CSS/Che_cosa_sono_i_CSS +/it/docs/Conoscere_i_CSS:Colori /it/docs/Conoscere_i_CSS/Colori +/it/docs/Conoscere_i_CSS:Come_funzionano_i_CSS /it/docs/Conoscere_i_CSS/Come_funzionano_i_CSS +/it/docs/Conoscere_i_CSS:I_Selettori /it/docs/Conoscere_i_CSS/I_Selettori +/it/docs/Conoscere_i_CSS:Perch%C3%A9_usare_i_CSS /it/docs/Conoscere_i_CSS/Perch%C3%A9_usare_i_CSS +/it/docs/Conoscere_i_CSS:Stili_del_testo /it/docs/Conoscere_i_CSS/Stili_del_testo +/it/docs/Core_JavaScript_1.5_Reference /it/docs/Web/JavaScript/Reference +/it/docs/Crea_Documentazione /it/docs/Mozilla/Developer_guide/Documentazione_per_build +/it/docs/DOM/Selection /it/docs/Web/API/Selection +/it/docs/DOM/Selection/addRange /it/docs/Web/API/Selection/addRange +/it/docs/DOM/Selection/anchorNode /it/docs/Web/API/Selection/anchorNode +/it/docs/DOM/Selection/anchorOffset /it/docs/Web/API/Selection/anchorOffset +/it/docs/DOM/Selection/collapse /it/docs/Web/API/Selection/collapse +/it/docs/DOM/Selection/collapseToEnd /it/docs/Web/API/Selection/collapseToEnd +/it/docs/DOM/Selection/collapseToStart /it/docs/Web/API/Selection/collapseToStart +/it/docs/DOM/Selection/containsNode /it/docs/Web/API/Selection/containsNode +/it/docs/DOM/Selection/deleteFromDocument /it/docs/Web/API/Selection/deleteFromDocument +/it/docs/DOM/Selection/extend /it/docs/Web/API/Selection/extend +/it/docs/DOM/Selection/focusNode /it/docs/Web/API/Selection/focusNode +/it/docs/DOM/Selection/focusOffset /it/docs/Web/API/Selection/focusOffset +/it/docs/DOM/Selection/getRangeAt /it/docs/Web/API/Selection/getRangeAt +/it/docs/DOM/Selection/isCollapsed /it/docs/Web/API/Selection/isCollapsed +/it/docs/DOM/Selection/rangeCount /it/docs/Web/API/Selection/rangeCount +/it/docs/DOM/Selection/removeAllRanges /it/docs/Web/API/Selection/removeAllRanges +/it/docs/DOM/Selection/removeRange /it/docs/Web/API/Selection/removeRange +/it/docs/DOM/Selection/selectAllChildren /it/docs/Web/API/Selection/selectAllChildren +/it/docs/DOM/Selection/toString /it/docs/Web/API/Selection/toString +/it/docs/DOM/XMLHttpRequest /it/docs/Web/API/XMLHttpRequest +/it/docs/DOM/XMLHttpRequest/Usare_XMLHttpRequest /it/docs/Web/API/XMLHttpRequest/Usare_XMLHttpRequest +/it/docs/DOM/document /it/docs/Web/API/Document +/it/docs/DOM/document.URL /it/docs/Web/API/Document/URL +/it/docs/DOM/document.anchors /it/docs/Web/API/Document/anchors +/it/docs/DOM/document.applets /it/docs/Web/API/Document/applets +/it/docs/DOM/document.body /it/docs/Web/API/Document/body +/it/docs/DOM/document.characterSet /it/docs/Web/API/Document/characterSet +/it/docs/DOM/document.close /it/docs/Web/API/Document/close +/it/docs/DOM/document.createElement /it/docs/Web/API/Document/createElement +/it/docs/DOM/document.createElementNS /it/docs/Web/API/Document/createElementNS +/it/docs/DOM/document.createRange /it/docs/Web/API/Document/createRange +/it/docs/DOM/document.defaultView /it/docs/Web/API/Document/defaultView +/it/docs/DOM/document.doctype /it/docs/Web/API/Document/doctype +/it/docs/DOM/document.documentElement /it/docs/Web/API/Document/documentElement +/it/docs/DOM/document.firstChild /it/docs/Web/API/Document/firstChild +/it/docs/DOM/document.forms /it/docs/Web/API/Document/forms +/it/docs/DOM/document.getElementById /it/docs/Web/API/Document/getElementById +/it/docs/DOM/document.getElementsByName /it/docs/Web/API/Document/getElementsByName +/it/docs/DOM/document.height /it/docs/Web/API/Document/height +/it/docs/DOM/document.importNode /it/docs/Web/API/Document/importNode +/it/docs/DOM/document.lastModified /it/docs/Web/API/Document/lastModified +/it/docs/DOM/document.links /it/docs/Web/API/Document/links +/it/docs/DOM/document.namespaceURI /it/docs/Web/API/Document/namespaceURI +/it/docs/DOM/document.open /it/docs/Web/API/Document/open +/it/docs/DOM/document.referrer /it/docs/Web/API/Document/referrer +/it/docs/DOM/document.styleSheets /it/docs/Web/API/Document/styleSheets +/it/docs/DOM/document.title /it/docs/Web/API/Document/title +/it/docs/DOM/document.width /it/docs/Web/API/Document/width +/it/docs/DOM/element /it/docs/Web/API/Element +/it/docs/DOM/element.addEventListener /it/docs/Web/API/Element/addEventListener +/it/docs/DOM/element.attributes /it/docs/Web/API/Element/attributes +/it/docs/DOM/element.childNodes /it/docs/Web/API/Element/childNodes +/it/docs/DOM/element.className /it/docs/Web/API/Element/className +/it/docs/DOM/element.clientHeight /it/docs/Web/API/Element/clientHeight +/it/docs/DOM/element.firstChild /it/docs/Web/API/Element/firstChild +/it/docs/DOM/element.hasAttributes /it/docs/Web/API/Element/hasAttributes +/it/docs/DOM/element.nodeName /it/docs/Web/API/Element/nodeName +/it/docs/DOM/element.nodeType /it/docs/Web/API/Element/nodeType +/it/docs/DOM/element.nodeValue /it/docs/Web/API/Element/nodeValue +/it/docs/DOM/element.parentNode /it/docs/Web/API/Element/parentNode +/it/docs/DOM/element.prefix /it/docs/Web/API/Element/prefix +/it/docs/DOM/element.textContent /it/docs/Web/API/Element/textContent +/it/docs/DOM/event /it/docs/Web/API/Event +/it/docs/DOM/event.altKey /it/docs/Web/API/Event/altKey +/it/docs/DOM/event.bubbles /it/docs/Web/API/Event/bubbles +/it/docs/DOM/event.button /it/docs/Web/API/Event/button +/it/docs/DOM/event.cancelable /it/docs/Web/API/Event/cancelable +/it/docs/DOM/event.charCode /it/docs/Web/API/Event/charCode +/it/docs/DOM/event.ctrlKey /it/docs/Web/API/Event/ctrlKey +/it/docs/DOM/event.detail /it/docs/Web/API/Event/detail +/it/docs/DOM/event.eventPhase /it/docs/Web/API/Event/eventPhase +/it/docs/DOM/event.isChar /it/docs/Web/API/Event/isChar +/it/docs/DOM/event.keyCode /it/docs/Web/API/Event/keyCode +/it/docs/DOM/event.layerX /it/docs/Web/API/Event/layerX +/it/docs/DOM/event.layerY /it/docs/Web/API/Event/layerY +/it/docs/DOM/event.metaKey /it/docs/Web/API/Event/metaKey +/it/docs/DOM/event.pageX /it/docs/Web/API/Event/pageX +/it/docs/DOM/event.pageY /it/docs/Web/API/Event/pageY +/it/docs/DOM/event.preventDefault /it/docs/Web/API/Event/preventDefault +/it/docs/DOM/event.shiftKey /it/docs/Web/API/Event/shiftKey +/it/docs/DOM/event.stopPropagation /it/docs/Web/API/Event/stopPropagation +/it/docs/DOM/event.timeStamp /it/docs/Web/API/Event/timeStamp +/it/docs/DOM/event.type /it/docs/Web/API/Event/type +/it/docs/DOM/event.view /it/docs/Web/API/Event/view +/it/docs/DOM/event.which /it/docs/Web/API/Event/which +/it/docs/DOM/form /it/docs/Web/API/HTMLFormElement +/it/docs/DOM/form.acceptCharset /it/docs/Web/API/HTMLFormElement/acceptCharset +/it/docs/DOM/form.action /it/docs/Web/API/HTMLFormElement/action +/it/docs/DOM/form.elements /it/docs/Web/API/HTMLFormElement/elements +/it/docs/DOM/form.enctype /it/docs/Web/API/HTMLFormElement/enctype +/it/docs/DOM/form.length /it/docs/Web/API/HTMLFormElement/length +/it/docs/DOM/form.method /it/docs/Web/API/HTMLFormElement/method +/it/docs/DOM/form.name /it/docs/Web/API/HTMLFormElement/name +/it/docs/DOM/form.reset /it/docs/Web/API/HTMLFormElement/reset +/it/docs/DOM/form.submit /it/docs/Web/API/HTMLFormElement/submit +/it/docs/DOM/form.target /it/docs/Web/API/HTMLFormElement/target +/it/docs/DOM/range /it/docs/Web/API/Range +/it/docs/DOM/range.cloneContents /it/docs/Web/API/Range/cloneContents +/it/docs/DOM/range.cloneRange /it/docs/Web/API/Range/cloneRange +/it/docs/DOM/range.collapse /it/docs/Web/API/Range/collapse +/it/docs/DOM/range.collapsed /it/docs/Web/API/Range/collapsed +/it/docs/DOM/range.commonAncestorContainer /it/docs/Web/API/Range/commonAncestorContainer +/it/docs/DOM/range.compareBoundaryPoints /it/docs/Web/API/Range/compareBoundaryPoints +/it/docs/DOM/range.comparePoint /it/docs/Web/API/Range/comparePoint +/it/docs/DOM/range.createContextualFragment /it/docs/Web/API/Range/createContextualFragment +/it/docs/DOM/range.deleteContents /it/docs/Web/API/Range/deleteContents +/it/docs/DOM/range.detach /it/docs/Web/API/Range/detach +/it/docs/DOM/range.endContainer /it/docs/Web/API/Range/endContainer +/it/docs/DOM/range.endOffset /it/docs/Web/API/Range/endOffset +/it/docs/DOM/range.extractContents /it/docs/Web/API/Range/extractContents +/it/docs/DOM/range.insertNode /it/docs/Web/API/Range/insertNode +/it/docs/DOM/range.isPointInRange /it/docs/Web/API/Range/isPointInRange +/it/docs/DOM/range.selectNode /it/docs/Web/API/Range/selectNode +/it/docs/DOM/range.selectNodeContents /it/docs/Web/API/Range/selectNodeContents +/it/docs/DOM/range.setEnd /it/docs/Web/API/Range/setEnd +/it/docs/DOM/range.setEndAfter /it/docs/Web/API/Range/setEndAfter +/it/docs/DOM/range.setEndBefore /it/docs/Web/API/Range/setEndBefore +/it/docs/DOM/range.setStart /it/docs/Web/API/Range/setStart +/it/docs/DOM/range.setStartAfter /it/docs/Web/API/Range/setStartAfter +/it/docs/DOM/range.setStartBefore /it/docs/Web/API/Range/setStartBefore +/it/docs/DOM/range.startContainer /it/docs/Web/API/Range/startContainer +/it/docs/DOM/range.startOffset /it/docs/Web/API/Range/startOffset +/it/docs/DOM/range.surroundContents /it/docs/Web/API/Range/surroundContents +/it/docs/DOM/range.toString /it/docs/Web/API/Range/toString +/it/docs/DOM/window /it/docs/Web/API/Window +/it/docs/DOM/window.alert /it/docs/Web/API/Window/alert +/it/docs/DOM/window.back /it/docs/Web/API/Window/back +/it/docs/DOM/window.blur /it/docs/Web/API/Window/blur +/it/docs/DOM/window.closed /it/docs/Web/API/Window/closed +/it/docs/DOM/window.confirm /it/docs/Web/API/Window/confirm +/it/docs/DOM/window.defaultStatus /it/docs/Web/API/Window/defaultstatus +/it/docs/DOM/window.document /it/docs/Web/API/Window/document +/it/docs/DOM/window.focus /it/docs/Web/API/Window/focus +/it/docs/DOM/window.forward /it/docs/Web/API/Window/forward +/it/docs/DOM/window.getSelection /it/docs/Web/API/Window/getSelection +/it/docs/DOM/window.history /it/docs/Web/API/Window/history +/it/docs/DOM/window.home /it/docs/Web/API/Window/home +/it/docs/DOM/window.locationbar /it/docs/Web/API/Window/locationbar +/it/docs/DOM/window.moveBy /it/docs/Web/API/Window/moveBy +/it/docs/DOM/window.moveTo /it/docs/Web/API/Window/moveTo +/it/docs/DOM/window.name /it/docs/Web/API/Window/name +/it/docs/DOM/window.opener /it/docs/Web/API/Window/opener +/it/docs/DOM/window.print /it/docs/Web/API/Window/print +/it/docs/DOM/window.prompt /it/docs/Web/API/Window/prompt +/it/docs/DOM/window.resizeBy /it/docs/Web/API/Window/resizeBy +/it/docs/DOM/window.resizeTo /it/docs/Web/API/Window/resizeTo +/it/docs/DOM/window.sizeToContent /it/docs/Web/API/Window/sizeToContent +/it/docs/DOM/window.status /it/docs/Web/API/Window/status +/it/docs/DOM/window.statusbar /it/docs/Web/API/Window/statusbar +/it/docs/DOM/window.stop /it/docs/Web/API/Window/stop +/it/docs/DOM:Selection /it/docs/Web/API/Selection +/it/docs/DOM:Selection:addRange /it/docs/Web/API/Selection/addRange +/it/docs/DOM:Selection:anchorNode /it/docs/Web/API/Selection/anchorNode +/it/docs/DOM:Selection:anchorOffset /it/docs/Web/API/Selection/anchorOffset +/it/docs/DOM:Selection:collapse /it/docs/Web/API/Selection/collapse +/it/docs/DOM:Selection:collapseToEnd /it/docs/Web/API/Selection/collapseToEnd +/it/docs/DOM:Selection:collapseToStart /it/docs/Web/API/Selection/collapseToStart +/it/docs/DOM:Selection:containsNode /it/docs/Web/API/Selection/containsNode +/it/docs/DOM:Selection:deleteFromDocument /it/docs/Web/API/Selection/deleteFromDocument +/it/docs/DOM:Selection:extend /it/docs/Web/API/Selection/extend +/it/docs/DOM:Selection:focusNode /it/docs/Web/API/Selection/focusNode +/it/docs/DOM:Selection:focusOffset /it/docs/Web/API/Selection/focusOffset +/it/docs/DOM:Selection:getRangeAt /it/docs/Web/API/Selection/getRangeAt +/it/docs/DOM:Selection:isCollapsed /it/docs/Web/API/Selection/isCollapsed +/it/docs/DOM:Selection:rangeCount /it/docs/Web/API/Selection/rangeCount +/it/docs/DOM:Selection:removeAllRanges /it/docs/Web/API/Selection/removeAllRanges +/it/docs/DOM:Selection:removeRange /it/docs/Web/API/Selection/removeRange +/it/docs/DOM:Selection:selectAllChildren /it/docs/Web/API/Selection/selectAllChildren +/it/docs/DOM:Selection:toString /it/docs/Web/API/Selection/toString +/it/docs/DOM:document /it/docs/Web/API/Document +/it/docs/DOM:document.URL /it/docs/Web/API/Document/URL +/it/docs/DOM:document.anchors /it/docs/Web/API/Document/anchors +/it/docs/DOM:document.applets /it/docs/Web/API/Document/applets +/it/docs/DOM:document.body /it/docs/Web/API/Document/body +/it/docs/DOM:document.characterSet /it/docs/Web/API/Document/characterSet +/it/docs/DOM:document.close /it/docs/Web/API/Document/close +/it/docs/DOM:document.createElement /it/docs/Web/API/Document/createElement +/it/docs/DOM:document.createElementNS /it/docs/Web/API/Document/createElementNS +/it/docs/DOM:document.createRange /it/docs/Web/API/Document/createRange +/it/docs/DOM:document.defaultView /it/docs/Web/API/Document/defaultView +/it/docs/DOM:document.doctype /it/docs/Web/API/Document/doctype +/it/docs/DOM:document.documentElement /it/docs/Web/API/Document/documentElement +/it/docs/DOM:document.firstChild /it/docs/Web/API/Document/firstChild +/it/docs/DOM:document.forms /it/docs/Web/API/Document/forms +/it/docs/DOM:document.getElementById /it/docs/Web/API/Document/getElementById +/it/docs/DOM:document.getElementsByName /it/docs/Web/API/Document/getElementsByName +/it/docs/DOM:document.height /it/docs/Web/API/Document/height +/it/docs/DOM:document.importNode /it/docs/Web/API/Document/importNode +/it/docs/DOM:document.lastModified /it/docs/Web/API/Document/lastModified +/it/docs/DOM:document.links /it/docs/Web/API/Document/links +/it/docs/DOM:document.namespaceURI /it/docs/Web/API/Document/namespaceURI +/it/docs/DOM:document.open /it/docs/Web/API/Document/open +/it/docs/DOM:document.referrer /it/docs/Web/API/Document/referrer +/it/docs/DOM:document.styleSheets /it/docs/Web/API/Document/styleSheets +/it/docs/DOM:document.title /it/docs/Web/API/Document/title +/it/docs/DOM:document.width /it/docs/Web/API/Document/width +/it/docs/DOM:element /it/docs/Web/API/Element +/it/docs/DOM:element.addEventListener /it/docs/Web/API/Element/addEventListener +/it/docs/DOM:element.attributes /it/docs/Web/API/Element/attributes +/it/docs/DOM:element.childNodes /it/docs/Web/API/Element/childNodes +/it/docs/DOM:element.className /it/docs/Web/API/Element/className +/it/docs/DOM:element.clientHeight /it/docs/Web/API/Element/clientHeight +/it/docs/DOM:element.firstChild /it/docs/Web/API/Element/firstChild +/it/docs/DOM:element.hasAttributes /it/docs/Web/API/Element/hasAttributes +/it/docs/DOM:element.nodeName /it/docs/Web/API/Element/nodeName +/it/docs/DOM:element.nodeType /it/docs/Web/API/Element/nodeType +/it/docs/DOM:element.nodeValue /it/docs/Web/API/Element/nodeValue +/it/docs/DOM:element.parentNode /it/docs/Web/API/Element/parentNode +/it/docs/DOM:element.prefix /it/docs/Web/API/Element/prefix +/it/docs/DOM:element.textContent /it/docs/Web/API/Element/textContent +/it/docs/DOM:event /it/docs/Web/API/Event +/it/docs/DOM:event.altKey /it/docs/Web/API/Event/altKey +/it/docs/DOM:event.bubbles /it/docs/Web/API/Event/bubbles +/it/docs/DOM:event.button /it/docs/Web/API/Event/button +/it/docs/DOM:event.cancelable /it/docs/Web/API/Event/cancelable +/it/docs/DOM:event.charCode /it/docs/Web/API/Event/charCode +/it/docs/DOM:event.ctrlKey /it/docs/Web/API/Event/ctrlKey +/it/docs/DOM:event.detail /it/docs/Web/API/Event/detail +/it/docs/DOM:event.eventPhase /it/docs/Web/API/Event/eventPhase +/it/docs/DOM:event.isChar /it/docs/Web/API/Event/isChar +/it/docs/DOM:event.keyCode /it/docs/Web/API/Event/keyCode +/it/docs/DOM:event.layerX /it/docs/Web/API/Event/layerX +/it/docs/DOM:event.layerY /it/docs/Web/API/Event/layerY +/it/docs/DOM:event.metaKey /it/docs/Web/API/Event/metaKey +/it/docs/DOM:event.pageX /it/docs/Web/API/Event/pageX +/it/docs/DOM:event.pageY /it/docs/Web/API/Event/pageY +/it/docs/DOM:event.preventDefault /it/docs/Web/API/Event/preventDefault +/it/docs/DOM:event.shiftKey /it/docs/Web/API/Event/shiftKey +/it/docs/DOM:event.stopPropagation /it/docs/Web/API/Event/stopPropagation +/it/docs/DOM:event.timeStamp /it/docs/Web/API/Event/timeStamp +/it/docs/DOM:event.type /it/docs/Web/API/Event/type +/it/docs/DOM:event.view /it/docs/Web/API/Event/view +/it/docs/DOM:event.which /it/docs/Web/API/Event/which +/it/docs/DOM:form /it/docs/Web/API/HTMLFormElement +/it/docs/DOM:form.acceptCharset /it/docs/Web/API/HTMLFormElement/acceptCharset +/it/docs/DOM:form.action /it/docs/Web/API/HTMLFormElement/action +/it/docs/DOM:form.elements /it/docs/Web/API/HTMLFormElement/elements +/it/docs/DOM:form.enctype /it/docs/Web/API/HTMLFormElement/enctype +/it/docs/DOM:form.length /it/docs/Web/API/HTMLFormElement/length +/it/docs/DOM:form.method /it/docs/Web/API/HTMLFormElement/method +/it/docs/DOM:form.name /it/docs/Web/API/HTMLFormElement/name +/it/docs/DOM:form.reset /it/docs/Web/API/HTMLFormElement/reset +/it/docs/DOM:form.submit /it/docs/Web/API/HTMLFormElement/submit +/it/docs/DOM:form.target /it/docs/Web/API/HTMLFormElement/target +/it/docs/DOM:range /it/docs/Web/API/Range +/it/docs/DOM:range.cloneContents /it/docs/Web/API/Range/cloneContents +/it/docs/DOM:range.cloneRange /it/docs/Web/API/Range/cloneRange +/it/docs/DOM:range.collapse /it/docs/Web/API/Range/collapse +/it/docs/DOM:range.collapsed /it/docs/Web/API/Range/collapsed +/it/docs/DOM:range.commonAncestorContainer /it/docs/Web/API/Range/commonAncestorContainer +/it/docs/DOM:range.compareBoundaryPoints /it/docs/Web/API/Range/compareBoundaryPoints +/it/docs/DOM:range.comparePoint /it/docs/Web/API/Range/comparePoint +/it/docs/DOM:range.createContextualFragment /it/docs/Web/API/Range/createContextualFragment +/it/docs/DOM:range.deleteContents /it/docs/Web/API/Range/deleteContents +/it/docs/DOM:range.detach /it/docs/Web/API/Range/detach +/it/docs/DOM:range.endContainer /it/docs/Web/API/Range/endContainer +/it/docs/DOM:range.endOffset /it/docs/Web/API/Range/endOffset +/it/docs/DOM:range.extractContents /it/docs/Web/API/Range/extractContents +/it/docs/DOM:range.insertNode /it/docs/Web/API/Range/insertNode +/it/docs/DOM:range.isPointInRange /it/docs/Web/API/Range/isPointInRange +/it/docs/DOM:range.selectNode /it/docs/Web/API/Range/selectNode +/it/docs/DOM:range.selectNodeContents /it/docs/Web/API/Range/selectNodeContents +/it/docs/DOM:range.setEnd /it/docs/Web/API/Range/setEnd +/it/docs/DOM:range.setEndAfter /it/docs/Web/API/Range/setEndAfter +/it/docs/DOM:range.setEndBefore /it/docs/Web/API/Range/setEndBefore +/it/docs/DOM:range.setStart /it/docs/Web/API/Range/setStart +/it/docs/DOM:range.setStartAfter /it/docs/Web/API/Range/setStartAfter +/it/docs/DOM:range.setStartBefore /it/docs/Web/API/Range/setStartBefore +/it/docs/DOM:range.startContainer /it/docs/Web/API/Range/startContainer +/it/docs/DOM:range.startOffset /it/docs/Web/API/Range/startOffset +/it/docs/DOM:range.surroundContents /it/docs/Web/API/Range/surroundContents +/it/docs/DOM:range.toString /it/docs/Web/API/Range/toString +/it/docs/DOM:window /it/docs/Web/API/Window +/it/docs/DOM:window.alert /it/docs/Web/API/Window/alert +/it/docs/DOM:window.back /it/docs/Web/API/Window/back +/it/docs/DOM:window.blur /it/docs/Web/API/Window/blur +/it/docs/DOM:window.closed /it/docs/Web/API/Window/closed +/it/docs/DOM:window.confirm /it/docs/Web/API/Window/confirm +/it/docs/DOM:window.defaultStatus /it/docs/Web/API/Window/defaultstatus +/it/docs/DOM:window.document /it/docs/Web/API/Window/document +/it/docs/DOM:window.focus /it/docs/Web/API/Window/focus +/it/docs/DOM:window.forward /it/docs/Web/API/Window/forward +/it/docs/DOM:window.getSelection /it/docs/Web/API/Window/getSelection +/it/docs/DOM:window.history /it/docs/Web/API/Window/history +/it/docs/DOM:window.home /it/docs/Web/API/Window/home +/it/docs/DOM:window.locationbar /it/docs/Web/API/Window/locationbar +/it/docs/DOM:window.moveBy /it/docs/Web/API/Window/moveBy +/it/docs/DOM:window.moveTo /it/docs/Web/API/Window/moveTo +/it/docs/DOM:window.name /it/docs/Web/API/Window/name +/it/docs/DOM:window.opener /it/docs/Web/API/Window/opener +/it/docs/DOM:window.print /it/docs/Web/API/Window/print +/it/docs/DOM:window.prompt /it/docs/Web/API/Window/prompt +/it/docs/DOM:window.resizeBy /it/docs/Web/API/Window/resizeBy +/it/docs/DOM:window.resizeTo /it/docs/Web/API/Window/resizeTo +/it/docs/DOM:window.sizeToContent /it/docs/Web/API/Window/sizeToContent +/it/docs/DOM:window.status /it/docs/Web/API/Window/status +/it/docs/DOM:window.statusbar /it/docs/Web/API/Window/statusbar +/it/docs/DOM:window.stop /it/docs/Web/API/Window/stop +/it/docs/Developer_Guide /it/docs/Mozilla/Developer_guide +/it/docs/Documentazione_per_build /it/docs/Mozilla/Developer_guide/Documentazione_per_build +/it/docs/Estensioni:Comunit%C3%A0 /it/docs/Estensioni/Comunit%C3%A0 +/it/docs/Firefox_1.5 /it/docs/Firefox_1.5_per_Sviluppatori +/it/docs/Firefox_2 /it/docs/Firefox_2.0_per_Sviluppatori +/it/docs/Firefox_2_per_Sviluppatori /it/docs/Firefox_2.0_per_Sviluppatori +/it/docs/Firefox_3_for_developers /it/docs/Firefox_3_per_sviluppatori/Firefox_3_per_sviluppatori +/it/docs/Guida_di_riferimento_ai_CSS /it/docs/Web/CSS/Guida_di_riferimento_ai_CSS +/it/docs/HTML /it/docs/Web/HTML +/it/docs/HTML/Aree_tematiche /it/docs/Web/Guide/HTML/Categorie_di_contenuto +/it/docs/HTML/Attributi /it/docs/Web/HTML/Attributi +/it/docs/HTML/Canvas /it/docs/Web/HTML/Canvas +/it/docs/HTML/Canvas/Drawing_graphics_with_canvas /it/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas +/it/docs/HTML/Element /it/docs/Web/HTML/Element +/it/docs/HTML/Element/a /it/docs/Web/HTML/Element/a +/it/docs/HTML/Element/abbr /it/docs/Web/HTML/Element/abbr +/it/docs/HTML/Element/address /it/docs/Web/HTML/Element/address +/it/docs/HTML/Element/area /it/docs/Web/HTML/Element/area +/it/docs/HTML/Element/article /it/docs/Web/HTML/Element/article +/it/docs/HTML/Element/html /it/docs/Web/HTML/Element/html +/it/docs/HTML/Element/output /it/docs/Web/HTML/Element/output +/it/docs/HTML/Element/section /it/docs/Web/HTML/Element/section +/it/docs/HTML/Element/time /it/docs/Web/HTML/Element/time +/it/docs/HTML/Forms_in_HTML /it/docs/Web/HTML/Forms_in_HTML +/it/docs/HTML/Global_attributes /it/docs/Web/HTML/Global_attributes +/it/docs/HTML/HTML5 /it/docs/Web/HTML/HTML5 +/it/docs/HTML/HTML5/Introduction_to_HTML5 /it/docs/Web/HTML/HTML5/Introduction_to_HTML5 +/it/docs/HTML/Introduzione /it/docs/Learn/HTML/Introduction_to_HTML +/it/docs/HTML/Sections_and_Outlines_of_an_HTML5_document /it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document +/it/docs/HTML/Using_HTML5_audio_and_video /it/docs/Web/HTML/Using_HTML5_audio_and_video +/it/docs/HTML/utilizzare_application_cache /it/docs/Web/HTML/utilizzare_application_cache +/it/docs/Il_DOM_e_JavaScript /it/docs/Web/JavaScript/Il_DOM_e_JavaScript +/it/docs/Importare_applicazioni_da_Internet_Explorer_a_Mozilla /it/docs/Migrare_applicazioni_da_Internet_Explorer_a_Mozilla +/it/docs/Introduzione /it/docs/Mozilla/Developer_guide/Introduction +/it/docs/Introduzione_al_carattere_Object-Oriented_di_JavaScript /it/docs/Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript +/it/docs/JavaScript /it/docs/Web/JavaScript +/it/docs/JavaScript/ECMAScript_6_support_in_Mozilla /it/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla +/it/docs/JavaScript/Guida /it/docs/Web/JavaScript/Guida +/it/docs/JavaScript/Guide/Predefined_Core_Objects /it/docs/JavaScript/Guida/Oggetti_nativi +/it/docs/JavaScript/New_in_JavaScript /it/docs/Web/JavaScript/New_in_JavaScript +/it/docs/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.6 /it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.6 +/it/docs/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.7 /it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.7 +/it/docs/JavaScript/Reference /it/docs/Web/JavaScript/Reference +/it/docs/JavaScript/Reference/Functions_and_function_scope /it/docs/Web/JavaScript/Reference/Functions_and_function_scope +/it/docs/JavaScript/Reference/Global_Objects /it/docs/Web/JavaScript/Reference/Global_Objects +/it/docs/JavaScript/Reference/Global_Objects/Object /it/docs/Web/JavaScript/Reference/Global_Objects/Object +/it/docs/JavaScript/Reference/Global_Objects/Object/keys /it/docs/Web/JavaScript/Reference/Global_Objects/Object/keys +/it/docs/JavaScript/Reference/Global_Objects/eval /it/docs/Web/JavaScript/Reference/Global_Objects/eval +/it/docs/JavaScript/Reference/Statements /it/docs/Web/JavaScript/Reference/Statements +/it/docs/JavaScript/Reference/Statements/let /it/docs/Web/JavaScript/Reference/Statements/let +/it/docs/JavaScript/Una_reintroduzione_al_JavaScript /it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript +/it/docs/Learn/CSS/Basics/Box_model /en-US/docs/Learn/CSS/Building_blocks/The_box_model +/it/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps +/it/docs/Learn/CSS/Introduction_to_CSS/Come_funziona_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/it/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks +/it/docs/Learn/CSS/Styling_boxes/Stili_per_tabelle /it/docs/Learn/CSS/Building_blocks/Styling_tables +/it/docs/Libert%C3%A0!_Uguaglianza!_Validit%C3%A0! /en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML +/it/docs/Linux_Build_Prerequisites /it/docs/Mozilla/Developer_guide/Documentazione_per_build/Linux_Build_Prerequisites +/it/docs/Localizzazione /it/docs/Localization +/it/docs/MDN/Contribute/Content /it/docs/MDN/Guidelines +/it/docs/MDN/Contribute/Content/Macros /it/docs/MDN/Guidelines/Macros +/it/docs/MDN/Contribute/Content/Migliore_pratica /it/docs/MDN/Guidelines/Migliore_pratica +/it/docs/MDN/Contribute/Editor /it/docs/MDN/Editor +/it/docs/MDN/Contribute/Structures /it/docs/MDN/Structures +/it/docs/MDN/Contribute/Structures/Tabelle_compatibilit%C3%A0 /it/docs/MDN/Structures/Tabelle_compatibilit%C3%A0 +/it/docs/MDN/Editor/Project:MDC_editor_guide /it/docs/MDN/Contribute/Editor/Basics +/it/docs/MDN/Feedback /it/docs/MDN/Contribute/Feedback +/it/docs/Mozilla/Developer_guide/Introduzione /it/docs/Mozilla/Developer_guide/Introduction +/it/docs/Novit%C3%A0_in_JavaScript_1.6 /it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.6 +/it/docs/Novit%C3%A0_in_JavaScript_1.7 /it/docs/Web/JavaScript/New_in_JavaScript/Novit%C3%A0_in_JavaScript_1.7 +/it/docs/Pagina_Principale /it/docs/Web +/it/docs/Plugins /it/docs/Plug-in +/it/docs/Reference_del_DOM_di_Gecko:Esempi /it/docs/Reference_del_DOM_di_Gecko/Esempi +/it/docs/Reference_del_DOM_di_Gecko:Introduzione /it/docs/Reference_del_DOM_di_Gecko/Introduzione +/it/docs/Rich-Text_Editing_in_Mozilla /it/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +/it/docs/Scripting_Plugins:_Macromedia_Flash /it/docs/Scripting_Plugins/Macromedia_Flash +/it/docs/Strumenti:Validare /it/docs/Strumenti/Validare +/it/docs/Strumenti:Validatori /it/docs/Strumenti/Validatori +/it/docs/Una_re-introduzione_a_Javascript /it/docs/Web/JavaScript/Una_reintroduzione_al_JavaScript +/it/docs/Usare_le_URL_nella_propriet%C3%A0_cursor /it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor +/it/docs/Usare_valori_URL_per_la_propriet%C3%A0_cursor /it/docs/Web/CSS/cursor/Usare_valori_URL_per_la_propriet%C3%A0_cursor +/it/docs/Web/API/Element.getElementsByTagName /it/docs/Web/API/Element/getElementsByTagName +/it/docs/Web/API/Element.scrollHeight /it/docs/Web/API/Element/scrollHeight +/it/docs/Web/API/Navigator.cookieEnabled /it/docs/Web/API/Navigator/cookieEnabled +/it/docs/Web/API/Position /it/docs/Web/API/GeolocationPosition +/it/docs/Web/API/URLUtils.href /it/docs/Web/API/URLUtils/href +/it/docs/Web/API/document.write() /it/docs/Web/API/Document/write +/it/docs/Web/CSS/@-moz-document /it/docs/Web/CSS/%40document +/it/docs/Web/CSS/Getting_Started /it/docs/Conoscere_i_CSS +/it/docs/Web/Events/devicemotion /it/docs/Web/API/Window/devicemotion_event +/it/docs/Web/Events/orientationchange /it/docs/Web/API/Window/orientationchange_event +/it/docs/Web/Guide/HTML /it/docs/Learn/HTML +/it/docs/Web/HTML/Aree_tematiche /it/docs/Web/Guide/HTML/Categorie_di_contenuto +/it/docs/Web/JavaScript/Guide /it/docs/Web/JavaScript/Guida +/it/docs/Web/JavaScript/Guide/About /it/docs/JavaScript/Guida/About +/it/docs/Web/JavaScript/Guide/Expressions_and_Operators /it/docs/JavaScript/Guida/Expressions_and_Operators +/it/docs/Web/JavaScript/Reference/Operators/Spread_operator /en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax +/it/docs/Web/WebGL /it/docs/Web/API/WebGL_API +/it/docs/XMLHttpRequest /it/docs/Web/API/XMLHttpRequest +/it/docs/XPCOM:Binding_per_i_linguaggi /it/docs/XPCOM/Binding_per_i_linguaggi +/it/docs/XPInstall /it/docs/XPI +/it/docs/XPath /it/docs/Web/XPath +/it/docs/XSLT /it/docs/Web/XSLT +/it/docs/en /en-US/ diff --git a/files/it/_wikihistory.json b/files/it/_wikihistory.json new file mode 100644 index 0000000000..e37ca36f53 --- /dev/null +++ b/files/it/_wikihistory.json @@ -0,0 +1,6026 @@ +{ + "Adattare_le_applicazioni_XUL_a_Firefox_1.5": { + "modified": "2019-03-23T23:41:34.028Z", + "contributors": [ + "wbamberg", + "Indigo" + ] + }, + "Circa_il_Document_Object_Model": { + "modified": "2019-03-23T23:40:46.607Z", + "contributors": [ + "teoli", + "DaViD83" + ] + }, + "Conoscere_i_CSS": { + "modified": "2019-03-23T23:43:26.363Z", + "contributors": [ + "libri-nozze", + "Davidee", + "Grino", + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/CSS_leggibili": { + "modified": "2019-03-23T23:43:30.247Z", + "contributors": [ + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/Cascata_ed_ereditarietà": { + "modified": "2019-03-23T23:44:51.382Z", + "contributors": [ + "Sheppy", + "Andrealibo", + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/Che_cosa_sono_i_CSS": { + "modified": "2019-03-23T23:43:28.433Z", + "contributors": [ + "pignaccia", + "Grino", + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/Come_funzionano_i_CSS": { + "modified": "2019-03-23T23:43:26.112Z", + "contributors": [ + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/I_Selettori": { + "modified": "2019-03-23T23:43:27.992Z", + "contributors": [ + "Verruckt", + "Indigo" + ] + }, + "Conoscere_i_CSS/Perché_usare_i_CSS": { + "modified": "2019-03-23T23:43:33.204Z", + "contributors": [ + "pignaccia", + "Verruckt", + "Indigo" + ] + }, + "Costruire_e_decostruire_un_documento_XML": { + "modified": "2019-03-24T00:13:01.603Z", + "contributors": [ + "fscholz", + "foto-planner", + "fusionchess" + ] + }, + "DHTML": { + "modified": "2019-03-24T00:02:50.459Z", + "contributors": [ + "teoli", + "fscholz", + "Samuele" + ] + }, + "DOM": { + "modified": "2019-03-24T00:03:02.057Z", + "contributors": [ + "teoli", + "Samuele", + "Grino", + "khela", + "Federico", + "DaViD83" + ] + }, + "DOM_Inspector": { + "modified": "2020-07-16T22:36:24.345Z", + "contributors": [ + "Federico", + "Leofiore", + "Samuele" + ] + }, + "Dare_una_mano_al_puntatore": { + "modified": "2019-03-23T23:43:11.495Z", + "contributors": [ + "teoli", + "ethertank", + "bradipao" + ] + }, + "Firefox_1.5_per_Sviluppatori": { + "modified": "2019-03-23T23:44:26.825Z", + "contributors": [ + "wbamberg", + "teoli", + "Leofiore", + "Federico" + ] + }, + "Firefox_18_for_developers": { + "modified": "2019-03-23T23:34:04.358Z", + "contributors": [ + "wbamberg", + "Indil", + "0limits91" + ] + }, + "Firefox_2.0_per_Sviluppatori": { + "modified": "2019-03-23T23:44:14.083Z", + "contributors": [ + "wbamberg", + "Leofiore", + "Samuele", + "Federico", + "Neotux" + ] + }, + "Games": { + "modified": "2019-09-09T15:32:14.707Z", + "contributors": [ + "SphinxKnight", + "isocialweb", + "wbamberg", + "PyQio", + "lybhy" + ] + }, + "Games/Publishing_games": { + "modified": "2019-03-18T21:10:16.530Z", + "contributors": [ + "Antonio-Caminiti" + ] + }, + "Gli_User_Agent_di_Gecko": { + "modified": "2019-03-23T23:44:58.670Z", + "contributors": [ + "fotografi", + "teoli", + "Federico" + ] + }, + "Glossary": { + "modified": "2020-10-07T11:11:11.203Z", + "contributors": [ + "peterbe", + "SphinxKnight", + "wbamberg", + "klez" + ] + }, + "Glossary/AJAX": { + "modified": "2020-04-16T13:58:31.813Z", + "contributors": [ + "xplosionmind", + "maruskina", + "SimoneSalern" + ] + }, + "Glossary/Block": { + "modified": "2019-03-23T22:07:59.540Z", + "contributors": [ + "Sheppy" + ] + }, + "Glossary/Block/CSS": { + "modified": "2019-03-23T22:07:52.239Z", + "contributors": [ + "sambuccid" + ] + }, + "Glossary/CSS": { + "modified": "2019-03-23T22:06:23.064Z", + "contributors": [ + "SimoneSalern" + ] + }, + "Glossary/Control_flow": { + "modified": "2019-03-18T21:27:30.313Z", + "contributors": [ + "ladysilvia" + ] + }, + "Glossary/Doctype": { + "modified": "2019-01-17T02:41:07.401Z", + "contributors": [ + "gnardell" + ] + }, + "Glossary/First-class_Function": { + "modified": "2019-03-18T21:46:04.586Z", + "contributors": [ + "tontonialberto" + ] + }, + "Glossary/HTML": { + "modified": "2019-03-23T22:03:10.082Z", + "contributors": [ + "AndreaNaspi" + ] + }, + "Glossary/HTML5": { + "modified": "2019-03-23T22:03:14.763Z", + "contributors": [ + "AndreaNaspi" + ] + }, + "Glossary/HTTP": { + "modified": "2020-07-30T13:08:44.286Z", + "contributors": [ + "sara_t", + "xplosionmind", + "Sav22999" + ] + }, + "Glossary/Head": { + "modified": "2019-03-18T21:40:44.730Z", + "contributors": [ + "gnardell" + ] + }, + "Glossary/Header_di_risposta": { + "modified": "2019-03-18T21:31:16.700Z", + "contributors": [ + "lucat92" + ] + }, + "Glossary/Hoisting": { + "modified": "2020-07-09T10:59:09.829Z", + "contributors": [ + "ImChrono", + "Spyna" + ] + }, + "Glossary/JavaScript": { + "modified": "2019-03-18T21:45:58.560Z", + "contributors": [ + "EndBug" + ] + }, + "Glossary/Node": { + "modified": "2019-03-18T21:19:43.745Z", + "contributors": [ + "klez" + ] + }, + "Glossary/Node/DOM": { + "modified": "2019-03-18T21:19:38.420Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Glossary/Nullish": { + "modified": "2020-10-14T13:32:16.214Z", + "contributors": [ + "sharq" + ] + }, + "Glossary/Primitive": { + "modified": "2019-03-23T22:31:06.215Z", + "contributors": [ + "Fredev" + ] + }, + "Glossary/Protocollo": { + "modified": "2020-04-21T13:55:15.140Z", + "contributors": [ + "sara_t", + "xplosionmind" + ] + }, + "Glossary/REST": { + "modified": "2020-04-21T13:56:38.394Z", + "contributors": [ + "sara_t", + "Sav22999", + "xplosionmind" + ] + }, + "Glossary/Reflow": { + "modified": "2019-12-05T05:19:52.753Z", + "contributors": [ + "LoSo" + ] + }, + "Glossary/Serialization": { + "modified": "2019-03-18T21:27:14.829Z", + "contributors": [ + "ladysilvia" + ] + }, + "Glossary/World_Wide_Web": { + "modified": "2019-03-23T22:03:18.770Z", + "contributors": [ + "AndreaNaspi" + ] + }, + "Glossary/array": { + "modified": "2019-06-03T12:35:12.894Z", + "contributors": [ + "Umberto81" + ] + }, + "Glossary/undefined": { + "modified": "2019-03-23T22:57:58.153Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Indentazione_corretta_delle_liste": { + "modified": "2019-03-23T23:43:02.621Z", + "contributors": [ + "music-wedding", + "artistics-weddings", + "teoli", + "bradipao" + ] + }, + "Installare_plugin_di_ricerca_dalle_pagine_web": { + "modified": "2019-01-16T16:19:44.703Z", + "contributors": [ + "Federico" + ] + }, + "Introduzione_a_SVG_dentro_XHTML": { + "modified": "2019-03-23T23:41:29.996Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Le_Colonne_nei_CSS3": { + "modified": "2019-03-23T23:43:04.536Z", + "contributors": [ + "bradipao" + ] + }, + "Learn": { + "modified": "2020-07-16T22:43:43.043Z", + "contributors": [ + "SphinxKnight", + "PyQio", + "siron94", + "MarcoMatta" + ] + }, + "Learn/Accessibilità": { + "modified": "2020-07-16T22:39:57.773Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/Accessibilità_dispositivi_mobili": { + "modified": "2020-07-16T22:40:30.564Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/Accessibilità_test_risoluzione_problemi": { + "modified": "2020-07-16T22:40:35.761Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/CSS_e_JavaScript_accessibilità": { + "modified": "2020-07-16T22:40:17.303Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/Cosa_è_accessibilità": { + "modified": "2020-07-16T22:40:04.717Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/HTML_accessibilità": { + "modified": "2020-07-16T22:40:11.165Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/Multimedia": { + "modified": "2020-07-16T22:40:26.699Z", + "contributors": [ + "mipo" + ] + }, + "Learn/Accessibilità/WAI-ARIA_basics": { + "modified": "2020-07-16T22:40:22.345Z", + "contributors": [ + "mipo" + ] + }, + "Learn/CSS": { + "modified": "2020-11-02T07:57:14.931Z", + "contributors": [ + "josefsimionato", + "fabiopozzi", + "pietro.tamburrano", + "aki54", + "ExplosiveLab", + "Jeremie" + ] + }, + "Learn/CSS/Building_blocks": { + "modified": "2020-07-30T13:10:35.572Z", + "contributors": [ + "sara_t", + "xplosionmind", + "chrisdavidmills" + ] + }, + "Learn/CSS/Building_blocks/Selettori": { + "modified": "2020-10-27T14:47:40.269Z", + "contributors": [ + "francescomazza91" + ] + }, + "Learn/CSS/Building_blocks/Styling_tables": { + "modified": "2020-07-16T22:28:16.589Z", + "contributors": [ + "chrisdavidmills", + "bobgen" + ] + }, + "Learn/CSS/CSS_layout": { + "modified": "2020-07-30T14:33:23.625Z", + "contributors": [ + "sara_t", + "danielebarell" + ] + }, + "Learn/CSS/CSS_layout/Flexbox": { + "modified": "2020-11-17T12:27:45.093Z", + "contributors": [ + "danielebarell" + ] + }, + "Learn/CSS/CSS_layout/Introduction": { + "modified": "2020-08-07T07:59:31.659Z", + "contributors": [ + "danielebarell", + "sara_t" + ] + }, + "Learn/CSS/CSS_layout/Normal_Flow": { + "modified": "2020-10-23T12:57:51.380Z", + "contributors": [ + "danielebarell", + "sara_t", + "Mte90" + ] + }, + "Learn/CSS/Styling_text": { + "modified": "2020-07-16T22:25:58.230Z", + "contributors": [ + "wilton-cruz" + ] + }, + "Learn/CSS/Styling_text/Definire_stili_link": { + "modified": "2020-07-16T22:26:19.044Z", + "contributors": [ + "genoa1893" + ] + }, + "Learn/Come_contribuire": { + "modified": "2020-07-16T22:33:44.464Z", + "contributors": [ + "SphinxKnight", + "ZiaRita", + "ivan.lori" + ] + }, + "Learn/Common_questions": { + "modified": "2020-07-16T22:35:24.563Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/Common_questions/Thinking_before_coding": { + "modified": "2020-07-16T22:35:34.470Z", + "contributors": [ + "duel89" + ] + }, + "Learn/Getting_started_with_the_web": { + "modified": "2020-10-31T11:54:00.576Z", + "contributors": [ + "JennyDC", + "howilearn", + "mozzy91", + "Redsnic", + "Lorenzo_FF" + ] + }, + "Learn/Getting_started_with_the_web/CSS_basics": { + "modified": "2020-11-14T17:54:31.688Z", + "contributors": [ + "JennyDC", + "stefsava", + "howilearn" + ] + }, + "Learn/Getting_started_with_the_web/Che_aspetto_avrà_il_tuo_sito_web": { + "modified": "2020-07-16T22:34:17.256Z", + "contributors": [ + "PyQio" + ] + }, + "Learn/Getting_started_with_the_web/Come_funziona_il_Web": { + "modified": "2020-11-10T20:12:58.028Z", + "contributors": [ + "massic80", + "JennyDC" + ] + }, + "Learn/Getting_started_with_the_web/Gestire_i_file": { + "modified": "2020-07-16T22:34:34.196Z", + "contributors": [ + "ZiaRita", + "PatrickT", + "DaniPani", + "cubark" + ] + }, + "Learn/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-11-14T17:53:13.393Z", + "contributors": [ + "JennyDC", + "KetiJ", + "jwhitlock" + ] + }, + "Learn/Getting_started_with_the_web/Installing_basic_software": { + "modified": "2020-07-16T22:34:08.318Z", + "contributors": [ + "costacarlo", + "PatrickT", + "siron94", + "SphinxKnight" + ] + }, + "Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2020-11-14T17:55:41.640Z", + "contributors": [ + "JennyDC", + "PatrickT", + "Tonystrel", + "mnemosdev" + ] + }, + "Learn/Getting_started_with_the_web/Pubbicare_sito": { + "modified": "2020-07-30T14:39:28.232Z", + "contributors": [ + "sara_t", + "dag7dev" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:18.921Z", + "contributors": [ + "PatrickT", + "Ella" + ] + }, + "Learn/HTML/Forms": { + "modified": "2020-10-05T13:36:42.596Z", + "contributors": [ + "ArgusMk", + "Jeffrey_Yang" + ] + }, + "Learn/HTML/Forms/Come_costruire_custom_form_widgets_personalizzati": { + "modified": "2020-07-16T22:21:56.435Z", + "contributors": [ + "whiteLie" + ] + }, + "Learn/HTML/Forms/Form_validation": { + "modified": "2020-12-03T10:32:19.605Z", + "contributors": [ + "LoSo", + "claudiod" + ] + }, + "Learn/HTML/Howto": { + "modified": "2020-07-16T22:22:29.048Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/HTML/Howto/Author_fast-loading_HTML_pages": { + "modified": "2020-07-16T22:22:32.665Z", + "contributors": [ + "ladysilvia" + ] + }, + "Learn/HTML/Howto/Uso_attributi_data": { + "modified": "2020-07-16T22:22:35.395Z", + "contributors": [ + "Elfo404", + "Enrico_Polanski" + ] + }, + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:49.350Z", + "contributors": [ + "fabiopozzi", + "Aedo1", + "nicco88", + "robertsillo", + "federico71", + "sginestrini", + "chrisdavidmills" + ] + }, + "Learn/HTML/Introduction_to_HTML/Getting_started": { + "modified": "2020-07-16T22:23:01.401Z", + "contributors": [ + "chack1172", + "PatrickT", + "howilearn" + ] + }, + "Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML": { + "modified": "2020-07-16T22:23:20.000Z", + "contributors": [ + "Aedo1", + "howilearn" + ] + }, + "Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html": { + "modified": "2020-07-16T22:23:34.063Z", + "contributors": [ + "b4yl0n", + "duduindo", + "Th3cG", + "robertsillo" + ] + }, + "Learn/HTML/Multimedia_and_embedding": { + "modified": "2020-07-16T22:24:26.195Z", + "contributors": [ + "Hirpux", + "chrisdavidmills" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Images_in_HTML": { + "modified": "2020-07-16T22:24:45.449Z", + "contributors": [ + "dnaxxx", + "howilearn" + ] + }, + "Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio": { + "modified": "2020-07-16T22:24:53.308Z", + "contributors": [ + "howilearn" + ] + }, + "Learn/HTML/Multimedia_and_embedding/immagini_reattive": { + "modified": "2020-07-16T22:24:35.114Z", + "contributors": [ + "kalamun", + "howilearn" + ] + }, + "Learn/HTML/Scrivi_una_semplice_pagina_in_HTML": { + "modified": "2020-07-16T22:22:27.063Z", + "contributors": [ + "duduindo", + "wbamberg", + "Ella" + ] + }, + "Learn/HTML/Tables": { + "modified": "2020-07-16T22:25:12.659Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:40.494Z", + "contributors": [ + "mario.dilodovico1", + "ManuelDesigner", + "LoSo", + "emilio.giuffrida" + ] + }, + "Learn/JavaScript/Building_blocks": { + "modified": "2020-07-16T22:31:08.796Z", + "contributors": [ + "Gioelio", + "chrisdavidmills" + ] + }, + "Learn/JavaScript/Comefare": { + "modified": "2020-07-16T22:33:09.378Z", + "contributors": [ + "mario.dilodovico1" + ] + }, + "Learn/JavaScript/First_steps": { + "modified": "2020-07-16T22:29:52.003Z", + "contributors": [ + "bosluca", + "theant72", + "Elllenn" + ] + }, + "Learn/JavaScript/First_steps/Cosa_è_andato_storto": { + "modified": "2020-07-16T22:30:33.953Z", + "contributors": [ + "rosso791" + ] + }, + "Learn/JavaScript/First_steps/Variabili": { + "modified": "2020-08-19T06:27:13.303Z", + "contributors": [ + "a.ros", + "SamuelaKC", + "Ibernato93" + ] + }, + "Learn/JavaScript/Oggetti": { + "modified": "2020-07-16T22:31:50.631Z", + "contributors": [ + "maboglia", + "s3lvatico" + ] + }, + "Learn/JavaScript/Oggetti/Basics": { + "modified": "2020-07-16T22:31:59.612Z", + "contributors": [ + "dq82elo", + "claudiod" + ] + }, + "Learn/JavaScript/Oggetti/JSON": { + "modified": "2020-07-16T22:32:26.492Z", + "contributors": [ + "mario.dilodovico1" + ] + }, + "Learn/Server-side": { + "modified": "2020-07-16T22:35:58.950Z", + "contributors": [ + "rsidorov" + ] + }, + "Learn/Server-side/Django": { + "modified": "2020-08-26T14:18:40.901Z", + "contributors": [ + "MatteoMaso", + "Odle98", + "Loder91", + "Cereal84", + "chrisdavidmills" + ] + }, + "Learn/Server-side/Django/Admin_site": { + "modified": "2020-07-16T22:37:03.768Z", + "contributors": [ + "umarino", + "paco80", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Authentication": { + "modified": "2020-07-16T22:37:22.138Z", + "contributors": [ + "wbamberg", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Forms": { + "modified": "2020-07-16T22:37:31.642Z", + "contributors": [ + "duduindo", + "FrancescoLucia", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Generic_views": { + "modified": "2020-07-16T22:37:16.343Z", + "contributors": [ + "paco80", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Home_page": { + "modified": "2020-07-16T22:37:09.320Z", + "contributors": [ + "duduindo", + "paco80", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Introduzione": { + "modified": "2020-10-29T07:11:12.599Z", + "contributors": [ + "sara_t", + "dag7dev", + "gianluca.gioino", + "CristinaS24" + ] + }, + "Learn/Server-side/Django/Models": { + "modified": "2020-07-16T22:36:57.781Z", + "contributors": [ + "paco80", + "mattiatoselli" + ] + }, + "Learn/Server-side/Django/Sessions": { + "modified": "2020-07-16T22:37:26.936Z", + "contributors": [ + "paco80" + ] + }, + "Learn/Server-side/Django/Tutorial_local_library_website": { + "modified": "2020-07-16T22:36:49.252Z", + "contributors": [ + "paco80", + "r0bby", + "Loder91" + ] + }, + "Learn/Server-side/Django/development_environment": { + "modified": "2020-12-02T04:01:12.130Z", + "contributors": [ + "SphinxKnight", + "catta", + "paco80", + "Loder91", + "Cereal84" + ] + }, + "Learn/Server-side/Django/skeleton_website": { + "modified": "2020-07-16T22:36:52.791Z", + "contributors": [ + "paco80", + "mattiatoselli" + ] + }, + "Learn/Server-side/Express_Nodejs": { + "modified": "2020-07-16T22:37:52.837Z", + "contributors": [ + "mattiatoselli" + ] + }, + "Link_prefetching_FAQ": { + "modified": "2019-03-23T23:44:25.588Z", + "contributors": [ + "fscholz", + "artistics-weddings", + "jigs12", + "Leofiore" + ] + }, + "Localization": { + "modified": "2019-03-23T23:44:27.139Z", + "contributors": [ + "teoli", + "Verruckt", + "Leofiore", + "Etms", + "Federico" + ] + }, + "MDN": { + "modified": "2019-09-10T15:42:00.204Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "Jeremie", + "klez", + "teoli", + "Sheppy" + ] + }, + "MDN/About": { + "modified": "2019-09-10T08:52:46.593Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "PsCustomObject", + "jswisher", + "klez" + ] + }, + "MDN/Community": { + "modified": "2019-03-23T22:36:02.220Z", + "contributors": [ + "Italuil", + "wbamberg", + "Vinsala" + ] + }, + "MDN/Contribute": { + "modified": "2019-03-23T23:18:14.834Z", + "contributors": [ + "wbamberg", + "klez", + "Sheppy" + ] + }, + "MDN/Contribute/Creating_and_editing_pages": { + "modified": "2019-03-23T23:06:13.182Z", + "contributors": [ + "wbamberg", + "fabriziobianchi3", + "claudio.mantuano", + "Sav_" + ] + }, + "MDN/Contribute/Feedback": { + "modified": "2020-09-30T17:51:21.113Z", + "contributors": [ + "chrisdavidmills", + "jswisher", + "SphinxKnight", + "wbamberg", + "LucaCtt", + "frbi" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:12:42.224Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "klez", + "teoli", + "Mmarco", + "Xyzale" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2019-01-16T19:06:07.701Z", + "contributors": [ + "wbamberg", + "micheleceo", + "Sheppy" + ] + }, + "MDN/Contribute/Howto/Convert_code_samples_to_be_live": { + "modified": "2019-01-16T21:33:55.637Z", + "contributors": [ + "wbamberg", + "sginestrini", + "plovec", + "nicokant" + ] + }, + "MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-01-16T19:06:05.374Z", + "contributors": [ + "ladysilvia", + "wbamberg", + "plovec", + "klez" + ] + }, + "MDN/Contribute/Howto/Delete_my_profile": { + "modified": "2020-10-21T23:15:42.235Z", + "contributors": [ + "FrancescoCoding" + ] + }, + "MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-01-16T19:16:55.097Z", + "contributors": [ + "wbamberg", + "klez" + ] + }, + "MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-03-23T23:10:59.000Z", + "contributors": [ + "wbamberg", + "mat.campanelli", + "Navy60" + ] + }, + "MDN/Contribute/Howto/Tag": { + "modified": "2020-07-29T06:42:10.343Z", + "contributors": [ + "sara_t", + "danielebarell", + "wbamberg", + "frbi", + "digo62.ddp", + "Originalsin8" + ] + }, + "MDN/Contribute/Howto/impostare_il_riassunto_di_una_pagina": { + "modified": "2019-03-23T23:07:02.988Z", + "contributors": [ + "wbamberg", + "Enrico12" + ] + }, + "MDN/Contribute/Localize": { + "modified": "2019-01-16T18:45:24.347Z", + "contributors": [ + "wbamberg", + "klez", + "Sheppy" + ] + }, + "MDN/Contribute/Localize/GuidaItaliano": { + "modified": "2019-01-16T19:24:37.678Z", + "contributors": [ + "wbamberg", + "klez" + ] + }, + "MDN/Contribute/Localize/Translating_pages": { + "modified": "2019-12-17T21:17:14.987Z", + "contributors": [ + "wbamberg", + "lindakovacs", + "andrealeone", + "plovec", + "Originalsin8", + "klez", + "nicolo-ribaudo" + ] + }, + "MDN/Contribute/Localize/progetti_localizzazione": { + "modified": "2019-05-03T00:34:26.550Z", + "contributors": [ + "wbamberg", + "demmy" + ] + }, + "MDN/Editor": { + "modified": "2020-09-30T15:41:34.289Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "klez", + "turco" + ] + }, + "MDN/Guidelines": { + "modified": "2020-09-30T15:30:11.537Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Sheppy" + ] + }, + "MDN/Guidelines/Macros": { + "modified": "2020-09-30T15:30:11.714Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "frbi" + ] + }, + "MDN/Guidelines/Migliore_pratica": { + "modified": "2020-09-30T15:30:11.829Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Giacomo_" + ] + }, + "MDN/Structures": { + "modified": "2020-09-30T09:07:10.947Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "jswisher" + ] + }, + "MDN/Structures/Tabelle_compatibilità": { + "modified": "2020-10-15T22:03:08.289Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "PsCustomObject", + "Carlo-Effe" + ] + }, + "MDN_at_ten": { + "modified": "2019-03-23T22:42:30.395Z", + "contributors": [ + "foto-planner", + "Vinsala", + "Redsnic", + "Lorenzo_FF" + ] + }, + "Mozilla": { + "modified": "2019-03-23T23:36:49.678Z", + "contributors": [ + "ethertank", + "ziyunfei" + ] + }, + "Mozilla/Add-ons": { + "modified": "2019-09-06T07:54:41.084Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "Joe-VR", + "sara_t", + "purplewasp" + ] + }, + "Mozilla/Add-ons/WebExtensions": { + "modified": "2019-06-09T20:28:21.269Z", + "contributors": [ + "chack1172", + "ezabba", + "tommaso" + ] + }, + "Mozilla/Add-ons/WebExtensions/API": { + "modified": "2019-11-26T22:19:47.758Z", + "contributors": [ + "wbamberg" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/runtime": { + "modified": "2020-10-15T22:09:59.504Z", + "contributors": [ + "wbamberg" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/runtime/connectNative": { + "modified": "2020-10-15T22:09:56.225Z", + "contributors": [ + "wbamberg", + "mxggithub" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/search": { + "modified": "2019-03-18T21:01:55.523Z", + "contributors": [ + "ChristianPredebon" + ] + }, + "Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension": { + "modified": "2019-06-07T12:40:53.568Z", + "contributors": [ + "MarcoAGreco" + ] + }, + "Mozilla/Add-ons/WebExtensions/Cosa_sono_le_WebExtensions": { + "modified": "2019-03-18T21:03:03.594Z", + "contributors": [ + "chack1172" + ] + }, + "Mozilla/Add-ons/WebExtensions/La_tua_prima_WebExtension": { + "modified": "2019-03-18T21:03:00.548Z", + "contributors": [ + "chack1172" + ] + }, + "Mozilla/Add-ons/WebExtensions/Script_contenuto": { + "modified": "2019-06-07T12:34:39.378Z", + "contributors": [ + "MarcoAGreco" + ] + }, + "Mozilla/Add-ons/WebExtensions/user_interface": { + "modified": "2019-06-07T11:18:06.662Z", + "contributors": [ + "MarcoAGreco" + ] + }, + "Mozilla/Developer_guide": { + "modified": "2019-03-23T23:26:03.365Z", + "contributors": [ + "chrisdavidmills", + "bskari" + ] + }, + "Mozilla/Firefox": { + "modified": "2019-09-10T14:58:45.333Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "teoli", + "klez", + "paisa_82", + "Prashanth" + ] + }, + "Mozilla/Firefox/Funzionalità_sperimentali": { + "modified": "2020-07-01T10:55:50.190Z", + "contributors": [ + "Karm46" + ] + }, + "Mozilla/Firefox/Releases": { + "modified": "2019-03-23T23:26:09.968Z", + "contributors": [ + "wbamberg", + "Indil", + "ziyunfei" + ] + }, + "Mozilla/Firefox/Releases/40": { + "modified": "2019-03-23T22:55:04.255Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "Indil" + ] + }, + "Mozilla/Firefox/Releases/42": { + "modified": "2019-08-30T13:56:30.724Z", + "contributors": [ + "duduindo", + "wbamberg", + "enofx" + ] + }, + "Mozilla/Firefox/Releases/59": { + "modified": "2019-03-18T21:38:34.697Z", + "contributors": [ + "wbamberg", + "Karm46" + ] + }, + "Mozilla/Firefox/Releases/64": { + "modified": "2019-03-18T21:20:06.425Z", + "contributors": [ + "Spiritoso" + ] + }, + "Mozilla/Firefox/Releases/66": { + "modified": "2019-04-01T03:50:37.020Z", + "contributors": [ + "rcondor" + ] + }, + "Plug-in": { + "modified": "2019-03-23T23:42:05.451Z", + "contributors": [ + "teoli", + "Samuele", + "Gialloporpora" + ] + }, + "Python": { + "modified": "2019-03-23T23:07:51.453Z", + "contributors": [ + "foto-planner", + "domcorvasce" + ] + }, + "SVG": { + "modified": "2019-03-23T23:44:24.568Z", + "contributors": [ + "sangio90", + "teoli", + "janvas", + "Grino", + "ethertank", + "Verruckt", + "DaViD83", + "Federico" + ] + }, + "Sviluppo_Web": { + "modified": "2019-03-23T23:44:27.263Z", + "contributors": [ + "Leofiore" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:15.461Z", + "contributors": [ + "spinaffs", + "tGstep", + "pietro.pnt", + "costacarlo", + "SphinxKnight", + "tassoman", + "music-wedding", + "edovio", + "Ilprofeta89", + "dinoop.p1" + ] + }, + "Tools/Add-ons": { + "modified": "2020-07-16T22:36:23.403Z", + "contributors": [ + "mfluehr" + ] + }, + "Tools/Debugger": { + "modified": "2020-07-16T22:35:04.703Z", + "contributors": [ + "jzz21q", + "dany1959bo", + "MicheleRiva" + ] + }, + "Tools/Debugger/How_to": { + "modified": "2020-07-16T22:35:07.645Z", + "contributors": [ + "wbamberg" + ] + }, + "Tools/Debugger/How_to/Disable_breakpoints": { + "modified": "2020-07-16T22:35:11.331Z", + "contributors": [ + "jzz21q" + ] + }, + "Tools/Debugger/How_to/Open_the_debugger": { + "modified": "2020-07-16T22:35:09.082Z", + "contributors": [ + "jzz21q" + ] + }, + "Tools/Debugger/How_to/Set_a_breakpoint": { + "modified": "2020-07-16T22:35:10.028Z", + "contributors": [ + "jzz21q" + ] + }, + "Tools/Debugger/How_to/Set_a_conditional_breakpoint": { + "modified": "2020-07-16T22:35:10.598Z", + "contributors": [ + "jzz21q" + ] + }, + "Tools/Debugger/How_to/Step_through_code": { + "modified": "2020-07-16T22:35:11.959Z", + "contributors": [ + "jzz21q" + ] + }, + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:28.006Z", + "contributors": [ + "MicheleRiva" + ] + }, + "Tools/Prestazioni": { + "modified": "2020-07-16T22:36:12.757Z", + "contributors": [ + "Jackerbil" + ] + }, + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.452Z", + "contributors": [ + "Mte90", + "BruVe", + "crakdelpol", + "Grilla", + "turco", + "Fulvio", + "davanzo_m" + ] + }, + "Tools/Visualizzazione_Flessibile": { + "modified": "2020-07-16T22:35:21.469Z", + "contributors": [ + "tassoman" + ] + }, + "Tools/Web_Console": { + "modified": "2020-07-16T22:34:06.052Z", + "contributors": [ + "dany1959bo", + "pino-grassi" + ] + }, + "Tools/Web_Console/Helpers": { + "modified": "2020-07-16T22:34:12.129Z", + "contributors": [ + "aki54", + "CRONOtime" + ] + }, + "Tutorial_sulle_Canvas": { + "modified": "2019-03-23T23:52:28.960Z", + "contributors": [ + "Romanzo", + "fotografi", + "Arset", + "teoli", + "Mmarco", + "Indigo", + "Fuma 90" + ] + }, + "Web": { + "modified": "2020-09-09T03:14:54.712Z", + "contributors": [ + "SphinxKnight", + "freddygovoni", + "chack1172", + "libri-nozze", + "Tommaso30", + "klez", + "Sheppy" + ] + }, + "Web/API": { + "modified": "2019-03-23T23:26:04.951Z", + "contributors": [ + "ladysilvia", + "Giuseppe37", + "teoli" + ] + }, + "Web/API/CanvasRenderingContext2D": { + "modified": "2019-03-23T22:58:10.677Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/CanvasRenderingContext2D/canvas": { + "modified": "2019-03-23T22:58:14.179Z", + "contributors": [ + "endeios" + ] + }, + "Web/API/CanvasRenderingContext2D/fillStyle": { + "modified": "2019-03-23T22:43:20.542Z", + "contributors": [ + "Sebastianz", + "teoli", + "Lucarnosky" + ] + }, + "Web/API/CanvasRenderingContext2D/isPointInPath": { + "modified": "2019-03-23T22:58:22.259Z", + "contributors": [ + "endeios" + ] + }, + "Web/API/CloseEvent": { + "modified": "2019-03-23T22:52:56.147Z", + "contributors": [ + "andreacomo" + ] + }, + "Web/API/Console": { + "modified": "2020-10-15T22:09:09.162Z", + "contributors": [ + "irenesmith" + ] + }, + "Web/API/Console/log": { + "modified": "2020-10-15T22:28:43.661Z", + "contributors": [ + "michelebergadano", + "Mystral" + ] + }, + "Web/API/Console/table": { + "modified": "2020-10-15T22:09:07.124Z", + "contributors": [ + "ilsergente1993" + ] + }, + "Web/API/Crypto": { + "modified": "2020-10-15T22:09:57.166Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/Crypto/subtle": { + "modified": "2020-10-15T22:09:56.082Z", + "contributors": [ + "mxggithub" + ] + }, + "Web/API/DOMString": { + "modified": "2019-04-24T13:38:49.925Z", + "contributors": [ + "IsibisiDev", + "giacar", + "teoli", + "brouwer89" + ] + }, + "Web/API/DOMTokenList": { + "modified": "2020-10-15T22:13:13.631Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/DOMTokenList/item": { + "modified": "2020-10-15T22:13:12.227Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/DataTransfer": { + "modified": "2019-03-23T22:31:47.478Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/API/DataTransfer/getData": { + "modified": "2019-03-23T22:31:46.435Z", + "contributors": [ + "jwhitlock", + "Quinta" + ] + }, + "Web/API/Document": { + "modified": "2019-03-23T23:44:59.920Z", + "contributors": [ + "teoli", + "Hasilt", + "Federico", + "DaViD83" + ] + }, + "Web/API/Document/URL": { + "modified": "2019-03-23T23:45:00.029Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/anchors": { + "modified": "2019-03-23T23:45:10.813Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/applets": { + "modified": "2019-03-23T23:45:10.908Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/body": { + "modified": "2020-10-15T21:18:28.305Z", + "contributors": [ + "IsibisiDev", + "teoli", + "Hasilt", + "DaViD83" + ] + }, + "Web/API/Document/characterSet": { + "modified": "2019-03-23T23:45:08.323Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/close": { + "modified": "2019-03-23T23:45:10.708Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/createElement": { + "modified": "2020-10-15T21:18:00.913Z", + "contributors": [ + "IsibisiDev", + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Document/createRange": { + "modified": "2019-03-23T23:44:59.391Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/defaultView": { + "modified": "2019-03-23T23:46:35.162Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/doctype": { + "modified": "2019-03-23T23:44:55.085Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/documentElement": { + "modified": "2020-10-15T21:18:12.835Z", + "contributors": [ + "IsibisiDev", + "teoli", + "Federico" + ] + }, + "Web/API/Document/firstChild": { + "modified": "2019-03-23T23:45:06.385Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/forms": { + "modified": "2020-10-15T21:18:07.841Z", + "contributors": [ + "IsibisiDev", + "teoli", + "Federico" + ] + }, + "Web/API/Document/getElementById": { + "modified": "2020-10-15T21:18:10.220Z", + "contributors": [ + "IsibisiDev", + "teoli", + "giuscri", + "Federico" + ] + }, + "Web/API/Document/getElementsByClassName": { + "modified": "2020-10-15T22:11:27.446Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Document/getElementsByName": { + "modified": "2020-10-15T21:18:13.142Z", + "contributors": [ + "IsibisiDev", + "teoli", + "Federico" + ] + }, + "Web/API/Document/getElementsByTagName": { + "modified": "2020-10-15T22:13:34.246Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Document/head": { + "modified": "2020-10-15T22:17:32.293Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Document/height": { + "modified": "2019-03-23T23:45:00.160Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/images": { + "modified": "2019-03-23T22:30:23.356Z", + "contributors": [ + "MicheleDomanico" + ] + }, + "Web/API/Document/importNode": { + "modified": "2019-03-23T23:44:59.500Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/lastModified": { + "modified": "2019-03-23T23:44:58.375Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/links": { + "modified": "2019-03-23T23:46:56.936Z", + "contributors": [ + "MicheleDomanico", + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Document/namespaceURI": { + "modified": "2019-03-23T23:45:08.038Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/open": { + "modified": "2019-03-23T23:46:30.372Z", + "contributors": [ + "teoli", + "Hasilt", + "Ruggi", + "Federico" + ] + }, + "Web/API/Document/querySelector": { + "modified": "2020-10-31T12:12:00.361Z", + "contributors": [ + "arj95", + "IsibisiDev", + "andrea.rizzo" + ] + }, + "Web/API/Document/querySelectorAll": { + "modified": "2020-10-15T21:34:36.853Z", + "contributors": [ + "IsibisiDev", + "Obras" + ] + }, + "Web/API/Document/referrer": { + "modified": "2019-03-23T23:44:58.474Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/styleSheets": { + "modified": "2019-03-23T23:46:31.284Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Document/title": { + "modified": "2019-03-23T23:44:54.978Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/width": { + "modified": "2019-03-23T23:44:55.977Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Document/write": { + "modified": "2019-03-23T23:16:28.970Z", + "contributors": [ + "teoli", + "khalid32", + "Ruggi" + ] + }, + "Web/API/Document/writeln": { + "modified": "2019-03-18T21:15:27.892Z", + "contributors": [ + "nikiink" + ] + }, + "Web/API/Document_Object_Model": { + "modified": "2019-03-23T22:07:03.870Z", + "contributors": [ + "SuperBisco" + ] + }, + "Web/API/Document_Object_Model/Introduzione": { + "modified": "2020-02-23T14:30:00.735Z", + "contributors": [ + "giacomomaccanti" + ] + }, + "Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors": { + "modified": "2019-03-18T21:19:09.556Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element": { + "modified": "2020-10-15T21:18:34.829Z", + "contributors": [ + "IsibisiDev", + "teoli", + "AshfaqHossain", + "Joey santiago", + "DaViD83" + ] + }, + "Web/API/Element/addEventListener": { + "modified": "2020-10-15T21:07:44.354Z", + "contributors": [ + "IsibisiDev", + "akmur", + "gitact", + "vindega", + "teoli", + "khalid32", + "loris94", + "Samuele", + "DaViD83" + ] + }, + "Web/API/Element/attributes": { + "modified": "2020-10-15T21:18:26.646Z", + "contributors": [ + "IsibisiDev", + "teoli", + "khalid32", + "DaViD83" + ] + }, + "Web/API/Element/childNodes": { + "modified": "2020-10-15T21:18:25.382Z", + "contributors": [ + "IsibisiDev", + "stefanoio", + "render93", + "teoli", + "AshfaqHossain", + "DaViD83" + ] + }, + "Web/API/Element/classList": { + "modified": "2020-10-15T22:08:44.689Z", + "contributors": [ + "IsibisiDev", + "dariokf", + "LBreda" + ] + }, + "Web/API/Element/className": { + "modified": "2020-10-15T21:18:25.635Z", + "contributors": [ + "IsibisiDev", + "teoli", + "khalid32", + "DaViD83" + ] + }, + "Web/API/Element/clientHeight": { + "modified": "2019-03-23T23:41:11.695Z", + "contributors": [ + "teoli", + "khalid32", + "DaViD83" + ] + }, + "Web/API/Element/closest": { + "modified": "2020-10-15T22:17:42.551Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element/firstChild": { + "modified": "2020-10-15T21:18:24.892Z", + "contributors": [ + "IsibisiDev", + "wbamberg", + "render93", + "teoli", + "khalid32", + "Sheppy", + "DaViD83" + ] + }, + "Web/API/Element/getAttribute": { + "modified": "2020-10-15T22:12:34.368Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element/getElementsByTagName": { + "modified": "2020-10-15T21:27:28.006Z", + "contributors": [ + "IsibisiDev", + "teoli", + "AshfaqHossain", + "Ruggi" + ] + }, + "Web/API/Element/hasAttribute": { + "modified": "2020-10-15T22:12:28.393Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element/hasAttributes": { + "modified": "2019-03-23T23:46:57.445Z", + "contributors": [ + "teoli", + "AshfaqHossain", + "Federico" + ] + }, + "Web/API/Element/innerHTML": { + "modified": "2020-10-15T22:10:18.880Z", + "contributors": [ + "IsibisiDev", + "SphinxKnight", + "Daniele202" + ] + }, + "Web/API/Element/insertAdjacentHTML": { + "modified": "2020-10-15T21:46:44.431Z", + "contributors": [ + "IsibisiDev", + "marcozanghi" + ] + }, + "Web/API/Element/nodeName": { + "modified": "2020-10-15T21:17:56.733Z", + "contributors": [ + "IsibisiDev", + "teoli", + "jsx", + "AshfaqHossain", + "Federico" + ] + }, + "Web/API/Element/nodeType": { + "modified": "2020-10-15T21:17:56.649Z", + "contributors": [ + "IsibisiDev", + "DavideCanton", + "teoli", + "khalid32", + "ethertank", + "Federico" + ] + }, + "Web/API/Element/nodeValue": { + "modified": "2019-03-24T00:13:06.084Z", + "contributors": [ + "teoli", + "jsx", + "dextra", + "Federico" + ] + }, + "Web/API/Element/parentNode": { + "modified": "2020-10-15T21:17:57.762Z", + "contributors": [ + "IsibisiDev", + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Element/prefix": { + "modified": "2019-03-23T23:47:01.925Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Element/querySelector": { + "modified": "2020-10-15T22:12:29.147Z", + "contributors": [ + "duduindo", + "IsibisiDev" + ] + }, + "Web/API/Element/querySelectorAll": { + "modified": "2020-10-15T22:17:35.796Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element/removeAttribute": { + "modified": "2020-10-15T21:49:35.746Z", + "contributors": [ + "IsibisiDev", + "fbatta" + ] + }, + "Web/API/Element/requestFullScreen": { + "modified": "2019-03-23T22:30:36.693Z", + "contributors": [ + "lviggiani" + ] + }, + "Web/API/Element/scrollHeight": { + "modified": "2019-03-18T20:59:00.850Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Ruggi" + ] + }, + "Web/API/Element/scrollTop": { + "modified": "2020-10-15T22:01:45.470Z", + "contributors": [ + "IsibisiDev", + "NicolaCastellaniTB" + ] + }, + "Web/API/Element/setAttribute": { + "modified": "2020-10-15T22:12:29.114Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Element/tagName": { + "modified": "2020-10-15T21:58:39.149Z", + "contributors": [ + "IsibisiDev", + "Shabunken" + ] + }, + "Web/API/Element/textContent": { + "modified": "2020-10-15T21:17:56.553Z", + "contributors": [ + "LoSo", + "IsibisiDev", + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Element/toggleAttribute": { + "modified": "2020-10-15T22:14:01.364Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Event": { + "modified": "2019-03-23T23:46:35.054Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/altKey": { + "modified": "2019-03-23T23:46:44.336Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/bubbles": { + "modified": "2019-03-23T23:46:36.123Z", + "contributors": [ + "teoli", + "xuancanh", + "Federico" + ] + }, + "Web/API/Event/button": { + "modified": "2019-03-23T23:46:37.711Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/cancelable": { + "modified": "2019-03-23T23:46:38.519Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/charCode": { + "modified": "2019-03-23T23:46:31.812Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/ctrlKey": { + "modified": "2019-03-23T23:46:43.027Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/currentTarget": { + "modified": "2019-03-23T22:47:05.735Z", + "contributors": [ + "brakko" + ] + }, + "Web/API/Event/eventPhase": { + "modified": "2019-03-23T23:46:37.898Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/isChar": { + "modified": "2019-03-23T23:46:41.517Z", + "contributors": [ + "teoli", + "xuancanh", + "Federico" + ] + }, + "Web/API/Event/keyCode": { + "modified": "2019-03-23T23:46:33.218Z", + "contributors": [ + "teoli", + "xuancanh", + "Federico" + ] + }, + "Web/API/Event/layerX": { + "modified": "2019-03-23T23:46:44.079Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/layerY": { + "modified": "2019-03-23T23:46:42.670Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/metaKey": { + "modified": "2019-03-23T23:46:45.023Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/pageX": { + "modified": "2019-03-23T23:46:41.625Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/pageY": { + "modified": "2019-03-23T23:46:46.107Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/preventDefault": { + "modified": "2020-10-15T21:17:58.593Z", + "contributors": [ + "IsibisiDev", + "nicecatch", + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/shiftKey": { + "modified": "2019-03-23T23:46:40.291Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Event/stopPropagation": { + "modified": "2020-10-15T21:17:59.102Z", + "contributors": [ + "IsibisiDev", + "teoli", + "khalid32", + "willywongi", + "Federico" + ] + }, + "Web/API/Event/timeStamp": { + "modified": "2019-03-23T23:46:36.323Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/type": { + "modified": "2019-03-23T23:46:36.031Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/view": { + "modified": "2019-03-23T23:46:31.176Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Event/which": { + "modified": "2019-03-23T23:46:32.154Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Fetch_API": { + "modified": "2019-10-28T11:29:11.758Z", + "contributors": [ + "shylockness", + "rainst", + "AlessandroSanino1994" + ] + }, + "Web/API/File": { + "modified": "2020-10-15T22:30:43.460Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/API/File/Using_files_from_web_applications": { + "modified": "2020-06-12T08:46:27.721Z", + "contributors": [ + "stefanodorazio70" + ] + }, + "Web/API/Geolocation": { + "modified": "2019-03-18T21:46:55.204Z", + "contributors": [ + "robertopinotti" + ] + }, + "Web/API/Geolocation/Using_geolocation": { + "modified": "2019-03-18T21:46:47.006Z", + "contributors": [ + "robertopinotti" + ] + }, + "Web/API/Geolocation/watchPosition": { + "modified": "2019-03-18T21:46:55.440Z", + "contributors": [ + "robertopinotti" + ] + }, + "Web/API/GeolocationPosition": { + "modified": "2019-12-10T11:03:48.479Z", + "contributors": [ + "chrisdavidmills", + "robertopinotti" + ] + }, + "Web/API/GlobalEventHandlers": { + "modified": "2019-03-23T22:04:41.955Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/API/GlobalEventHandlers/onresize": { + "modified": "2019-03-23T22:04:51.035Z", + "contributors": [ + "fareilweb" + ] + }, + "Web/API/HTMLCanvasElement": { + "modified": "2019-03-23T22:27:54.708Z", + "contributors": [ + "Mathkute" + ] + }, + "Web/API/HTMLCanvasElement/toBlob": { + "modified": "2019-03-23T22:04:57.927Z", + "contributors": [ + "ssava" + ] + }, + "Web/API/HTMLCollection": { + "modified": "2020-10-15T22:11:22.825Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/HTMLCollection/item": { + "modified": "2020-10-15T22:11:26.893Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/HTMLElement": { + "modified": "2019-04-18T23:22:28.058Z", + "contributors": [ + "IsibisiDev", + "teoli", + "jsx", + "klez" + ] + }, + "Web/API/HTMLElement/offsetHeight": { + "modified": "2019-03-18T20:58:53.365Z", + "contributors": [ + "SphinxKnight", + "DLuPi", + "mautrok" + ] + }, + "Web/API/HTMLFormElement": { + "modified": "2019-03-23T23:45:13.519Z", + "contributors": [ + "teoli", + "khalid32", + "Federico", + "DaViD83" + ] + }, + "Web/API/HTMLFormElement/acceptCharset": { + "modified": "2019-03-23T23:45:06.067Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/action": { + "modified": "2019-03-23T23:45:09.260Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/elements": { + "modified": "2019-03-23T23:41:38.107Z", + "contributors": [ + "teoli", + "arunpandianp", + "DaViD83" + ] + }, + "Web/API/HTMLFormElement/enctype": { + "modified": "2019-03-23T23:45:07.772Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/length": { + "modified": "2019-03-23T23:45:12.308Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/method": { + "modified": "2019-03-23T23:45:11.223Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/name": { + "modified": "2019-03-23T23:45:05.688Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/reset": { + "modified": "2019-03-23T23:45:07.858Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/submit": { + "modified": "2019-03-23T23:45:09.078Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLFormElement/target": { + "modified": "2019-03-23T23:45:12.633Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/HTMLIFrameElement": { + "modified": "2019-07-30T13:28:27.031Z", + "contributors": [ + "rainydio" + ] + }, + "Web/API/HTMLUnknownElement": { + "modified": "2020-10-15T22:17:30.215Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/IndexedDB_API": { + "modified": "2019-03-27T08:42:23.353Z", + "contributors": [ + "tommyblue", + "unziojack" + ] + }, + "Web/API/MutationObserver": { + "modified": "2020-10-15T22:10:44.906Z", + "contributors": [ + "frappacchio" + ] + }, + "Web/API/Navigator": { + "modified": "2019-03-23T23:01:39.014Z", + "contributors": [ + "wbamberg", + "teoli" + ] + }, + "Web/API/Navigator/cookieEnabled": { + "modified": "2019-03-23T23:16:26.897Z", + "contributors": [ + "teoli", + "jsx", + "Ruggi" + ] + }, + "Web/API/Navigator/credentials": { + "modified": "2020-10-15T22:09:03.582Z", + "contributors": [ + "fredmaggiowski" + ] + }, + "Web/API/NavigatorConcurrentHardware": { + "modified": "2020-10-15T22:17:43.299Z", + "contributors": [ + "music-thetale" + ] + }, + "Web/API/Node": { + "modified": "2020-10-15T22:09:53.341Z", + "contributors": [ + "ikemo" + ] + }, + "Web/API/Node/appendChild": { + "modified": "2020-10-15T22:17:30.429Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Node/lastChild": { + "modified": "2020-10-15T22:13:58.693Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Node/nextSibling": { + "modified": "2020-10-15T22:14:02.013Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Node/previousSibling": { + "modified": "2020-10-15T22:13:58.654Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/NodeList": { + "modified": "2020-10-15T22:00:23.657Z", + "contributors": [ + "IsibisiDev", + "giacar" + ] + }, + "Web/API/NodeList/forEach": { + "modified": "2020-10-15T22:19:59.717Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/ParentNode": { + "modified": "2020-10-15T22:13:14.638Z", + "contributors": [ + "ExE-Boss" + ] + }, + "Web/API/ParentNode/children": { + "modified": "2020-10-15T22:13:17.341Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/ParentNode/firstElementChild": { + "modified": "2020-10-15T22:17:20.523Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/ParentNode/lastElementChild": { + "modified": "2020-10-15T22:17:20.462Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/API/Performance": { + "modified": "2020-10-15T22:10:46.200Z", + "contributors": [ + "fscholz", + "frappacchio" + ] + }, + "Web/API/Performance/now": { + "modified": "2020-10-15T22:13:16.615Z", + "contributors": [ + "Rufis01" + ] + }, + "Web/API/Range": { + "modified": "2019-03-23T23:45:07.167Z", + "contributors": [ + "teoli", + "soumya", + "Federico", + "Todarogiovanni", + "DaViD83" + ] + }, + "Web/API/Range/cloneContents": { + "modified": "2019-03-23T23:46:37.810Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Range/cloneRange": { + "modified": "2019-03-23T23:44:58.754Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/collapse": { + "modified": "2019-03-23T23:44:56.406Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/collapsed": { + "modified": "2019-03-23T23:44:55.708Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/commonAncestorContainer": { + "modified": "2019-03-23T23:45:00.555Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/compareBoundaryPoints": { + "modified": "2019-03-23T23:45:00.370Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/comparePoint": { + "modified": "2019-03-23T23:45:06.170Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/createContextualFragment": { + "modified": "2019-03-23T23:45:13.109Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/deleteContents": { + "modified": "2019-03-23T23:46:37.314Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Range/detach": { + "modified": "2019-03-23T23:44:57.076Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/endContainer": { + "modified": "2019-03-23T23:45:00.639Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/endOffset": { + "modified": "2019-03-23T23:45:03.942Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/extractContents": { + "modified": "2019-03-23T23:46:35.754Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Range/insertNode": { + "modified": "2019-03-23T23:46:35.932Z", + "contributors": [ + "teoli", + "arunpandianp", + "Federico" + ] + }, + "Web/API/Range/isPointInRange": { + "modified": "2019-03-23T23:45:10.129Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/selectNode": { + "modified": "2019-03-23T23:44:57.862Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/selectNodeContents": { + "modified": "2019-03-23T23:44:56.541Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/setEnd": { + "modified": "2019-03-23T23:45:00.267Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/setEndAfter": { + "modified": "2019-03-23T23:44:55.536Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/setEndBefore": { + "modified": "2019-03-23T23:45:00.463Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/setStart": { + "modified": "2019-03-23T23:42:37.319Z", + "contributors": [ + "teoli", + "Todarogiovanni" + ] + }, + "Web/API/Range/setStartAfter": { + "modified": "2019-03-23T23:45:02.951Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/setStartBefore": { + "modified": "2019-03-23T23:45:04.772Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/startContainer": { + "modified": "2019-03-23T23:45:05.282Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/startOffset": { + "modified": "2019-03-23T23:45:12.949Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Range/surroundContents": { + "modified": "2019-03-23T23:46:34.486Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Range/toString": { + "modified": "2019-03-23T23:45:04.241Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Selection": { + "modified": "2019-03-23T23:46:46.823Z", + "contributors": [ + "nicokant", + "teoli", + "khalid32", + "DR", + "Federico", + "DaViD83" + ] + }, + "Web/API/Selection/addRange": { + "modified": "2019-03-23T23:46:48.819Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Selection/anchorNode": { + "modified": "2019-03-23T23:46:46.999Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/anchorOffset": { + "modified": "2019-03-23T23:46:54.697Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Selection/collapse": { + "modified": "2019-03-23T23:47:02.507Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/collapseToEnd": { + "modified": "2019-03-23T23:46:50.665Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Selection/collapseToStart": { + "modified": "2019-01-16T16:00:26.825Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Selection/containsNode": { + "modified": "2019-03-23T23:46:48.446Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/deleteFromDocument": { + "modified": "2019-03-23T23:46:53.555Z", + "contributors": [ + "teoli", + "AshfaqHossain", + "basemnassar11", + "Federico" + ] + }, + "Web/API/Selection/extend": { + "modified": "2019-03-23T23:46:53.275Z", + "contributors": [ + "teoli", + "khalid32", + "Federico" + ] + }, + "Web/API/Selection/focusNode": { + "modified": "2019-03-23T23:46:46.664Z", + "contributors": [ + "teoli", + "jsx", + "DR", + "Federico" + ] + }, + "Web/API/Selection/focusOffset": { + "modified": "2019-03-23T23:46:53.044Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/getRangeAt": { + "modified": "2019-03-23T23:44:56.321Z", + "contributors": [ + "teoli", + "Ruggi", + "Federico" + ] + }, + "Web/API/Selection/isCollapsed": { + "modified": "2019-03-23T23:46:54.286Z", + "contributors": [ + "teoli", + "khalid32", + "DR", + "Federico" + ] + }, + "Web/API/Selection/rangeCount": { + "modified": "2019-03-23T23:46:54.197Z", + "contributors": [ + "teoli", + "jsx", + "DR", + "Federico" + ] + }, + "Web/API/Selection/removeAllRanges": { + "modified": "2019-03-23T23:46:51.490Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/removeRange": { + "modified": "2019-03-23T23:46:52.407Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/selectAllChildren": { + "modified": "2019-03-23T23:46:50.989Z", + "contributors": [ + "teoli", + "jsx", + "Federico" + ] + }, + "Web/API/Selection/toString": { + "modified": "2019-03-23T23:46:47.771Z", + "contributors": [ + "teoli", + "khalid32", + "DR", + "Federico" + ] + }, + "Web/API/Storage": { + "modified": "2019-09-20T06:23:52.261Z", + "contributors": [ + "sturmer" + ] + }, + "Web/API/Storage/clear": { + "modified": "2019-03-23T22:08:34.106Z", + "contributors": [ + "matteolongo" + ] + }, + "Web/API/Storage/getItem": { + "modified": "2019-03-23T22:07:28.911Z", + "contributors": [ + "azanatta" + ] + }, + "Web/API/Storage/setItem": { + "modified": "2019-09-20T06:22:40.087Z", + "contributors": [ + "sharq", + "nandowalter", + "robertopinotti" + ] + }, + "Web/API/URLUtils": { + "modified": "2019-03-23T23:01:38.757Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/WebGL_API": { + "modified": "2020-10-15T22:34:13.570Z", + "contributors": [ + "robertsillo" + ] + }, + "Web/API/WebSocket": { + "modified": "2020-10-15T22:21:40.095Z", + "contributors": [ + "sideshowbarker" + ] + }, + "Web/API/WebSocket/WebSocket": { + "modified": "2019-08-01T02:54:10.157Z", + "contributors": [ + "SphinxKnight", + "shintakawa" + ] + }, + "Web/API/Window": { + "modified": "2019-03-23T23:41:37.229Z", + "contributors": [ + "lvzndr", + "teoli", + "khalid32", + "DaViD83" + ] + }, + "Web/API/Window/alert": { + "modified": "2019-03-23T23:45:07.588Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/back": { + "modified": "2019-03-23T23:44:59.600Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/blur": { + "modified": "2019-03-23T23:45:10.222Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/close": { + "modified": "2020-10-15T21:41:40.994Z", + "contributors": [ + "SphinxKnight", + "luigi.quarta" + ] + }, + "Web/API/Window/closed": { + "modified": "2019-03-23T23:45:06.616Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/confirm": { + "modified": "2020-09-16T06:37:39.424Z", + "contributors": [ + "DarioSacco", + "teoli", + "Federico" + ] + }, + "Web/API/Window/crypto": { + "modified": "2019-03-23T22:40:34.995Z", + "contributors": [ + "luigi.quarta" + ] + }, + "Web/API/Window/defaultstatus": { + "modified": "2019-03-23T23:45:05.869Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/devicemotion_event": { + "modified": "2019-04-11T18:36:04.208Z", + "contributors": [ + "estelle", + "fscholz", + "ExplosiveLab" + ] + }, + "Web/API/Window/document": { + "modified": "2019-03-23T23:45:06.723Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/focus": { + "modified": "2019-03-23T23:45:07.264Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/forward": { + "modified": "2019-03-23T23:45:08.676Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/getSelection": { + "modified": "2019-03-23T23:46:39.366Z", + "contributors": [ + "jsx", + "teoli", + "mimzi_fahia", + "Ruggi", + "Federico" + ] + }, + "Web/API/Window/history": { + "modified": "2019-03-23T23:45:08.885Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/home": { + "modified": "2019-03-23T23:44:57.169Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/localStorage": { + "modified": "2019-05-08T11:23:19.757Z", + "contributors": [ + "farturi", + "Taletex", + "Peppuz" + ] + }, + "Web/API/Window/locationbar": { + "modified": "2019-03-23T23:45:08.987Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/matchMedia": { + "modified": "2019-03-23T22:56:20.018Z", + "contributors": [ + "giancarlo" + ] + }, + "Web/API/Window/moveBy": { + "modified": "2019-03-23T23:45:06.833Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/moveTo": { + "modified": "2019-03-23T23:45:08.786Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/name": { + "modified": "2019-03-23T23:44:57.275Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/onuserproximity": { + "modified": "2020-10-15T22:13:21.435Z", + "contributors": [ + "cam0347" + ] + }, + "Web/API/Window/opener": { + "modified": "2019-03-23T23:45:05.974Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/orientationchange_event": { + "modified": "2019-04-02T12:01:28.415Z", + "contributors": [ + "fscholz", + "afalchi82" + ] + }, + "Web/API/Window/print": { + "modified": "2019-03-23T23:44:55.181Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/prompt": { + "modified": "2019-03-23T23:45:08.519Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/requestAnimationFrame": { + "modified": "2020-10-15T22:10:48.306Z", + "contributors": [ + "frappacchio" + ] + }, + "Web/API/Window/resizeBy": { + "modified": "2019-03-23T23:45:09.646Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/resizeTo": { + "modified": "2019-03-23T23:45:06.497Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/sessionStorage": { + "modified": "2019-03-18T21:10:48.383Z", + "contributors": [ + "sharq", + "bwlt", + "ale-rt", + "Belio" + ] + }, + "Web/API/Window/sidebar": { + "modified": "2019-03-23T22:02:58.914Z", + "contributors": [ + "IsaacSchemm" + ] + }, + "Web/API/Window/sizeToContent": { + "modified": "2019-03-23T23:45:12.715Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/status": { + "modified": "2019-03-23T23:45:05.405Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/statusbar": { + "modified": "2019-03-23T23:45:11.669Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/stop": { + "modified": "2019-03-23T23:45:04.684Z", + "contributors": [ + "teoli", + "Federico" + ] + }, + "Web/API/Window/top": { + "modified": "2019-03-23T22:56:44.582Z", + "contributors": [ + "brakko" + ] + }, + "Web/API/WindowOrWorkerGlobalScope": { + "modified": "2020-10-15T22:04:42.998Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/WindowOrWorkerGlobalScope/fetch": { + "modified": "2020-10-15T22:04:43.287Z", + "contributors": [ + "iruy" + ] + }, + "Web/API/WindowTimers": { + "modified": "2019-03-23T22:33:10.851Z", + "contributors": [ + "aragacalledpat" + ] + }, + "Web/API/WindowTimers/clearInterval": { + "modified": "2019-03-23T22:33:02.364Z", + "contributors": [ + "lorenzopieri" + ] + }, + "Web/API/Worker": { + "modified": "2020-10-15T22:05:05.715Z", + "contributors": [ + "rainst" + ] + }, + "Web/API/XMLHttpRequest": { + "modified": "2020-10-15T21:18:25.293Z", + "contributors": [ + "fscholz", + "ivorykeys", + "teoli", + "ethertank", + "Federico" + ] + }, + "Web/API/XMLHttpRequest/Usare_XMLHttpRequest": { + "modified": "2019-09-22T07:49:44.300Z", + "contributors": [ + "chkrr00k", + "valerio-bozzolan", + "teoli", + "Andrea_Barghigiani" + ] + }, + "Web/API/XMLHttpRequest/XMLHttpRequest": { + "modified": "2020-01-22T12:40:19.899Z", + "contributors": [ + "sock-et" + ] + }, + "Web/API/XMLHttpRequest/onreadystatechange": { + "modified": "2019-03-23T22:11:52.690Z", + "contributors": [ + "fedebamba" + ] + }, + "Web/API/XMLHttpRequest/open": { + "modified": "2019-03-18T21:39:53.888Z", + "contributors": [ + "valerio-bozzolan" + ] + }, + "Web/API/XMLHttpRequest/readyState": { + "modified": "2019-03-18T21:17:26.042Z", + "contributors": [ + "fedebamba" + ] + }, + "Web/API/notifiche": { + "modified": "2019-03-18T20:57:39.827Z", + "contributors": [ + "francymin", + "Mascare" + ] + }, + "Web/API/notifiche/dir": { + "modified": "2020-10-15T22:17:29.488Z", + "contributors": [ + "Belingheri" + ] + }, + "Web/Accessibility": { + "modified": "2019-09-09T14:13:55.035Z", + "contributors": [ + "SphinxKnight", + "mipo", + "PyQio", + "klez" + ] + }, + "Web/Accessibility/Sviluppo_Web": { + "modified": "2019-03-23T23:18:40.805Z", + "contributors": [ + "klez" + ] + }, + "Web/CSS": { + "modified": "2020-01-15T05:51:31.675Z", + "contributors": [ + "Pardoz", + "SphinxKnight", + "massic80", + "sginestrini", + "teoli", + "jmc", + "Grino", + "ethertank", + "Federico", + "bradipao", + "Indigo", + "DaViD83" + ] + }, + "Web/CSS/-moz-font-language-override": { + "modified": "2019-03-23T23:28:40.117Z", + "contributors": [ + "teoli", + "lboy" + ] + }, + "Web/CSS/-webkit-overflow-scrolling": { + "modified": "2020-10-15T22:09:13.015Z", + "contributors": [ + "zeroerrequattro" + ] + }, + "Web/CSS/:-moz-first-node": { + "modified": "2019-03-23T23:48:44.707Z", + "contributors": [ + "teoli", + "Zibibbo84" + ] + }, + "Web/CSS/:-moz-last-node": { + "modified": "2019-03-23T23:48:40.245Z", + "contributors": [ + "teoli", + "Zibibbo84" + ] + }, + "Web/CSS/:-moz-list-bullet": { + "modified": "2019-03-23T23:48:40.552Z", + "contributors": [ + "teoli", + "Zibibbo84" + ] + }, + "Web/CSS/::selection": { + "modified": "2019-03-23T22:13:07.331Z", + "contributors": [ + "Winni-", + "Swear" + ] + }, + "Web/CSS/:active": { + "modified": "2020-10-15T22:29:19.196Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/:focus": { + "modified": "2020-10-15T22:29:43.751Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/:hover": { + "modified": "2020-10-15T22:29:45.329Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/@document": { + "modified": "2019-03-23T23:48:44.142Z", + "contributors": [ + "teoli", + "Zibibbo84" + ] + }, + "Web/CSS/Attribute_selectors": { + "modified": "2020-10-15T22:29:45.918Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/CSS_Box_Model": { + "modified": "2019-03-23T22:05:15.030Z", + "contributors": [ + "mfluehr" + ] + }, + "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": { + "modified": "2019-03-23T22:05:16.040Z", + "contributors": [ + "mipo" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout": { + "modified": "2019-03-18T21:16:43.477Z", + "contributors": [ + "teoli" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes": { + "modified": "2019-03-18T20:58:13.071Z", + "contributors": [ + "KadirTopal", + "ATrogolo", + "fscholz", + "Renatvs88" + ] + }, + "Web/CSS/CSS_Positioning": { + "modified": "2020-05-29T22:27:05.116Z" + }, + "Web/CSS/CSS_Positioning/Understanding_z_index": { + "modified": "2020-05-29T22:27:05.339Z" + }, + "Web/CSS/Cascade": { + "modified": "2019-03-18T21:16:55.672Z", + "contributors": [ + "itektopdesigner" + ] + }, + "Web/CSS/Guida_di_riferimento_ai_CSS": { + "modified": "2020-04-22T10:36:23.257Z", + "contributors": [ + "xplosionmind", + "Pardoz", + "teoli", + "tregagnon", + "Federico" + ] + }, + "Web/CSS/Media_Queries": { + "modified": "2019-03-23T22:04:20.173Z", + "contributors": [ + "mipo" + ] + }, + "Web/CSS/Mozilla_Extensions": { + "modified": "2019-03-23T23:48:43.276Z", + "contributors": [ + "teoli", + "Zibibbo84" + ] + }, + "Web/CSS/Pseudo-classes": { + "modified": "2020-05-10T13:50:36.157Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/Ricette_layout": { + "modified": "2019-03-18T21:23:52.893Z", + "contributors": [ + "Yoekkul" + ] + }, + "Web/CSS/Type_selectors": { + "modified": "2020-10-15T22:29:37.496Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/Universal_selectors": { + "modified": "2020-10-15T22:29:42.104Z", + "contributors": [ + "Pardoz" + ] + }, + "Web/CSS/background": { + "modified": "2019-03-24T00:08:46.545Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Yuichiro", + "Federico" + ] + }, + "Web/CSS/background-attachment": { + "modified": "2019-03-23T23:53:59.091Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Federico" + ] + }, + "Web/CSS/background-color": { + "modified": "2019-03-23T23:28:12.389Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Yuichiro", + "Federico" + ] + }, + "Web/CSS/background-image": { + "modified": "2019-03-23T23:18:31.669Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Federico" + ] + }, + "Web/CSS/background-position": { + "modified": "2019-03-24T00:00:19.111Z", + "contributors": [ + "massic80", + "teoli", + "pbrenna" + ] + }, + "Web/CSS/background-repeat": { + "modified": "2019-03-24T00:00:20.041Z", + "contributors": [ + "SphinxKnight", + "teoli", + "pbrenna" + ] + }, + "Web/CSS/border": { + "modified": "2019-03-24T00:00:20.561Z", + "contributors": [ + "teoli", + "pbrenna" + ] + }, + "Web/CSS/border-bottom": { + "modified": "2019-03-24T00:00:16.438Z", + "contributors": [ + "teoli", + "pbrenna" + ] + }, + "Web/CSS/border-style": { + "modified": "2020-10-15T21:55:36.905Z", + "contributors": [ + "Pardoz", + "fscholz", + "SerenaG" + ] + }, + "Web/CSS/color": { + "modified": "2019-03-24T00:00:19.477Z", + "contributors": [ + "teoli", + "pbrenna" + ] + }, + "Web/CSS/cursor": { + "modified": "2019-03-23T23:12:03.465Z", + "contributors": [ + "mrstork", + "Sebastianz", + "teoli", + "claudepache" + ] + }, + "Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor": { + "modified": "2019-03-23T23:43:56.513Z", + "contributors": [ + "teoli", + "Leofiore" + ] + }, + "Web/CSS/flex": { + "modified": "2019-03-23T22:48:31.643Z", + "contributors": [ + "Sebastianz", + "Renatvs88" + ] + }, + "Web/CSS/flex-shrink": { + "modified": "2020-10-15T22:16:46.816Z", + "contributors": [ + "lmacchiavelli" + ] + }, + "Web/CSS/font-size-adjust": { + "modified": "2020-10-15T22:14:51.320Z", + "contributors": [ + "enzo4d" + ] + }, + "Web/CSS/min-width": { + "modified": "2019-03-23T22:01:46.505Z", + "contributors": [ + "sedetiam" + ] + }, + "Web/CSS/object-fit": { + "modified": "2020-10-15T22:30:51.713Z", + "contributors": [ + "arturu" + ] + }, + "Web/CSS/selettore_figli_diretti": { + "modified": "2019-03-23T22:33:41.612Z", + "contributors": [ + "ExplosiveLab" + ] + }, + "Web/CSS/text-align": { + "modified": "2019-03-23T23:54:00.082Z", + "contributors": [ + "SaverioITA", + "teoli", + "Federico" + ] + }, + "Web/CSS/text-shadow": { + "modified": "2019-03-24T00:00:17.112Z", + "contributors": [ + "teoli", + "pbrenna" + ] + }, + "Web/CSS/transition-timing-function": { + "modified": "2019-03-23T23:17:45.018Z", + "contributors": [ + "mrstork", + "fscholz", + "Sebastianz", + "teoli", + "Andrea_Barghigiani" + ] + }, + "Web/CSS/word-break": { + "modified": "2019-03-23T22:40:10.489Z", + "contributors": [ + "teoli", + "fscholz", + "Sebastianz", + "klez" + ] + }, + "Web/CSS/z-index": { + "modified": "2020-10-24T21:54:43.421Z", + "contributors": [ + "p3k1n0", + "duduindo", + "tallaGitHub" + ] + }, + "Web/Esempi_di_tecnologie_web_open": { + "modified": "2019-03-23T22:06:33.966Z", + "contributors": [ + "siron94" + ] + }, + "Web/Events": { + "modified": "2019-04-30T14:19:44.404Z", + "contributors": [ + "wbamberg", + "bep" + ] + }, + "Web/Events/DOMContentLoaded": { + "modified": "2020-10-15T22:04:24.853Z", + "contributors": [ + "IsibisiDev", + "wbamberg", + "bolste" + ] + }, + "Web/Events/load": { + "modified": "2019-04-30T14:10:24.678Z", + "contributors": [ + "wbamberg", + "IsibisiDev", + "sickDevelopers", + "fscholz", + "lucamemma" + ] + }, + "Web/Guide": { + "modified": "2019-03-23T23:29:02.031Z", + "contributors": [ + "andrealeone", + "ethertank" + ] + }, + "Web/Guide/AJAX": { + "modified": "2019-01-16T15:41:57.982Z", + "contributors": [ + "chrisdavidmills", + "Summit677", + "DaViD83", + "Federico" + ] + }, + "Web/Guide/AJAX/Iniziare": { + "modified": "2019-03-23T23:41:32.850Z", + "contributors": [ + "chrisdavidmills", + "Mattia_Zanella", + "Federico" + ] + }, + "Web/Guide/API": { + "modified": "2019-09-11T09:42:07.898Z", + "contributors": [ + "SphinxKnight", + "Sheppy" + ] + }, + "Web/Guide/CSS": { + "modified": "2019-03-23T23:29:02.257Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/Guide/Graphics": { + "modified": "2019-03-23T22:54:59.847Z", + "contributors": [ + "robertsillo", + "Swear", + "Turkish", + "arc551" + ] + }, + "Web/Guide/HTML/Categorie_di_contenuto": { + "modified": "2019-03-23T23:34:44.540Z", + "contributors": [ + "Sebastianz", + "Ella", + "nicolo-ribaudo", + "teoli", + "Nicola_D" + ] + }, + "Web/Guide/HTML/Editable_content": { + "modified": "2019-03-23T22:02:08.397Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla": { + "modified": "2019-03-18T20:59:06.217Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "khela" + ] + }, + "Web/Guide/WOFF": { + "modified": "2019-03-23T23:19:16.066Z", + "contributors": [ + "fscholz", + "klez" + ] + }, + "Web/HTML": { + "modified": "2019-08-30T09:49:56.780Z", + "contributors": [ + "TastefullElm548", + "chack1172", + "TataBlack", + "artistics-weddings", + "Alessandro947", + "franzfonta", + "Renatvs88", + "teoli", + "klez", + "Grino", + "ethertank", + "DavidWalsh", + "Federico", + "DaViD83" + ] + }, + "Web/HTML/Attributi": { + "modified": "2019-03-23T23:34:35.010Z", + "contributors": [ + "teoli", + "Nicola_D" + ] + }, + "Web/HTML/Canvas": { + "modified": "2019-09-27T19:03:03.922Z", + "contributors": [ + "NeckersBOX", + "nataz77", + "teoli", + "Grino", + "mck89" + ] + }, + "Web/HTML/Canvas/Drawing_graphics_with_canvas": { + "modified": "2019-03-23T23:15:33.594Z", + "contributors": [ + "teoli", + "MrNow" + ] + }, + "Web/HTML/Element": { + "modified": "2019-03-23T23:34:47.626Z", + "contributors": [ + "rudijuri", + "howilearn", + "nicolo-ribaudo", + "teoli", + "Nicola_D" + ] + }, + "Web/HTML/Element/a": { + "modified": "2019-03-23T23:34:44.333Z", + "contributors": [ + "DLuPi", + "cirelli94", + "nicolo-ribaudo", + "Renatvs88", + "teoli", + "Nicola_D" + ] + }, + "Web/HTML/Element/abbr": { + "modified": "2019-03-23T23:34:43.129Z", + "contributors": [ + "nicolo-ribaudo", + "fscholz", + "Renatvs88", + "teoli", + "Nicola_D" + ] + }, + "Web/HTML/Element/acronym": { + "modified": "2019-03-23T22:52:54.493Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/address": { + "modified": "2019-03-23T23:34:43.331Z", + "contributors": [ + "Renatvs88", + "teoli", + "klez", + "Nicola_D" + ] + }, + "Web/HTML/Element/applet": { + "modified": "2019-03-23T22:52:59.900Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/area": { + "modified": "2019-03-23T23:34:45.225Z", + "contributors": [ + "nicolo-ribaudo", + "teoli", + "Nicola_D" + ] + }, + "Web/HTML/Element/article": { + "modified": "2019-03-23T23:20:55.754Z", + "contributors": [ + "wbamberg", + "nicolo-ribaudo", + "Renatvs88", + "klez", + "teoli" + ] + }, + "Web/HTML/Element/aside": { + "modified": "2019-03-23T22:58:05.936Z", + "contributors": [ + "wbamberg", + "ncalca", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/audio": { + "modified": "2019-03-23T22:53:14.617Z", + "contributors": [ + "wbamberg", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/b": { + "modified": "2019-03-23T22:52:54.303Z", + "contributors": [ + "massic80", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/base": { + "modified": "2019-03-23T22:52:58.579Z", + "contributors": [ + "graziastracquadanio", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/basefont": { + "modified": "2019-03-23T22:52:59.624Z", + "contributors": [ + "fscholz", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/bdi": { + "modified": "2019-03-23T22:52:59.332Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/bdo": { + "modified": "2019-03-23T22:52:46.554Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/bgsound": { + "modified": "2019-03-23T22:52:45.882Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/big": { + "modified": "2019-03-23T22:52:46.708Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/blink": { + "modified": "2019-05-31T07:12:45.159Z", + "contributors": [ + "f4nu", + "altermetax", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/blockquote": { + "modified": "2019-03-23T22:52:46.389Z", + "contributors": [ + "lucadebort", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/body": { + "modified": "2020-04-11T18:37:21.227Z", + "contributors": [ + "MitchDLincoln", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/br": { + "modified": "2019-03-23T22:52:45.021Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/canvas": { + "modified": "2019-03-23T22:46:16.907Z", + "contributors": [ + "s3lvatico", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/caption": { + "modified": "2019-09-25T06:39:36.826Z", + "contributors": [ + "FrancescoLucia", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/center": { + "modified": "2020-07-28T11:41:08.194Z", + "contributors": [ + "DarioSacco", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/div": { + "modified": "2020-10-15T22:01:21.748Z", + "contributors": [ + "chack1172", + "Enrico_Polanski" + ] + }, + "Web/HTML/Element/figura": { + "modified": "2020-10-15T22:23:23.465Z", + "contributors": [ + "NeckersBOX" + ] + }, + "Web/HTML/Element/footer": { + "modified": "2019-03-23T22:58:06.411Z", + "contributors": [ + "Gianlucamonaco", + "FedericoBiccheddu", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/head": { + "modified": "2020-10-15T21:34:29.566Z", + "contributors": [ + "gnardell", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/header": { + "modified": "2019-03-23T22:58:06.108Z", + "contributors": [ + "wbamberg", + "massimilianomarini", + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/hgroup": { + "modified": "2019-03-23T22:58:08.873Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/html": { + "modified": "2020-10-15T21:27:37.448Z", + "contributors": [ + "gnardell", + "teoli", + "klez" + ] + }, + "Web/HTML/Element/i": { + "modified": "2020-10-15T22:04:36.939Z", + "contributors": [ + "SphinxKnight", + "chiabgigi", + "rudijuri" + ] + }, + "Web/HTML/Element/iframe": { + "modified": "2019-06-14T10:56:59.315Z", + "contributors": [ + "deviloper", + "wbamberg", + "salvan13", + "mikspi" + ] + }, + "Web/HTML/Element/img": { + "modified": "2020-10-29T11:49:17.786Z", + "contributors": [ + "massic80" + ] + }, + "Web/HTML/Element/input": { + "modified": "2020-10-15T22:23:23.775Z", + "contributors": [ + "mfuji09" + ] + }, + "Web/HTML/Element/input/file": { + "modified": "2020-10-15T22:30:37.009Z", + "contributors": [ + "layerZer0" + ] + }, + "Web/HTML/Element/kbd": { + "modified": "2019-03-23T22:16:33.974Z", + "contributors": [ + "eineki" + ] + }, + "Web/HTML/Element/main": { + "modified": "2019-03-23T23:11:38.417Z", + "contributors": [ + "equinusocio", + "vindega", + "mek" + ] + }, + "Web/HTML/Element/nav": { + "modified": "2019-03-23T23:10:34.959Z", + "contributors": [ + "wbamberg", + "nicolo-ribaudo", + "Emanuel" + ] + }, + "Web/HTML/Element/output": { + "modified": "2019-03-23T23:16:27.188Z", + "contributors": [ + "wbamberg", + "Arset", + "teoli", + "Ruggi" + ] + }, + "Web/HTML/Element/p": { + "modified": "2020-10-15T22:00:58.430Z", + "contributors": [ + "SphinxKnight", + "ScardracS", + "IsibisiDev", + "giacar" + ] + }, + "Web/HTML/Element/section": { + "modified": "2019-03-23T23:20:55.591Z", + "contributors": [ + "wbamberg", + "nicolo-ribaudo", + "teoli", + "klez" + ] + }, + "Web/HTML/Element/span": { + "modified": "2020-10-15T22:13:46.509Z", + "contributors": [ + "IsibisiDev" + ] + }, + "Web/HTML/Element/strike": { + "modified": "2019-03-23T23:09:59.392Z", + "contributors": [ + "Astio_k", + "Viridovix" + ] + }, + "Web/HTML/Element/table": { + "modified": "2019-03-23T22:53:24.772Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Element/time": { + "modified": "2019-03-23T23:17:48.369Z", + "contributors": [ + "teoli", + "Angoo" + ] + }, + "Web/HTML/Element/title": { + "modified": "2019-03-23T22:57:58.557Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/HTML/Forms_in_HTML": { + "modified": "2019-03-23T23:29:43.061Z", + "contributors": [ + "teoli", + "Giona" + ] + }, + "Web/HTML/Global_attributes": { + "modified": "2019-03-23T23:16:28.665Z", + "contributors": [ + "teoli", + "Ruggi" + ] + }, + "Web/HTML/Global_attributes/id": { + "modified": "2019-03-23T22:06:38.062Z", + "contributors": [ + "sambuccid" + ] + }, + "Web/HTML/HTML5": { + "modified": "2019-03-23T23:35:35.217Z", + "contributors": [ + "artistics-weddings", + "teoli", + "bertuz83", + "Giona", + "Mattei", + "Grino" + ] + }, + "Web/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-23T23:29:36.115Z", + "contributors": [ + "teoli", + "bertuz", + "Giona" + ] + }, + "Web/HTML/Riferimento": { + "modified": "2019-09-09T07:18:46.738Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "LoSo" + ] + }, + "Web/HTML/Sections_and_Outlines_of_an_HTML5_document": { + "modified": "2019-03-23T23:29:51.242Z", + "contributors": [ + "teoli", + "Giona" + ] + }, + "Web/HTML/utilizzare_application_cache": { + "modified": "2019-03-23T23:28:46.240Z", + "contributors": [ + "Carlo-Effe", + "g4b0", + "teoli", + "pastorello" + ] + }, + "Web/HTTP": { + "modified": "2019-03-18T21:00:54.655Z", + "contributors": [ + "Mystral", + "groovecoder" + ] + }, + "Web/HTTP/Authentication": { + "modified": "2020-11-30T09:16:11.222Z", + "contributors": [ + "klediceliku16", + "meogrande" + ] + }, + "Web/HTTP/Basi_HTTP": { + "modified": "2020-11-30T09:32:11.577Z", + "contributors": [ + "MatteoZxy", + "giuseppe.librandi02" + ] + }, + "Web/HTTP/CORS": { + "modified": "2020-10-15T22:09:12.111Z", + "contributors": [ + "theborgh", + "PaolinoAngeletti", + "serafinomb", + "gabriele.bernuzzi" + ] + }, + "Web/HTTP/CORS/Errors": { + "modified": "2019-03-18T21:23:26.317Z", + "contributors": [ + "nchevobbe" + ] + }, + "Web/HTTP/CORS/Errors/CORSDidNotSucceed": { + "modified": "2020-01-08T06:39:41.776Z", + "contributors": [ + "Mte90", + "sf3ris" + ] + }, + "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": { + "modified": "2019-03-18T21:23:21.324Z", + "contributors": [ + "Marsangola" + ] + }, + "Web/HTTP/Caching": { + "modified": "2020-12-05T07:45:06.792Z", + "contributors": [ + "Wilkenfeld" + ] + }, + "Web/HTTP/Compressione": { + "modified": "2020-11-30T09:31:19.301Z", + "contributors": [ + "davide.martinelli13", + "lucathetiger96.96", + "SphinxKnight" + ] + }, + "Web/HTTP/Conditional_requests": { + "modified": "2020-12-05T07:29:03.909Z", + "contributors": [ + "alessiogasparini02", + "pietro.voltarel" + ] + }, + "Web/HTTP/Cookies": { + "modified": "2019-03-18T21:30:36.615Z", + "contributors": [ + "edoardopa", + "meliot" + ] + }, + "Web/HTTP/Feature_Policy": { + "modified": "2020-11-30T11:38:06.042Z", + "contributors": [ + "pastrochristian", + "tommaso_biadene" + ] + }, + "Web/HTTP/Headers": { + "modified": "2019-03-23T22:06:50.529Z", + "contributors": [ + "Naesten" + ] + }, + "Web/HTTP/Headers/Age": { + "modified": "2020-10-15T21:59:33.765Z", + "contributors": [ + "andreapernici" + ] + }, + "Web/HTTP/Headers/Authorization": { + "modified": "2019-08-30T13:21:19.490Z", + "contributors": [ + "duduindo", + "sginestrini" + ] + }, + "Web/HTTP/Headers/Cookie": { + "modified": "2020-10-15T22:19:54.288Z", + "contributors": [ + "cobyan" + ] + }, + "Web/HTTP/Headers/Host": { + "modified": "2020-10-15T22:29:02.963Z", + "contributors": [ + "AndrewKant-ML" + ] + }, + "Web/HTTP/Headers/Server": { + "modified": "2020-10-15T22:06:39.131Z", + "contributors": [ + "lucat92" + ] + }, + "Web/HTTP/Headers/Strict-Transport-Security": { + "modified": "2020-10-15T21:56:41.041Z", + "contributors": [ + "diego-betto", + "AlessiaMichelaDiCampi", + "meliot" + ] + }, + "Web/HTTP/Headers/X-Content-Type-Options": { + "modified": "2020-10-15T22:22:02.861Z", + "contributors": [ + "AlessiaMichelaDiCampi", + "FabrizioMontanari" + ] + }, + "Web/HTTP/Headers/X-XSS-Protection": { + "modified": "2020-10-15T22:07:15.256Z", + "contributors": [ + "meliot" + ] + }, + "Web/HTTP/Panoramica": { + "modified": "2020-11-08T15:52:52.082Z", + "contributors": [ + "meogrande", + "abatti" + ] + }, + "Web/HTTP/Protocol_upgrade_mechanism": { + "modified": "2020-11-30T09:35:43.369Z", + "contributors": [ + "SphinxKnight", + "Bilal", + "edoardobortoluzzi" + ] + }, + "Web/HTTP/Redirections": { + "modified": "2020-11-28T07:25:14.464Z", + "contributors": [ + "jottojotto888", + "keiram.x101", + "alessiogasparini02" + ] + }, + "Web/HTTP/Resources_and_specifications": { + "modified": "2020-11-30T09:28:26.417Z", + "contributors": [ + "EnricoDant3" + ] + }, + "Web/HTTP/Richieste_range": { + "modified": "2019-08-03T05:17:24.435Z", + "contributors": [ + "theborgh" + ] + }, + "Web/HTTP/Sessione": { + "modified": "2020-11-29T21:39:50.877Z", + "contributors": [ + "zambonmichelethanu" + ] + }, + "Web/HTTP/Status": { + "modified": "2019-03-23T22:02:43.572Z", + "contributors": [ + "mgold" + ] + }, + "Web/HTTP/Status/100": { + "modified": "2020-10-15T22:23:29.640Z", + "contributors": [ + "Alby7503" + ] + }, + "Web/HTTP/Status/101": { + "modified": "2019-03-18T21:36:46.685Z", + "contributors": [ + "PsCustomObject", + "cometarossa" + ] + }, + "Web/HTTP/Status/200": { + "modified": "2020-10-15T21:59:03.164Z", + "contributors": [ + "DadiBit", + "flaruggi" + ] + }, + "Web/HTTP/Status/302": { + "modified": "2020-10-15T22:18:43.134Z", + "contributors": [ + "eliamaino" + ] + }, + "Web/HTTP/Status/404": { + "modified": "2020-10-15T22:16:43.194Z", + "contributors": [ + "stefalda" + ] + }, + "Web/HTTP/Status/500": { + "modified": "2020-10-15T22:15:03.942Z", + "contributors": [ + "damis0g" + ] + }, + "Web/HTTP/negoziazione-del-contenuto": { + "modified": "2020-11-30T09:20:26.423Z", + "contributors": [ + "endlessDoomsayer", + "sharq" + ] + }, + "Web/JavaScript": { + "modified": "2020-03-12T19:36:53.666Z", + "contributors": [ + "Mystral", + "SphinxKnight", + "fscholz", + "artistics-weddings", + "alvise", + "nicolo-ribaudo", + "teoli", + "clamar59", + "Grino", + "ethertank", + "Federico", + "Leofiore", + "Verruckt", + "Kyuzz", + "DaViD83" + ] + }, + "Web/JavaScript/Chiusure": { + "modified": "2020-07-09T10:58:36.507Z", + "contributors": [ + "ImChrono", + "massimilianoaprea7", + "EmGargano", + "nicrizzo", + "AndreaP", + "Linko", + "masrossi", + "mar-mo" + ] + }, + "Web/JavaScript/Cosè_JavaScript": { + "modified": "2020-03-12T19:42:53.580Z", + "contributors": [ + "SpaceMudge" + ] + }, + "Web/JavaScript/Data_structures": { + "modified": "2020-05-27T14:48:54.824Z", + "contributors": [ + "LucaPipolo" + ] + }, + "Web/JavaScript/EventLoop": { + "modified": "2020-03-12T19:44:37.548Z", + "contributors": [ + "csarnataro", + "xpepper", + "mrbabbs", + "finvernizzi" + ] + }, + "Web/JavaScript/Gestione_della_Memoria": { + "modified": "2020-03-12T19:40:57.516Z", + "contributors": [ + "darknightva", + "jspkay", + "sokos", + "guspatagonico" + ] + }, + "Web/JavaScript/Getting_Started": { + "modified": "2019-03-23T23:05:35.907Z", + "contributors": [ + "clamar59" + ] + }, + "Web/JavaScript/Guida": { + "modified": "2020-03-12T19:38:40.547Z", + "contributors": [ + "Mystral", + "fscholz", + "teoli", + "natebunnyfield" + ] + }, + "Web/JavaScript/Guida/Controllo_del_flusso_e_gestione_degli_errori": { + "modified": "2020-07-03T09:14:04.292Z", + "contributors": [ + "lucamonte", + "ladysilvia", + "Goliath86", + "catBlack" + ] + }, + "Web/JavaScript/Guida/Dettagli_Object_Model": { + "modified": "2020-03-12T19:45:00.589Z", + "contributors": [ + "wbamberg", + "dem-s" + ] + }, + "Web/JavaScript/Guida/Espressioni_Regolari": { + "modified": "2020-03-12T19:44:32.587Z", + "contributors": [ + "Mystral", + "pfoletto", + "camilgun", + "adrisimo74", + "Samplasion", + "mar-mo" + ] + }, + "Web/JavaScript/Guida/Functions": { + "modified": "2020-03-12T19:43:03.997Z", + "contributors": [ + "MikePap", + "lvzndr" + ] + }, + "Web/JavaScript/Guida/Grammar_and_types": { + "modified": "2020-03-12T19:43:14.274Z", + "contributors": [ + "AliceM5", + "mme000", + "Goliath86", + "JsD3n", + "catBlack", + "edoardopa" + ] + }, + "Web/JavaScript/Guida/Introduzione": { + "modified": "2020-03-12T19:42:19.516Z", + "contributors": [ + "edoardopa", + "claudiod" + ] + }, + "Web/JavaScript/Guida/Iteratori_e_generatori": { + "modified": "2020-03-12T19:46:49.658Z", + "contributors": [ + "jackdbd" + ] + }, + "Web/JavaScript/Guida/Loops_and_iteration": { + "modified": "2020-10-11T06:08:37.488Z", + "contributors": [ + "bombur51", + "Edo", + "koalacurioso", + "ladysilvia", + "massimiliamanto", + "Cereal84" + ] + }, + "Web/JavaScript/Il_DOM_e_JavaScript": { + "modified": "2019-12-13T21:06:11.041Z", + "contributors": [ + "wbamberg", + "teoli", + "DaViD83" + ] + }, + "Web/JavaScript/Inheritance_and_the_prototype_chain": { + "modified": "2020-03-12T19:40:53.603Z", + "contributors": [ + "novembre", + "spreynprey", + "mean2me", + "davide-perez", + "liuzzom", + "JacopoBont", + "koso00", + "xbeat", + "aur3l10", + "kdex", + "claudiod", + "claudio.mantuano" + ] + }, + "Web/JavaScript/Introduzione_al_carattere_Object-Oriented_di_JavaScript": { + "modified": "2020-03-12T19:36:12.785Z", + "contributors": [ + "wbamberg", + "gabriellaborghi", + "giovanniragno", + "teoli", + "fusionchess" + ] + }, + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:38:44.699Z", + "contributors": [ + "teoli", + "nicolo-ribaudo", + "raztus" + ] + }, + "Web/JavaScript/Reference/Classes": { + "modified": "2020-10-15T21:38:26.392Z", + "contributors": [ + "fscholz", + "MaxArt", + "SphinxKnight", + "pdina", + "Glitches", + "AAllegro91", + "afalchi82", + "huckbit", + "Cereal84", + "mrbabbs", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Classes/costruttore": { + "modified": "2020-03-12T19:44:11.878Z", + "contributors": [ + "webpn", + "alexandr-sizemov", + "Cereal84" + ] + }, + "Web/JavaScript/Reference/Classes/extends": { + "modified": "2020-03-12T19:45:50.905Z", + "contributors": [ + "mnemosdev" + ] + }, + "Web/JavaScript/Reference/Classes/static": { + "modified": "2020-10-15T21:38:26.501Z", + "contributors": [ + "ifthenelse", + "lucafbb", + "fscholz", + "SphinxKnight", + "sharq", + "Cereal84", + "ciaoben" + ] + }, + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:45:58.836Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_array_length": { + "modified": "2020-03-12T19:47:15.932Z", + "contributors": [ + "oly_oly" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": { + "modified": "2020-03-12T19:46:22.091Z", + "contributors": [ + "oly_oly", + "nullYoung" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { + "modified": "2020-03-12T19:45:56.839Z", + "contributors": [ + "ladysilvia", + "IkobaNoOkami", + "solemarnautica", + "passinform88" + ] + }, + "Web/JavaScript/Reference/Errors/Too_much_recursion": { + "modified": "2020-08-27T11:23:03.109Z", + "contributors": [ + "valeriolotterini" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:46:20.239Z", + "contributors": [ + "crisz", + "ladysilvia", + "bobgen" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_type": { + "modified": "2020-03-12T19:47:09.154Z", + "contributors": [ + "MPinna" + ] + }, + "Web/JavaScript/Reference/Functions_and_function_scope": { + "modified": "2020-03-12T19:39:12.043Z", + "contributors": [ + "lvzndr", + "ungarida", + "teoli", + "Salvo1402" + ] + }, + "Web/JavaScript/Reference/Functions_and_function_scope/Arrow_functions": { + "modified": "2020-03-12T19:45:00.553Z", + "contributors": [ + "nickdastain", + "DrJest" + ] + }, + "Web/JavaScript/Reference/Functions_and_function_scope/arguments": { + "modified": "2020-10-15T22:02:48.792Z", + "contributors": [ + "lesar", + "adrisimo74" + ] + }, + "Web/JavaScript/Reference/Functions_and_function_scope/get": { + "modified": "2020-10-15T22:01:12.442Z", + "contributors": [ + "matteogatti" + ] + }, + "Web/JavaScript/Reference/Functions_and_function_scope/set": { + "modified": "2020-07-11T16:38:00.325Z", + "contributors": [ + "CostyEffe", + "DeadManPoe" + ] + }, + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:39:20.143Z", + "contributors": [ + "frappacchio", + "nicolo-ribaudo", + "SphinxKnight", + "teoli", + "Delapouite" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2019-08-20T14:20:15.094Z", + "contributors": [ + "pfoletto", + "Umberto81", + "wbamberg", + "kdex", + "arai" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { + "modified": "2020-10-15T21:51:38.546Z", + "contributors": [ + "linsock", + "SphinxKnight", + "IsibisiDev", + "Samplasion", + "massic80", + "Nighteye", + "mnemosdev", + "Cesarec88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/concat": { + "modified": "2019-04-09T10:38:25.595Z", + "contributors": [ + "stesua", + "fontsie", + "fzancan", + "the-reversengineer", + "mikspi", + "pallapo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { + "modified": "2020-10-15T22:11:36.187Z", + "contributors": [ + "Airsit" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/entries": { + "modified": "2020-10-15T22:08:21.740Z", + "contributors": [ + "cyberpro4" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/every": { + "modified": "2020-10-15T22:04:47.252Z", + "contributors": [ + "pirlott" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/fill": { + "modified": "2020-10-15T21:59:11.776Z", + "contributors": [ + "yazevedopure" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/filter": { + "modified": "2019-10-14T05:21:39.776Z", + "contributors": [ + "shylockness", + "Easaaa", + "the-reversengineer", + "Cesarec88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/find": { + "modified": "2019-06-03T13:37:19.806Z", + "contributors": [ + "fedeolto", + "mnemosdev", + "Gigitsu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { + "modified": "2020-10-15T22:35:03.644Z", + "contributors": [ + "AttilioCapocchiani" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/flat": { + "modified": "2020-10-15T22:20:39.692Z", + "contributors": [ + "bombur51", + "andreapavia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { + "modified": "2020-10-15T22:27:22.552Z", + "contributors": [ + "bombur51", + "antcolag" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/forEach": { + "modified": "2020-10-15T21:53:06.535Z", + "contributors": [ + "IsibisiDev", + "azzar1", + "dauricchio", + "mnemosdev" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/from": { + "modified": "2020-10-15T21:59:39.069Z", + "contributors": [ + "IsibisiDev", + "bolste", + "CapelliC" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/includes": { + "modified": "2019-03-23T22:26:46.029Z", + "contributors": [ + "mnemosdev", + "adrisimo74" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { + "modified": "2020-10-15T21:49:15.814Z", + "contributors": [ + "IsibisiDev", + "dauricchio", + "federica", + "adrisimo74" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/isArray": { + "modified": "2020-10-15T21:54:52.255Z", + "contributors": [ + "IsibisiDev", + "inuyaksa" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/join": { + "modified": "2020-10-15T21:58:39.710Z", + "contributors": [ + "dauricchio", + "gentax" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/keys": { + "modified": "2020-10-15T21:59:10.775Z", + "contributors": [ + "yazevedopure" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { + "modified": "2020-10-15T22:00:35.554Z", + "contributors": [ + "AlecsFerra" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/length": { + "modified": "2019-03-23T22:14:01.094Z", + "contributors": [ + "pirlott", + "mikspi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/map": { + "modified": "2020-10-15T21:53:39.014Z", + "contributors": [ + "IsibisiDev", + "lucadebort", + "mikspi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/of": { + "modified": "2020-10-15T21:59:10.072Z", + "contributors": [ + "zeroerrequattro", + "yazevedopure" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/pop": { + "modified": "2020-10-15T21:54:18.141Z", + "contributors": [ + "IsibisiDev", + "vidoz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/prototype": { + "modified": "2019-03-23T22:43:29.228Z", + "contributors": [ + "zauli83" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/push": { + "modified": "2020-10-15T21:57:19.586Z", + "contributors": [ + "bombur51", + "carzacc", + "randomBrainstormer" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/reverse": { + "modified": "2019-08-30T12:44:50.302Z", + "contributors": [ + "duduindo", + "bebosh" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/slice": { + "modified": "2020-10-15T21:57:58.630Z", + "contributors": [ + "antsam23", + "duduindo", + "SphinxKnight", + "ir3ne", + "marco476", + "7laria" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/some": { + "modified": "2020-10-15T22:08:29.350Z", + "contributors": [ + "redjin", + "nicolocarpignoli", + "Gerigot" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/sort": { + "modified": "2020-10-15T21:58:52.025Z", + "contributors": [ + "massic80", + "Samplasion", + "one89", + ".Ruggero." + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/splice": { + "modified": "2020-10-15T21:52:49.028Z", + "contributors": [ + "IsibisiDev", + "V1LL0" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/toString": { + "modified": "2020-10-15T22:03:27.527Z", + "contributors": [ + "IsibisiDev", + "dauricchio" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/unshift": { + "modified": "2020-10-15T22:12:57.882Z", + "contributors": [ + "TinyTanic" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/values": { + "modified": "2020-10-15T22:19:37.666Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2020-10-15T22:10:56.996Z", + "contributors": [ + "frappacchio" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics": { + "modified": "2019-03-23T22:08:10.595Z", + "contributors": [ + "AndTemp" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Atomics/store": { + "modified": "2020-10-15T22:08:25.849Z", + "contributors": [ + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2020-10-15T22:19:36.562Z", + "contributors": [ + "troystarwalt" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/UTC": { + "modified": "2020-10-15T22:19:32.963Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getDate": { + "modified": "2020-10-15T22:19:33.830Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getDay": { + "modified": "2020-10-15T22:19:32.824Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { + "modified": "2020-10-15T22:19:33.814Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getHours": { + "modified": "2020-10-15T22:19:33.745Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { + "modified": "2020-10-15T22:19:34.257Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { + "modified": "2020-10-15T22:19:33.828Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { + "modified": "2020-10-15T22:19:35.006Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { + "modified": "2020-10-15T22:19:33.751Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getTime": { + "modified": "2020-10-15T22:19:32.760Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { + "modified": "2020-10-15T22:19:34.667Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/now": { + "modified": "2020-10-15T22:19:33.212Z", + "contributors": [ + "Umberto81" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2020-03-02T12:38:04.753Z", + "contributors": [ + "TurnuAlessandro", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/apply": { + "modified": "2019-03-23T22:29:37.063Z", + "contributors": [ + "bicccio", + "giacomocerquone" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/arguments": { + "modified": "2020-10-15T22:25:14.314Z", + "contributors": [ + "Airsit" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/bind": { + "modified": "2020-10-15T22:08:09.650Z", + "contributors": [ + "willywongi", + "mirkoAtWork", + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/call": { + "modified": "2020-10-15T22:28:06.881Z", + "contributors": [ + "massimilianoaprea7" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/length": { + "modified": "2020-10-15T22:21:03.500Z", + "contributors": [ + "Makkoyev", + "koci" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator": { + "modified": "2019-03-23T22:19:07.844Z", + "contributors": [ + "nmve" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Generator/next": { + "modified": "2019-03-23T22:19:17.162Z", + "contributors": [ + "SpartacusRoot" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Infinity": { + "modified": "2020-03-12T19:40:58.527Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON": { + "modified": "2019-03-23T22:51:18.477Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON/parse": { + "modified": "2020-10-15T21:38:37.212Z", + "contributors": [ + "IsibisiDev", + "bombur51", + "giacar", + "lanzoninicola", + "lonejack" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { + "modified": "2020-10-15T21:37:39.493Z", + "contributors": [ + "IsibisiDev", + "giacomoRanieri", + "DavideCanton" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2019-03-23T22:44:26.238Z", + "contributors": [ + "SphinxKnight", + "cdbajorin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/clear": { + "modified": "2020-10-15T22:11:39.518Z", + "contributors": [ + "azzar1" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/delete": { + "modified": "2020-10-15T22:24:27.180Z", + "contributors": [ + "AndreaCitrolo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/forEach": { + "modified": "2020-10-15T21:39:59.999Z", + "contributors": [ + "azzar1", + "SphinxKnight", + "Andreaf" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math": { + "modified": "2019-03-23T22:38:38.335Z", + "contributors": [ + "Fr4nci", + "Keshavanti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/E": { + "modified": "2020-10-15T22:03:32.556Z", + "contributors": [ + "dardino" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/abs": { + "modified": "2020-10-15T21:58:13.899Z", + "contributors": [ + "VanDjango" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/acos": { + "modified": "2020-10-15T21:58:13.115Z", + "contributors": [ + "VanDjango" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/atan": { + "modified": "2020-10-15T21:58:23.039Z", + "contributors": [ + "riccardoscotti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/atan2": { + "modified": "2019-03-23T22:25:36.856Z", + "contributors": [ + "AlexTaietti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/ceil": { + "modified": "2020-10-15T21:58:59.254Z", + "contributors": [ + "altermetax" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/floor": { + "modified": "2020-10-15T21:58:11.241Z", + "contributors": [ + "interazioni", + "VanDjango" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/max": { + "modified": "2019-03-23T22:32:55.876Z", + "contributors": [ + "mariol.grimaldi89" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/min": { + "modified": "2019-03-23T22:20:07.766Z", + "contributors": [ + "ilsergente1993", + "Cesarec88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/pow": { + "modified": "2019-03-23T22:20:14.709Z", + "contributors": [ + "Cesarec88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/random": { + "modified": "2020-10-15T21:55:55.820Z", + "contributors": [ + "dash1e", + "LoSo", + "Dorilama", + "HighSoftWare96" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/round": { + "modified": "2020-10-15T21:53:03.456Z", + "contributors": [ + "Gnafu", + "DanieleCux" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { + "modified": "2019-03-23T22:20:01.535Z", + "contributors": [ + "Cesarec88" + ] + }, + "Web/JavaScript/Reference/Global_Objects/NaN": { + "modified": "2020-10-15T21:33:03.152Z", + "contributors": [ + "azuccanigra", + "Nonno", + "brakko" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2020-10-15T22:31:23.763Z", + "contributors": [ + "elchap" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2019-04-26T10:13:46.483Z", + "contributors": [ + "massimiliamanto", + "wbamberg", + "nicolo-ribaudo", + "teoli", + "Robg1" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/assign": { + "modified": "2020-06-26T04:52:08.816Z", + "contributors": [ + "DarioSacco", + "SphinxKnight", + "narsenico", + "kdex", + "claudio-destro", + "gpbl", + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/create": { + "modified": "2019-03-23T23:05:09.020Z", + "contributors": [ + "StefanoMagrassi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": { + "modified": "2019-03-23T22:17:19.339Z", + "contributors": [ + "LordKenzo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/freeze": { + "modified": "2019-09-19T10:26:59.453Z", + "contributors": [ + "sharq", + "pdina", + "zedrix", + "kdex", + "Cesarec88", + "DeadManPoe" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { + "modified": "2019-03-23T22:40:55.304Z", + "contributors": [ + "Andrws" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { + "modified": "2020-10-15T21:46:41.140Z", + "contributors": [ + "IsibisiDev", + "tiberakis" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/is": { + "modified": "2020-10-15T21:58:52.008Z", + "contributors": [ + "DanielVip3", + "Rawnly" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { + "modified": "2020-10-15T22:07:54.483Z", + "contributors": [ + "DanielVip3" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/isSealed": { + "modified": "2020-10-15T22:07:54.491Z", + "contributors": [ + "DanielVip3" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/keys": { + "modified": "2019-03-23T23:16:28.015Z", + "contributors": [ + "teoli", + "nicelbole" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/prototype": { + "modified": "2019-03-23T22:58:00.342Z", + "contributors": [ + "gamerboy", + "fantarama", + "tommyblue", + "roccomuso", + "vindega", + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/seal": { + "modified": "2020-10-15T22:07:44.226Z", + "contributors": [ + "sharq", + "DanielVip3" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/toString": { + "modified": "2020-10-03T16:00:13.100Z", + "contributors": [ + "Belingheri", + "claudio.mantuano" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-10-15T21:38:08.781Z", + "contributors": [ + "frappacchio", + "SphinxKnight", + "lorthirk", + "cipollafrancesco", + "AAllegro91", + "nbena", + "kdex", + "marcofugaro", + "mrbabbs", + "teoli", + "pasqLisena", + "lysz210" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/all": { + "modified": "2020-10-15T21:50:01.455Z", + "contributors": [ + "afalchi82", + "lellefood", + "nbena", + "pinturic" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Promise/catch": { + "modified": "2019-03-23T22:49:42.926Z", + "contributors": [ + "SphinxKnight", + "lysz210" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy": { + "modified": "2020-10-15T21:58:36.083Z", + "contributors": [ + "sbarex", + "jfet97", + "nuandawm", + "sidmonta", + "federicoviceconti" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/handler": { + "modified": "2020-10-15T22:07:04.638Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply": { + "modified": "2020-10-15T22:07:00.348Z", + "contributors": [ + "shb" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/revocabile": { + "modified": "2020-10-15T22:10:51.734Z", + "contributors": [ + "jfet97" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Set": { + "modified": "2019-03-23T22:31:04.521Z", + "contributors": [ + "macolic", + "zandorzz", + "Fredev" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Set/entries": { + "modified": "2019-03-23T22:23:12.825Z", + "contributors": [ + "Gigitsu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Set/values": { + "modified": "2019-03-23T22:23:11.605Z", + "contributors": [ + "Gigitsu" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2019-03-23T22:19:38.780Z", + "contributors": [ + "lazycesar", + "SphinxKnight", + "marco1947", + "kdex" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/charAt": { + "modified": "2020-10-15T22:08:21.889Z", + "contributors": [ + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/includes": { + "modified": "2019-06-05T12:27:29.815Z", + "contributors": [ + "Umberto81", + "DarioSacco", + "afalchi82", + "FabioVergani" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/indexOf": { + "modified": "2020-10-15T22:08:20.806Z", + "contributors": [ + "IsibisiDev", + "Clyky", + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/length": { + "modified": "2020-10-15T22:08:11.693Z", + "contributors": [ + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/prototype": { + "modified": "2020-10-15T22:08:09.616Z", + "contributors": [ + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/raw": { + "modified": "2020-10-15T22:08:05.242Z", + "contributors": [ + "ladysilvia" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Symbol": { + "modified": "2020-10-15T21:56:57.878Z", + "contributors": [ + "fscholz", + "Cerealkillerway" + ] + }, + "Web/JavaScript/Reference/Global_Objects/decodeURI": { + "modified": "2020-03-12T19:41:01.758Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { + "modified": "2020-03-12T19:41:02.785Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/encodeURI": { + "modified": "2020-03-12T19:41:01.209Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { + "modified": "2020-03-12T19:41:01.351Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/escape": { + "modified": "2020-03-12T19:41:03.158Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/eval": { + "modified": "2020-03-12T19:39:17.387Z", + "contributors": [ + "teoli", + "SphinxKnight", + "Ruggi" + ] + }, + "Web/JavaScript/Reference/Global_Objects/isFinite": { + "modified": "2020-03-12T19:41:01.244Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/isNaN": { + "modified": "2020-03-12T19:41:02.121Z", + "contributors": [ + "massic80", + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/null": { + "modified": "2020-10-15T21:34:19.479Z", + "contributors": [ + "IsibisiDev", + "Metsuryu", + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/parseFloat": { + "modified": "2020-03-12T19:40:21.865Z", + "contributors": [ + "wannymiarelli" + ] + }, + "Web/JavaScript/Reference/Global_Objects/parseInt": { + "modified": "2020-10-15T21:32:05.309Z", + "contributors": [ + "IsibisiDev", + "Molok" + ] + }, + "Web/JavaScript/Reference/Global_Objects/undefined": { + "modified": "2020-03-12T19:41:00.668Z", + "contributors": [ + "AndySky21", + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/unescape": { + "modified": "2020-03-12T19:41:03.668Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/uneval": { + "modified": "2020-03-12T19:40:59.495Z", + "contributors": [ + "nicolo-ribaudo" + ] + }, + "Web/JavaScript/Reference/Operators": { + "modified": "2020-07-06T09:58:34.217Z", + "contributors": [ + "zamiky", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Operators/Destructuring_assignment": { + "modified": "2020-03-12T19:45:00.588Z", + "contributors": [ + "kdex", + "Giuseppe37" + ] + }, + "Web/JavaScript/Reference/Operators/Operator_Condizionale": { + "modified": "2019-03-18T21:30:29.773Z", + "contributors": [ + "lesar" + ] + }, + "Web/JavaScript/Reference/Operators/Operatore_virgola": { + "modified": "2020-10-15T22:23:54.628Z", + "contributors": [ + "ca42rico" + ] + }, + "Web/JavaScript/Reference/Operators/Operatori_Aritmetici": { + "modified": "2020-10-15T21:38:22.596Z", + "contributors": [ + "chrisdavidmills", + "fscholz", + "wbamberg", + "ladysilvia", + "lazycesar", + "kdex", + "alberto.decaro" + ] + }, + "Web/JavaScript/Reference/Operators/Spread_syntax": { + "modified": "2020-10-15T22:03:10.047Z", + "contributors": [ + "IsibisiDev", + "spinjam", + "quackmore", + "adrisimo74" + ] + }, + "Web/JavaScript/Reference/Operators/in": { + "modified": "2020-03-12T19:44:40.332Z", + "contributors": [ + "ertento", + "Crowbit" + ] + }, + "Web/JavaScript/Reference/Operators/new": { + "modified": "2020-10-15T21:50:50.688Z", + "contributors": [ + "Samplasion", + "Giuseppe37" + ] + }, + "Web/JavaScript/Reference/Operators/super": { + "modified": "2020-10-15T21:49:55.513Z", + "contributors": [ + "novembre", + "rmkngy", + "Cereal84" + ] + }, + "Web/JavaScript/Reference/Operators/this": { + "modified": "2020-03-12T19:41:38.881Z", + "contributors": [ + "ILTORU", + "dr-astico", + "lvzndr", + "scurtoni" + ] + }, + "Web/JavaScript/Reference/Operators/yield": { + "modified": "2020-03-12T19:42:38.456Z", + "contributors": [ + "SphinxKnight", + "kdex", + "Mattia_Zanella" + ] + }, + "Web/JavaScript/Reference/Statements": { + "modified": "2020-03-12T19:38:43.909Z", + "contributors": [ + "teoli", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Statements/Empty": { + "modified": "2020-10-15T22:24:08.768Z", + "contributors": [ + "dantevitale" + ] + }, + "Web/JavaScript/Reference/Statements/break": { + "modified": "2020-10-15T22:33:26.688Z", + "contributors": [ + "aldus65" + ] + }, + "Web/JavaScript/Reference/Statements/export": { + "modified": "2020-10-29T07:25:40.081Z", + "contributors": [ + "Roberto.Balducci", + "AAllegro91", + "Nico-92" + ] + }, + "Web/JavaScript/Reference/Statements/for...of": { + "modified": "2020-03-12T19:44:07.898Z", + "contributors": [ + "jspkay" + ] + }, + "Web/JavaScript/Reference/Statements/function*": { + "modified": "2020-03-12T19:44:37.996Z", + "contributors": [ + "biroplane", + "Samplasion", + "nispa", + "McGiogen", + "Nico-92", + "zambotn" + ] + }, + "Web/JavaScript/Reference/Statements/import": { + "modified": "2020-10-15T21:50:25.119Z", + "contributors": [ + "f4bo", + "tegola", + "star-ter-js" + ] + }, + "Web/JavaScript/Reference/Statements/let": { + "modified": "2020-10-15T21:25:16.190Z", + "contributors": [ + "Siberi0", + "Molok", + "azuccanigra", + "lucaing", + "crakdelpol", + "1ba1", + "teoli", + "EdoPut" + ] + }, + "Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-03-12T19:45:00.500Z", + "contributors": [ + "sharq", + "lucafabbian", + "fsorge", + "federica", + "neclepsio", + "glauxbond" + ] + }, + "Web/JavaScript/Reference/Statements/throw": { + "modified": "2020-10-15T22:02:39.628Z", + "contributors": [ + "fsorge" + ] + }, + "Web/JavaScript/Reference/Statements/var": { + "modified": "2020-10-15T22:05:48.821Z", + "contributors": [ + "IkobaNoOkami" + ] + }, + "Web/JavaScript/Reference/template_strings": { + "modified": "2020-03-12T19:43:06.757Z", + "contributors": [ + "zedrix", + "sharq", + "manuel-di-iorio" + ] + }, + "Web/JavaScript/Una_reintroduzione_al_JavaScript": { + "modified": "2020-10-03T10:20:38.079Z", + "contributors": [ + "matt.polvenz", + "tangredifrancesco", + "igor.bragato", + "microjumper", + "maboglia", + "e403-mdn", + "clamar59", + "teoli", + "ethertank", + "Nicola_D" + ] + }, + "Web/Performance": { + "modified": "2019-08-09T16:36:45.228Z", + "contributors": [ + "estelle" + ] + }, + "Web/Performance/Percorso_critico_di_rendering": { + "modified": "2019-10-26T07:16:57.508Z", + "contributors": [ + "theborgh" + ] + }, + "Web/Reference": { + "modified": "2019-03-23T23:17:01.442Z", + "contributors": [ + "Nickolay" + ] + }, + "Web/Reference/API": { + "modified": "2019-03-23T23:17:02.060Z", + "contributors": [ + "klez" + ] + }, + "Web/SVG/Element": { + "modified": "2020-11-09T06:43:40.808Z", + "contributors": [ + "nicola.tarallo.zebb" + ] + }, + "Web/SVG/Element/animate": { + "modified": "2020-10-15T22:17:04.015Z", + "contributors": [ + "maicol07" + ] + }, + "Web/Security": { + "modified": "2019-09-10T16:35:57.576Z", + "contributors": [ + "SphinxKnight", + "Sheppy" + ] + }, + "Web/Security/Password_insicure": { + "modified": "2019-03-18T21:40:50.724Z", + "contributors": [ + "oprof" + ] + }, + "Web/Tutorials": { + "modified": "2019-03-23T22:46:08.934Z", + "contributors": [ + "PyQio", + "Italuil", + "Gianluigi" + ] + }, + "Web/Web_Components": { + "modified": "2019-11-23T14:48:11.112Z", + "contributors": [ + "theborgh" + ] + }, + "Web/Web_Components/Usare_custom_elements": { + "modified": "2020-03-31T06:51:28.687Z", + "contributors": [ + "massimiliano.mantovani" + ] + }, + "Web/XSLT": { + "modified": "2019-01-16T16:09:31.557Z", + "contributors": [ + "ExE-Boss", + "Verruckt", + "DaViD83", + "Federico" + ] + }, + "WebSockets": { + "modified": "2019-03-23T23:27:06.479Z", + "contributors": [ + "AlessandroSanino1994", + "br4in", + "music-wedding", + "pbrenna" + ] + }, + "WebSockets/Writing_WebSocket_client_applications": { + "modified": "2019-03-23T22:14:26.473Z", + "contributors": [ + "mnemosdev" + ] + }, + "Web_Development/Mobile": { + "modified": "2019-03-23T23:24:04.119Z", + "contributors": [ + "BenB" + ] + }, + "Web_Development/Mobile/Design_sensibile": { + "modified": "2019-03-23T23:24:00.771Z", + "contributors": [ + "SlagNe" + ] + }, + "XHTML": { + "modified": "2019-01-16T16:01:20.965Z", + "contributors": [ + "Federico", + "DaViD83", + "Indigo" + ] + }, + "window.find": { + "modified": "2019-03-24T00:02:59.251Z", + "contributors": [ + "khalid32", + "teoli", + "khela" + ] + } +} \ No newline at end of file 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 new file mode 100644 index 0000000000..7062b6a3ae --- /dev/null +++ b/files/it/adattare_le_applicazioni_xul_a_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/aggiungere_fornitori_di_dati_anti-phishing/index.html b/files/it/aggiungere_fornitori_di_dati_anti-phishing/index.html new file mode 100644 index 0000000000..cefea5fa76 --- /dev/null +++ b/files/it/aggiungere_fornitori_di_dati_anti-phishing/index.html @@ -0,0 +1,42 @@ +--- +title: Aggiungere fornitori di dati anti-phishing +slug: Aggiungere_fornitori_di_dati_anti-phishing +translation_of: Mozilla/Adding_phishing_protection_data_providers +--- +

Grazie alla tecnologia di protezione dal phishing, Firefox aiuta i suoi utenti a proteggersi comparando gli URL che vengono visitati con una lista nera di siti maliziosi già conosciuti, e presentando un avviso all'utente che visita uno di tali siti. +

+

Installare un nuovo fornitore di dati

+

Per installare un fornitore di dati, è necessario impostare una serie di preferenze che contengono alcuni dettagli sul fornitore stesso. +

Ogni fornitore ha un numero ID unico. Quello con ID 0 è il fornitore preimpostato da Firefox. Quando se ne installa uno nuovo, si dovrebbe utilizzare il numero più basso ancora inutilizzato. +

Per trovare l'ID da utilizzare, è possibile creare un ciclo che richieda il valore di browser.safebrowsing.provider.0.name, poi quello di browser.safebrowsing.provider.1.name, e così via finchè non viene restituito alcun valore. Allora si sarà trovato il numero utilizzabile. +

E' possibile trovare esempi di come accedere alle preferenze in lettura e in scrittura nell'articolo Aggiungere preferenze a un'estensione. +

+

Preferenze richieste

+
browser.safebrowsing.provider.idnum.name +
Un nome descrittivo per il provider. +
+
browser.safebrowsing.provider.idnum.keyURL +
Un URL che restituisca una chiave privata per la crittografia. +
+
browser.safebrowsing.provider.idnum.lookupURL +
L'URL dove si può trovare la lista nera. La richiesta verrà criptata utilizzando la chiave privata restituita da keyURL. +
+

Preferenze opzionali

+
browser.safebrowsing.provider.idnum.reportURL +
Un URL utilizzato per riportare quando un utente visita pagine phisher e se ha ignorato l'avviso o meno. +
+
browser.safebrowsing.provider.idnum.updateURL +
Un URL utilizzato per richiedere aggiornamenti della lista dei siti maliziosi. Il server può fornire l'ultima versione della lista oppure aggiornamenti incrementali. +
+
browser.safebrowsing.provider.idnum.reportGenericURL +
Un URL al quale l'utente viene direzionato quando desidera segnalare un sito "phisher" che non è stato rilevato dal sistema di protezione. +
+
browser.safebrowsing.provider.idnum.reportErrorURL +
Un URL al quale l'utente viene direzionato quando desidera segnalare una pagina sicura che viene erroneamente considerata maliziosa. +
+
browser.safebrowsing.provider.idnum.reportPhishURL +
Un URL al quale l'utente viene direzionato per riportare una pagina maliziosa. +
+

Determinare quale provider viene utilizzato correntemente

+

Per conoscere l'ID del provider attualmente selezionato, è possibile leggere il valore della preferenza browser.safebrowsing.dataProvider. +

{{ languages( { "en": "en/Adding_phishing_protection_data_providers" } ) }} diff --git a/files/it/api_sociale/index.html b/files/it/api_sociale/index.html new file mode 100644 index 0000000000..8c10dbc9c5 --- /dev/null +++ b/files/it/api_sociale/index.html @@ -0,0 +1,63 @@ +--- +title: API Sociale +slug: API_Sociale +translation_of: Archive/Social_API +--- +

L'API Sociale è una nuova API per rendere semplice per i browser internet integrare i servizi di social media. Quando un provider di servizio sociale è implementato in Firefox, è possibile mostrare  dentro al browser i comandi e le informazioni relative al servizio. L'articolo che segue spiega come implementare un servizio sociale.

+
+

Nota: Alcuni dei contenuti di questa pagina sono stati scritti ma non sono stati inclusi nella sottocategoria; li puoi trovare qui temporaneamente.

+
+ + + + + + + +
+

Documentazione per l'api sociale

+
+
+ Glossario API Sociale
+
+ Provvede definizioni di parole chivi che dovrai capre per capire come usare l'API Sociale
+
+ Social API and social service guide
+
+ An introduction and guide to the Social API and the associated services.
+
+ Social service manifest
+
+ A description of—and guide to building—the manifest required
+
+ Social service worker API reference
+
+ A reference to the social service worker API.
+
+ Social service content API: MozSocial
+
+ A reference to the social service content API, which is provided by the {{domxref("navigator.MozSocial")}} object.
+
+ Social service widgets
+
+ A guide to the widgets provided by the social service.
+
+

View All...

+ 		+

ricevi aiuto dalla comunità

+

You need help on a Social API related problem and can't find the solution in the documentation?

+
    +
  • Ask your question on the Mozilla IRC channel: #socialdev
    • +
+

Don't forget about the netiquette...

+

strumenti e demo

+ +

View All...

+ + +
+

 

diff --git a/files/it/archive/add-ons/index.html b/files/it/archive/add-ons/index.html new file mode 100644 index 0000000000..caac45ae4c --- /dev/null +++ b/files/it/archive/add-ons/index.html @@ -0,0 +1,8 @@ +--- +title: Add-ons +slug: Archive/Add-ons +translation_of: Archive/Add-ons +--- +

In progress. Archived add-ons documentation.

+ +

{{SubpagesWithSummaries}}

diff --git a/files/it/archive/add-ons/supportare_i_suggerimenti_nei_plugin_di_ricerca/index.html b/files/it/archive/add-ons/supportare_i_suggerimenti_nei_plugin_di_ricerca/index.html new file mode 100644 index 0000000000..d3470577ac --- /dev/null +++ b/files/it/archive/add-ons/supportare_i_suggerimenti_nei_plugin_di_ricerca/index.html @@ -0,0 +1,52 @@ +--- +title: Supportare i suggerimenti nei plugin di ricerca +slug: Archive/Add-ons/Supportare_i_suggerimenti_nei_plugin_di_ricerca +tags: + - Plugin_di_ricerca +translation_of: Archive/Add-ons/Supporting_search_suggestions_in_search_plugins +--- +

MozSearch supporta i suggerimenti di ricerca; mentre l'utente scrive nella barra di ricerca, Firefox 2 interroga l'URL specificato dal plugin di ricerca per ottenere i suggerimenti di ricerca. +

Una volta che la lista è stata ottenuta, viene mostrata in una casella popup che appare sotto la barra di ricerca, che permette all'utente di selezionare uno dei termini suggeriti. Se l'utente continua a scrivere, una nuova lista di suggerimenti viene richiesta dal motore di ricerca e la casella si aggiorna. +

I plugin di ricerca per Yahoo e Google inclusi in Firefox 2 supportano i suggerimenti di ricerca. +

+

Implementare il supporto per i suggerimenti nel plugin

+

Per supportare i suggerimenti di ricerca, un plugin deve definire un elemento <Url> con un attributo type impostato a "application/x-suggestions+json". Questo significa che ci saranno due elementi <Url>: l'altro è l'URL principale della ricerca. +

Per esempio, il plugin di Yahoo ha il seguente <Url>: +

+
<Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchTerms}"/>
+
+

Se l'utente scrive "fir" nella barra di ricerca e poi fa una pausa, Firefox inserirà "fir" al posto di {searchTerms} e interrogherà l'URL: +

+
<Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command=fir"/>
+
+

I risultati dell'interrogazione costituiranno la lista di suggerimenti. +

Si veda Creare Plugin MozSearch per ulteriori informazioni su come implementare un plugin di ricerca. +

+

Implementare il supporto per i suggerimenti sul server

+

La maggior parte del lavoro per gestire i suggerimenti di ricerca è effettivamente implementarli lato server. Se si desidera farlo, si deve implementare un programma che, ricevendo come parametri i termini di ricerca, restituisca i suggerimenti. Il programma sarà scritto in JavaScript Object Notation (JSON). +

Quando un browser vuole ricevere una lista di corrispondenze per un dato termine, invia una richiesta HTTP GET all'URL specificato dall'elemento <Url>. +

Il server dovrà allora decidere quali suggerimenti offrire utilizzando quelli che vi si addicono e costruire un JSON che consiste di un minimo di due e un massimo di quattro elementi: +

+
query string +
Il primo elemento nella query string originale in JSON. Questo permette a Firefox di verificare che il suggerimento corrisponda a quanto digitato dall'utente. +
+
completion list +
Un array di suggerimenti. L'array deve essere racchiuso tra parentesi quadre. Per esempio: <tt>{{ mediawiki.external('\"termine 1\", \"termine 2\", \"termine 3\", \"termine 4\"') }}</tt> +
+
descriptions +
Questo elemento è opzionale ed è un array di descrizioni per ognuno dei suggerimenti presenti nella completion list. Queste possono essere informazioni aggiuntive che il motore di ricerca potrebbe restituire perchè vengano visualizzate dal browser, così come il numero di risultati che verranno trovati. +
+
Questo elemento non è supportato in Firefox 2 e se presente sarà ignorato.
+
URL +
Questo elemento è opzionale ed è un array di URL alternativi per ognuno dei suggerimenti presenti nella completion list. Per esempio, se si desidera offrire una mappa di link invece di una semplice pagina di risultati, è possibile restituire un URL a una mappa in questo array. +
+
Se non si specifica un URL da interrogare, viene utilizzato l'URL di default specificato nell'elemento <Url> del plugin. +
+
Questo elemento non è supportato in Firefox 2 e se presente sarà ignorato.
+

Per esempio, se il termine di ricerca è "fir" e non si necessita di restituire alcuna descrizione o URL di ricerca alternativo, si può restituire il sequente JSON: +

+
["fir", ["firefox", "first choice", "mozilla firefox"]]
+
+

Si noti che in questo esempio sono stati specificati solo la query string e l'array di completamento, tralasciando tutti gli elementi opzionali. +

La completion list può includere tanti suggerimenti quanti si desidera offrirne, sebbene sia meglio mantenerla maneggevole, dato che la casella dei suggerimenti si aggiorna mente l'utente continua a scrivere. Inoltre, il criterio utilizzato per selezionare i suggerimenti da offrire viene lasciato interamente allo sviluppatore. +

{{ languages( { "en": "en/Supporting_search_suggestions_in_search_plugins" } ) }} diff --git a/files/it/archive/add-ons/sviluppare_un_estensione/index.html b/files/it/archive/add-ons/sviluppare_un_estensione/index.html new file mode 100644 index 0000000000..84f5df691e --- /dev/null +++ b/files/it/archive/add-ons/sviluppare_un_estensione/index.html @@ -0,0 +1,242 @@ +--- +title: Sviluppare un'Estensione +slug: Archive/Add-ons/Sviluppare_un_Estensione +tags: + - Estensioni + - Tutte_le_categorie +translation_of: Archive/Add-ons/Developing_add-ons +--- +

 

+

Introduzione

+

Questo tutorial accompagnerà passo-passo nella creazione di un'estensione semplice e basilare che permetta di aggiungere un pannello alla barra di stato contenente il testo "Hello, World!"

+
+

Nota Questo tutorial si rifersice allo sviluppo di un'estensione per Firefox 1.5. Esistono altri tutorial per le precedenti versioni di Firefox.

+
+

Organizzare l'ambiente di sviluppo

+

Le estensioni vengono impacchettate e distribuite in file ZIP, o Bundles, con l'estensione <tt>xpi</tt> ( + + pronunciata “zippy” + ). Lo schema del contenuto di un file XPI è simile a questo:

+
extension.xpi:
+              /install.rdf
+              /components/*
+              /components/cmdline.js
+              /defaults/
+              /defaults/preferences/*.js
+              /plugins/*
+              /chrome.manifest
+              /chrome/icons/default/*
+              /chrome/
+              /chrome/content/
+
+
+

Per questo motivo è consigliabile organizzare i file sorgente in una struttura simile, a meno che non si voglia scrivere un qualche tipo di Makefile or shell script per impacchettare e comprimere i propri file. Anche qualora si sia in grado di farlo, è molto più semplice eseguire i test attraverso la struttura sopra indicata a causa delle caratteristiche del sistema di installazione delle estensioni di Firefox 1.5.

+

Iniziamo. Crea una cartella per l'estensione da qualche parte sull'hard disk, ad es. <tt>C:\extensions\myExtension\</tt> o <tt>~/extensions/myExtension/</tt>. Dentro questa cartella crea un'altra cartella chiamata <tt>chrome</tt>, e all'interno della cartella <tt>chrome</tt> crea un'altra cartella chiamata <tt>content</tt>. (Su sistemi di tipo Unix è possibile creare tutte e tre le directory eseguendo semplicemente <tt>mkdir -p chrome/content</tt> dalla directory di root dell'estensione.)

+

Dentro alla root della cartella dell'estensione, insieme alla cartella <tt>chrome</tt>, crea due nuovi file di testo vuoti, uno chiamato <tt>chrome.manifest</tt>, l'altro invece <tt>install.rdf</tt>.

+

Altri suggerimenti sull'organizzazione dell'ambiente di sviluppo possono essere trovati su Mozillazine Knowledge Base(EN).

+

Creare il manifesto di installazione

+

Apri il file chiamato <tt>install.rdf</tt> che hai creato al vertice della gerarchia delle cartelle dell'estensione e scrivici dentro:

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>sample@foo.net</em:id>
+    <em:version>1.0</em:version>
+    <em:type>2</em:type>
+
+    <!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. -->
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.0+</em:minVersion>
+        <em:maxVersion>1.5.0.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- Front End MetaData -->
+    <em:name>Esempio!</em:name>
+    <em:description>Estensione di prova</em:description>
+    <em:creator>Il tuo nome</em:creator>
+    <em:homepageURL>http://www.iltuositoweb.com/</em:homepageURL>
+  </Description>
+</RDF>
+
+ +

Guarda Manifesti di installazione per un elenco completo delle proprietà richieste e opzionali.

+

Salva il file.

+

Estendere il browser con XUL

+

L'interfaccia utente di Firefox è scritta in XUL e JavaScript. XUL è una grammatica XML che fornisce all'interfaccia utente dei componenti come pulsanti, menu, barre degli strumenti, strutture ad albero, etc. Le azioni dell'utente sono invece collegate alle funzionalità attraverso dei JavaScript.

+

Per estendere il borwser si modificano parti dell'UI del browser aggiungendo o modificando i componenti. Si aggiungono componenti inserendo nuovi elementi XUL DOM nella finestra del browser, e si modificano usando script e associando dei gestori di eventi.

+

Il browser è implementato in un file XUL chiamato <tt>browser.xul</tt> (<tt>$FIREFOX_INSTALL_DIR/chrome/browser.jar</tt> che contiene <tt>content/browser/browser.xul</tt>). Dentro browser.xul si può trovare la barra di stato, che assomiglierà a qualcosa del genere:

+
<statusbar id="status-bar">
+ ... <statusbarpanel>s ...
+</statusbar>
+
+

<tt><statusbar id="status-bar"></tt> è un "punto di fusione" per un Overlay XUL.

+
Overlay XUL
+

Gli Overlay XUL sono un modo di associare altri oggetti UI a un documento XUL al momento dell'esecuzione. Un Overlay XUL è un file .xul che specifica dei frammenti del file XUL da inserire in specifici "punti di fusione" contenuti nel documento principale. Questi frammenti possono indicare l'inserimento, la rimozione o la modifica degli oggetti.

+

Esempio di un documento di Overlay XUL

+
<?xml version="1.0"?>
+<overlay id="sample"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <statusbar id="status-bar">
+  <statusbarpanel id="my-panel" label="Hello, World"/>
+ </statusbar>
+</overlay>
+
+

La <tt><statusbar></tt> chiamata <tt>status-bar</tt> indica il "punto di fusione" all'interno della finestra del browser al quale si intende associare la modifica.

+

Il figlio <tt><statusbarpanel></tt> rappresenta un nuovo oggetto da inserire all'interno del punto di fusione.

+

Usa questo semplice codice e salvalo in un file chiamato <tt>sample.xul</tt> dentro la cartella <tt>chrome/content</tt> che hai creato.

+

Per ulteriori informazioni circa l'inserimento di oggetti e la modifica dell'interfaccia utente attraverso gli Overlay, guarda sotto.

+

URI Chrome

+

I file XUL sono parti del "Pacchetto Chrome" - una serie di componenti dell'interfaccia utente che vengono caricati attraverso indirizzi URI <tt>chrome://</tt>. Invece di caricare il browser da disco usando un URI <tt>file://</tt> (poichè l'ubicazione di Firefox nel sistema può cambiare da piattaforma a piattaforma e da sitema a sistema), gli sviluppatori di Mozilla hanno trovato una soluzione per creare degli URI al contenuto XUL che l'applicazione installata possa conoscere.

+

Ad esempio, la finestra del browser è: <tt>chrome://browser/content/browser.xul</tt> Prova a digitare questa URL nella barra degli indirizzi di Firefox!

+

Gli URI Chrome sono composti da diversi componenti:

+ +

Quindi, <tt>chrome://foo/skin/bar.png</tt> carica il file <tt>bar.png</tt> dalla sezione <tt>skin</tt> del tema <tt>foo</tt>.

+

Quando si carica un file mediante l'URI Chrome, Firefox usa il Registro del Chrome per tradurre questi URI nella effettiva sorgente del file su disco (o nel pacchetto JAR).

+

Creare il manifesto di installazione

+

Per maggiori informazioni sul Chrome Manifest e le proprietà supportate, guarda il riferimento sul Chrome Manifest.

+

Apri il file chiamato <tt>chrome.manifest</tt> che hai creato insieme alla directory <tt>chrome</tt> nella root dell'estensione.

+

Aggiungi questo codice:

+
content     sample    chrome/content/
+
+

(Non dimenticare gli slash posteriori, "<tt>/</tt>"! Senza, l'estensione non verrà caricata.)

+

Il codice indica:

+
    +
  1. il tipo di materiale all'interno del pacchetto chrome
    2. +
  2. il nome del pacchetto chrome
    3. +
  3. la ubicazione dei file del pacchetto chrome
    4. +
+

Quindi, la stringa indicata sopra dice che per il pacchetto chrome sample, si possono trovare i suoi file content all'ubicazione <tt>chrome/content</tt> che è un percorso relativo alla ubicazione di <tt>chrome.manifest</tt>.

+

N.B. i file content, locale e skin devono essere contenuti nelle cartelle chiamate content, locale e skin all'interno della sotto-directory <tt>chrome</tt>.

+

Salva il file. Quando Firefox verrà eseguito con questa estensione, (più avanti in questo tutorial), il chrome.manifest registrerà il pacchetto chrome.

+

Registrare un Overlay

+

E' necessario che Firefox fonda il tuo overlay con la finestra del browser ogni volta che ne mostra una. Quindi aggiungi questa stringa al file <tt>chrome.manifest</tt>:

+
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
+
+

Questo dice a Firefox di fondere <tt>sample.xul</tt> in <tt>browser.xul</tt> quando viene caricato <tt>browser.xul</tt> .

+

Test

+

Primo, devi far sapere a Firefox della tua estensione. Nei vecchi e bui giorni di Firefox 1.0 questo significava impacchettare l'estensione come un XPI e installarla attraverso l'interfaccia utente, che era davvero una faticaccia. Ora è più semplice.

+
    +
  1. Apri la cartella del Profilo
    2. +
  2. Apri la cartella dell'estensione (creala se non esiste)
    3. +
  3. Crea un nuovo file di testo e scrivici dentro il percorso alla cartella dell'estensione, ad es. <tt>C:\extensions\myExtension\</tt> o <tt>~/extensions/myExtension</tt>. Salva il file con l'ID dell'estensione, per esempio <tt>sample@foo.net</tt>
    4. +
+

Ora sei pronto a fare un test dell'estensione!

+

Avvia Firefox. Firefox rileverà il link testuale alla directory dell'estensione e la installerà. Quando apparirà la finestra del browser si dovrebbe vedere la scritta "Hello, World!" sulla destra della barra di stato.

+

Ora puoi tornare indietro ed effettuare dei cambiamenti al file .xul, chiudere e riavviare Firefox e questi dovrebbero essere mostrati.

+<center> +

Image:Helloworld_tools_menu.PNG

+

Image:Helloworld_extensions_wnd.PNG

+</center> +

Impacchettamento

+

Ora che l'estensione funziona, può essere impacchettata per l'installazione e la circolazione.

+

Comprimi il contenuto della cartella dell'estensione (non la cartella stessa), e rinomina il file .zip con l'estensione .xpi. In ambiente Windows XP, si può facilmente esguire questa operazione selezionando tutti i file e le sottocartelle presenti nella cartella dell'estensione, cliccando col tasto destro del mouse e scegliendo "Invia a -> Cartella compressa". Verrà creato un file .zip. Basta rinominarlo ed il gioco è fatto!

+

Ora è possibile caricare il file .xpi su un server, avendo cura di controllare che offra il servizio di <tt>application/x-xpinstall</tt>. Basta quindi creare un collegamento al file sul server per permettere alle persone di scaricare e installare l'estensione su Firefox.

+

 

+
Utilizzare addons.mozilla.org
+

Mozilla Update è un sito di distribuzione dove è possibile ospitare (hosting) le proprie estensioni gratuitamente. + + Your extension will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. + Il sito di Mozilla garantisce inoltre agli utenti un'installazione semplificata delle estensioni, e rende automaticamente disponibili, per gli utenti che già le possiedano, gli aggiornamenti ogni volta che viene effettuato l'upload delle nuove versioni delle estensioni. In più Mozilla Update consente agli utenti di commentare e lasciare un feedback sulla estensione. E' vivamente consigliabile di utilizzare Mozilla Update per distribuire le tue estensioni!

+

Visita http://addons.mozilla.org/developers/ per creare un account ed iniziare a distribuire le tue estensioni!

+

+ + N.B. + Le tue estensioni saranno promosse più velocemente e maggiormente scaricate se fornisci una descrizione accurata e alcuni screenshot delle funzionalità dell'estensione.

+
Registrare le Estensioni nel registro di Windows
+

Su Windows, possono essere aggiunte nel registro delle informazioni sulle estensioni, cosicché l'estensione sarà automaticamente caricata all'avvio dell'applicazione. Questo permette ai programmi di installazione delle applicazioni di aggiungere facilmente dei punti di acesso perl'integrazione sottoforma di estensioni. Guarda "Aggiugere estensioni utilizzando il Registro di Windows" per ulteriori informazioni.

+

Altre informazioni sugli Overlay XUL

+

Oltre che per inserire dei componenti UI ai "punti di fusione", si possono usare i frammenti di XUL negli Overlay per:

+ +
<statusbarpanel position="1" .../>
+
+<statusbarpanel insertbefore="other-id" .../>
+
+<statusbarpanel insertafter="other-id" .../>
+
+

Creare nuovi componenti per l'interfaccia utente

+

E' possibile creare proprie finestre (e finestre di dialogo) come file .xul separati, fornire nuove funzionalità implementando le azioni disponibili per l'utente nei file .js, usando il metodo DOM per manipolare i componenti UI. Si possono definire le regole di stile nei file .css per associare delle immagini, impostare i colori, etc.

+

Guarda la documentazione su XUL per ulteriori risorse sullo sviluppo con XUL.

+

File predefiniti

+

I file predefiniti con i quali modificare il profilo dell'utente dovrebbero essere posti nella cartella <tt>defaults/</tt> sotto la root della gerarchia di cartelle dell'estensione. I file .js che settano impostazioni predefinite dovrebbero invece essere posti nella cartella <tt>defaults/preferences/</tt> - infatti, qualora vengano ubicati in queste cartelle, saranno automaticamente caricati dal sistema di preferenze di Firefox all'avvio e sarà possibile accedervi facilmente utilizzando l'API delle Preferenze.

+

Componenti XPCOM

+

Firefox supporta anche i componenti XPCOM all'interno delle estensioni. Questi componenti possono essere facilmente creati con JavaScript o C++ (utilizzando il Gecko SDK).

+

Riponi tutti i file .js o .dll nella directory <tt>components/</tt> - saranno automaticamente registrati al primo avvio di Firefox successivo all'installazione dell'estensione.

+

Per maggiori informazioni guarda Come costruire un componente XPCOM con Javascript e il libro Creare componenti XPCOM.

+
Linea di comando per l'applicazione
+

Uno dei possibili usi dei componenti XPCOM personalizzati è quello di aggiungere una gestione a linea di comando per Firefox o Thunderbird. Questa tecnica è utile per eseguire l'estensione come se fosse un'applicazione:

+
 firefox.exe -myapp
+
+

Guarda Chrome: Linea di comando ed una discussione sul forum(EN) per maggiori dettagli.

+

Localizzazione

+

Per supportare più di una lingua, occorre separare le stringhe dal contenuto utilizzando le entities e le string bundles. E' più semplice effettuare questa operazione mentre si sviluppa l'estensione che dover tornare indietro e farlo alla fine!

+

Le informazioni sulla Localizzazione sono immagazzinate nella directory del locale dell'estensione. Per esempio, per aggiungere un locale all'estensione che abbiamo sviluppato fin ora, basta creare una directory chiamata "locale" nel chrome (dove è ubicata la directory "content") e aggiungere la seguente stringa al file chrome.manifest:

+
locale sample sampleLocale chrome/locale/
+
+

Per creare valori localizzabili per gli attributi XUL, è necessario inserire tali valori in un file <tt>.ent</tt> (o <tt>.dtd</tt>), che deve essere ubicato nella directory del locale ed avere questo aspetto:

+
<!ENTITY  button.label     "Click Me!">
+<!ENTITY  button.accesskey "C">
+
+

E quindi includere all'inizio del documento XUL (ma dopo il prologo "<?xml version"1.0"?>") qualcosa del genere:

+
<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.ent">
+
+

dove window è il valore localName dell'elemento di root del documento XUL, ed il valore della proprietà <tt>SYSTEM</tt> è l'URI chrome al file dell'entità (entity). Nell'estensione dell'esempio, l'elemento di root è overlay.

+

Per usare le entità occorre modificare il proprio XUL così:

+
<button label="&button.label;" accesskey="&button.accesskey;"/>
+
+

Il Registro del Chrome farà in modo che il file dell'entità venga caricato dalla cartella del locale corrispondente al locale selezionato.

+

Per le stringhe usate negli script crea un file .properties: un file di testo che contiene una stinga per ogni linea in questo formato:

+
chiave=valore
+
+

e utilizza il tag <tt>nsIStringBundleService</tt>/<tt>nsIStringBundle</tt> o il tag <tt><stringbundle></tt> per caricare i valori negli script.

+

Conoscere il Browser

+

Usa il DOM Inspector (non è parte dell'installazione Standard di Firefox, se manca dal menu Strumenti occorre reinstallare Firefox con l'opzione "installazione personalizzata" e selezionare Strumenti di sviluppo) per esplorare la finestra del browser ed ogni altra finestra XUL che hai l'intenzione di estendere.

+

Utilizza il pulsante in alto a sinistra nella bara degli strumenti del DOM Inspector per attivare la modalità di ricerca dei nodi "punta-e-clicca": in tal modo basterà un clic visuale su un nodo nella finestra XUL per selezionarlo. Effettuando quest'operazione l'albero della gerarchia DOM del DOM inspector salterà automaticamente al nodo selezionato.

+

Usa il pannello di destra del DOM Inspector per trovare i punti di fusione e gli "id" da usare per inserire gli elementi tramite l'overlay. Se non riesci a trovare un elemento che abbia un'id sulla quale sia possibile effettuare l'inserimento, potrebbe essere necessario aggiungere uno script nell'overlay per inserire i propri elementi quando l'evento <tt>load</tt> si attiva nella finestra XUL principale.

+

Effettuare il debug sull'estensione

+

Strumenti per il debug analitico

+ +

Debug con printf

+ +

Debug avanzato

+ +

Iniziare velocemente

+

Può essere utilizzato lo strumento online Extension Wizard(EN) per generare una semplice estensione.

+

Un'estensione "Hello World"(EN) simile a quella prodotta dall'Extension Wizard è spiegata passo-passo in un altro tutorial di MozillaZine(EN).

+

{{ languages( { "en": "en/Building_an_Extension", "de": "de/Erweiterung_erstellen", "es": "es/Creando_una_extensi\u00f3n", "fr": "fr/Construire_une_extension", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozszerzenie", "pt": "pt/Construir_uma_Extens\u00e3o" } ) }}

diff --git a/files/it/archive/b2g_os/apps/index.html b/files/it/archive/b2g_os/apps/index.html new file mode 100644 index 0000000000..5f4b422008 --- /dev/null +++ b/files/it/archive/b2g_os/apps/index.html @@ -0,0 +1,48 @@ +--- +title: Creare App per Firefox OS +slug: Archive/B2G_OS/Apps +translation_of: Web/Apps/Fundamentals +--- +

Le applicazioni per Firefox OS sono open Web App che si basano interamento sulle open Web Technology come JavaScript, HTML e CSS.
+ La nostra documentazione per le app copre principalmente quasi tutto ciò di cui hai bisogno e questi sono alcuni argomenti specifici per lo sviluppo su Firefox OS che ti potrebbe servire leggere.

+
+
+

Documentazione e tutorial

+
+
+ Scrivere una web app per Firefox OS
+
+ Un tutorial per creare a tua prima web app per Firefox OS.
+
+ Esperienza utente
+
+ Consigli per aiutarti nello sviluppo della tua app per renderla ancora più favolosa e attraente, sono inclusi modelli e codici già pronti.
+
+ Consigli e tecniche
+
+ Un assortimento di consigli e trucchi (ma anche soluzioni per problemi) che i nostri sviluppatori ti suggeriscono!
+
+

Vedi tutti...

+
+
+

Ricevi aiuto dalla comunità

+

Hai bisgno di aiuto per un problema con la tua app e non trovi una soluzione nella documentazione?

+
    +
  • Chiedi aiuto nel forum delle web app: {{DiscussionList("dev-webapps", "mozilla.dev.webapps")}}
    • +
  • Chiedi aiuto nel forum dedicato al Layout per problemi di HTML e CSS: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}
    • +
  • Chiedi aiuto sul canale IRC di Mozilla: #openwebapps
    • +
+

E non ti dimenticare della netiquette...

+

Strumenti

+ +

Vedi tutti...

+ + +
+
+

 

diff --git a/files/it/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html b/files/it/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html new file mode 100644 index 0000000000..d186c908cb --- /dev/null +++ b/files/it/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html @@ -0,0 +1,34 @@ +--- +title: Scrivere una web app per Firefox OS +slug: Archive/B2G_OS/Apps/Writing_a_web_app_for_Firefox_OS +translation_of: Web/Apps/Fundamentals/Quickstart +--- +

Le app per B2G/Firefox OS sono web app scritte in HTML, CSS e JavaScript. Le puoi pubblicare sul web esattamente come faresti con un sito. Per rendere un sito installabile come web app sui dispositivi devi solo aggiungere un file manifest e un pulsante al tuo sito per avviare l'installazione.

+ +

I seguenti argomenti sono il punto di partenza raccomandato:

+ + + +

Naturalmente sentititi libero di immergerti ancora più in profondità nelle open Web Apps!

+ +

Installare le web app

+ +

Dopo aver pubblicato app e file manifest sul web devi far in modo che il browser se ne accorga. Nel momento dell'installazione, il browser cerca il file manifest e aggiunge ciò che serve alla home screen, etc.

+ +

Per installare un'app devi fare eseguire una chiamata a navigator.mozApps.install API. Questo è un esempio per il pulsante di installazione che puoi inserire nella tua app quando la pubblicherai:

+ +
<script>
+var manifest_url = "http://my.webapp.com/manifest.json";
+</script>
+
+<button onclick="navigator.mozApps.install(manifest_url); return false;">
+  Installa questa fantastica app nella tua schermata Home!
+</button>
+
+ +

Nota: questo pulsante potrebbe anche essere aggiunto in un app market come il  Firefox Marketplace, ma spesso è molto comodo avere un link a "Installa come Web app" sulla pagina principale del tuo sito.

+ +

Adesso visita il tuo sito nel browser di B2G/Firefox OS e installa la tua app cliccando sul bottone "Installa come web app".

diff --git a/files/it/archive/b2g_os/automated_testing/index.html b/files/it/archive/b2g_os/automated_testing/index.html new file mode 100644 index 0000000000..9a725806c4 --- /dev/null +++ b/files/it/archive/b2g_os/automated_testing/index.html @@ -0,0 +1,93 @@ +--- +title: Automated Testing of Firefox OS +slug: Archive/B2G_OS/Automated_testing +translation_of: Archive/B2G_OS/Automated_testing +--- +

Dato che  Firefox OS è ancora in fase di sviluppo, e il supporto per nuovo hardware sarà imminente per il prossimo futuro, è importante sapere come provarlo. Questa pagina offre articoli che forniscono informazioni su vari aspetti della sperimentazione Firefox OS, tra cui l'esecuzione di test differenti, l'automazione, e risultato di reporting e di monitoraggio.

+ +

Inziamo

+ +
+
Esecuzione di test su Firefox OS: Una guida per gli sviluppatori
+
A, guida pratica sviluppatori focalizzati ad ottenere iniziato con l'esecuzione dei test. Questo è dove si dovrebbe cominciare se non siete esperti nella gestione di test di Mozilla e sistemi di automazione. Se si, allora probabilmente avete un'idea di ciò che i test che si desidera eseguire e come, e si può saltare a delle guide dettagliate più specifici indicati di seguito.
+
+ +

Gaia tests

+ +

These articles cover the primary test suites designed to put Gaia through its paces.

+ +
+
Gaia UI tests
+
Python tests for Gaia UI interactions and features.
+
Gaia integration tests
+
JavaScript integration tests for Gaia, based on Marionette.
+
Gaia unit tests
+
Gaia unit tests with no UI interaction; written in JavaScript, not Marionette-based.
+
Gaia performance tests
+
Measures Gaia app performance based on internal instrumentation. The testing harness is in-tree.
+
+ +

B2G tests

+ +

The guides below cover a number of different test harnesses that test various aspects of B2G functionality.

+ +
+
Mochitests
+
Gecko functional and API tests; HTML & JS based.  No Gaia interaction.
+
Reftests
+
Gecko rendering correctness tests.
+
WebAPI tests
+
Gecko JS-based WebAPI tests; most of these require an emulator.
+
xpcshell tests
+
Headless tests of Gecko XPCOM APIs.
+
B2GPerf
+
Measures Gaia app performance based on internal instrumentation.
+
Eideticker
+
Provides performance measurements for Firefox OS based on video captures.
+
Endurance tests
+
Long-running repetitive tests designed to find memory leaks and stability problems.
+
MTBF test
+
This is a test framework based on non-restart gaia-ui-test. It tries to locate all kinds of issue prevents tests from running in a long time. (Currently, it is owned by Taiwan QA team and still a developing test framework)
+
Memory tests - coming soon
+
Repetitive tests run per-commit to mozilla-central, reporting to https://areweslimyet.com/, designed to find problems with memory usage.
+
+ +

Supporting documentation

+ +

This section provides links to some of the supporting technologies that underpin Mozilla's tests, which you may want to find more information about.

+ +
+
Marionette
+
A remote test driver based on Selenium WebDriver.
+
Marionette JavaScript tests
+
A node.js-based runner for Marionette.
+
Marionette Python tests
+
A Python runner for Marionette.
+
+ +
+

Note: If you want to run Marionette against a production build (to run gaia integration tests, gaia-ui-tests, etc.), you can install Marionette as an extension (this currently only works for 1.3 builds, but more support will be added soon.)

+
+ +

Continuous integration and result reporting

+ +

The following articles cover the continuous integration and result reporting mechanisms Mozilla uses to store and intepret test data.

+ +
+
TBPL
+
Understand the tests and builds that run on TBPL.
+
Jenkins
+
Understand the tests that are run on real devices via Jenkins.
+
Datazilla
+
Understand which performance tests are reporting to the Datazilla dashboard, and what those tests measure.
+
Test execution chart
+
A chart showing which tests are being run — on what devices and where — and which platforms are supported for each test.
+
+ +

Unit testing framework video

+ +

{{EmbedYouTube("LxnRIm0wLLo")}}

+ +
+
 
+
diff --git a/files/it/archive/b2g_os/building/index.html b/files/it/archive/b2g_os/building/index.html new file mode 100644 index 0000000000..ce4dcf887b --- /dev/null +++ b/files/it/archive/b2g_os/building/index.html @@ -0,0 +1,241 @@ +--- +title: Build-are Firefox OS +slug: Archive/B2G_OS/Building +translation_of: Archive/B2G_OS/Building +--- +
+

Once you've set up your build system and performed your initial pull and configure of the code, you can build Boot to Gecko. This guide explains how.

+
+

Updating your code

+

If this isn't your very first time building B2G, you might want to pull the latest code before you start to build. To do that, you should update both the B2G tools and the dependencies, using the following two commands:

+
git pull
+./repo sync -d
+
+

You can update a specific make target's repository by specifying its name:

+
./repo sync gaia
+
+

The repo command has other options available that might be interesting; repo help will give you a lot of information.

+

Building

+
+

Note: Before building, you may want to set up a .userconfig file to customize the build. See Customization with the .userconfig file for details.

+
+

To build Boot to Gecko, simply use the build.sh tool:

+
cd B2G
+./build.sh
+
+

Time for another coffee break, or possibly a nap (especially if this is your first build). As in the configure step on the previous page, if you are using a directory of previously-extracted Android system files, you should set ANDROIDFS_DIR before running build.sh.

+

Building specific modules

+

If you want to build just a particular module, such as Gecko, you can specify it by name:

+
./build.sh gecko
+
+

In order to refresh only one application, you can build only gaia module by using the BUILD_APP_NAME environment variable:

+
BUILD_APP_NAME=calendar ./build.sh gaia
+

To get a list of the modules you can build, you can do:

+
./build.sh modules
+
+

Setting the number of processor cores to use

+

By default, the B2G build scripts use the number of cores your system has plus two as the number of parallel tasks to run. You can change this by specifying the -j parameter when running build.sh. This can be handy if you're using your system for other things while building in the background and need to reduce CPU load a bit. It's also handy when you're having build problems, as it can make reading error output from the build process easier if you have just one task going at a time!

+

For example, to build using just two parallel tasks:

+
./build.sh -j2
+
+

The most common use case for this, however, is to prevent builds from running in parallel at all. This makes the output of the process much easier to read, making it easier to sort out build problems. To do this:

+
./build.sh -j1
+
+

Building multilocale

+

To create a multilocale build, do the following:

+

Gaia

+
    +
  1. Determine which Gaia languages file to use. We're currently using locales/languages_dev.json and locales/languages_all.json as our Gaia languages files.
    2. +
  2. Clone the appropriate locales from http://hg.mozilla.org/gaia-l10n into a directory; we use gaia-l10n/. You could use the locales/ directory . You'll need to clone a repo for each locale listed in the languages file.
    3. +
  3. In your environment, set LOCALE_BASEDIR to the absolute path of the directory in step 2. Set LOCALES_FILE to the absolute path of the file in step 1.
    4. +
  4. Also, you can set a GAIA_DEFAULT_LOCALE if you want to set a default locale.
    5. +
+
cd gaia/locales/
+hg clone https://hg.mozilla.org/releases/gaia-l10n/v1_2/es
+
+ Set your environment variables:
+
+  
+
export LOCALE_BASEDIR=$PWD/locales
+export LOCALES_FILE=$PWD/locales/languages_dev.json
+export GAIA_DEFAULT_LOCALE=es
+
+

And the languages-dev.json could be replaced by your own languages-own.json path, which could formed like this. You would need to add an entry per each repo cloned in your locales directory.:

+
{
+  "en-US"     : "English (US)",
+  "es"        : "Español"
+}
+
+
+

Since bug 884752 landed (November 2013), to add keyboard layouts (if available in Gaia), you can use parameter GAIA_KEYBOARD_LAYOUTS. 

+

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=884752

+

Layouts: https://github.com/mozilla-b2g/gaia/tree/v1.2/keyboard/layouts

+

For example, to add Spanish and Italian keyboard layout, run the previous command adding

+ 
  GAIA_KEYBOARD_LAYOUTS=en,es,it
+

At this point you're ready to flash Gaia to the phone for the first time. Connect the phone and make sure Remote Debugging is checked in Settings > Device Information > More Information > Developer.  You only need to do this once, for your own build of Gaia will have that pref turned on thanks to REMOTE_DEBUGGER=1:

+ 
 make clean && make production LOCALES_FILE=locales/languages-own.json
+

Gecko

+
    +
  1. Determine which Gecko languages file to use. We're currently using b2g/locales/all-locales as our Gecko languages file.
    2. +
  2. Clone the appropriate locales into a directory; this can be gecko-l10n/ . + +
    3. +
  3. Clone compare-locales.
    4. +
  4. +

    In your environment, set L10NBASEDIR to the absolute path of the directory in step 2. Set MOZ_CHROME_MULTILOCALE to a string of space-delimited locales from step 1.

    +

    Add the compare-locales/scripts dir to your PATH, and compare-locales/lib to your PYTHONPATH.

    + For instance, + 
    export L10NBASEDIR=$PWD/gecko-l10n
+export MOZ_CHROME_MULTILOCALE="ja zh-TW"
+export PATH="$PATH:$PWD/compare-locales/scripts"
+export PYTHONPATH="$PWD/compare-locales/lib"
+
    +

    Once you have the above set up, you can run build.sh.

    +

    You can use .userconfig as well:

    + 
    ## Gaia
+export GAIA_DEFAULT_LOCALE=es
+export LOCALE_BASEDIR=/b2g/gaia-l10n-transifex-v1.2/
+export LOCALES_FILE=/b2g/languages_propio.json
+
+## Gecko
+export L10NBASEDIR='/b2g/gecko-l10n-v1.2'
+export MOZ_CHROME_MULTILOCALE="es-ES eu ca gl pt-BR"
+export PATH="$PATH:/b2g/compare-locales/scripts"
+export PYTHONPATH="/b2g/compare-locales/lib"
+
    +
    5. +
+
+

There are some mappings between Gaia languages and Gecko ones. For example, in Gaia, Spanish is "es", but on Gecko is tranlated to "Spanish of Spain" (es-ES)

+
+

These instructions may change as we smooth things out.

+

Known errors

+

"Build failed!"

+

If you get a general "Build failed" message, you should always try reconnecting your phone to your computer; sometimes the phone can become unmounted for a variety of reasons.

+
+

Note that configuring and building B2G for Keon DOESN'T WORK on Mac. You'll need to use Linux to build for this device.

+
+

Mountain Lion-specific build errors

+
+

1. If you are building on OS X 10.8 "Mountain Lion" (Xcode 4.4.1 or later) and encounter the following error:

+ 
external/qemu/android/skin/trackball.c:130:25: error: 'M_PI' undeclared (first use in this function)
+ Edit the file: B2G/external/qemu/Makefile.android and add in line 78:
+ 
MY_CFLAGS += -DM_PI=3.14159265358979323846264338327950288   #/* B2G_fix: not finding M_PI constant */
+
+
+
+ 2. If you are on Mountain Lion and you receive an error during ./build.sh like:
+
+ 
/System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h:797:9: error: too many #pragma options align=reset
+

Replace all instances of '#pragma options align=reset' with '#pragma pack()' inside /System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h

+
+

Undefined symbols "_sqlite3_androidopt_handle_pragma" and "_sqlite3_androidopt_open"

+

This error appears if you are building on OS X 10.7 or newer with Xcode 4.5 or newer. To fix this, apply the patch at https://groups.google.com/forum/#!msg/android-building/yAfPyUqCsiQ/7zvICk4GWjYJ to the external/sqlite/dist/Android.mk file.

+

KeyedVector.h:193:31: error: indexOfKey was not declared in this scope

+

This error appears when your gcc version is too recent. Install gcc/g++/g++-multilib 4.6.x versions. See Customizing with the .userconfig file for more information.

+
+

Community Note: It is possible to use gcc 4.7.x with slight modifications to the B2G code (gcc will guide you) but you won't get any help! Neither with modifying the code nor with bugs you encounter.

+
+

arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)

+

If you see this message, it most likely means that free memory is lacking. Ensure there is enough free memory before running ./build.sh. It should run fine if your system has 4GB of RAM.

+

"...is referenced by DSO" error

+

While building the emulator, if you get /usr/bin/ld: out/host/linux-x86/obj/EXECUTABLES/triangleCM_intermediates/triangleCM: hidden symbol `_XGetRequest' in out/host/linux-x86/obj/STATIC_LIBRARIES/libSDL_intermediates/libSDL.a(SDL_x11dyn.o) is referenced by DSO.

+

You can get this with some versions in binutils. If you run Debian Stable, you can use the gold linker by installing the package binutils-gold. Note that the gold linker is already installed by binutils, but it's not used by default; binutils-gold does just that.

+

If you get build errors while the build system is running tests

+

Sometimes (especially after build tool or operating system updates) you'll get weird errors like this when the build system runs its post-build tests:

+ 
Generating permissions.sqlite...
+test -d profile || mkdir -p profile
+run-js-command  permissions
+WARNING: permission unknown:offline-app
+WARNING: permission unknown:indexedDB-unlimited
+build/permissions.js:122: NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPermissionManager.add]
+make[1]: *** [permissions] Error 3
+make: *** [gaia/profile.tar.gz] Error 2
+

In this situation, try deleting the gaia/xulrunner-sdk directory and re-pulling the code:

+ 
rm -r gaia/xulrunner-sdk
+
+

This deletes the downloaded, precompiled copy of XULRunner that the build system retrieves automatically; on your next build, a new copy of XULRunner will be automatically retrieved.

+

Cannot fetch platform/libcore

+

If you tried to configure your B2G build for Nexus S (./config.sh nexus-s) and got an error related to libcore, it is because of a problem with the linaro git that feeds into this. To fix this, checkout the B2G manifest like so:

+ 
git clone https://github.com/mozilla-b2g/b2g-manifest.git
+

Edit the nexus-s.xml file in this repo, replacing the linaro git entry with a reference to the aosp entry, which should read like so:

+ 
<default revision="refs/tags/android-4.0.4_r1.2"
+              remote="aosp"
+              sync-j="4" />
+

Commit these changes (git commit -a) and then change the config.sh file in the master branch of the main B2G repo that you checked out to point to your modified local manifest instead of the Mozilla one:

+ 
GITREPO=${GITREPO:-"file:///home/path/to/my/b2g-manifest"}
+

clang errors when building with Xcode 5 on Mac

+

If you are building on Mac OS X 10.8 with Xcode 5, you will likely see errors like the following:

+ 
clang: error: argument unused during compilation: '-include system/core/include/arch/darwin-x86/AndroidConfig.h'
+clang: error: argument unused during compilation: '-U DEBUG'
+clang: error: argument unused during compilation: '-U DEBUG'
+clang: error: argument unused during compilation: '-MF out/host/darwin-x86/obj/EXECUTABLES/obbtool_intermediates/Main.d'
+make: *** [out/host/darwin-x86/obj/EXECUTABLES/obbtool_intermediates/Main.o] Error 1
+

This is because Xcode 5 changes the g++ compiler in /usr/bin, which breaks the build process if you try to use it to compile. In order to work around the problem, edit the following line in build/core/combo/HOST_darwin-x86.mk:

+ 
HOST_CXX := g++
+

to

+ 
HOST_CXX := g++-4.6
+ifeq (,$(wildcard /usr/local/bin/g++-4.6))
+ HOST_CXX := g++
+endif
+

Next, you'll want to uninstall gcc, using brew (this assumes you've run the Mac OS bootstrap script — if not, you'll need to complete that step before continuing):

+ 
brew uninstall gcc-4.6
+

Now reinstall gcc with multilib and c++ support:

+ 
brew install --enable-cxx https://gist.github.com/artlogic/6988658/raw/aeb9d1ea098274ad3f3fe2637b9df7f308a8a120/gcc-4.6.rb
+

Make sure /usr/local/bin is on your PATH. You can do this temporarily by typing the following into the command prompt:

+ 
export PATH=/usr/local/bin:$PATH
+

You can make the above change permanent by adding it to the .bash_profile file in your home directory.

+

After you've set your PATH, make sure you can run both of the following commands:

+ 
gcc-4.6 -v
+
+g++-4.6 -v
+

If either of these commands fail, you may need to relink your gcc using brew with the following command:

+ 
brew link --overwrite gcc-4.6
+

It's also possible that /usr/bin/c++ is not pointing at clang++ as it should be with Xcode 5 installed. You can determine if it is by typing the following:

+ 
ls -l /usr/bin/c++
+

It should return something that looks like this:

+ 
lrwxr-xr-x 1 root admin 7 Sep 19 11:40 /usr/bin/c++ -> clang++
+
+

If c++ is pointing at something other than clang++, update it with the following commands:

+ 
sudo rm /usr/bin/c++
+
+sudo ln -s /usr/bin/clang++ /usr/bin/c++
+

Cannot pull files from backup directory

+

This could happen when the USB connection is broken while the script pulls data from device to computer.

+

When you run the script again, you'll probably get the following (the example is for the Peak device):

+ 
Pulling files from ../../../backup-peak
+cat: ../../../backup-peak/system/build.prop: No such file or directory
+Found firmware with build ID
+Pulling "libaudioeq.so"
+cp: cannot stat `../../../backup-peak/system/lib/libaudioeq.so': No such file or directory
+Failed to pull libaudioeq.so. Giving up.
+
+> Build failed! <
+
+Build with |./build.sh -j1| for better messages
+If all else fails, use |rm -rf objdir-gecko| to clobber gecko and |rm -rf out| to clobber everything else.
+

To solve this, it is not necessary to remove the whole objdir-gecko or out directories. Just remove the backup directory, like this (for the example above):

+ 
$rm -rf backup-peak
+

Next steps

+

After building, your next step depends on whether you built Boot to Gecko for the emulator or for a real mobile device; see the following articles for details:

+ +
+

Submitting bugs on B2G/Firefox OS/Gaia

+

Once you've got a B2G/Firefox OS build running, you'll probably want to start to file bugs against this specific version, so the Firefox OS community can improve things as effectively as possible. You'll want to file the bug on Bugzilla, under the "Firefox OS" project, but you should include version specifics:

+
    +
  1. To start with, tell us the major version number, e.g. 1.4.0.0-prerelease. This can be found on the device under Settings > Device Information.
    2. +
  2. You can provide more specific version identifiers by  returning the current hashes from the gaia and gecko repositories. This can be done like so: + 
    #!/bin/bash
+(cd gaia;  echo "gaia  $(git rev-parse HEAD)")
+(cd gecko; echo "gecko $(git rev-parse HEAD)")
    +
    3. +
diff --git a/files/it/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html b/files/it/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html new file mode 100644 index 0000000000..b2c3808168 --- /dev/null +++ b/files/it/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html @@ -0,0 +1,227 @@ +--- +title: Dispositivi compatibili +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS/Compatible_Devices +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices +--- +
+

Nota: Ogni dispositivo ha un proprio "nome in codice" da usare per la compilazione. Per esempio per compilare per il Nexus 6 scrivere:  ./build.sh nexus-6-l

+
+ +

Dispositivi di sviluppo

+ +

Questi dispositivi sono i dispositivi di riferimento ufficiali di Mozilla per lo sviluppo di Firefox OS. 

+ + + + + + + + + + + + + + + + + + + +
Z3 Compact (Kitkat)Z3 (Kitkat)Flame
aries-kkleo-kkflame-kk
+ +

 

+ +

Dispositivi supportati dalla Community

+ +

Nexus

+ +

Questi dispositivi sono (quasi del tutto) automaticamente supportati da Firefox OS poiche' sono dispositivi di riferimento di Google per AOSP (Android Open Source Project).

+ + + + + + + + + + + + + + + + + + + +
Nexus 6Nexus 5Nexus 4
nexus-6-lnexus-5-lnexus-4-kk
+ +

Sony

+ +

Questi dispositivi usano il programma Open Device di Sony Mobile, che intende supportare tutti i moderni dispositivi Xperia per l'AOSP. Attualmente 10 dispositivi su 3 piattaforme sono candidabili alla compilazione.

+ +

Questi dispositivi sono costruiti sulla base Lollipop AOSP.

+ +
+

Finora nessun dispositivo Sony supporta l'uso della fotocamera. Questo comunque rientra tra i lavori da fare per gli sviluppatori dei dispositivi Sony.

+
+ +

Piattaforma Sony Shinano

+ + + + + + + + + + + + + + + + + + + + + + +
Z3Z3 CompactZ3 Tablet CompactZ2
leo-laries-lscorpion-lsirius-l
+ +
+
+ +

Piattaforma Sony Rhine

+ +
+

Rhine devices use a legacy NFC chip so this feature is currently missing. See bug 1226720

+
+ + + + + + + + + + + + + + + + +
Z1Z1 Compact
honami-lamami-l
+ +

Sony Yukon Platform

+ + + + + + + + + + + + + + + + + + + + + + +
T2 UltraT3M2E3
tianchi-lseagull-leagle-lflamingo-l
+ +

CyanogenMod Supported Devices

+ +

Here be dragons!

+ +

Legacy Devices

+ +

Some old devices are no longer maintained directly by Mozilla, but a community of developers keeps these devices alive (yay open source!).

+ +

Obsolete Devices

+ +

Several old devices are no longer maintained, and do not have a community to keep them alive. The current status of these devices is unknown, which probably means they cannot be built on Firefox OS master branches.

+ + + + + + + + + + + + + + + + + + + + + + +
Geeksphone PeakGeeksphone KeonZTE OpenTCL Fire
peakkeoninarihamachi
+ + + + + + + + + + + + + + + + + + + + + + +
Samsung Galaxy S2Galaxy NexusNexus SNexus S 4G
galaxy-s2galaxy-nexusnexus-snexus-s-4g
+ + + + + + + + + + + + + + + + + + + + + + +
Foxconn InFocusVia VixenPandaboardRaspberry Pi
flatfishvixenpandaboardrpi
diff --git a/files/it/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/it/archive/b2g_os/building_and_installing_firefox_os/index.html new file mode 100644 index 0000000000..2d606cdb93 --- /dev/null +++ b/files/it/archive/b2g_os/building_and_installing_firefox_os/index.html @@ -0,0 +1,120 @@ +--- +title: Compilare e installare B2G OS +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS +tags: + - B2G OS + - Documentazione compilazione +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +

+ +
+

Poiché B2G OS è attualmente in sviluppo ed in stato di pre-release, il modo migliore per assicurarti di avere installata la versione più aggiornata è compilarla ed installarla da solo. Gli articoli mostrati in questa pagina ti guideranno attraverso compilazione e l'installazione di B2G OS su un emulatore, su un dispositivo compatibile o sull'interfaccia Gaia del browser Firefox.

+
+ + + + + + + + +
+

Ottenere e compilare B2G OS

+ +
+
Sommario del processo di compilazione di B2G OS
+
Compilare ed installare B2G OS richiede un consistente impiego di tempo, banda e potenza computazionale. Questa pagina delina gli obiettivi del processo di compilazione ed i relativi passaggi per aiutare l'utente lungo il suo percorso.
+
Prerequisiti per la compilazione
+
Di cosa avrai bisogno (e cosa è necessario fare) prima di compilare B2G OS per la prima volta.
+
Preparare la tua prima compilazione
+
Prima che tu possa compilare B2G OS, sarà necessario clonare il repository e configurare la compilazione. Questo articolo spiega come fare.
+
Compilare B2G OS
+
Come compilare B2G OS.
+
Add-on per l'installazione di B2G OS
+
L'add-on B2G installer aiuta a risolvere il problema, di non poco conto, di non poter ridistribuire compilazioni dell'intero sistema operativo, per via dei cd. "blobs" (ovvero i componenti proprietari). Questo articolo illustra il funzionamento dell'add-on e come installarlo.
+
+ +

Ulteriore materiale di riferimento

+ +
+
Compilare B2G OS per Flame su Mac OS X
+
Una guida scritta dalla comunità per compilare B2G OS per il dispositivo di riferimento Flame, su Mac OS X.
+
Dispositivi compatibili
+
Un elenco ufficiale delle dei dispositivi di sviluppo che supportano B2G OS.
+
Creare e applicare pacchetti di aggiornamento per B2G OS
+
Questa guida estremamente dettagliata spiega come creare pacchetti di aggiornamento OTA/FOTA, che possano poi essere distribuiti ai dispositivi degli utenti per fornire aggiornamenti software.
+
Compilare e installare community builds FOTA
+
Una guida scritta dalla comunità per creare ed installare pacchetti FOTA.
+
Foglio di riferimento per le variabili di compilazione di B2G OS
+
Un utile riferimento per tutte le variabili di compilazione di B2G, Gaia e Gecko e dei comandi di cui potresti avere bisogno durante le operazioni di compilazione legate a B2G OS.
+
+ 		+

Installare B2G OS e/o Gaia

+ +
+
Scegliere come eseguire Gaia e B2G OS
+
Puoi usare Gaia all'interno di B2G, oppure far girare B2G OS su un dispositivo mobile o ancora su un simulatore per desktop. Questa guida ti aiuterà a decidere quale scelta è la migliore per le tue esigenze.
+
Compilare il simulatore di B2G OS
+
Una guida per compilare il simulatore di B2G OS, che permette di eseguire Gaia e le Web apps in un ambiente basato su Gecko simile ai dispositivi odierni, sul tuo computer desktop.
+
Utilizzare degli emulatori di B2G OS
+
Una guida per compilare ed utilizzare gli emulatori di B2G OS, con spiegazioni su quali usare a seconda della necessità.
+
Installare B2G OS su dispositivo mobile
+
Come installare B2G OS su un vero dispositivo mobile.
+
+
+ +

 

diff --git a/files/it/archive/b2g_os/building_and_installing_firefox_os/sommario_del_processo_di_compilazione_di_b2g_os/index.html b/files/it/archive/b2g_os/building_and_installing_firefox_os/sommario_del_processo_di_compilazione_di_b2g_os/index.html new file mode 100644 index 0000000000..e7a0f71285 --- /dev/null +++ b/files/it/archive/b2g_os/building_and_installing_firefox_os/sommario_del_processo_di_compilazione_di_b2g_os/index.html @@ -0,0 +1,195 @@ +--- +title: Sommario del processo di compilazione di B2G OS +slug: >- + Archive/B2G_OS/Building_and_installing_Firefox_OS/Sommario_del_processo_di_compilazione_di_B2G_OS +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary +--- +

+ +
+

Building and installing B2G OS requires a significant amount of time, network bandwidth, and computational power. Unfortunately, along the way, things are liable to go wrong. This page outlines the goals of the build process and the steps of that process in order to help users along the way. Details of each step are discussed in the linked pages.

+
+ +
+

Note: The B2G OS build process is full of references to 'B2G' or 'Boot2Gecko'. 'Boot2Gecko' was the original code name of the B2G OS project.

+
+ +

The Build Goal: three 'image' files

+ +

The overall purpose of the build process is to build three files that can be installed onto a device compatible with B2G OS.

+ + + + + + + + + + + + + + + + +
boot.imgThe Linux kernel and a root filesystem image, the latter providing a usable set of basic Unix tools.
system.imgThe core of B2G OS including parts of Gonk, the port of Gecko, and the b2g executable.
recovery.imgA Linux kernel and a root filesystem image along with a simple tool to enable users to fix a bad installation.
+ +

Once the three images have been created, they can be installed onto a device.

+ +

B2G OS is built on top of the lower levels of Android Open Source Project (AOSP). The AOSP tools adb and fastboot provide powerful tools to access and manipulate a device. Specifically, the command adb reboot bootloader instructs a connected device to reboot and pause at the early bootloader stage. The command fastboot flash $partition $image can be used to install an image onto the device.

+ +

The Boot Image

+ +

The Boot Image (boot.img) is a combination of the Linux kernel and an initial root partition providing the core utility software and initialization scripts. The latter will be copied into device memory for efficient use by the device and therefore is called a "ramdisk". The Boot Image will be copied to the 'boot' partition on the device and the contents of the ramdisk are visible starting in the root directory when the device filesystem is accessed at runtime, such as when using adb shell.

+ +

The Boot Image also establishes the permissions of the root user in the default.prop file in the root directory.

+ +

It is also possible to modify an existing boot image by inspecting the file, splitting the file into the kernel and ramdisk image, extracting the contents of the ramdisk image, modifying those contents, re-assembling the ramdisk image, then rebuilding a functional boot.img. See, for example, the Alcatel One Touch Fire Hacking (Mini) Guide page.

+ +

Boot Images can be tested before being installed by 'sideloading' them; the device can be started and paused in the bootloader and then fastboot can be used to boot from the Boot Image without installing it using the command fastboot boot boot.img.

+ +

The System Image

+ +

The System Image (system.img) provides the core of B2G OS:

+ + + +
+

See the B2G OS platform guide for more information about the platform architecture.

+
+ +

The System Image will be copied to the system partition on the device and will be visible in the /system/ directory when the device filesystem is accessed at runtime.

+ +
+

Note: The System Image also provides the binary blobs that may be used by the device, notably the RIL (Radio Interface Layer) blob controlling the cellular radio on the device.

+
+ +

The Recovery Image

+ +

The Recovery Image (recovery.img) contains the same kernel and a similar ramdisk as present on the Boot Image partition. The recovery image however uses a different initialization script, which leads the user to a set of recovery commands accessible using the hardware buttons on the device.

+ +

The Recovery Image will be copied to the recovery partition on the device, which is not mounted onto the filesystem at regular runtime.

+ +

The Build Process: setup, configure, build, install

+ +

The overall process of building and installing B2G OS involves four steps:

+ + + + + + + + + + + + + + + + + + + + +
SetupObtain copies of all the programs used by the build process, such as the right compilers and libraries.
ConfigureDownload the source code that will be built and create the .configure file that defines environmental variables specifying the paths and other values used in the build.
BuildBuild the Gecko profile of the user and the Gaia web applications for the device.
InstallInstall the files on a device.
+ +

 

+ +

Setup

+ +

Inital setup must be done to ensure the computer running the build has all of the software required during the build, such as compilers and build tools.

+ +

This step can be done by hand or using a script. Details are discussed in the B2G OS build prerequisites page.

+ +
+

Note: On UNIX and UNIX-like machines, the presence of the required software can be checked using the unix command which with the name of the required program as a parameter.

+
+ +

Configuration

+ +

The actual build process starts with obtaining a copy of the B2G OS (or B2G) software, usually by creating a Git clone of the B2G project. The build configuration will both obtain copies of all the source code which is to be built and create the .config file that specifies variables for the build.

+ +

This is run with the config.sh script. Details are discussed in the Preparing for your first B2G build page.

+ +

The configure script needs a parameter specifying the type of device to build. The build names are code names linked to the CPU architecture rather than a specific device, and there is currently no way to establish which build works for which physical device. A list of available code names can be found here.

+ +

The configure step will also use the Android Open Source Project repo tool to download (or update) a copy of all the code used in the build. These copies will be stored in the .repo/projects directory. Due to this activity, the configure step can take a long time and will download a lot of data.

+ +

Build

+ +

The build step will actually compile all of the source code and produce the output images.

+ +

This is run with the build.sh script. Details are discussed in the Building B2G OS page.

+ +

By default, the build step is monolithic, attempting to build everything at once from the Android Open Source Project tools to the Linux kernel to the Gaia web applications. When the build fails, it can sometimes be unclear in which step it has failed.

+ +

It is possible to build only certain parts of the whole B2G  stack. For example, the Gecko system only can be built by calling the build script with the gecko parameter. Similarly, Gaia can be built on its own using the gaia parameter. These parts can then be installed separately onto the device as explained next.

+ +

It is also possible to build the images discussed in the first part of this page. For example, the system image can be built using ./build.sh out/platform/$target/system.img, where the $target parameter is the same as given in the Configuration step.

+ +

Install

+ +

The install step will place the newly compiled code onto a device. This is run with the flash.sh script.

+ +

Individual parts of the build can be installed by adding a parameter to the flash script. For example, it is possible to install only the gaia web applications by specifying ./flash.sh gaia.

diff --git a/files/it/archive/b2g_os/debugging/index.html b/files/it/archive/b2g_os/debugging/index.html new file mode 100644 index 0000000000..12a896d185 --- /dev/null +++ b/files/it/archive/b2g_os/debugging/index.html @@ -0,0 +1,84 @@ +--- +title: Debugging on Firefox OS +slug: Archive/B2G_OS/Debugging +tags: + - B2G + - Debugging + - Firefox OS + - NeedsTranslation + - QA + - Testing + - TopicStub +translation_of: Archive/B2G_OS/Debugging +--- +
+

There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system. This section of the site provides articles covering the different tools at your disposal to debug your Firefox OS code.

+
+

Debugging apps

+

When debugging your web apps, the best tool at your disposal is Mozilla's powerful App Manager, which allows you to run your apps directly on a real device or simulator, update any changes instantly, and debug them directly on the device using Mozilla's excellent developer tools. This should be your first choice, especially for app/Gaia debugging.

+
+
+ Using WebIDE
+
+ The WebIDE is the replacement for the App Manager. Like the App Manager, it enables you to run and debug Firefox OS apps using the Firefox OS Simulator or a real Firefox OS device. However, it also provides an editing environment for you to create and develop apps.
+
+ Using the App Manager
+
+ The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.
+
+ Debugging out of memory errors on Firefox OS
+
+ This article describes how B2G's multiprocess architecture affects what the phone does when we run out of memory, and how to understand and debug OOM crashes.
+
+

Debugging Gaia/B2G

+

If you want to debug code from the Gaia apps suite or B2G itself, the following tools will be of use to you.

+
+
+ Debugging using the desktop B2G client
+
+ You can use the dedicated B2G desktop application (and associated tools) to debug multiple aspects of B2G and Gaia.
+
+ Firefox OS crash reporting
+
+ This page details how to handle crash reporting on Firefox OS, including retrieving crash reports, and forcing crashes.
+
+ Debugging B2G using gdb
+
+ The popular gdb debugger can be used to debug Firefox OS and web apps running on a device, or on an emulator. This guide will show you how it's done.
+
+ Debugging B2G using Valgrind
+
+ Valgrind gives developers access to information about memory allocations, threads, and other information important to performance. This guide shows how to run Valgrind either on desktop B2G or select phone hardware.
+
+ Getting NSPR logs in B2G
+
+ You can use NSPR logs to record HTTP and other networking.
+
+ Debugging OpenGL
+
+ How to debug OpenGL code on Firefox OS.
+
+

General setup and information

+

The following articles provide information on individual aspects of setup for Firefox OS development. The chances are that you won't need these, especially if you are just debugging apps using the App Manager. But we have made them available here in case you do.

+
+
+ Developer settings for Firefox OS
+
+ There are a number of settings options available for developers on Firefox OS. This guide explains what they do and how to take advantage of them.
+
+ Installing and using ADB
+
+ Many aspects of Firefox OS development require installation of adb, the Android Debug Bridge. This article explains how to do that, and shares some common useful ADB commands.
+
+ On-device console logging
+
+ How to log to console on a Firefox OS device, and how to access the resulting logs for review on your computer.
+
+ Connecting a Firefox OS device to the desktop
+
+ This short guide explains how to set up your Firefox OS device and your desktop so that the desktop can communicate with the device over USB.
+
+ Setting up to debug Firefox OS code
+
+ Before you can begin using most of the tools integrated into Firefox for debugging code running under Firefox OS, you need to do a little configuration work. This article explains what you need to do.
+
diff --git a/files/it/archive/b2g_os/debugging/installazione_adb/index.html b/files/it/archive/b2g_os/debugging/installazione_adb/index.html new file mode 100644 index 0000000000..52672aa1be --- /dev/null +++ b/files/it/archive/b2g_os/debugging/installazione_adb/index.html @@ -0,0 +1,63 @@ +--- +title: Installazione e uso di ADB +slug: Archive/B2G_OS/Debugging/Installazione_ADB +translation_of: Archive/B2G_OS/Debugging/Installing_ADB +--- +
+

Molti aspetti dello sviluppo del SO Firefox richiedono l'installazione di ADB, l'Android Debug Bridge. Questo articolo spiega come fare, e condivide alcuni comandi ADB comuni utili.

+
+

Installazione di ADB

+

Puoi scaricare ed installare adb come parte del pacchetto Android SDK, per Mac, Linux o Windows — visita la pagina Ottenere l'Android SDK.

+

Le distribuzioni Linux più nuove hanno adb già nei loro repositories. Per Ubuntu 12.10 e successivi, esegui il seguente comando:

+
sudo apt-get install android-tools-adb
+

O per Fedora 18/19:

+
sudo yum install android-tools
+

O su OSX tramite Homebrew:

+
brew install android-platform-tools
+

Se la tua distribuzione non dispone di pacchetti per adb (es. Ubuntu 12.04 o Fedora 17), sarà necessario installare il pacchetto Android SDK per la tua piattaforma (avrai bisogno dell'ADT Bundle, non dell'opzione SDK Tools Only). Esegui quindi il loro gestore di pacchetti, $SDK_HOME/tools/android, e usa la GUI per installare "Android SDK Platform-tools".

+

Scopri dove adb viene installato (di solito in usr/bin, eventualmente anche dentro adt/platform-tools, a seconda di come lo hai installato). Assicurati di aggiungere questa cartella alla tua PATH. Questo può esser fatto aggiungendo la riga

+
PATH=$SDK_HOME:$PATH
+

sostituendo $SDK_HOME con il percorso dell'Android SDK, al tuo file ~/.bashrc o equivalente.

+

Risoluzione dei problemi

+

Se stai installando la versione 64-bit, e ottieni un errore "File non trovato" quando esegui 'adb' anche se il file è presente, è necessario installare le librerie di compatibilità a 32-bit. Per fare questo con apt:

+
sudo apt-get install ia32-libs
+

Comandi ADB comuni

+

Le sezioni seguenti spiegano alcuni comandi adb comuni, utili.

+

Riavvio del processo b2g

+

b2g è l'equivalente di un'applicazione XULRunner in esecuzione sul telefono in cima ad un kernel basato su Android. A volte potresti volerlo riavviare; questo è un modo per ripristinare l'ambiente applicativo senza riavviare l'intero dispositivo. E' possibile effettuarlo inserendo quanto segue nel tuo terminale mentre il tuo dispositivo è connesso al tuo computer (o durante l'esecuzione del debugger):

+
adb shell killall b2g
+

Abilitazione port forwarding per il debug

+

Per abilitare semplicemente il port forwarding (trasferimento dati tramite una specifica porta; per esempio se stai usando il Gestore di Applicazioni per il debug di applicazioni su un dispositivo Firefox OS), immetti il seguente comando nel tuo terminale:

+
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
+

Avrete bisogno di fare questo ogni volta che il telefono viene riavviato o scollegato e poi ri-collegato. È possibile modificare il numero di socket, se necessario.

+

Forwarding delle porte a una macchina locale

+

Per il forwarding delle porte a un computer locale, è necessario scaricare i binari netcat e ssh, ed eseguire i seguenti comandi:

+
# questo è un trucco enorme, ma di fatto funziona...
+host$ adb forward tcp:7979 tcp:6969
+
+# crea qualche named pipe in modo da fare un netcat bidirezionale
+phone$ mknod readback p
+host$ mknod readback p
+
+# questo stabilisce una connessione all'host usata una volta sola
+# ascolto sulle porte 6969 e 5959 e inoltro di tutte le informazioni tra loro
+phone$ ./netcat -l -p 6969 < readback | ./netcat -l -p 5959 > readback
+# connessione alla porta 7979 (porta 6969 sul dispositivo) e il server ssh locale e inoltro di tutte le informazioni tra loro
+host$ ./netcat localhost 7979 < readback | ./netcat localhost 22 > readback
+
+# ora, quando ci colleghiamo alla porta 5959 sul telefono, sarà come connettersi al server ssh sull'host
+
+# uso inverso di netcat per impostare una connessione ssh all'host e inoltro della porta 9999 sul dispositivo verso il 'localhost:8000' (questo potrebbe essere qualsiasi cosa come 'google.com:80')
+phone$ ./ssh localhost -p 5959 -L 9999:localhost:8000
+

Questo inoltrerà la porta 9999 sul dispositivo verso la porta 8000 dell'host.

+

Alternativamente, puoi usare un server ssh (dropbear e host_key) direttamente sul dispositivo, usando i comandi seguenti:

+
phone$ DROPBEAR_PASSWORD=root ./dropbear -p 9000 -F -v -a -r host_key ./dropbear
+host$ adb forward tcp:8888 tcp:9000
+# l'autenticazione con chiave pubblica è stata hard-coded per avere successo (assicuratevi di avere una chiave pubblica per ssh da usare)
+host$ ssh -vvv root@localhost -p 8888 -R 9999:people.mozilla.org:80
+
+

Ulteriori risorse:

+ diff --git a/files/it/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html b/files/it/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html new file mode 100644 index 0000000000..648fcb8288 --- /dev/null +++ b/files/it/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html @@ -0,0 +1,197 @@ +--- +title: Filing bugs against Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS +translation_of: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS +--- +
+
+
 
+
+ +
Questo articolo fornisce una guida per l'archiviazione di errori (bugs) individuati nel contesto del progetto Firefox OS , che include anche Gaia e B2G .
+
+ +

Bugzilla

+ +
+
+

Come nella maggior parte dei progetti Mozilla, Bugzilla viene utilizzato per gestire lo stato di bugs e problemi individuati in programmi appartenenti al progetto. Dopo aver scopeto un bug puoi archiviarlo in Bugzilla  - nota che esiste un prodotto specifico per Firefox OS, contenente componenti che trattano argomenti che possono essere classificati nel contesto di Gaia, Gonk e Gecko. Si consiglia di utilizzare questo componente per archiviare i bugs individuati in Firefox OS, Gaia, etc.

+
+
+ +

Archiviazione dei bugs

+ +

Per archiviare un bug, è possibile utilizzare questo modello proposto da Bugzilla e seguire le istruzioni riportate qui di seguito nel compilarlo.

+ +

Campi obbligatori e facoltativi

+ +

Quando si archivia un bug, alcuni campi sono obbligatori:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CampoDescrizione
ComponenteScegliete la categoria di appartenenza del bug. Se non avete idea di quale categoria assegnare, scegliete la categoria "Generale".
SommarioFornite un sintesi della descrizione del bug
DescrizioneDescrivete chiaramente la situazione. Un buon bug dovrebbe contenere una descrizione, passo per passo, della procedura per riprodurre il problema (Steps To Reproduce -STR), dei risultati che uno si aspetta e dei risultati riscontrati. Si prega di indicare anche la frequenza di riproduzione (cioè quante volte il bug appare se ripetete i passi più e più volte).
Informazione relativa al BuildAndate a Impostazioni> Informazioni sul dispositivo> Ulteriori informazioni e menzionate nel bug le seguenti caratteristiche: versione del sistema operativo, il numero dei build, la Versione della Piattaforma,  l' identificatore del Build, l' Aggiornamento del canale e l'informazione del Git Commit. (Se si dispone di un computer Mac / Linux con adb e git installato, è possibile eseguire questo script e incollare l'output dello script del bug.)
Immagini delle schermateSi prega di allegare una immagine dello schermo che possa essere utile per analizzare il bug. (Sul dispositivo Fiamma, tenere premuto il tasto Power e Abbassa Volume simultaneamente per 2 secondi fino a quando il telefono non mostri una notifica della avvenuta acquisizione ddell'immagine dello schermo. Succesivamente trasferire l'immagine acquisita sul computer utilizzando un attacco USB.)
VideoSe il bug riguarda transizioni dello schermo che sono difficili da catturare attraverso l'acquisizione di immagini delle schermate, si prega di girare un video. Caricate il file del video come allegato al bug oppure caricate il video su YouTube e poi allegate l'indirizzo dell'URL del video utilizzando la funzione di copia-incolla .
Registrazioni ADBSe il vostro computer contiene una installazione di ADB, per favore collegatelo al telefono ed eseguite il comando | adb logcat |. Si prega di inserire l'output di questo comando in un file di testo e quindi allegarlo al bug.
+ +

The following fields are optional:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CampoDescrizione
Dipedenze/blocchiMostare la dipendenza fra i vari bugs.
Parola chiaveParole chiave per Bugzilla. Gruppi specifici le useranno per rintracciare il bug.
LavagnaContiene etichette. Inserisci etichette utili per rintracciare il bug. Si consiglia di non rimuovereetichette assegnate da altri senza permesso.
Vedi AncheA volte due diversi problemi sono in qualche modo collegati. La loro connessione puo' essere riportata qui
BandierineBandierine per il monitoraggio dello stato; la bandierina più utilizzata nei bugs del sistema operativo Firefox e' "Blocca-B2G". Se un bug contiene la bandierina blocco-B2G, significa che e' necessario prestare più attenzione alle specificahe del bug in quanto puo' bloccare la distribuzione.
SicurezzaSe un bug è relativo alla sicurezza dei dati personali, la perdita di guadagno o simili questioni, selezionat la casella di controllo cosicche sarà visiable solamente ai dipendenti interessati.
+ +

Per ulteriori informazioni sui campi Bugzilla, è possibile visualizzare la pagina dei campi Bugzilla su Bugzilla.

+ +

Archiviazione di bugs di localizzazione

+ +

Quando uncontrate un stringa non tradotta puo' significare due cose:

+ + + +

Come archiviare bugs di localizzazione (l12y)

+ +
    +
  1. Nel sistema operativo Firefox, andate su Impostazioni> Informazioni sul dispositivo> Ulteriori informazioni e attivate il menu Developer
    2. +
  2. Andate a Impostazioni> Developer e attivate pseudo-localizzazione.
    3. +
  3. Andate a Impostazioni> Lingua e scorrere fino alla fine per selezionare inglese accentato.
    4. +
  4. Tornate indietro e guardate la stringa non tradotta. Se appare in normale inglese e non inglese accentato, si tratta molto probabilmente di un poblema legato allalocalizzabilità (l12y).
    5. +
  5. In Bugzilla, aprite un bug sotto la sezione del prodotto 'Firefox OS'. Selezionate il componente dove la stringa non tradotta appare. Aggiungete 'l12y' nel campo Parola chiave.
    6. +
  6. Si prega di compilare tutti gli altri campi obbligatori.
    7. +
+ +

Tipiche Parole chiave

+ +

La seguente tabella fornisce informazioni sulle tipiche parole chiave che vedrete utilizzate nei bugs del sistema operativo Firefox.
+
+
+ Si deve sempre indicare il build / l'OS / la piattaforma (e) utilizzati per verificare il bug nei commenti relativi all' errore riscontrato, prima di modificare lo stato a verificato. Se il bug è riportato su tutte e tre le piattaforme e si dispone di una sola piattaforma per verificare la correzione, andate avanti e annotate le vostre osservazioni nel bug, ma non segnalate il bug come verificato. Tutte le piattaforme devono essere controlle prima di modificare lo Stato a verificato.
+
+ Infine, se altri bug sono stati contrassegnati come un duplicato del bug che state verificando, assicuratevi di controllare e annotare pure quelli. Spesso i programmatori indicano bug correlati, ma non identici, come duplicati  e questi possono essere trascurati se non appaiono selezionati.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Parola ChiaveDescrizione
metaIndica che il bug è un bug di monitoraggio dello stato. Mozilla usa questa etichetta per controllare lo stato di vari bugs o delle implementazioni delle storie degli utenti. Una volta segnalato in questo modo, i programmatori non dovrebbero mettere delle pezze sopra a questi bugs. Si ricorda che i responsabili di progetto e il personale che si occupa della qualita' usano meta bugs per sequire lo stato delle varie applicazioni.
qablockerUtilizzare questa parola chiave per i bug che stanno bloccando test di verifica (manuali o automatizzati di un aspetto specifico) e che devono essere risolti prima della scadenza relativa alla pubblicazione della prossima versione Beta o RC.
qawantedUtilizzare questa parola chiave per i bug che hanno bisogno di più informazioni, che richiedono di essere riprodotti o verificati di nuovo, o che sono duplicati (ma non si riesce a trovare il bug originale che e' stato duplicato). Sulla lavagna viene riportato l' avanzamento delle verifiche di qualita' obbligatorie; questa parola chiave deve essere rimossa quando le verifiche di qualita' richieste sono state completate.
regression +

Questa parola chiave significa che il problema è stato risolto, ma poi è ritornato (regredito) e il bug in questione è un nuovo bug, archiviato per registrare la regressione. Può anche riferirsi a problemi al di fuori quelli identificati nella registrazione iniziale del bug o riscontrati nei test di fumo e che sono stati individuti nei build attuali e che funzionavano in build precedenti. Il monitoraggio di tali errori aiuta ad identificare aree di fragilita' e soggette a rottura. Tali errori sono utili per la identificazione di nuovi test da aagiungere ai test di verifica che appaionno nelle liste dei pre-Test e dei test di fumo.

+
regressionwindow-wanted +

Indica che il bug è una regressione e che sarebbe importante che qualcuno identificasse il momento in cui è accaduto e il relativo specifico controllo.

+
steps-wantedMette in evidenza un bug che potrebbe migliorare se qualcuno identificasse la procedura per riprodurlo.
verifymeSignifica che questo bug è pronto per essere verificato con l'ultima build FX OS da una persona diversa dal contatto di verifica qualita' indicato nel bug. Il bug contiene specifici dettagli di configurazione della macchinada utilizzarsi per verificare la correzione. Si dovrebbe cercare di riprodurre l'errore, e, se d'accordo che la stato Fixed è corretto, cambiare lo stato a verificato.
+  
crashAggiungete questa parola chiave se si incontra un rottura del programma in FX OS.
+ +
+

Nota: È possibile fare riferimento alle "Guida di come scrivere un Bug". La pagina WIKI di Mozilla B2G QA ha anche alcune risorse utili sulla gestione dei bug del sistema operativo di Firefox; le pagine più utili sono Uso di Bugzilla  e Incoming triage bug per Firefox OS.

+
+ +
+

Note: For more information on handling bugs during Gaia development, read Submitting a Gaia patch.

+
+ +

 

diff --git a/files/it/archive/b2g_os/developing_firefox_os/index.html b/files/it/archive/b2g_os/developing_firefox_os/index.html new file mode 100644 index 0000000000..7aceb1f5a9 --- /dev/null +++ b/files/it/archive/b2g_os/developing_firefox_os/index.html @@ -0,0 +1,45 @@ +--- +title: Developing Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Developing_Firefox_OS +--- +
+

This section provides useful documentation covering different ways in which the Firefox OS experience can be modified/customized during the build or app writing process, and how you can help to develop the platform.

+
+
+
+ Quickstart guide to Gaia development
+
+ Gaia is the collection of web apps which make up the front end of Firefox OS. Everything you see on the screen in Firefox OS is built using open Web technologies. This includes the home screen and all the default apps. This guide provides a quick and simple guide to getting started with modifying Gaia.
+
+ Build system primer
+
+ This article explains how Gaia's build system works, including the makefile, the build process, environment variables, and potential customizations.
+
+ Hacking Gaia
+
+ This article provides a detailed guide to modifying Gaia.
+
+ Market customizations guide
+
+ Market customizations allow you to specify build-time customization instructions (for example, which apps should be included in your build) in separate directories, without modifying the core Gaia repo. You can include your own customizations in distinct directories, or use the preexisting directories that come with the source. These customizations are specified with build options. In this article we look in detail at how to create and use these customizations.
+
+ Modifying the hosts file
+
+ A guide to what can be achieved by modifying the Firefox OS hosts file.
+
+ Customization with the .userconfig file
+
+ How to customize the build and execution of Firefox OS by changing the .userconfig file.
+
+ Customizing the keyboard in Firefox OS apps
+
+ This guide shows how to customize the keyboard in your Firefox OS apps.
+
+ Localizing Firefox OS
+
+ A guide to localising the Firefox OS platform, making it available in your preferred languages.
+
diff --git a/files/it/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html b/files/it/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html new file mode 100644 index 0000000000..05e211521d --- /dev/null +++ b/files/it/archive/b2g_os/developing_firefox_os/localizing_firefox_os/index.html @@ -0,0 +1,188 @@ +--- +title: Localizzazione di B2G OS +slug: Archive/B2G_OS/Developing_Firefox_OS/Localizing_Firefox_OS +tags: + - B2G OS + - Localizzazione +translation_of: Archive/B2G_OS/Developing_Gaia/Localizing_B2G_OS +--- +

+ +
+

In questa guida, vi mostreremo quanto è semplice localizzare B2G OS, soprattutto per quanto riguarda Gaia e le applicazioni. Iniziermo aiutandoti ad impostare il tuo computer, assistendoti nella localizzazione delle stringhe di Gaia e, infine, nel performare i test L10n sul lavoro svolto.

+
+ +
+

Nota: Questa è una guida pensata per aiutare nella localizzazione di B2G OS. Gli sviluppatori interessati a scrivere applicazioni localizzabili devono invece iniziare con Localizzazione delle applicazioni B2G OS, e poi dare uno sguardo a Best practices L10n.

+
+ +

Recuperare gli strumenti

+ +

Per ottenere i file sorgenti di Gaia e testare il vostro lavoro di localizzazione sul vostro PC è necessario che vi assicuriate che le seguenti utility e i seguenti linguaggi siano installati:

+ +
+
GNU make
+
make è uno strumento utilie per la creazione di build direttamente da codice sorgente. Risulterà utile quando sarete pronti ad effettuare test l10n sul vostro lavoro con il vostro PC. Scaricare e installare make è facile e può essere effettuato direttamente dal sito web GNU. Se utilizzate Mac OSX, dovrete installare XCode e gli strumenti XCode's Command line dall'App Store.
+
git
+
git è il sistema di controllo di versioning utilizzato per archiviare il codice sorgente sviluppato attivamente di Gaia. Scaricare e installare git è semplice e può essere fatto direttamente dal loro sito web.
+
Python
+
Python è un linguaggio di programmazione che vi aiuterà a creare le build di Firefox OS per il testing l10n. Scaricare e installare Python è semplice e può essere effettuato direttamente dal loro sito web.
+
Mercurial (hg)
+
Mercurial (hg) è un altro systema di controllo di versioning che ospita le versioni stabili di Gaia usate per l'l10n e i repository localizzati. Scaricare e installare Mercurial è facile e può essere effettuato direttamente dal loro sito web.
+
compare-locales
+
compare-locales è uno script Python che aiuta i localizzatori a valutare il proprio lavoro e a separare il contenuto nuovo dal materiale già localizzato (chiamato diff). Scaricare e installare compare-locales è facile e può essere effettuato direttamente dalla pagina wiki di compare-locales (sudo apt-get install python-setuptools && sudo easy_install -U compare-locales). Tenete presente che è necessario solo se localizzate Gaia usando la linea di comando o un editor di testo. Se utilizzate Pootle, Transifex o Pontoon non ne avrete bisogno.
+
+ +

Creare un repository locale

+ +

Una volta che avrete installato il software elencato sopra, sarà il momento di scaricare i sorgenti e le stringhe localizzate sul vostro computer.

+ +
    +
  1. Da linea di comando andate nella directory dove archivierete i sorgenti di Gaia e le stringhe localizzate.
    2. +
  2. Usando hg, clonare il repository en-US inserendo questo comando: + 
    hg clone https://hg.mozilla.org/gaia-l10n/en-US
    +
    3. +
  3. Adesso clonate il vostro repository locale usando il comando seguente. Come esempio, la seconda linea di codice provvede un esempio di clonazione del repository in cinese tradizionale nella cartela adeguata: + 
    hg clone https://hg.mozilla.org/gaia-l10n/your-locale-code
+hg clone https://hg.mozilla.org/gaia-l10n/zh-TW/ B2G/gaia/locales/zh-TW
    +
    4. +
  4. Per l'italiano, il comando dovrebbe essere simile al seguente: + 
    hg clone https://hg.mozilla.org/gaia-l10n/it
    +
    5. +
  5. Now run the following command: + 
    LOCALE_BASEDIR=locales/ LOCALES_FILE=locales/languages_mine.json make
    +
    6. +
  6. I file locali dovrebbero essere indicati nel file languages_mine.json, che utilizza una struttura simile alla seguente: + 
      {
+  "en-US" : "English (US)",
+  "fr" : "Français (fr)"
+  }
    +
    7. +
  7. Infine scrivere questo comando per creare un diff tra il repo localizzato e quello en-US: + 
    compare-dirs en-US it
    +
    8. +
+ +

Adesso dovreste avere un diff di stringhe non localizzate pronte per essere tradotte! Tenete presente che se state iniziando una nuova localizzazione di B2G OS non sarà necessario creare un diff dato che tutte le stringhe dovranno essere tradotte.

+ +
+

Nota: Fare riferimento a questo gist per uno script che automatizzi la procedura.

+
+ +

Traduzione delle stringhe di Gaia

+ +

Il workflow per la traduzione delle stringhe di Gaia è fortemente influenzato dagli strumenti utilizzati per tradurre. Questa parte del processo è simile alla fase tradizionale di traduzione degli altri prodotti Mozilla. La pagina Fase della traduzione della Guida rapida alla localizzazione contiene una lista di tutti gli strumenti usati per tradurre le stringhe contenute nei prodotti Mozilla oltre a dei tutorial su come tradurre con tali strumenti. Questa pagina risulterà utile sia se farete parte di un team l10n che dovrà decidere quali strumenti usare per tradurre le stringhe di Gaia, ma anche se starete cercando il tutorial giusto per lo strumento che il vostro team utilizza.

+ +

Testing L10n per B2G OS

+ +

Sono due i metodi principali per effettuare testing l10n su B2G OS: build desktop e build mobile. Attualmente il metodo desktop è quello utilizzato maggiormente per il testing l10n.

+ +

Testing l10n su desktop

+ +
    +
  1. Scaricate e installate l'ultima nightly build di boot2gecko in versione desktop, scaricando il pacchetto corrispondente al vostro sistema operativo. Cercate i pacchetti che contengono la parola localizer. Questo indica che la build ha tutte le localizzazioni elencate in languages-all.json attivate.
    2. +
  2. Clonate l'ultima versione di Gaia andando alla directory del vostro PC dove volete che venga scaricato e scrivete questo comando nella linea di comando:git clone git://github.com/mozilla-b2g/gaia.git
    3. +
  3. Se il vostro team sta localizzando B2G OS per la prima volta, dovrete abilitare la vostra lingua (altrimenti preparatevi un bel drink in attesa che sia qualcun altro ad abitarla): +
      +
    1. Sempre da linea di comando, andate nella directory contenente la clonazione di Gaia ed eseguite questo comando per clonare il vostro repo locale: hg clone ssh://hg.mozilla.org/gaia-l10n/it
      2. +
    2. Aprite il file languages.json che si trova nella directory  shared/resources della directory locale appena clonata.
      3. +
    3. Aggiungete le informazioni della localizzazione secondo il formato: "it-IT" : "Italian (IT)", e salvate il file.
      4. +
    4. Infine eseguite il comando: make multilocale che abilita la vostra localizzazione nella build sul vostro PC.
      5. +
    +
    4. +
  4. Create il vostro profilo Gaia profile eseguendo questo comando: DEBUG=1 make -C gaia profile
    5. +
  5. Infine, eseguite B2G OS con il profilo della vostra localizzazione e iniziate il test. Per farlo, inserite questo comando: b2g/b2g -profile gaia/profile. Se state usando Mac OS X, eseguite questo  comando: /Applications/B2G.app/Contents/MacOS/b2g -profile gaia/profile
    6. +
  6. Per aggiornare le vostre build desktop dovrete semplicemente andare nella directory della clonazione del repo di Gaia e inserire questo comando: git pull
    7. +
+ +

Testing l10n su mobile

+ +

This section will come as more devices that support B2G OS become available to localizers.

+ +

Cosa cercare durante i test l10n

+ +

Effettuare un test sulla localizzazione per un sistema operativo mobile ha alcune similarità con gli analoghi test che si effettuano nella localizzazione di applicazioni desktop. Ecco alcune linee guida su cosa verificare quando eseguite i test di localizzazione sul vostro lavoro:

+ +
    +
  1. Controllate che la traduzione "stia" all'interno degli elementi testuali dell'interfaccia utente;
    2. +
  2. Assicuratevi che il tolo, lo stile e la terminologia siano coerenti con l'intero prodotto;
    3. +
  3. Cercate stringhe inglesi non ancora tradotte all'interno dell'interfaccia. Queste potrebbero essere codificate nel codice sorgente di Gaia o potrebbero essere causate da un errore nell'identificativo dell'elmento ID.
    4. +
  4. Accertatevi che tempo e data siano visualizzati correttamente, secondo gli standard della vostra regione.
    5. +
+ +

Individuate bachi relativi alla localizzazione

+ +

Ecco alcuni link a bugzilla, per farti degli esempi di bachi che sono stati incontrati nell'utilizzo di telefoni. Ti darà un'idea di dove guardare per individuare questa tipologia di errori e su come riportarli.

+ + + +

Regole generali per la segnalazione di bug di localizzazione:

+ + + +

Per coloro i quali utilizzano Moztrap, un buon modo per verificare la localizzazione di B2G OS è guardare ai test presenti sotto il tag "localization" di FirefoxOS e verificare se avreste passato quel stes sul vostro dispositivo.

+ +

E ora?

+ +

Ora sei pronto per iniziare la localizzazione! Apri il tuo strumento di localizzazione preferito per l10n, forza! Come sempre, se hai domande cui non hai trovato risposta in questo documento, puoi inviarle a mozilla.dev.l10n newsgroup.

diff --git a/files/it/archive/b2g_os/firefox_os_apps/building_blocks/index.html b/files/it/archive/b2g_os/firefox_os_apps/building_blocks/index.html new file mode 100644 index 0000000000..af56f0301c --- /dev/null +++ b/files/it/archive/b2g_os/firefox_os_apps/building_blocks/index.html @@ -0,0 +1,195 @@ +--- +title: Firefox OS Building Blocks +slug: Archive/B2G_OS/Firefox_OS_apps/Building_blocks +tags: + - Design + - Design patterns + - Firefox OS + - NeedsTranslation + - TopicStub + - UI + - building blocks +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks +--- +

+ +
+

The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all Gaia default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.

+
+ +

Using the Firefox OS Building Blocks

+ +

The code for the Firefox OS Building Blocks can be found in the Gaia Github repo under shared/style. Here, you can find a CSS file that contains the CSS for that particular Building Block, and a sub directory containing the HTML fragments and image assets. If you are creating your own standalone Web app, you can simply copy the CSS, HTML and image asset files across into your own project; if your app is intended to be installed on Firefox OS only (or you want to use these features only when the app is being used on Firefox OS), then you can link to the versions available inside Gaia.

+ +

The pages for the individual Building Block implementations can be found under the pages for each building block — see next section. These contain instructions on how to implement each one.

+ +
+

Note: The version 2.0 building block code is used in Firefox OS releases 2.0 through 2.2. Version 2.3 sees an update, with the building blocks being reimplemented using Web components — these provide the same functionality, but implemented in a much more powerful, flexible way. You'll see 2.3 pages appear underneath the main building block pages covering these Web components as soon as the information is available.

+
+ +
+

Note: We also have an old guide covering the v1.x building blocks used in older versions of Firefox OS. This is mainly for legacy information.

+
+ +

Web components preliminary setup

+ +

This section details the preliminary setup needed to use Gaia Web components.

+ +

Web components browser support

+ +

To use Gaia Web components at all, you need to run them using a browser that supports Web components. The state of support is as follows:

+ + + +

Web components are supported in Firefox OS from v2.1 onwards, although most of them weren't actually implemented until v2.3. Be aware also that currently Web components won't work for Firefox OS apps below internal (certified) level. This restriction should be lessened in the future.

+ +
+

Note: If your app is certified, the components will just work. You don't need to set a specific manifest permission.

+
+ +

Web components installation notes

+ +

Gaia Web components are installed in your app using the Bower package manager. To install this, you first need Node.js/npm and Git installed. Once they are installed you can install Bower with

+ +
npm install -g bower
+ +

At this point you could also install the Gaia Fira Sans font that Firefox OS uses in your app , with the following command:

+ +
bower install gaia-components/gaia-fonts
+ +

You can then make use of the font by including the following in your head (along with a font-family of FiraSans):

+ +
<link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css"></link>
+ +

Firefox OS Building Blocks

+ +
+
+
+
Action menu
+
An action menu presents a list of actions, related to the app's content, from which the user may make a selection.
+
Banners
+
Banners (Status, in older versions of Firefox OS) provide information to the user in a transitory fashion, typically to confirm an action or to alert the user to a system event.
+
Buttons
+
Buttons are used to perform explicit actions. Buttons may be text or images.
+
Context menu
+
Accessed via a tap and hold gesture (sometimes called a long press), the Context Menu (called the Object Menu in older versions of Firefox OS) allows users to perform actions on objects without having to leave their current view.
+
Dialog
+
A Dialog (Confirm, in older versions of Firefox OS) provides the user with some important information, asks the user to take or confirm an action, or allows the user to make a choice or enter some information.
+
Drawer
+
The drawer is a scalable way for users to navigate between views or filter views. The drawer can also include links to app settings or other tools.
+
Header
+
A header is a dedicated space at the top of the screen, most often used to display the view title. It can also include navigation, action buttons and other controls.
+
Input area
+
An input area is a data entry field, and can be as simple as a text only entry field, or as complex as a multipart entry field with text entry, value selections, and buttons.
+
Layout
+
The Layout utility will help you to create common layout structures for your Firefox OS apps. Note that Layout is only available in Firefox OS 2.1 and above.
+
List items
+
List items are typically used to navigate to a new screen, or to display information or controls.
+
+
+ +
+
+
Picker
+
The Picker is designed to select a group of items as attachments for messaging and email.
+
Progress and activity
+
Progress and activity indicators provide the user with visual feedback that a process (such as a resource loading) is active.
+
Scrolling
+
Scrolling areas allow the user to move text and/or images across the device's display.
+
Search
+
Search is used to filter a list or find context-specific content.
+
Slider
+
A Slider (which was called Seekbar in older Firefox OS versions) is used to select a value from a continuous or discrete range of values by dragging the handle.
+
Select mode
+
Select Mode (which was called Edit Mode in older Firefox OS versions) is designed to select and perform actions on items.
+
Subheader
+
Subheaders are used to describe a subsection of content.
+
Switches
+
Switches (such as checkboxes, etc.) allow users to activate and deactivate items. Switches are also used to select items within a list.
+
Tab/Filter
+
A Tab/Filter gives the user a way to easily switch between views or to filter a set of data.
+
Toolbars
+
Toolbars contain actions, indicators and navigation elements associated with the current view.
+
Value selector
+
Value Selectors let the user choose from among a list of possible values.
+
+
+
+ +
+

Note: For a detailed guide to the design pattern followed by the building blocks when the Arabic locale (bidirectional) is selected, read Firefox OS in Arabic.

+
+ +

Cross browser CSS

+ +

Arnau March wrote a CSS file called cross browser CSS, containing rules to allow Firefox 2.0 building blocks to render properly across different browsers (ie 9, Firefox 18, Chrome 24, Safari 5.1.) If you want to write hosted apps that look ok across different browsers, include this CSS in your project.

+ +

Browse Firefox OS Building Block implementations by version

+ +

The pages below list links to pages covering the Firefox OS Building Block implementations as they appear in different versions of Firefox OS.

+ + diff --git a/files/it/archive/b2g_os/firefox_os_apps/index.html b/files/it/archive/b2g_os/firefox_os_apps/index.html new file mode 100644 index 0000000000..370236dd14 --- /dev/null +++ b/files/it/archive/b2g_os/firefox_os_apps/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox OS apps +slug: Archive/B2G_OS/Firefox_OS_apps +tags: + - Apps + - Building + - Components + - Firefox OS + - Installing + - NeedsTranslation + - TopicStub + - device APIs +translation_of: Archive/B2G_OS/Firefox_OS_apps +--- +

This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.

+ +

Building Firefox OS apps

+ +
+
Building apps for Firefox OS
+
Firefox OS/Firefox platform app specifics, including App installation and management APIs, manifest files, packaged and hosted apps, handling API permissions.
+
Localization
+
This set of articles provides information for developers wishing to provide localized versions of their apps.
+
Performance
+
This page lists performance-related topics specific to Firefox OS.
+
Firefox Accounts on Firefox OS
+
This article provides an overview of using Firefox Accounts in Firefox OS.
+
Reference apps
+
This page lists a number of sample apps we've put together for you to download, install, play with and learn from. Have fun!
+
Screencast series: App Basics for Firefox OS
+
In this collection of short videos, developers from Mozilla and Telenor explain in a few steps how you can get started with building applications for Firefox OS.
+
+ +

Building blocks

+ +
+
Building Blocks
+
The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all Gaia default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.
+
+ +

Styleguides

+ +
+
Firefox OS Visual styleguide
+
Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.
+
Firefox OS Copy styleguide
+
This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.
+
Firefox OS in Arabic
+
A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)
+
+ +

Assets

+ +
+
Firefox OS design asset library
+
In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.
+
Firefox OS icon font
+
Firefox OS has its own icon font set available: this article explains how to use it in your own apps.
+
Firefox OS transitions
+
A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.
+
+ +

References

+ +
+
Firefox OS device APIs
+
This article provides a list of pages covering those APIs, as well as the app manifest permissions for each one.
+
Firefox OS app tools
+
This page provides a list of useful tools, libraries, examples, etc. that are useful for Firefox OS app developers, whether you want a code template to copy, or need help with adding a specific feature to your Firefox OS app.
+
+ +

Other app topics

+ +
+
Porting Chrome apps to Firefox OS Apps
+
This article discusses the differences between Chrome apps and Firefox OS Apps, and how you can convert between the two.
+
App development FAQ
+
This FAQ is a compilation of answers to common app development questions.
+
+ +

See also

+ + diff --git a/files/it/archive/b2g_os/firefox_os_usage_tips/index.html b/files/it/archive/b2g_os/firefox_os_usage_tips/index.html new file mode 100644 index 0000000000..08761312b3 --- /dev/null +++ b/files/it/archive/b2g_os/firefox_os_usage_tips/index.html @@ -0,0 +1,27 @@ +--- +title: Firefox OS usage tips +slug: Archive/B2G_OS/Firefox_OS_usage_tips +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Firefox_OS_usage_tips +--- +
+
+ To be done
+
+ Explain all of the developer features on the phone and what they do (Settings > Device information > More information > Developer)
+
+ Remote debugging
+
+ How to set your Phone up for remote debugging.
+
+ Unlocking your phone
+
+ Basic instructions on unlocking your phone.
+
+ Taking screenshots
+
+ How to take screenshots on your Firefox OS phone.
+
+

 

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/build_system_primer/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/build_system_primer/index.html new file mode 100644 index 0000000000..3752aa2279 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/build_system_primer/index.html @@ -0,0 +1,127 @@ +--- +title: Il sistema di build di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Build_System_Primer +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - il sistema di build di Gaia +translation_of: Archive/B2G_OS/Developing_Gaia/Build_System_Primer +--- +
+

Questo articolo spiega il funzionamento del sistema di build di Gaia, incluso il Makefile, il processo di build, le variabili di ambiente e le potenziali personalizzazioni.

+
+

Gran parte del lavoro significativo degli step di build sono eseguiti dagli script presenti all'interno della cartella build/ di Gaia, che vengono eseguiti tramite make, node.js e XPCShell (conosciuto anche col nome di JS Shell), un ambiente di runtime per XULRunner. Il sistema di build di Gaia contiene molti tool a supporto per l'installazione, il testing, la localizzazione e per il packaging delle app su dispositivi reali. Consentono agli sviluppatori di personalizzare Gaia, per esempio cambiando lo sfondo di default, le suonerie, le app e le configurazioni di base.

+
+

Nota: XPCShell è simile a node.js ma con la possibilità di eseguire alcuni javascript personalizzati da Mozilla. Permette agli script di build di Gaia di essere eseguiti all'interno di un'estensione di Firefox.

+
+

Il Makefile

+

Il Makefile contiene un insieme di obiettivi (di operazioni da compiere). Questa sezione descrive le più significative.

+

install-gaia

+

Vengono installate tutte le app di Gaia sul tuo device. Se vuoi installarne una specifica, puoi utilizzare la variabile di ambiente APP come mostrato di seguito:

+
APP=calendar make install-gaia
+

Calendar deve esistere come cartella all'interno di una delle cartelle di app di Gaia  (ad esempio all'interno della cartella apps).

+

reset-gaia

+

Analogamente a install-gaia, ma con la seguente sequenza di azioni: rimuove le app dal device, installa le app sul device e configura i permessi di default. Le app verranno installate sul device nella cartella /data/local. Verranno installate su device anche le app di testing e debugging.

+
+

Fai attenzione: Utilizzando la variabile di ambiente APP con reset-gaia porterà il tuo telefono in una stoto inutilizzabile (puoi ripristinarlo eseguendo nuovamente questa opzione senza APP). Pertanto non farlo.

+
+

production

+

Analogamente a reset-gaia ma il codice sorgente verrà ottimizzato. Questa opzione permette di emulare le build utente. Verranno installate tutte le app previste dalle build utente.

+
+

Fai attenzione: Utilizzando la variabile di ambiente APP con production porterà il tuo telefono in una stoto inutilizzabile (puoi ripristinarlo eseguendo nuovamente questa opzione senza APP). Pertanto non farlo.

+
+

reference workloads

+

Questi obiettivi caricheranno sul dispositivo workload (carichi di lavoro) di differente dimensione, aiutandoci nelle attività di debugging e fixing di problematiche inerenti le prestazioni. Accettano la variabile APP o APPS (contenente più nomi di app separati da uno spazio), ad esempio:

+
APP=sms make reference-workload-light
+APPS="sms communications/contacts" make reference-workload-heavy
+
+
+

Nota: Per ulteriori informazioni leggi l'articolo Hacking Gaia: workload di riferimento.

+
+

Variabili di ambiente

+

Alcune variabili d'ambiente ti permettono di controllare alcuni aspetti della costruzione e della installazione sul dispositivo, per esempio:

+

P=1

+

Abilita un grado di parallelismo nel processo di build e consente di trarre vantaggio da CPU multicore riducendo le tempistiche di build. Il valore di default è 0.

+
+

Fai attenzione: la funzionalità di parallelismo è sperimentale e può essere instabile.

+
+

GAIA_OPTIMIZE=1

+

Innesca un processo di ottimizzazione sui file JavaScript. Viene valorizzata automaticamente quando si esegue il comando make production. Può essere utilizzata anche con con install-gaia o reset-gaia.

+

PRODUCTION=1

+

E' un alias di make production.

+

DEBUG=1

+

Ti consente di creare un profilo di debug da utilizzare negli unit testing di Gaia oppure nello sviuppo di app di Firefox OS in Firefox. Il nuovo profilo viene creato all'interno della cartella di Gaia (ad esempio profile-debug). Dovresti eliminare la precedente cartella prima di generare un nuovo profilo.

+

DEVICE_DEBUG=1

+

Disabilita il blocco dello schermo sul dispositivo.

+

GAIA_DEVICE_TYPE=phone

+

Consente di differenziare la lista delle app da installare in funzione del device. Le liste di app  (app-*.list) sono presenti nella cartella /build/config/$(GAIA_DEVICE_TYPE)/ .

+

Il valore di default per questa variabile è phone.

+
+

Nota: Per maggiori dettagli e ulteriori opzioni, consultate la guida Hacking Gaia opzioni di make.

+
+

Il processo di build

+

Segue un diagramma che illustra il processo di build di Gaia:
+  

+

+

pre-app.js, app.js & post-app.js vengono eseguite dal Makefile, di cui gran parte dei task tramite script xpcshell. Tramite Makefile viene anche identificato l'OS e scaricato il b2g-desktop specifico. Verranno migrati sempre più task da Makefile a script xpcshell.
+
+ Sono state create pre-app, app e post-app per agevolare il passaggio delle dipendenze da Makefile a script xpcshell. Pre-app.js e post-app.js sul bug 1021051, mentre app.js, pre-app.js e post-app.js sul bug 1053703.
+
+ Esistono tre tipologie di cartelle per il sistema di build di Gaia:
+
+      1. cartelle con i sorgenti: apps, dev_apps, shared directories
+      2. cartelle di appoggio: build_stage
+      3. cartelli con i profili: profile, profile-debug o cartelle di profile-test
+
+ L'obiettivo è quello di non produrre più file all'interno di cartelle con i sorgenti. Sebbene esistono ancora dei moduli che non rispettano questa regola, ne è stato pianificato l'adeguamento quanto prima. Segue una tabella che illustra quali moduli producono file nelle cartelle con i sorgenti, in quelle di appoggio e in quelle con i profili:

+

+

Segue il processo di build da quando viene eseguito il comando make nella cartella di Gaia. Le seguenti regole vengono eseguite in ordine:

+
    +
  1. b2g_sdk: b2g-desktop è usato per eseguire gli script xpcshell nella cartella GAIA_DIR/build/.
    2. +
  2. svoperapps: vengono scaricate le app e generati i file di configurazione per l'installazione delle app su base operatore telefonico e Paese.
    3. +
  3. webapp-manifests: vengono generati i metadati delle webapp richiesti per il processo di build.
    4. +
  4. keyboard-layouts: viene generata la configurazione di default del layout della tastiera.
    5. +
  5. webapp-shared: vengono prelevati i file utilizzati da ciascuna app presenti nella cartella shared e copiati nella cartella build_stage.
    6. +
  6. preferences: vengono generate le preferenze di default per Firefox OS; viene generato il file user.js, che istallato sul dispositivo verrà letto da Gecko. Nota che i valori possono essere cambiati tramite variabili di ambiente quali DEBUG=1.
    7. +
  7. app-makefiles: vengono eseguiti i makefile presenti nelle cartelle delle singole app. Se il makefile non è presente, l'app (intesa come cartella completa) verrà copiata nella cartella build_stage e verrà eseguito [app-directory]/build/build.js se esiste. Vedi {{ anch("Build script for apps") }} per maggiori dettagli.
    8. +
  8. app.js: se esistono, vengono eseguiti i Makefile nelle cartelle delle app. Altrimenti, il Makefile di Gaia copierà la cartella della app nall'interno di build_stage ed eseguirà [app-directory]/build/build.js se esiste. Vedi {{ anch("Build script for apps") }} per maggiori dettagli.
    9. +
  9. test-agent-bootstrap & test-agent-config: l'ambiente di test per ciascuna app prevede l'esecuzione di due regole di make: test-agent-config & test-agent-bootstrap-apps.
    10. +
  10. webapp-optimize: questo script contiene alcune procedure di ottimizzazione e include le procedure di minimizzazione di JavaScript (JavaScript minification), la concatenazione delle risorse di localizzazione all'interno di file JSON e la generazione degli HTML per il linguaggio di default se necessario.
    11. +
  11. webapp-zip: ciascuna app viene compressa in un file .zip e spostata nella cartella profile/. I file nella cartella shared/ dichiarati nei file HTML delle webapp verranno inclusi in questo step.
    12. +
  12. optimize-clean: optimize-clean  pulisce i fle HTML per la lingua di default.
    13. +
  13. contacts: se esiste, vene copiata la lista predefinita dei contatti dalla cartella GAIA_DISTRIBUTION_DIR in quella del nuovo profilo.
    14. +
  14. extensions: vengono copiate le estensioni dalla cartella GAIA_DIR/tools/extensions in quella del nuovo profilo; differenti configurazioni di setup consentono di copiare differenti estensioni.
    15. +
  15. installed-extensions.json (additional-extensions.js): infine, questo script scarica alcune estensioni addizionali nella cartella del nuovo profilo.
    16. +
+

Script di build per le app

+

Di default, il makefile di Gaia copierà tutte la app nelle cartelle build_stage ed eseguirà [app directory]/build/build.js, se presente.

+

Per esempio, per costruire l'app Camera viene richiesto r.js (come ottimizzatore RequireJS) e  viene eseguito uno script JavaScript per personalizzare la massima risoluzione, pertanto nella cartella sono presenti sia un Makefile che un  build/build.js per personalizzare il suo processo di build.

+

Segue un diagramma di flusso per illustrare i principali step di un makefile per le app:

+

+

Personalizzare le preferenze

+

Se hai delle preferenze specifiche le devi impostare ogni qualvolta reinstalli il software sul tuo dispositivo. Lo puoi fare creando un file chiamato custom-prefs.js all'interno della cartella build/config.

+

Seguono alcune preferenze utili:

+
// this enables marionette which lets you run performance tests
+// see https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_performance_tests
+user_pref("marionette.defaultPrefs.enabled", true);
+
+// this sets the port for remote debugging your application on the device
+user_pref("devtools.debugger.remote-port", 60000);
+
+// this enables the remote debugger
+user_pref("devtools.debugger.remote-enabled", true);
+
+// this outputs debug information about the Radio Interface Layer in logcat
+user_pref("ril.debugging.enabled", true);
+
+

Questo file viene letto ogni qualvolta viene generato un profilo. Per sicurezza ti conviene eliminare il precedente profilo prima di generarne uno nuovo.

+
rm -rf profile && make profile
+

Quindi puoi utilizzare in sicurezza l'opzione install-gaia.

+

FAQ

+

Il dispositivo rimane nero dopo una reinstallazione

+

Può capitare se installi un device mentre è idle. Per rimediare riavvia B2G utilizzando il seguente comando:

+
adb shell stop b2g && adb shell start b2g
+


+  

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/customizing_build-time_apps/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/customizing_build-time_apps/index.html new file mode 100644 index 0000000000..e7d750d161 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/customizing_build-time_apps/index.html @@ -0,0 +1,86 @@ +--- +title: Personalizzare le app in fase di build +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Customizing_build-time_apps +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - Personalizzare le app in fase di build +translation_of: Archive/B2G_OS/Developing_Gaia/Customizing_build-time_apps +--- +
+

Come sviluppatore o vendor di dispositivi mobile, potresti voler personalizzare le app presenti sul dispositivo Firefox OS al primo utilizzo per svariati motivi. Questo articolo spiega le differenti metodologie disponibili.

+
+

Le app nel codice sorgente di Gaia

+

Le app presenti in Firefox OS sono tutte contenute nel codice sorgente di Gaia, in una delle seguenti cartelle:

+ +

Se vuoi aggiungere o rimuovere delle app dalla tua build, potrai farlo nei seguenti modi che andiamo a descrivere.

+

Metodo a furza bruta

+

Il metodo a "forza bruta" è semplicemente quello di rimuovere (inteso come rimozione dalla tua alberatura di Gaia) le app che non vuoi, durante il processo di costruzione della build stessa.

+

Editing delle liste di configurazione

+

Un metodo più raffinato consiste nel modificare i file di configurazione apps-*.list  (li trovi in differenti sottocartelle all'interno della cartella gaia/build/config/, quali phone/ e tablet/) definendo il path delle app che vuoi includere nella build. Per esempio, gaia/build/config/phone/apps-production.list contiene qualcosa di simile a:

+
apps/bluetooth
+apps/bookmark
+apps/browser
+apps/calendar
+apps/callscreen
+etc.
+

Puoi semplicemente includere tutte le app presenti nella cartella nel seguente modo:

+
apps/*
+

La logica per scegliere quale apps-*.list utilizzare per la build (cioè la lista della app) è definita nel gaia/Makefile ed è qualcosa di simile a:

+
GAIA_DEVICE_TYPE?=phone
+  ...
+GAIA_APP_TARGET?=engineering
+  ...
+ifeq ($(MAKECMDGOALS), demo)
+GAIA_DOMAIN=thisdomaindoesnotexist.org
+GAIA_APP_TARGET=demo
+else ifeq ($(MAKECMDGOALS), dogfood)
+DOGFOOD=1
+else ifeq ($(MAKECMDGOALS), production)
+PRODUCTION=1
+endif
+  ...
+ifeq ($(PRODUCTION), 1)
+GAIA_OPTIMIZE=1
+GAIA_APP_TARGET=production
+endif
+
+ifeq ($(DOGFOOD), 1)
+GAIA_APP_TARGET=dogfood
+endif
+  ...
+ifndef GAIA_APP_CONFIG
+GAIA_APP_CONFIG=build$(SEP)config$(SEP)apps-$(GAIA_APP_TARGET).list
+endif
+

Inizialmente, la variabile GAIA_APP_TARGET è impostata a engineering mentre la variabile GAIA_DEVICE_TYPE è impostata a phone, perciò la build di Gaia utilizzerà la lista di app definita in gaia/config/phone/app-engineering.list (che include le app di test, demo, ecc.)

+

Per costruire una build con una differente lista di app dovrai lanciare make con una differente opzione. Per esempio, per costruire la build con la lista di app definita in gaia/build/config/phone/apps-production.list, dovrai invocare il seguente comando:

+
PRODUCTION=1 make
+

Se imposterai l'opzione DEMO=1, verrà utilizzata la lista  apps-demo.list. Se invece specificherai DOGFOOD=1, verrà di conseguenza utilizzata la lista apps-dogfood.list.

+

In alternativa, puoi costruire una build con una tua lista di app impostando la variabile GAIA_APP_CONFIG direttamente nel gaia/Makefile, e fornendo di conseguenza una tua lista apps-*.list.

+

gaia/Android.mk contiene queste linee:

+
ifneq ($(filter user userdebug, $(TARGET_BUILD_VARIANT)),)
+GAIA_MAKE_FLAGS += PRODUCTION=1
+B2G_SYSTEM_APPS := 1
+endif
+

Durante la build di Gaia, se la variabile VARIANT assume i valori VARIANT=user o VARIANT=userdebug (questo valore viene successivamente copiato nella variabile TARGET_BUILD_VARIANT), allora viene automaticamente impostata l'opzione PRODUCTION=1.

+
+

Nota: Puoi scoprire quali altre opzioni di make sono disponibili leggi l'articolo di  riferimento per le opzione di make.

+
+

Personalizzazione Commerciale

+

Il terzo metodo, più dettagliato (ma altrettanto più complesso) consiste nell'utilizzare le personalizzazioni. Ti consentono di personalizzare la build senza modificare il codice di Gaia. Puoi includere le tue personalizzazioni sia in cartelle separate che utilizzare quelle preesistenti.

+

Per esempio, specificando la variabile di ambiente GAIA_DISTRIBUTION_DIR, indichi quale cartella contiene la tua personalizzazione:

+
GAIA_DISTRIBUTION_DIR=<DISTRIBUTION_PATH> make production
+

Al seguente repository https://github.com/mozilla-b2g/gaia/tree/master/customization trovi un esempio completo con tutte le funzionalità personalizzabili.

+

Possiamo considerare la personalizzazione come un argomento completamente separato. Per ulteriori informazioni fai riferimento alla Guida alla Personalizzazione Commerciale.

+
+

Nota: Se vuoi includere app custom esterne come parte della tua build di Gaia, devi utilizzare un processo di build specifico e metterle nella cartella gaia/dev-apps. Per ulteriori informazioni leggi l'articolo Building Prebundled web apps.

+
+
+

Importante: Se sei un vendor di apparati e vuoi creare e distribuire una build custom di B2G/Gaia, devi rispettare alcuni criteri prima di poter includere la app di Firefox Marketplace sui tuoi dispositivi. Contatta Mozilla per maggiori dettagli.

+
+

 

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/diversi_modi_per_eseguire_gaia/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/diversi_modi_per_eseguire_gaia/index.html new file mode 100644 index 0000000000..591e1716e1 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/diversi_modi_per_eseguire_gaia/index.html @@ -0,0 +1,120 @@ +--- +title: Diversi modi per eseguire Gaia +slug: >- + Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Diversi_modi_per_eseguire_Gaia +tags: + - B2G + - Diversi modi per eseguire Gaia + - Firefox OS + - Gaia + - Guida +translation_of: Archive/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia +--- +
+

Puoi eseguire Gaia in un simulatore via WebIDE, direttamente all'interno di Firefox Desktop, come applicazione desktop dedicata (Desktop B2G), oppure in un dispositivo mobile compatibile. Questo articolo fornisce una panoramica per ciascun metodo e i link per ulteriori informazioni.

+
+

Quanto è vicino alla realtà?

+

Alcune delle soluzioni per eseguire Gaia descritte nell'articolo sono più vicine all'esperienza su un dispositivo reale di altre. Ordinando le soluzioni per semplicità di predisposizione dell'ambiente di esecuzione, avresti la seguente sequenza:

+
    +
  1. Gaia nel Simulatore
    2. +
  2. Gaia nel Desktop B2G
    3. +
  3. Gaia in Firefox Mulet
    4. +
  4. Gaia nell'Emulatore
    5. +
  5. Gaia su un dispositivo reale
    6. +
  6. Gaia+Gecko su un dispositivo reale
    7. +
+

Volendo invece ordinare per “quanto è vicino al prodotto venduto", l'ordine sarebbe esattamente l'opposto. In funzione delle caratteristiche su cui stai lavorando, dovrai utlizzare la soluzione che meglio risponde alle tue esigenze.

+

Utilizzare Gaia all'interno di WebIDE con un Simulatore di Firefox OS

+

La modalità più veloce per provare Gaia è con WebIDE, uno strumento di sviluppo disponibile in Firefox Desktop. WebIDE ti offre numerosi strumenti per aiutarti nelle fasi di testing, installazione e debugging di applicazioni web HTML5 sia su telefoni Firefox OS che sul Simulatore Firefox OS, direttamente dal tuo browser.
+
+ In Firefox per desktop dalla versione 34 e successive, trovi WebIDE seguendo Tools > Web Developer > WebIDE. Apri il menù Runtime sulla destra in alto per installare e avviare un Simulatore.

+

Per eseguire una tua versione di Gaia, il processo è un po' più complesso, ma sempre piuttosto semplice:

+
    +
  1. Come prerequisito dovresti aver costruito un profilo di debug di Gaia - vai nel tuo repository locale di Gaia ed esegui il comando DEVICE_DEBUG=1 make. Sarai in grado di fare debug delle App di Gaia senza fare altro, inoltre non dovrai confermare ogni volta la richiesta di debugging remoto all'avvio.
    2. +
  2. Avvia Firefox (consigliamo la versione Nightly)
    3. +
  3. Apri WebIDE utilizzando Tools > Web Developer > WebIDE.
    4. +
  4. Installa un Simulatore di Firefox OS in WebIDE. Utilizza Select Runtime > Install Simulator e scegli una versione fra quelle proposte. Assicurati di utilizzare la medesima versione di Simulatore e di Gaia (per esempio, se il branch di Gaia è il  2.2, devi utilizzare il Simulatore Firefox OS 2.2.)
    5. +
  5. Torna a Firefox e seleziona Tools > Add-ons. Seleziona la voce Options del Simulatore Firefox OS per la vesrione che hai scelto di utilizzare.
    6. +
  6. Seleziona Select a custom Gaia directory, per impostare la cartella in cui è presente il profilo di debug di Gaia (che hai precedentemente costruito).
    7. +
  7. Avvia il Simulatore da WebIDE (dovrebbe ora avviarsi con il profilo custom di Gaia che hai appena specificato).
    8. +
+
+

Nota: Se vuoi riconfigurare il Simulatore affinchè non esegua più il profilo custom che hai appena impostato, devi procedere da Firefox about:config, cerca extensions.fxos_2_2_simulator@mozilla.org.gaiaProfile pref (2_2 piuttosto che la versione che hai scelto precedentemente) fai doppio clic e rimuovi il valore impostato nella dialog box, quindi premi OK.

+
+
+

Note: Poichè il branch principale di Gaia cambia rapidamente, può succedere che l'ultimo Simulatore pubblicato fallisca. Se stai utilizzando il branch principale e rilevi un fallimento (in questo caso WebIDE restituisce un messaggio di errore quale "Operation timed out" ), dovresti scaricare e utilizzare l'ultima branch nightly del Simulatore  — visita Nightly Mozilla Central e scarica il file fxos-simulator-*.xpi appropriato per il tuo sistema. Tieni in mente che le build nightly non si aggiornano automaticamente alle versioni successive. Per ottenere gli aggiornamenti devi tornare a utilizzare le build ufficiali.

+
+

Utilizzare Gaia in B2G Desktop

+

B2G Desktop è un'applicazione che puoi utilizzare per eseguire Gaia sul desktop, implementa il motore di esecuzione delle app utilizzato nei dispositivi Firefox OS. Verrà presto sostituito con Firefox Mulet (vedi sotto), non appena Mulet sarà sufficientemente stabile.

+

Puoi scaricare una build nightly di B2G Desktop dal sito di Firefox Nightly. A seconda dell'utilizzo sono disponibili differenti versioni della latest-mozilla. Sono disponibili build per Linux (32 bit e 64 bit), OS X e Windows.

+

Le build nightly sono disponibili con una versione di Gaia recente. Dopo aver scaricato l'archivio, devi semplicemente estrarlo in una cartella ed eseguire il binario b2g dalla cartella stessa:

+
$ cd b2g
+$ ./b2g
+

Per eseguire B2G con una tua versione di Gaia per finalità di sviluppo dovrai inizialmente costruirti un profilo di debug dal tuo repository locale di Gaia:

+
$ cd /path/to/gaia
+$ DEBUG=1 DESKTOP=0 make
+

Questo produrrà una sottocartella all'interno della cartella gaia chiamata profile. Per evitare di ricostruire Gaia a ogni modifica al codice, l'opzione DEBUG, anzichè produrre la versione packaged di default, produrrà una versione hosted che verrà eseguita tramite un web server integrato. Trovi il percorso alla cartella contenente il profilo generato nell'ultima linea di output del comando precedente:

+
Profile Ready: please run [b2g|firefox] -profile /path/to/gaia/profile
+

Potrai quindi eseguire B2G Desktop col profilo appena generato nel seguente modo:

+
$ ./b2g /path/to/gaia/profile
+

Se vuoi, puoi costruire B2G Desktop direttamente dal codice sorgente.

+
+

Note: Per OS X, il binario b2g sarà all'interno della cartella B2G.app. Per eseguire B2G Desktop utililizza il seguente comando:
+ ./B2G.app/Contents/MacOS/b2g /path/to/gaia/profile

+
+

Utilizzare Gaia in Firefox Mulet

+

È anche possibile eseguire Gaia all'interno di una versione speciale di Firefox chiamata Firefox Mulet. Questa soluzione ti offre il vantaggio di abbinare un ciclo di sviluppo rapido alla disponibilità di strumenti web standard di sviluppo e di debugging disponibili.

+
+

Nota: Firefox Mulet è attualmente in una fase iniziale di sviluppo, probabilmente troverai dei bug. Se dovessi riscontrarne, per favore segnalaceli.

+
+
    +
  1. Prima di tutto, è necessario disporre di una copia locale del repository di Gaia (leggi l'articolo Eseguire il tuo build di Gaia per la procedura migliore se vuoi contribuire al progetto). Mulet è compatibile con la versione di Gaia 2.2 e superiore, ti consigliamo di utilizzare il branch master.
    2. +
  2. Quindi, spostati con cd nella tua copia locale del repository e costruisci il profilo con make (leggi l'articolo Riferimento alle opzioni di make per le differenti opzioni disponibili). In futuro, Mulet supporterà le differenti opzioni di make e avrà tutti gli strumenti per facilitarti il debug delle applicazioni (ad esempio riavviare le singole applicazioni se vorrai verificare i singoli aggiornamenti).
    3. +
  3. Ora devi scaricare una versione nightly di Firefox Mulet  — lo trovi al link Mozilla Central. Le versioni Mulet sono quelle il cui nome inizia per firefox-*, per esempio firefox-36.0a1.en-US.mac64.dmg — scelgli la versione appropriata per il tuo sistema di sviluppo.
    4. +
  4. Dopo averlo scaricato, installa Mulet evitando di sovrascrivere la build Nightly di Firefox. Per esempio, su Mac OS X, crea una nuova cartella all'interno di Applications chiamata "mulet", e trascinaci il file.
    5. +
  5. Ora esegui Mulet da linea di comando, specificando il profilo di Gaia da utilizzare (tramite l'opzione -profile). Per esempio, su un Mac OS X, dalla cartella Applications, potresti eseguire un comando simile al seguente: + 
    ./mulet/FirefoxNightly.app/Contents/MacOS/firefox-bin -profile /Users/my-home-folder/git/gaia/profile/
    +
    6. +
+

Mulet dovrebbe avviarsi e dovresti vedere qualcosa di simile:

+


+ L'applicazione contiene la standard Toolbox di Firefox per il debugging delle tue applicazioni di Gaia, un emulatore di Firefox OS sulla sinistra e numerosi altri strumenti utili per gestire Gaia. I controlli presenti sopra l'emulatore ti consentono di:

+ +
+

Nota: Il bottone Home attualmente non funziona e lo schermo occasionalmente manifesta dei malfunzionamenti. Puoi ovviare a questi problemi ricaricando la scheda del browser.

+
+

Flashare Gaia su un dispositivo reale

+
+

Importante: Se stai cercando di flashare Gaia su un dispositivo con poca memoria quale Tarako o Spice Fire One, dovresti utilizzare una branch specifica ottimizzata per dispositivi con poca memoria, quale 1.3t branch. Provando a flashare il branch master di Gaia su un dispositivo con poca memoria probabilmente il dispositivo risulterà non più funzionante.

+
+

Per flashare una nuova versione di Gaia su un dispositivo reale:

+
    +
  1. Prima assicurati di avere una copia del repository di Gaia sul tuo computer e di avere installato ADB.
    2. +
  2. Assicurati di aver abilitato il debugging via USB.
    3. +
  3. Connetti il dispositivo al computer via USB.
    4. +
  4. Se il dispositivo è connesso e se il driver USB è configurato correttamente potrai eseguire i seguenti comandi. Per configurare correttamente il driver, gli utilizzatori di Windows o Linux potrebbero controllare sulla pagina specifica per il driver USB del produttore del dispositivo mobile.
    5. +
  5. Esegui il seguente comando all'interno del repository di Gaia per installare completamente Gaia sul dispositivo:
    + 
    $ make reset-gaia
    +
    6. +
  6. Per installare solo gli aggiornamenti, senza riavviare il dispositivo utilizza: + 
    $ make install-gaia
    +
    7. +
  7. Se invece vuoi installare solo un'applicazione specifica, puoi utilizzare la variabile di ambiente APP: + 
    $ make install-gaia APP=browser
    +
    8. +
+
+

Nota: I comandi make install-gaia / make reset-gaia costruiscono Gaia con una risoluzione pari a 1x di default. Per specificare risoluzioni maggiori dovrai utilizzare le opzioni di make GAIA_DEV_PIXELS_PER_PX o GAIA_DPPX (per maggiori dettali vedi High resolution image assets) assieme al fattore di scala specifico per il tuo dispositivo, per esempio make install-gaia GAIA_DEV_PIXELS_PER_PX=1.5 per un dispositivo Flame (oppure 2, o 2.5, etc; trovi i fattori di scala nella tabella contenuta nel paragrafo 512 icon for device display.)

+
+

Per verificare se il tuo dispositivo è correttamente connesso via USB utilizza il seguente comando:

+
$ adb devices
+

Dovresti ottenere un risultato simile al seguente:

+
List of devices attached
+emulator-5554  device
+

Costruire Gecko e Gaia e utilizzarli in un Emulatore o un dispositivo reale

+

Se hai un dispositivo mobile compatibile puoi  compilare e installare Firefox OS ed eseguirlo su un Emulatore piuttosto che scaricarlo sul tuo dispositivo.

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/gaia_tools_reference/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/gaia_tools_reference/index.html new file mode 100644 index 0000000000..056a240eaa --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/gaia_tools_reference/index.html @@ -0,0 +1,128 @@ +--- +title: Strumenti di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Gaia_tools_reference +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - Strumenti +translation_of: Archive/B2G_OS/Developing_Gaia/Gaia_tools_reference +--- +
+

Questo articolo descrive alcuni strumenti di grande aiuto per lavorare con Gaia

+
+ +
+

Nota: Puoi trovare alcuni suggerimenti e trucchi molto utili per il debug di Firefox OS alla pagina B2G QA Tips and tricks.

+
+ +

Strumenti di backup/restore/flash

+ +

Strumenti di backup per il tuo profilo, ecc.

+ +

b2g_util

+ +

Il pacchetto b2g_util tools fornisce alcuni strumenti utili nel debugging di Firefox OS. Può:

+ + + +

Per installarlo hai bisogno di Python 2.7, pip, e setuptools. Quindi puoi eseguire:

+ +
sudo pip install -U b2g_util
+ +

Dopo aver completato l'installazione, puoi connetterti al tuo dispositivo e testarlo utilizzando, ad esempio, il seguente comando per ottenere la versione di b2g:

+ +
b2g_check_versions
+ +

pc-sync-tool

+ +

pc-sync-tool è una app disponibile nel Marketplace di Firefox che permette di fare il backup dei tuoi dati/profilo. Deve essere utilizzato congiuntamente all'add-on per desktop Firefox OS assistant.

+ +

Backup e restore del profilo

+ +

Per gestire backup e restore dei dati puoi utilizzare lo script backup_restore_profile.py, disponibile all'interno del repository GIT B2G-flash-tool.

+ +
    +
  1. Clona il repository (git clone https://github.com/Mozilla-TWQA/B2G-flash-tool.)
    2. +
  2. Assicurati che il telefono sia connesso via USB al computer, e che ADB (vedi {{anch("Important steps to follow first")}}) e l'opzione di Debugging via USB (presente nei settaggi del tuo dispositivo Developer settings) siano abilitati.
    3. +
  3. Spostati all'interno della cartella clonata
    4. +
+ +

Per fare backup dei dati:

+ +
python backup_restore_profile.py -b
+ +

Questo comando dovrebbe salvare il profilo del dispositivo all'interno di una cartella chiamata  mozilla-profile, nella medisima cartella in cui è posizionato lo script. Per fare restore del tuo backup:

+ +
python backup_restore_profile.py -r
+ +
+

Nota: Per vedere la lista completa delle opzioni esegui lo script con il flag -h o --help.

+
+ +

B2G-flash-tool

+ +

Il repository B2G-flash-tool contiene molti altri strumenti che ti consentono di fare rapidamente il flash delle nuove build sui dispositivi — strumenti ideali per il lavoro di QA. Per esempio:

+ + + +

Strumenti per il debug

+ +

Strumenti con funzionalità di debug.

+ +

WebIDE

+ +

WebIDE di Firefox merita una menzione speciale — oltre alle funzionalità di test e debug, offre funzionalità di monitoraggio delle performance, dell'utilizzo della memoria, ecc (vedi Monitoring performance.)

+ +

get_crashreports.sh

+ +

All'interno del repository B2G-flash-tool, get_crashreports.sh restituisce i report di crash (/data/b2g/mozilla/Crash Reports/.)

+ +

Strumenti contenuti all'interno della cartella di root di B2G

+ +

Nella cartella di root di B2G sono presenti numerosi script che eseguono funzionalità di debug utili, quali:

+ + + +

Ulteriori strumenti

+ +

Sono disponibili ulteriori e utili strumenti nella cartella gaia/tools/ e in altre.

+ +

png_recompress.sh

+ +

Script per comprimere immagini in formato png. Puoi utilizzarlo analogamente al seguente esempio:

+ +
$ ./tools/png_recompress.sh -v bg.png
+ +

Rimuove metadati non necessari e comprime ulteriormente l'immagine; può produrre un risparmio fino al 99.5% sulla dimensione del file, si traduce in un impatto misurabile sulla dimensione della app e sull'utilizzo di memoria.

+ +

svg_recompress.sh

+ +

Presente nella cartella gaia/tools/, svg_recompress.sh comprime immagini SVG.

+ +

cache_sync.py

+ +

Presente nella cartella gaia/tools/, cache_sync.py sincronizza la cache offline di una app in una cartella locale. Il comando deve essere eseguito dalla cartella base di una app in gaia/external-apps. Costruisce una cartella per ciascuna origine nella cache offline.

+ +

edit_prefs.sh

+ +

Presente nella cartella di root di B2G, edit_prefs.sh restituisce le preferenze di un dispositivo.

+ +

 

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/index.html new file mode 100644 index 0000000000..c9cb461e0a --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/index.html @@ -0,0 +1,52 @@ +--- +title: Guida allo sviluppo di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - Guida rapida allo sviluppo di Gaia +translation_of: Archive/B2G_OS/Developing_Gaia +--- +
+

Gaia è l'interfaccia utente di Firefox OS e l'insieme delle app predefinite: include la schermata di blocco, la schermata principale, il dialer e altre applicazioni. Sostanzialmente, Gaia è un insieme di applicazioni web complesse eseguite sulla piattaforma Firefox OS. Questa serie di articoli copre tutto quello che ti serve sapere per contribuire al progetto Gaia.

+
+ +

In questa guida ti mostreremo come contribuire allo sviluppo di Gaia attraverso una metodologia strutturata — e con questo intendiamo sia aggiungere nuove funzionalità al codice base di Gaia che lavorare sui bug aperti. La prima serie di articoli può essere letta in ordine, piuttosto che spostandosi direttamente alla sezione di interesse, nel caso in cui ci fosse la necessità di rivedere un aspetto specifico del processo.

+ +

Dopo di che, ti forniremo materiale di riferimento e informazioni su argomenti supplementari.

+ +

+ +

Nozioni di base

+ +
    +
  1. Eseguire il codice di Gaia
    2. +
  2. Capire il codice di Gaia
    3. +
  3. Modificare il codice di Gaia
    4. +
  4. Provare le modifiche al codice di Gaia
    5. +
  5. Sottoporre una patch di Gaia
    6. +
+ +

Compilazione di Gaia

+ + + +

Vedi inoltre

+ + diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/make_options_reference/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/make_options_reference/index.html new file mode 100644 index 0000000000..dd5f1f4f70 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/make_options_reference/index.html @@ -0,0 +1,347 @@ +--- +title: Riferimento alle opzioni di make +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/make_options_reference +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - Riferimento alle opzioni di make +translation_of: Archive/B2G_OS/Developing_Gaia/make_options_reference +--- +
+

Il comando make viene utilizzato all'interno del repository di Gaia per creare il profilo che verrà poi caricato sul dispositivo o eseguito in B2G Desktop. Questo articolo descrive in dettaglio le differenti opzioni di make disponibili.

+
+ +
+

Nota: Sono disponibili molte variabili di ambiente nel Makefile. In futuro potrebbero cambiare.

+
+ +

I profili creati sono generalmente posti sotto la root della directory gaia, per esempio /gaia/profile, e contengono i seguenti elementi:

+ + + +
+

Nota: Ricordati di rimuovere un profilo già esistete, rimuovendo l'intera cartella, prima di  crearne uno nuovo.

+
+ +

Default

+ +
make
+ +

Senza opzioni verrà creato un profilo anonimo, non di debug. Per un profilo marcato Mozilla vedi {{ anch("Opzione per build Mozilla ufficiale") }}; per un profilo di debug vedi {{ anch("Opzione di debug") }}.

+ +

Installare sul dispositivo

+ +
make install-gaia
+
+make reset-gaia
+
+ +

Dopo aver installato ADB (Android Debug Bridge) sul tuo sistema, queste opzioni di make ti consentiranno di installare Gaia sul dispositivo. Mentre install-gaia installerà solo gli aggiornamenti/update, reset-gaia installerà completamente Gaia rimuovendo prima configurazioni, profili e web app.

+ +
+

Nota: Installando Gaia sul tuo dispositivo utilizzando  make install-gaia / make reset-gaia verrà costruito Gaia con una risoluzione pari a 1x per default. Per specificare una più alta risoluzione dovrai utilizzare le opzioni  GAIA_DEV_PIXELS_PER_PX o GAIA_DPPX  (vedi Immagini ad alta risoluzione per maggiori dettagli). Quando installi Gaia sul tuo dispositivo in questo modo, dovresti specificare le opzioni rilevanti assieme al fattore di scala del tuo dispositivo, ad esempio make install-gaia GAIA_DEV_PIXELS_PER_PX=1.5 per un Flame  (o 2, o 2.5, ecc; trovi i valori di scala nella tabella all'interno di questo articolo 512 icon for device display.)

+
+ +

Costruire app specifiche

+ +
APP=system make
+
+APP=system make install-gaia
+ +

Se un profilo è già esistente, l'opzione APP ti consente di specificare quale app ricostruire invece di ricostruire e reinstallare tutte le app. Nota che mentre questo comando ti consente di pubblicare il nuovo package e il file di manifest della app sul dispositivo, le modifiche apportate al file di manifest  (nuovi permessi, layout della tastiera, ecc) non verranno recepite da Gecko.

+ +

Specificare una cartella per il profilo

+ +

Puoi specificare una cartella custom per costruire il tuo profilo utilizzando PROFILE_FOLDER, per esempio:

+ +
PROFILE_FOLDER=profile-b2g-desktop make
+ +

Build specifiche per dispositivi

+ +

Ci sono alcune opzioni di make che ti consentono di costruire build per differenti device, per differenti scopi.

+ +

Creare una build di Gaia per telefono

+ +
GAIA_DEVICE_TYPE=phone make
+ +

La lista delle app è quella contenuta nel file /gaia/build/config/phone/apps-engineering.list.

+ +

Crea una build di Gaia per tablet

+ +
GAIA_DEVICE_TYPE=tablet make
+ +

La lista delle app è quella definita nel file /gaia/build/config/tablet/apps-engineering.list.

+ +

Crea una build per Spark

+ +
GAIA_DISTRIBUTION_DIR=distros/spark make reset-gaia
+ +

Per Installare spark sul tuo dispositivo. L'opzione equivalente per B2G build.sh:

+ +
GAIA_DISTRIBUTION_DIR=distros/spark ./build.sh
+ +

Differenti opzioni di Build

+ +

Differenti opzioni di make consentono di costruire differenti tipi di build per scopi differenti.

+ +

Build di produzione

+ +
PRODUCTION=1 make
+ +

Costruisce una build di produzione di Gaia:

+ + + +
+

Nota: Puoi anche utilizzare l'alias make production.

+
+ +

Opzione di debug

+ +
DEBUG=1 make
+ +

Tramite la variabile di DEBUG le app vengono eseguite in modalità hosted su un web server interno su una specifica GAIA_PORT. Rispetto alla modalità di default packaged, in cui le app dovranno essere reinstallate dopo ogni modifica, la modalità hosted semplifica il testing. Utilizzando il profilo all'interno delle più recenti Nightly di Firefox sarà disponibile un pannello specifico per B2G all'interno dei Firefox Developer Tools. Una volta apportata la modifica sarà sufficiente effettuare un refresh del browser per rendere la modifica disponibile sul simulatore.

+ +

Inoltre:

+ + + +

Opzione di debug per dispositivo

+ +
DEVICE_DEBUG=1 make
+ +

Questa opzione crea un profilo di debug per dispositivo, con lo schermo di blocco disabilitato e la funzione di debugging via ADB abilitata.

+ +

In Firefox OS con versione superiore a 1.2 puoi utilizzare questo paramatro per abilitare la funzionalità di debugging attraverso App Manager.

+ +

Opzione di debug per desktop

+ +
DEBUG=1 DESKTOP=0 make
+ +

Questa opzione crea un profilo di debug che potrà essere eseguita all'interno di B2G desktop.

+ +

Opzione per build Mozilla ufficiale

+ +
MOZILLA_OFFICIAL=1 make
+ +

Utilizza questa opzione per costruire una build con brand Mozilla ufficiale.

+ +

Opzione Dogfood

+ +
DOGFOOD=1 make
+ +

Questa opzione attiva la modalità Dogfood e le relative utility. Per esempio l'app di feedback, che consente di sottomettere feedback facilmente.

+ +

Opzione per installare sotto la cartella system

+ +
B2G_SYSTEM_APPS=1 make
+ +

Questa opzione consente di installare le app sotto la cartella /system/b2g invece di /data/local. Dovresti utilizzarla quando lavori su una build utente. Viene automaticamente impostata quando viene eseguito make production. Può essere utilizzata anche per le opzioni install-gaia o reset-gaia .

+ +

Opzione per distribuzione commerciale

+ +
GAIA_DISTRIBUTION_DIR=./dir
+ +
+

Nota: Leggi l'articolo Customizzazioni Commerciali per maggiori dettagli.

+
+ +

Opzioni per sviluppo e debugging

+ +

A scopo di debugging vengono introdotte alcune opzioni specifiche per aggiungere/rimuovere funzionalità o modificare configurazioni/setting.

+ +

Abilitare il debugging remoto

+ +
REMOTE_DEBUGGER=1
+ +

Abilita il debugging remoto su dispositivo, analogamente all'utilizzo dell'opzione specifica all'interno del menù delle configurazioni per sviluppatore (developer settings).

+ +

Opzione di ottimizzazione JavaScript

+ +
GAIA_OPTIMIZE=1 make
+ +

Abilita lo step di ottimizzazione del codice JavaScript di Gaia, concatenando/comprimendo i file. Viene automaticamente abilitato quando viene eseguito make production. Può anche essere utilizzato per install-gaia o reset-gaia.

+ +

Immagini ad alta risoluzione

+ +
GAIA_DEV_PIXELS_PER_PX=1.5 make
+ +

Analogamento con:

+ +
GAIA_DPPX=1.5 make
+ +

Questa opzione sostituisce le immagini con le corrispettive *@1.5x.(gif|jpg|png) se disponibili. Dovresti utilizzare questa opzione come parte del comando make, per esempio:

+ +
GAIA_DEV_PIXELS_PER_PX=1.5 make reset-gaia
+
+GAIA_DEV_PIXELS_PER_PX=1.5 make install-gaia
+ +

Gaia di default utilizza le seguenti risoluzioni per lo schermo:

+ + + +

utilizza GAIA_DEV_PIXELS_PER_PX per essere certo che le immagini appaiano limpide su dispositivi qHD e WVGA. Fai riferimento all'articolo un pixel non è un pixel per maggiori informazioni.

+ +

Eseguire i tesi di integrazione

+ +

Puoi eseguire i test di integrazione su Gaia utilizzando make. Vedi Gaia integration tests per maggiori dettagli.

+ +

Eseguire i test di performance Raptor

+ +

Prima di eseguire i test devi configurare il tuo dispositivo per eseguire i test Raptor. Per i dettagli vedi direttamente Raptor.

+ +
make raptor
+ +

Build di profili per dispositivi con scarsa memoria

+ +
GAIA_MEMORY_PROFILE=low make
+ +

Tramite questa opzione viene generato un profilo specifico per dispositivi con scarsa memoria quale ad esempio il Tarako.

+ +

Disabilitare l'esperienza utente di primo utilizzo (first time use experience, FTU)

+ +
NOFTU=1
+
+ +

Tramite questa variabile di ambiente viene disabilitata la FTU.

+ +

Disabilitare lo schermo di blocco

+ +

Puoi disabilitare lo schermo di blocco di Firefox OS utilizzando l'opzione NO_LOCK_SCREEN, per esempio:

+ +
NO_LOCK_SCREEN=1 make
+ +

Attivare carichi di lavoro (workloads)

+ +

Le seguenti opzioni permettono a sviluppatori/tester di installare grandi quantità di dati in differenti applicazioni, generalmente su dispositivi nuovi e appena installati.

+ +

I comandi da utilizzare (dalla cartella di Gaia) sono:

+ +
make reference-workload-light
+ + + +
make reference-workload-medium
+ + + +
make reference-workload-heavy
+ + + +
make reference-workload-x-heavy
+ + + +

Tramite le variabili di ambiente APP o APPS puoi speficare la singola app o le singole app, ad esempio:

+ +
APP=sms make reference-workload-light
+APPS="sms communications/contacts" make reference-workload-heavy
+
+ +

La variabile APP può assumere i seguenti valori:

+ +
APPS="gallery music video communications/contacts sms communications/dialer"
+ +

Per installare canzoni, devi avere installato sul tuo sistema il programma mid3v2. Ad esempio tramite il comando:

+ +
sudo apt-get install python-mutagen
+ +

Se hai un sistema Fedora o RHEL, utilizza:

+ +
sudo yum install python-mutagen
+ +

Opzioni per la documentazione

+ +

I documenti di Gaia vengono generati tramite jsdoc3, utilizzando il seguente comando:

+ +
make docs
+ +

Abilitare layout e dizionario IME

+ +

Per abilitare tastiera e dizionari IME utilizza il seguente comando:

+ +
GAIA_KEYBOARD_LAYOUTS=en,zh-Hant-Zhuyin,el,de,fr,zh-Hans-Pinyin make
+ +

Attualmente non vengono distribuiti tutti i layout di default, per via dell'occupazione di spazio disco. Il bug 1029951 è stato aperto per disaccoppiare la distribuzione di layout e dizionari (offrendo all'utente la possibilità di scaricare quelli di interesse).

+ +

Per favore dai un'occhiata al seguente file build/config/keyboard-layouts.json per trovare tutti i layout disponibili.

+ +
+
+
+
+
 
+
+
+
+
+ +
+
+
+
+
+
+
 
+
+
+
+
+
+
diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/making_gaia_code_changes/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/making_gaia_code_changes/index.html new file mode 100644 index 0000000000..21c61bfddd --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/making_gaia_code_changes/index.html @@ -0,0 +1,73 @@ +--- +title: Modificare il codice di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Making_Gaia_code_changes +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - modificare il codice di Gaia +translation_of: Archive/B2G_OS/Developing_Gaia/Making_Gaia_code_changes +--- +
+

Ora che sai come eseguire Gaia all'interno di Firefox desktop e hai un certo livello di comprensione della struttura del codice, dovresti essere pronto per iniziare a contribuire al progetto. In questo articolo viene descritto come apportare modifiche e dove trovare i bug su cui lavorare.

+
+

Come utilizzare Git

+
    +
  1. Quando apporti modifiche a Gaia, dovresti sempre prendere l'ultima versione dalla master: + 
    cd path/to/gaia
+git checkout master
+git pull upstream master
    +
    2. +
  2. Successivamente, fai checkout su un nuovo branch: + 
    git checkout -b my-code-fix
    +
    3. +
  3. Infine, vai  al direttorio gaia/apps e applica lì le modifiche.
    4. +
+

Esempio di modifica semplice al codice

+

Per apportare le modifiche al codice:

+
    +
  1. Fai le modifiche al codice di Gaia come richiesto e salva.
    2. +
  2. Arresta Firefox Mulet o il simulatore in WebIDE.
    3. +
  3. Ricostruisci il tuo profilo di Gaia utilizzando make.
    4. +
  4. Riavvia Firefox Mulet o il simulatore in WebIDE.
    5. +
+

Facciamo qualcosa di semplice, come cambiare il colore del testo dell'orologio sulla schermata di blocco:

+

Gaia lockscreen showing the clock display in white text

+
    +
  1. +
    +
    + Il modo migliore per scoprire come è impostato questo stile è quello di utilizzare gli strumenti di sviluppo. Premi il taso destro del mouse (oppure tasto Ctrl + clic su Mac OS X) sull'orologio in Firefox desktop e seleziona Inspect Element dal menu contestuale.
    +
    +
    2. +
  2. Puoi scoprire facilmente quale foglio CSS da modificare — gaia/apps/system/lockscreen/style/lockscreen.css  in questo caso — ed effettuare le modifiche che vuoi direttamente sul foglio di stile nel box di destra dello schermo.
    3. +
  3. Quando sei soddisfatto con le modifiche, vai e apporta le modifiche direttamente nel file.
    4. +
  4. Quindi, segui le indicazioni fornite all'inizio di questa sezione per visualizzare le tue modifiche.
    5. +
+

Gaia lockscreen showing the clock display modified from white to red text
+
+
+ Limiti di rendering della modalità di esecuzione di Gaia in Firefox desktop: 

+ +

Dove puoi trovare i bug su cui lavorare

+

Il modo migliore per trovare bug di Firefox OS su cui lavorare è quello di consultare l'applicazione di Josh Matthews Bugs Ahoy — che raccoglie i bug direttamente dal Bugzilla di Mozilla e li rappresenta in una forma che semplifica la  ricerca e consultazione. Una volta che hai identificato il bug su cui lavorare vai alla pagina di Bugzilla, assegnati il bug utilizzando il campo "assigned to" e inizia a lavorarlo, come indicato sotto.

+

Suggerimenti utili

+ +

https://bugzilla.mozilla.org/buglist.cgi?columnlist=product%2Ccf_blocking_b2g%2Cbug_status%2Cresolution%2Cshort_desc&resolution=---&query_based_on=CLOCK&query_format=advanced&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&component=Gaia%3A%3AClock&product=Boot2Gecko&known_name=CLOCK&list_id=9776392

+

Vedi inoltre

+ diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/running_the_gaia_codebase/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/running_the_gaia_codebase/index.html new file mode 100644 index 0000000000..3f3c9b1964 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/running_the_gaia_codebase/index.html @@ -0,0 +1,68 @@ +--- +title: Eseguire il codice di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Running_the_Gaia_codebase +tags: + - B2G + - Eseguire il codice di Gaia + - Firefox OS + - Gaia + - Guida +translation_of: Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase +--- +
+

Questo articolo descrive in dettaglio come eseguire il codice di Gaia localmente e quali strumenti sono disponibili.

+
+ +

Per cominciare, dobbiamo sottolineare che NON devi costruire Gecko, o B2G, per contribuire allo sviluppo di Gaia. Ti serve il codice sorgente di Gaia e le conoscenze per eseguirlo e modificarlo.
+
+ Ci sono diversi modi per eseguire Gaia:

+ + + +

Si possono trovare informazioni concise per ciascuno dei metodi sopra citati alla pagina differenti modalità per eseguire Gaia, assieme ai puntamenti alle informazioni di dettaglio se richiesto. In generale, le modalità sono state ordinate dalla più complessa (ma in grado di offrire un'esperienza più realistica) alla più semplice (ma meno realistica).

+ +

In questo articolo ci concentreremo sull'esecuzione di Gaia all'interno di Firefox Mulet o WebIDE - per la maggior parte delle modifiche che vorrai apportare al codice di Gaia questo metodo offre la modalità più rapida per provare gli aggiornamenti, ovviamente alcune funzionalità (quali le API di dispositivo o le interazioni con l'hardware del telefono) richiedono un dispositivo reale.

+ +
+

Nota: Per ottenere ulteriore supporto per Gaia, i posti migliori in cui cercare sono rappresentati dai canali IRC di Gaia (vedi Mozilla IRC per maggiori informazioni) e dalla mailing list di sviluppo dev-gaia mailing list.

+
+ +

Eseguire il tuo build di Gaia

+ +
    +
  1. Primo, crea una copia dell'alberatura principale del repository di Gaia su Github.
    2. +
  2. Quindi, crea una copia locale: + 
    git clone https://github.com/your-username/gaia.git
    +
    3. +
  3. Aggiungi il repository di upstream come segue: + 
    cd gaia
+git remote add upstream https://github.com/mozilla-b2g/gaia
    +
    4. +
  4. Ora procedi con la creazione di un profilo di Gaia. Eseguendo il comando make all'interno del repository verrà creato un profilo nella cartella profile ottimizzato per il debugging. Verra creata una versione hosted delle app di Gaia che potrà essere servita direttamente dal server HTTPD disponibile in Firefox stesso come estensione. Quando apporterai una modifica sarà sufficiente effettuare un refresh del browser per verificarne il risultato (come vedrai dopo), invece di ricostruire il profilo, ripubblicarlo sul dispositivo, etc. Questa modalità è molto utile per un rapido sviluppo di CSS/JS/HTML.
    5. +
  5. Quindi esegui il profilo di debugging in Mulet o WebIDE, tramite le istruzioni riportate.
    6. +
+ +

Troobleshooting e problemi noti

+ +

Error: Python executable "python3" is v3.x, which is not supported by gyp.

+ +

In alcune distribuzioni Linux (ad esempio Archlinux) la versione di default di python è python3. Per questo motivo npm va in errore quando esegue alcuni comandi (ad esempio durante i test). Per risolvere definitivamente, puoi eseguire il seguente comando:

+ +
npm config set python python2
+ +

Per ulteriori soluzioni puoi dare un'occhiata a questa pagina di Stack Overflow.
+
+ Quindi dovresti rimuovere la cartella locale node_modules ed eseguire nuovamente il comando fallito.

+ +

Please Install NodeJS -- (use aptitude on linux or homebrew on osx)

+ +

Potresti ottenere questo errore nonostante tu possa pensare di aver installato NodeJs. Probabilmente stai utilizzando Debian o una distribuzione basata su Debian quale Ubuntu. In queste distribuzioni, NodeJS è contenuto nel pacchetto nodejs e per installarlo correttamente dovrai installare il pacchetto nodejs-legacy:

+ +
sudo aptitude install nodejs-legacy
+ +

Se hai problemi di installazione, forse stai utilizzando il PPA di Chris Lea per Node; per favore rimuovilo prima di proseguire oltre.

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/submitting_a_gaia_patch/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/submitting_a_gaia_patch/index.html new file mode 100644 index 0000000000..ef206a4a97 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/submitting_a_gaia_patch/index.html @@ -0,0 +1,117 @@ +--- +title: Sottoporre una patch di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Submitting_a_Gaia_patch +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - Sottoporre una patch +translation_of: Archive/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch +--- +
+

Ora dovresti aver apportato una modifica e verificato che non abbia introdotto regressioni sul codice di Gaia. Il prossimo passo consiste nel sottoporre la patch sul repository centrale. Viene descritto in questo articolo.

+
+ +

Sottoporre patch a Gaia può risultare un po' complicato in quanto la procedura richiede l'utilizzo di Bugzilla e Github, e la compilazione di alcuni flag speciali in Bugzilla per garantire la corretta sequenza delle azioni.

+ +

Sottoporre una patch facilmente con Autolander

+ +

Autolander è uno strumento che automaticamente gestisce molti dei passi richiesti per la sottomissione di patch di Gaia (e di altri progetti in cui viene utilizzato), risparmiando tempo e riducendo errori manuali di processo. Autolander integra Bugzilla con il workflow di Github agganciando richieste di pull ai bug automaticamente e altre cose simili. Per utilizzare Autolander:

+ +
    +
  1. Primo, apri un bug su Bugzilla per indicare cosa stai facendo, se non ne è già stato aperto uno per la medesima modifica al codice. Dovrai aprirlo come prodotto Firefox OS e dovrai assegnargli un titolo descrittivo.
    2. +
  2. Ora è il momento di creare una richiesta di pull (pull request, PR in breve) per proporre la tua patch. Se hai seguito la nostra guida dall'inizio, dovresti avere le tue modifiche localmente in un'alberatura duplicata del repository di Gaia a cui hai assegnato un nome univoco. Successivamente, dovrai eseguire il comando git add .  e  git commit -m 'messaggio di commit'.
    3. +
  3. 'messaggio di commit' dovrà essere sostituito con una stringa che conterrà il numero di bug di Bugzilla, il titolo utilizzato per l'apertura, le informazioni che descrivono cosa fa la patch e chi sta committando. Per esempio: + 
    Bug 9999999 - Fix per la risoluzione del bug R=johndoe
    +
    4. +
  4. Deposita il codice sul tuo fork di Gaia su github, quindi crea la richiesta di PR per proporre l'inclusione nella branch main.
    5. +
  5. Non appena la richiesta di pull verrà aperta, verrà associata al bug tracciato nel titolo della richiesta di PR.
    6. +
  6. Successivamente, quando sull'allegato verrà posto il flag r+ da un revisore, potrai aggiungere la parola chiave autoland  all'interno del campo keywords affinchè il codice venga depositato nel branch master di Gaia (Autolander depositerà il codice, farà il merge della richiesta di PR, farà la commit e segnalerà il bug come fissato). Attualmente questa parte è ancora in revisione, pertanto dovra ancora aggiungere la parola chiave checkin-needed e attendere che il codice venga depositato per tuo conto.
    7. +
+ +
+

Nota: Autolander esegue i test di integrazione prima di depositare il codice nella master. Se i test di integrazione falliscono, Autolander non depositerà il codice. Autolander esegue alcune regole semplici di validazione quali la verifica della presenza del numero di bug nella richeista di pull e nel messaggio di commit.

+
+ +
+

Nota: le richieste di pull vengono depositate secondo l'ordine in cui arrivano, in un branch di integrazione e quindi vengono eseguiti i test di integrazione in parallelo su tutte le richieste. Se i test falliscono per una PR, essa viene rigettata, e la branch di integrazione viene ricostruita con le richieste rimanenti. Quando una richiesta passa i test viene depositata nella branch master.

+
+ +

Sottoporre una patch manualmente

+ +

In alternativa a Autolander, puoi seguire la seguente procedura per sottoporre una patch di Gaia:

+ +
    +
  1. Primo, apri un bug su Bugzilla per indicare cosa stai facendo, se non ne è già stato aperto uno per la medesima modifica. Dovrai aprirlo come prodotto Firefox OS e dovrai assegnargli un titolo descrittivo.
    2. +
  2. Ora è il momento di creare una richiesta di pull (pull request, PR in breve) per proporre la tua patch. Se hai seguito la nostra guida dall'inizio, dovresti avere le tue modifiche localmente in un'alberatura duplicata del repository di Gaia a cui hai assegnato un nome univoco. Successivamente, dovrai eseguire il comando git add .  e  git commit -m 'messaggio di commit'.
    3. +
  3. 'messaggio di commit' dovrà essere sostituito con una stringa che conterrà il numero di bug di Bugzilla, il titolo utilizzato per l'apertura, le informazioni che descrivono cosa fa la patch e chi sta committando. Per esempio: + 
    Bug 9999999 - Fix per la risoluzione del bug R=johndoe
    +
    4. +
  4. Sottoponi il codice e crea la richiesta di PR.
    5. +
  5. Aggiungi la URL della PR come allegato del Bug di Bugzilla (segui il link Add an attachment e inserisci la URL del PR come contenuto dell'allegato, aggiungi quindi una breve descrizione).
    6. +
  6. All'interno della scheda dove hai allegato la richiesta di PR richiedi un revisore per la tua patch. Potrai farlo aggiungendo un flag review: ?, quindi includendo il possessore del modulo che intendi modificare (vedi la pagina dei possessori dei moduli per maggiori dettagli).
    7. +
  7. Attendi che venga assegnato un revisore e che riveda la tua patch. Il revisore potrebbe aggiungere alcuni commenti e chiederti di apportare modifiche direttamente sulla tua richiesta  di PR in github.
    8. +
  8. Gestisci le richieste del revisore e quindi carica le nuove modifiche al medesimo PR come fatto in precedenza, rimettendo il flag review: ?.
    9. +
  9. Se vengono approvate, al bug verrà assegnato il flag r+ (significa che è stato rivisto/approvato). Dovrai aggregare tutti i commit in uno (leggi anche la sezione sottostante {{ anch("Suggerimenti_per_il_riallineamento") }}).
    10. +
  10. Aggiungi la parola chiave checkin-needed nel campo keywords. A questo punto devi solo attendere che qualcuno depositi la tua patch nei sorgenti di Gaia..
    11. +
  11. Congratulazione il tuo codice è ora parte di Firefox OS!
    12. +
+ +
+

Nota: vi raccomandiamo di attenervi ad una commit per revisione.

+
+ +
+

Nota: per ulteriori informazioni sulla sottomissione di patch puoi leggere l'artcolo  contributing.md.

+
+ +

Suggerimenti per il riallineamento

+ +

Il branch master di Gaia cambia continuamente (molte volte al giorno). Dopo aver creato una patch in 2 ore, potresti trovare che il branch master sia cambiato nel frattempo.
+
+ Dal tuo branch di lavoro (per esempio my-code-fix) il primo tentativo di riallineamento potrebbe somigliare al seguente:

+ +
git checkout -b my-code-fix-r1
+git pull --rebase upstream master
+ +

Se non ci sono conflitti, puoi procedere come segue:

+ +
git checkout my-code-fix
+git pull --rebase upstream master
+git branch -D my-code-fix-r1
+ +

Se trovi dei conflitti, discutili con gli sviluppatori responsabili delle modifiche che hanno generato i conflitti e una volta risolti ripeti la procedura di riallineamento appena descritta.

+ +

Bug di tracciamento di stato e bug di ingegneria

+ +

Mozilla ha una figura speciale chiamata Sceriffo (sheriff). Gli sceriffi hanno il compito di effettuare i merge di codice e di manutenere lo stato dei branch. Poichè il numero degli sceriffi è limitato, è difficile per loro gestire tutte le patch imperfette.

+ +

Per questo motivo per Firefox OS preferiamo aprire un nuovo bug e quindi gestire una nuova patch ogni qualvolta la patch inviata non lavora come dovrebbe. Ciò potrebbe causare qualche difficoltà nell'interpretazione dello stato del bug in QA e nei team di project management.

+ +

Per questo motivo i bugs vengono classificati fra bug di tracciamento di stato (status tracking bugs) e bug di ingegneria (engineering bugs).

+ + + +
+

Nota: Se si tartta di un bug "user story", il project manager dorvebbe scrivere nel campo user story la storia e i criteri di accettazione.

+
+ +

Come recuperare se accidentalmente carichi una patch su un bug di tracciamento di stato

+ +

Se ti succede, non andare in panico. Se accidentalmente sottoponi una patch, ricevi un review+, la sottoponi sul trunk, o viene riportato che non è risolutiva per nulla, segui le seguenti istruzioni:

+ +
    +
  1. Premi "Clone this bug" in alto a destra dell'interfaccia utente di Bugzilla per creare un nuovo bug copiando la maggior parte dei campi originali. Verifiche che i campi whiteboard, keyword, e STR/user story siano stati copiati nel nuovo bug.
    2. +
  2. Imposta il nuovo bug come bloccato dal vecchio bug. Il nuovo bug sarà di tipo bug di tracciamento di stato.
    3. +
  3. Utiliza il flag needinfo per avvisare il project manager del cambiamento di stato. Puoi trovare gli indirizzi email dei differenti project managers di Firefox OS sul nostro Wiki.
    4. +
  4. Crea un nuovo bug di ingegneria per descrivere lo step che fallisce o il criterio di accettazione. Inoltre utilizza il nuovo bug per bloccare il bug di tracciamento.
    5. +
  5. Infine prova a sviluppare una fix per il nuovo bug. Felice hacking!
    6. +
+ +

Applicare patch su vecchi branch

+ +

Potresti trovare differenti tag di versione associati a bug. Se vuoi applicare patch a vecchi branch di  Firefox OS, verifica che soddisfino le regole di sottomissione. Puoi trovare maggiori dettagli nel seguente aricolo B2G Landing.

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/testing_gaia_code_changes/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/testing_gaia_code_changes/index.html new file mode 100644 index 0000000000..72b4c5e998 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/testing_gaia_code_changes/index.html @@ -0,0 +1,119 @@ +--- +title: Provare le modifiche al codice di Gaia +slug: Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Testing_Gaia_code_changes +tags: + - B2G + - Firefox OS + - Gaia + - Guide + - Integrazione + - Performance + - Testing +translation_of: Archive/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes +--- +
+

Prima di sottomettere una patch al progetto dovrai eseguire alcune procedure di test per verificare che le modifiche che hai apportato al codice siano realmente funzionanti, e lo siano con tutto il resto del codice di Gaia. Questo articolo spiega come.

+
+ +

La procedura di test generalmente consiste in:

+ + + +

Esaminiamole ora entrambe.

+ +

Debugging standard

+ +

Se sei uno sviluppatore web esperto debuggare il codice potrebbe risultare un processo familiare. Abbiamo già discusso come eseguire il codice di Gaia tramite Firefox e come modificare il codice di Gaia. Per modifiche più complesse farai sicuramente un uso maggiore degli strumenti di debugging messi a disposizione da Firefox.

+ +

Nota: Ulteriori informazioni sull'utilizzo di questi strumenti sono disponibili nella nostra zona degli strumenti.

+ +

Test automatici

+ +

Prima di sottomettere una patch, dovrai eseguire la sequenza di test standard automatici abbinati a Gaia per assicurarti che le modifiche al codice non incidano negativamente su nessuna delle funzionalità essenziali offerte dal telefono. I test che si possono eseguire sono:

+ + + +

Noi generalmente ti chiediamo di eseguire i test prima di sottomettere una patch; se sei alla tua prima esperienza puoi anche sottomettere senza eseguire i test, ma devi chiedere aiuto per poterli eseguire in futuro. Devi aggiornare il repository di Gaia per assicurarti di avere l'ultima versione.

+ +
+

Nota: Puoi trovare maggiori informazioni alla pagina test automatici di Firefox OS.

+
+ +
+

Nota: Dovresti prendere in considerazione di eseguire ciascun set di test su un dispositivo reale se disponibile (alcune funzionalità non sono supportate su un emulatore), in alternativa puoi utilizzare l'emultare B2G Desktop o Firefox Nightly.

+
+ +

Unit testing

+ +

Gli unit testing sono test che vengono eseguiti sulle singole unità di codice di una più grande applicazione - nel caso di Gaia, le singole app. Gaia utilizza:

+ + + +

Puoi utilizzare il seguente comando per scaricare, installare e avviare un server di unit testing (le operazioni impiegano alcuni minuti, potrebbe essere un buon momento per una tazza di caffè):

+ +
DEBUG=1 make
+export FIREFOX=/Applications/FirefoxNightly.app/Contents/MacOS/firefox
+bin/gaia-test
+ +

Verrà aperta una pagina web locale con una lista di unit testing. Per eseguirli:

+ + + +

Con la finestra aperta, puoi eseguire l'intera suite di test tramite il seguente comando:

+ +
make test-agent-test
+ +
+

Nota: Questa azione può richiedere molto tempo in quanto verranno eseguiti parecchi test (anche un'ora o più), ti converrebbe eseguire solo i test sulla app che hai mdificato. Potrai farlo aggiungendo APP=<app nome cartella> al comando precedente, per esempio APP=settings.

+
+ +
+

Nota: Per ulteriori informazioni puoi leggere l'articolo uniit testing di Gaia.

+
+ +

Test di integrazione

+ +

I test di integrazione prevedono il testing di differenti unità di codice assieme per verificare la correttezza dell'interazione fra le stesse, logicamente questo step avviene successivamente agli unit testing. I test di integrazione di Gaia sono gestiti tramite uno script marionette scritto in JavaScript e un server basato su python. Il server può comunicare con Gecko quindi è possibile controllare sia il browser che il dispositivo Firefox OS, facendoli interagire l'un l'altro.

+ +

Puoi eseguire il seguente comando per avviare i test di integrazione:

+ +
make test-integration
+ +
+

Nota: Analogamente agli unit testing, eseguire i test di integrazione completi può richiedere parecchio tempo, puoi aggiungere APP=<app nome cartella> al comando precedente per provare una singola app, per esempio APP=calendar.

+
+ +
+

Nota: per eseguire test di integrazione su dispositivi differenti (non smartphone) aggiungi GAIA_DEVICE_TYPE=<device type name> al precedente comando per specificare la tipologia di dispositivo, per esempio GAIA_DEVICE_TYPE=tv. Se non lo farai il test potrà fallire.

+
+ +
+

Nota: per ulteriori informazioni puoi leggere l'articolo sui test di integrazione di Gaia.

+
+ +

Test prestazionali

+ +

I test prestazionali di Gaia vengono eseguiti utilizzando il tool esterno Raptor CLI tool. Tramite Raptor puoi automatizzare l'esecuzione di un applicazione più volte e ottenere statistiche sui tempi di caricamento. Dopo aver eseguito un test, Raptor inoltre mostra l'utilizzo di memoria dell'applicazione.

+ +

Per utilizzare Raptor, per favore leggi il seguente articolo Raptor: Getting Started.

+ +

Test sulla UI

+ +

Fai riferimento all'articolo introduzione ai test sulla UI di Gaia.

diff --git a/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/understanding_the_gaia_codebase/index.html b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/understanding_the_gaia_codebase/index.html new file mode 100644 index 0000000000..64338ff8e1 --- /dev/null +++ b/files/it/archive/b2g_os/guida_rapida_allo_sviluppo_di_gaia/understanding_the_gaia_codebase/index.html @@ -0,0 +1,153 @@ +--- +title: Capire il codice di Gaia +slug: >- + Archive/B2G_OS/Guida_rapida_allo_sviluppo_di_Gaia/Understanding_the_Gaia_codebase +tags: + - B2G + - Firefox OS + - Gaia + - Guida + - capire il codice di Gaia +translation_of: Archive/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase +--- +
+

Prima di iniziare a fare le proprie modifiche al codice di Gaia è necessario comprendere le nozioni di base sulla struttura di Gaia e quali convenzioni di programmazione utilizzare. Questo articolo descrive entrambi questi aspetti.

+
+ +

Branch di Gaia

+ +

Nel codice di Gaia sono presenti differenti branch, e in funzione del tuo obiettivo (o del dispositivo in tuo possesso), potresti non necessariamente scaricare o lavorare sulla branch master. Segue una guida sintetica ai repository principali:

+ + + +

Struttura del codice di Gaia

+ +

Questa sezione descrive le parti più importanti del codice di Gaia.

+ +

apps/

+ +

Questo direttorio contiene tutte le principali applicazioni di Gaia, sia le applicazioni presenti sulla home screen - come il calendar e la camera -  che le applicazioni sottostanti - quali l'app di sistema (system app), la home screen, e la tastiera.

+ +

Sebbene le app lavorino con modalità leggermente differenti fra loro, tutte hanno un certo numero di caratteristiche in comune, fra cui:

+ + + +
+

Nota: Puoi trovare ulteriori informazioni sulle app di default di Gaia nella guida delle app di Gaia.

+
+ +

build/

+ +

Questo direttorio contiene gli script di build.

+ +

dev_apps/

+ +

Questo direttorio contiene tutte le altre app che si vogliono includere in una build customizzata.

+ +
+

Nota: Per maggiori informzazioni sulla customizzazione di Gaia, leggi la specifica Guida alla customizzazione commerciale.

+
+ +

keyboard/

+ +

Questo direttorio contiene dizionari e layout di tastiere in differenti lingue.

+ +

locales/

+ +

Questo direttorio contiene un file JSON, languages_all.json, che definisce quali lingue sono supportati in Gaia. Per maggiori informazioni sulla localizzazione delle app, leggi la guida di Avvio alla localizzazione delle app.

+ +

shared/

+ +

Questo direttorio contiene una serie di risorse condivise da più app, fra cui le più importanti sono:

+ + + +

tools/

+ +

Questo direttorio contiene strumenti per gli script di build e test.

+ +

Stile di programmazione di Gaia

+ +

Gaia segue lo stile di programmazione Javascript definito da Google.

+ +

Informazioni di base:

+ + + +

Regole specifiche

+ +
    +
  1. Assicurati che i file HTML sono dichiarati con <!DOCTYPE html> (come nei documenti HTML5). Se non lo fai, Internet Explorer 9 e successivi caricheranno le pagine in modalità compatibile.
    2. +
  2. Includi l'istruzione "use strict"; (esattamente così, compresi gli apici) all'inizio del tuo file javaScript per abilitare la modalità strict.
    3. +
  3. Utilizza sempre due spazi per l'indentazione, piuttosto che il tab.
    4. +
  4. Per favore utilizza separatori di linea per separare blocchi logici di codice!
    5. +
  5. I file che hanno nomi con più parole dovrebbero utilizzare il carattere di "underscore" per separare le parole, like_this.js.
    6. +
  6. Utilizza gli apici singoli invece che doppi per le stringhe.
    7. +
  7. Utilizza la struttura condizionale estesa: + 
    Bad
+if (expression) doSomething();
+
+Correct
+if (expression) {
+  doSomething();
+}
    +
    8. +
  8. Se stai lavorando sulla system app, leggi la convenzione qui descritta.
    9. +
+ +

Controllo dello stile di programmazione su base commit

+ +

Gaia utilizza JSHint per automatizzare i controlli sullo stile di programmazione Javascript prima di ogni commit (sfruttando una funzionalità di git che consente di automatizzarne l'esecuzione).

+ +

Lo script di pre-commit gaia/tools/pre-commit verrà copiato nel direttorio .git/hooks di progetto una volta eseguito il comando make.

+ +
+

Nota: Inizialmente utilizzavamo gjslint per controllare lo stile di programmazione, successivamente è stato deprecato a favore di JSHint in quanto permette controlli più stringenti e produce risultati migliori. Stiamo utilizzando JSHint da Firefox OS 1.4, mentre gjslint è unicamente consigliato per quei file che non sono ancora gestiti con JSHint.

+
+ +

Eseguire i controlli manualmente

+ +

Prima di sottomettere una patch ti consigliamo di eseguire JSHint manualmente per controllare eventuali errori di stile.
+
+ Dovresti guardare nel direttorio gaia/build/jshint per maggiori dettagli sull'utilizzo di JSHint in Gaia; Gaia ti fornisce gli script di build. Puoi eseguire il comando:

+ +
$ make lint
+ +

per eseguire sia gjslint che jshint. Oppure puoi eseguire:

+ +
$ make hint
+ +

per eseguire solamente jshint.

+ +
+

Nota: Se vuoi installare JSHint da te stesso, senza utilizzare Gaia, puoi utilizzare i seguenti comandi:

+ +
npm install jshint -g
+jshint myfile.js
+
+
+ +

 

diff --git a/files/it/archive/b2g_os/index.html b/files/it/archive/b2g_os/index.html new file mode 100644 index 0000000000..eab7788bec --- /dev/null +++ b/files/it/archive/b2g_os/index.html @@ -0,0 +1,136 @@ +--- +title: B2G OS +slug: Archive/B2G_OS +tags: + - B2G + - B2G OS + - Basic + - Gaia + - Gecko + - Gonk + - Mozilla + - Overview + - b2g smartphone os +translation_of: Archive/B2G_OS +--- +
B2G OS è un sistema operativo completo ed indipendente per il web aperto. Si tratta di un progetto sviluppato dalla comunità degli utenti di Mozilla e costituisce la base dei prodotti Firefox OS.
+ +

B2G OS è un sistema operativo open-source mantenuto dalla comunità per smartphone, tablet, smart TV e altri dispositivi connessi. Il progetto nasce nel 2011 ed è basato sul kernel Linux e sul motore di rendering Gecko. L'intera interfaccia utente è costruita usando tecnologie web quali HTML, CSS e Javascript e può essere usato per lanciare ed utilizzare applicazioni web.  Da quando Mozilla ha interrotto il suo programma commerciale di diffusione di smartphone Firefox OS, il lato smartphone del progetto è interamente mantenuto dai volontari della comunità con il nome di B2G OS.

+ +

+ +
+

Nota: Una chiamata alla cotribunzione ed una chiamata per l'adozione delle app sono state realizzate per avvicinare ulteriori volontari, sentiti libero di condividerle!

+
+ +
+
+

   Come aiutare

+ +
    +
  • Trova bug (il meta bug è bug 1252143)
    • +
  • Correggi bug
    • +
  • Aiutaci a sistemare i test automatici
    • +
  • Porta una app per smartphone gaia: +
      +
    1. facendola diventare una webapp;
      2. +
    2. o traducendola in chrome:// (perché?) e dacci un report.  
      3. +
    +
    • +
  • Porta B2G OS sul tuo telefono o aiuta a mantenere un porting esistente
    • +
  • Aiuta a correggere bug di Gecko
    • +
  • Aiuta a migliorare e tradurre questa documentazione ed il wiki
    • +
  • Proponi e implementa nuove funzionalità per smartphone
    • +
+
+ +
+

   Partecipa

+ + +
+ +
+

Dispositivi supportati

+ + + +

Per maggiori informazioni consulatare questa pagina.
+ Installa facilmente B2GOS sul tuo dispositivo con B2G installer.
+ Il tuo dispositivo non è nella lista? Prova Mulet sul tuo desktop.

+
+
+ +
+

Nota: alcune pagine sono state spostate nell'Archivio MDN — facci sapere se riscontri difficoltà a trovare qualcosa, o se individui qualcosa nell'archivio che ritieni debba essere ritrasferito in questa sezione.

+
+ + + +
    +
  1. Compilazione e installazione + +
      +
    1. Panoramica su compilazione e installazione
      2. +
    2. Sommario del processo di compilazione di B2G OS
      3. +
    3. Prerequisiti per la compilazione
      4. +
    4. Preparare la tua prima compilazione
      5. +
    5. Compilare B2G OS
      6. +
    6. Add-on per la compilazione di B2G OS
      7. +
    7. Compilare B2G OS per Flame su Mac OS X
      8. +
    8. Scegliere come eseguire Gaia e B2G OS
      9. +
    9. Foglio di riferimento per le variabili di compilazione di B2G OS
      10. +
    +
    2. +
  2. Dispositivi compatibili +
      +
    1. Installare B2G OS su dispositivo mobile
      2. +
    2. Creare e applicare pacchetti di aggiornamento per B2G OS
      3. +
    3. Compilare e installare aggiornamenti via Internet prodotti dalla comunità (FOTA)
      4. +
    +
    3. +
  3. Portabilità di B2G OS +
      +
    1. Panoramica sulla portabilità
      2. +
    2. Basi della portabilità
      3. +
    3. Portabilità su CyanogenMod
      4. +
    +
    4. +
  4. Sviluppare Gaia +
      +
    1. Panoramica sullo sviluppo di Gaia
      2. +
    2. Eseguire il codice base di Gaia
      3. +
    3. Esegui Gaia su desktop usando Mulet
      4. +
    4. Comprendere il codice base di Gaia
      5. +
    5. Modificare il codice di Gaia
      6. +
    6. Verificare le modifiche al codice di Gaia
      7. +
    7. Inviare una patch di Gaia
      8. +
    8. Sistema di compilazione primario di Gaia
      9. +
    9. Differenti modi per eseguire Gaia
      10. +
    10. Riferimenti per le opzioni di Make
      11. +
    11. Riferimenti per gli strumenti di Gaia
      12. +
    +
    5. +
  5. API di B2G OS
    6. +
diff --git a/files/it/archive/b2g_os/installare_su_un_dispositivo_mobile/index.html b/files/it/archive/b2g_os/installare_su_un_dispositivo_mobile/index.html new file mode 100644 index 0000000000..10c0384a89 --- /dev/null +++ b/files/it/archive/b2g_os/installare_su_un_dispositivo_mobile/index.html @@ -0,0 +1,136 @@ +--- +title: Come installare Firefox OS su un dispositivo mobile +slug: Archive/B2G_OS/Installare_su_un_dispositivo_mobile +translation_of: Archive/B2G_OS/Installing_on_a_mobile_device +--- +
+

Dopo avere compilato "Boot to Gecko" per uno dei dispositivi supportati,  puoi installare Firefox OS. Questa articolo ti guiderà nel processo.

+
+ +
Nota: La prima volta che effettuerai il flash al tuo cellulare, questo deve avere Android 4 (Ice Cream Sandwich) installato, altrimenti il processo non andrà a buon fine. Una volta effettuata la prima installazione di B2G, si potrà quindi aggiornare alle versioni successive.
+ +
Nota: Per alcuni dispositivi (per es. Flame) è possibile saltare l'intero processo di compilazione. Vedere questa guida per maggiori informazioni.
+ +

Installare ADB

+ +

Su OSX

+ +

Se hai Homebrew :

+ +
brew install android-platform-tools
+ +

Altrimenti scarica l'Android Developer Tools e aggiungi i sorgenti al tua PATH.

+ +

Su Ubuntu

+ +
sudo apt-get install android-tools-adb
+ +

Effettuare il flash al tuo cellulare

+ +

Per effettuare il flash al tuo cellulare, semplicemente connetti il tuo dispositivo e digita:

+ +
./flash.sh
+
+ +

Fatto! Adesso il B2G che avevi compilato si installerà nel tuo dispositivo.

+ +

Nota che se avevi effettuato precedenti installazioni di Gaia potresti aver bisogno anche di scrivere:

+ +
cd gaia
+make reset-gaia
+ +

Questo cancellerà sia tutti i tuoi dati memorizzati in Gaia, sia anche le impostazioni e le preferenze obsolete di Gaia in modoo da effettuare una installazione pulita. Teoricamente ./flash.sh dovrebbe fare tutto questo automaticamente ma per alcuni dispositivi, come hamachi, ./flash.sh effettua il flash solo ad alcuni moduli (./flash.sh -f farà effettuare il flash a tutto.)

+ +

Configurare le regole udev rule per il tuo dispositivo

+ +

Su Linux se ricevi questo messaggio

+ +
< waiting for device >
+ +

significa che probabilmente non hai aggiunto una udev rule per l'avvio veloce del dispositivo (che per ADB non è lo stesso), oppure significa che hai semplicemente bisogno di far partire ./flash.sh con "sudo". Puoi ottenere l'USB vendor ID con "lsusb", ma di solito è quello di Google: 18d1, quindi aggiungendo la riga successiva in /etc/udev/rules.d/51-android.rules dovrebbe funzionare:

+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"
+ +
Note: Se su linux ottieni l'errore libusb  error "-3" significa che per avere l'accesso al dispositivo USB devi essere root. Esegui di nuovo lo script usando Sudo.
+ +
Note 2: Se possiedi un Unagi o un Geeksphone Keon, ti servono due linee: una per l'ID del Vendor del telefono e una per l'ID di Google.
+ +

Note speciali per dispositivi Hamachi, Helix e Leo

+ +

Se il tuo telefono è un dispositivo hamachi, helix o leo, lo script ./flash.sh al momento eseguirà il flash solamente per gecko e gaia.  It is recommended that you flash with the OEM as a base build to get the firmware and the gonk layers and then flash the gecko and gaia on top.  If you want to flash using the images, there is an override flash where you can ./flash.sh -f and it will use the image files to flash your device.

+ +

Special notes for the Samsung Galaxy S2

+ +

If your phone is a Galaxy S2 and you are using heimdall 1.3.2 (the latest version; use heimdall version to check), you may see an alarming error "FACTORYFS upload failed!" followed by "Heimdall flashing failed" and some additional information. This is actually a success condition, and you can ignore the advice.

+ +

To get rid of this strange behavior, grab a source copy of heimdall, downgrading to the 1.3.1 release ("git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06"), then compile it  according to the README, then install that to make the error go away. However, this isn't strictly necessary.

+ +

All versions of heimdall are unable to flash a system.img larger than 100MB. Do:

+ +
ls -l ./out/target/product/galaxys2/system.img
+
+ +

to see how big yours is. If it's too large, ask in IRC for advice; there are ways to do it in two stages.

+ +

Added step for the Samsung Galaxy S2

+ +

If you're flashing onto the Galaxy S2, there is an additional step to follow. Gaia does not get flashed automatically by the flash.sh script; you'll need to also do:

+ +
./flash.sh gaia
+
+ +

Flashing specific partitions to fastboot phones

+ +

You can flash specific partitions to fastboot phones (that is, any phone other than the Samsung Galaxy S2). For example:

+ +
./flash.sh system
+./flash.sh boot
+./flash.sh user
+
+ +

WARNING: flashing user (at least) may delete your user-specific data (contacts, etc.).

+ +

Updating specific modules

+ +

You can update specific components of B2G by specifying their names when flashing. For example:

+ +
./flash.sh gaia
+./flash.sh gecko
+
+ +

In order to update only one application you can use BUILD_APP_NAME environment variable:

+ +
BUILD_APP_NAME=calendar ./flash.sh gaia
+ +

If your phone is not for developer (you aren't interested on test apps and/or require optimization), you can update gaia using:

+ +
VARIANT=user ./flash.sh gaia
+ +

Next steps

+ +

At this point, your phone should be running Boot to Gecko! It's time to experiment, write some code, test, or do some debugging!

+ +
Note: A helpful usage tip: if your build of B2G starts up with the lock screen requesting a pass code to unlock the phone, the default code is 0000.
+ +

Troubleshooting

+ +

Here are a some tips for what to do if your device doesn't work right after installing B2G, or updating it to a new version

+ +

If the UI doesn't start up

+ +

If you update your phone and the user interface doesn't start up, you can reset it to clear out out-of-date configuration and the like. This may bring it back to life, but note that it may also delete your user-specific data (contacts, etc.). Here's how:

+ +
cd gaia
+make reset-gaia
+
+ +

If you want change from developer to production mode

+ +
cd gaia
+make reset-gaia PRODUCTION=1
+ +

WARNING: reset-gaia may delete your user-specific data (contacts, etc.).

+ +

"image is too large" error message on ./flash.sh execution

+ +

It might mean that you phone needs to be rooted first before flashing it. As b2g needs to be written on root partition, your phone needs to be rooted in order to install it.

diff --git a/files/it/archive/b2g_os/introduction/index.html b/files/it/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..309e25034c --- /dev/null +++ b/files/it/archive/b2g_os/introduction/index.html @@ -0,0 +1,67 @@ +--- +title: Introduzione a Firefox OS +slug: Archive/B2G_OS/Introduction +tags: + - B2B + - Firefox OS +translation_of: Archive/B2G_OS/Introduction +--- +

Firefox OS (conosciuto anche attraverso il suo nome in codice "Boot to Gecko" o "B2G") è il sistema operativo mobile, di Mozilla, basato su Linux e la tecnologia Gecko di Mozilla. Firefox OS è un sistema operativo mobile senza tecnologie proprietarie ... che fornisce, agli svilupparoti di applicazioni, l'opportunità di creare prodotti eccellenti. In più, Firefox OS è flessibile ed abbstanza potente da rendere sodisfatti i suoi utilizzatori.

+

Per gli sviluppatori Web, la parte più importante, da comprendere, e che l'intera interfaccia utente è un'applicazione Web, capace di eseguire e visualizzare altre applicazioni Web. Qualsiasi modifica all'interfaccia utente ed ogni applicazione, creata per essere eseguita su Firefox OS, sono pagine Web, con un accesso avanzato ai servizi ed all'hardware del dispositivo mobile.

+

Puoi imparare come costruire ed installare Firefox OS seguendo la nostra guida pratica.
+  

+

Requisisti Hardware

+

La maggior parte dei recenti dispositivi mobili, bassati su processori di tipo ARM, sono sufficientemente potenti da supportare l'installazione di Firefox OS

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComponentMinimumRecommended
CPUARMv6Classe Cortex A5 oppure ( ancor meglio )
+ ARMv7a with NEON
GPU—Adreno Adreno 200 o migliore
Connectivity—WiFi
+ 3G
Sensors—Accelerometro
+ Sensore di Prossimità
+ Sensore luminoso
+ A-GPS
+

Per una migliore esperienza utente è un'ottima idea scegliere un dispositivo che offre un profilo colore uniforme ( implementato da un driver per dispositivi grafici ) e supporto per cuffie/auricolari per l'attivazione e la disattivazione e per eseguire, mettere in pausa o fermare contenuti media. Queste funzionalità sono comuni in quasi tutti i moderni smarphone. 

+

Pulsanti e controlli

+

Un tipico dispositivo con Firefox OS  ha un piccolo numero di pulsanti fisici:

+
+
+ Pulsante Home
+
+ Questo pulsante, generalmente, si trova al centro, sotto il display. Premendolo ritorneremo al menù principale ( o app-launcher ). Tenendolo premuto si aprirà la vista con la quale visualizzare le applicazioni in esecuzione;  per chiudere/terminare un'applicazione basterà poggiarvi il dito e poi "strisciarla" verso l'alto.
+
+ Pulsante per il controllo volume
+
+ Lungo la parte sinistra c'è il pulsante per il controllo volume; premendo la metà, in alto, del pulsante si aumenterà il volume e premendo l'altra metà, in basso, il volume diminuirà.
+
+ Pulsante di accensione
+
+ Nell'angolo in alto a destra, del dispositivo, si trova il pulsante di accensione/spegnimento.
+
diff --git a/files/it/archive/b2g_os/phone_guide/fairphone/index.html b/files/it/archive/b2g_os/phone_guide/fairphone/index.html new file mode 100644 index 0000000000..f7dee28295 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/fairphone/index.html @@ -0,0 +1,184 @@ +--- +title: Fairphone +slug: Archive/B2G_OS/Phone_guide/Fairphone +tags: + - B2G + - Dispositivo + - Equo solidale + - Fairphone + - Firefox OS + - Gaia + - Guida + - Telefono +translation_of: Archive/B2G_OS/Phone_guide/Fairphone +--- +
+

Attenzione: Questo dispositivo non è ancora in grado di eseguire Firefox OS, ma questo è l'obiettivo finale. Questa pagina vuole essere il punto centrale per le informazioni per la comunità per coordinare il lavoro di portabilità.

+
+ +

Il Fairphone è uno smartphone basato sull'economia equa nei riguardi dell'approvvigionamento, della produzione, della distribuzione, dell'auto-riparazione e del riciclaggio dell'elettronica. Non utilizza hardware completamente FOSS, ma supporta l'ideale di restituire un minimo di controllo hardware ai suoi utenti.

+ +

Informazioni sulla distribuzione del dispositivo

+ +

Fairphone ha rilasciato due dispositivi finora — il Fairphone v1 FP1 (prima edizione) è stato rilasciato il 30 dicembre 2013 e il FP1U (secondo lotto) è stato rilasciato il 22 luglio 2014. Le vendite sono ormai giunte alla conclusione per il dispositivo v1. Il Fairphone v2 stato rilasciato il 16 luglio 2015 e può essere ordinato da Fairphone.

+ + + + + + + + + + + + + + +
Fairphone v1Fairphone v2
A picture of the Fairphone v1 device, showing lockscreen and the back. Credit : Fairphone. CC BY-NC-SA.Fairphone 2 Black Matte
+ +
+

Nota: è possibile seguire lo stato di avanzamento sul blog di Fairphone e controllare la strategia annunciata e l'approccio.

+
+ +

La portabilità di Firefox OS per il dispositivo Fairphone

+ +

Non è ancora disponibile, ma si sta lavorando in questa direzione.

+ +

Problemi reali

+ +

Fairphone v1 non può aggiornare il proprio sistema operativo Android personalizzato perché il produttore del chipset non ha rilasciato il codice sorgente aggiornato o una sua compilazione.

+ +

Al Mobile World Congress 2015, Fairphone ha aperto a possibili sistemi operativi alternativi disponibili per l'imminente Fairphone v2. A partire da queste discussioni è stato deciso di iniziare il lavoro di portabilità di Firefox OS per il Fairphone. La portabilità di Firefox OS può essere un modo per salvare il Fairphone v1, così come evitare tali questioni per le future generazioni del telefono. La collaborazione di Mozilla con i tre principali fornitori di chipset potrebbe essere un'ulteriore aiuto.

+ +

Fairphone v2 è orientato al codice sorgente aperto con i contributi della comunità al codice sorgente / compilazione di Fairphone OS.

+ +

L'avanzamento e la soluzione

+ +

In questo momento il progetto di portabilità è appena agli inizi (fase di accensione). Ci auguriamo che il lavoro di portabilità possa iniziare presto — tenete d'occhio questo spazio per ulteriori informazioni.

+ +

Contribuire

+ +

Se siete interessati a saperne di più o a contribuire al lavoro di portabilità, i seguenti link vi saranno utili.

+ +

Strumenti del progetto

+ + + +

Firefox OS

+ +

Se siete degli sviluppatori per la portabilità e volete saperne di più a proposito di Firefox OS:

+ + + +

Comunità XDA

+ +

Se siete degli sviluppatori di Firefox OS e volete saperne di più a proposito della portabilità di un sistema operativo:

+ + + +

Caratteristiche dispositivo

+ +

Fairphone v1

+ +

Potete trovare un elenco dettagliato delle specifiche sulla pagina delle specifiche di Fairphone.

+ +

Rete

+ + + +

Hardware

+ + + +

Software

+ + + +

Fairphone v2

+ +

Potete trovare un elenco dettagliato delle specifiche sulla pagina delle specifiche Fairphone.

+ +

Rete

+ + + +

Hardware

+ + + +

Software

+ + + +

Vedere anche

+ + diff --git a/files/it/archive/b2g_os/phone_guide/flame/index.html b/files/it/archive/b2g_os/phone_guide/flame/index.html new file mode 100644 index 0000000000..07a18504c5 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/flame/index.html @@ -0,0 +1,323 @@ +--- +title: Flame +slug: Archive/B2G_OS/Phone_guide/Flame +translation_of: Archive/B2G_OS/Phone_guide/Flame +--- +

 

+ +
+

Aggiornamenti sul tuo Flame: ti incoraggiamo a iscriverti alla maililng list per ricevere aggiornamenti periodici sulle nuove versioni del software e altre notizie riguardo il tuo dispositivo Flame: https://mail.mozilla.org/listinfo/flamenews

+
+ +

A picture of the Flame device, showing the Firefox OS homescreen containing several app icons.

+ +

Disponibile per l'ordine

+ +

Il telefono di riferimento per gli sviluppatori, il Flame, è una pietra miliare nel rilascio di dispositivi Firefox OS. L'hardware del Flame offre un insieme rappresentativo di specifiche, incluso un display FWVGA e un processore dual-core per aiutare gli sviluppatori a creare fantastici contenuti ed esperienze. Una singola piattaforma hardware è anche una buona cosa per i tester, rendendo semplice provare e indirizzare problemi software specifici senza doversi preoccupare dei bug di un determinato dispositivo o di altro.

+ +

Se già possiedi il telefono e vuoi cominciare a sperimentare, sviluppare e distribuire app o contribuire alla piattaforma Firefox, i seguenti link sono utili per iniziare a muovere i primi passi:

+ + + +

Se cerchi ulteriori informazioni riguardo all'aggiornamento del sistema operativo, al ripristino, al caricamento delle app o alle specifiche del telefono, qui troverai tutte le informazioni necessarie.

+ +

Acquistare il dispositivo

+ +

Il nostro partner per la realizzazione dei dispositivi ha reso il telefono disponibile per l'ordine sul sito everbuying.com al prezzo di 170 US$, spese di spedizione in tutto il mondo incluse (il dispositivo costa 145 $, la spedizione 25 $ e potrebbero essere addebitate tasse doganali, a seconda della destinazione). Il dispositivo non ha blocchi nel bootloader né per quanto riguarda gli operatori. Utilizza una radio quadri-band GSM+UMTS funzionante con una vasta gamma di operatori.

+ +

Operazioni preliminari importanti

+ +

Ci sono alcune operazioni da eseguire a seconda del sistema operativo che utilizzi prima di aggiornare il tuo dispositivo, per esempio per aggiornare la versione di Firefox OS presente nel Flame o inviare app al proprio telefono (entrambe le operazioni sono discusse più avanti).

+ +

Tutti i sistemi operativi

+ +

È necessario installare ADB e Fastboot sul proprio computer. Queste applicazioni permettono al computer di interagire con il telefono quando quest'ultimo è connesso con il cavo USB. Sono necessarie per installare una nuova versione di Firefox OS sul telefono, per ripristinarlo nel caso si blocchi, per caricare app sul telefono ecc.

+ +
+

Nota: se utilizzi Ubuntu puoi installare ADB e Fastboot semplicemente usando i comandi sudo apt-get install android-tools-adb android-tools-fastboot in un terminale.

+
+ +

ADB e Fastboot sono disponibili nell'Android Developer Toolkit:

+ +
    +
  1. Visita il link
    2. +
  2. Fai clic sul pulsante Download Eclipse ADT
    3. +
  3. Accetta i termini della licenza
    4. +
  4. Scegli tra la versione a 32 o 64 bit (la versione a 32 bit andrà bene se non sei sicuro)
    5. +
  5. Fai clic sul pulsante Download Eclipse ADT with the Android SDK... .
    6. +
  6. Quando il download è terminato, estrai i contenuti del file zip sul tuo desktop
    7. +
  7. Visto che il nome della cartella è abbastanza complicato, puoi cambiare il nome semplicemente in adt
    8. +
+ +

ADB è uno strumento che va eseguito dalla riga di comando. Se apri un terminale o prompt dei comandi, ti posizioni nella cartella adt/sdk/platform-tools ed esegui il comando adb, dovresti vedere varie informazioni riguardo a quello che puoi fare con ADB. Eseguire adb devices dovrebbe mostrarti la riga List of devices attached, e nient'altro, poiché non hai ancora collegato alcun dispositivo.

+ +

A questo punto, è necessario impostare la variabile PATH per puntare allo strumento ADB, così da poterlo eseguire ovunque, non solo quando ti trovi nella cartella che lo contiene. Per farlo:

+ + + +

Su Mac/Linux:

+ + + +

Linux & Mac

+ +

Se stai usando un sistema Linux o Mac non sono necessarie ulteriori operazioni anche se, a seconda della distribuzione Linux che utilizzi, potresti dover aggiungere una regola udev per il telefono, con una configurazione simile a questa:

+ +
SUBSYSTEM=="usb", ATTRS{idVendor}=="05c6", ATTRS{idProduct}=="9025", GROUP="users", MODE="0666"
+ +

Assicurati di ricaricare le regole con --reload-rules, poi stacca e riattacca il dispositivo prima di procedere.

+ +

Windows

+ +

Per inviare le app al telefono utilizzando AppManager o ADB avrai bisogno di installare un driver per consentire la comunicazione via USB. Segui le istruzioni seguenti per installarli.

+ +

Scaricare il driver

+ +

Scarica da qui il driver per Windows. Quando l'avrai scaricato estrai il contenuto del file ZIP in una cartella del tuo hard drive.

+ +
+

Nota: l'Android Debug Bridge (ADB) deve essere già installato.

+
+ +

Installare il driver USB

+ +

A questo punto connetti il tuo Flame al computer utilizzando un cavo USB.

+ +

Per installare il driver apri la cartella Alcatel_USB_Driver_Q_4.0.0_2013_11_11_noinstall all'interno della cartella nella quale hai estratto il file ZIP e fai doppio clic sull'eseguibile DriverInstaller.exe . Potresti ricevere un avvertimento che ti informa che l'eseguibile proviene da un autore sconosciuto. Se accade fai clic sul pulsante Sì e l'eseguibile verrà avviato.

+ +

Simple dialog box showing a picture of a phone along with install and uninstall buttons.

+ +

Fai clic sul pulsante Install per installare il driver.

+ +

Dopo che il driver è stato installato puoi verificare che funzioni aprendo una riga di comando su Windows e digitando adb devices . Questo dovrebbe fornire un elenco di dispositivi connessi simile a:

+ +
List of devices attached
+3561d02a          device
+ +

Se il tuo dispositivo non viene visualizzato, controlla la Gestione Dispositivi di Windows. Il tuo Flame potrebbe essere indicato come "ACER ADB Interface". Puoi confermarlo scollegando e ricollegando il dispositivo e verificando che scompaia dalla gestione dispositivi. Disinstalla il driver facendo clic col tasto destro del mouse su "ACER ADB Interface" e facendo poi clic su Disinstalla. Poi esegui nuovamente l'installazione come sopra. È consigliabile impostare il conto alla rovescia per lo spegnimento dello schermo del Flame ad un valore alto (su Impostazioni > Schermo > Blocca schermo dopo) poiché pare che Windows disinstalli e reinstalli il driver di default quando lo schermo si spegne.

+ +

Aggiornare il software del tuo Flame

+ +

Saranno disponibili due "canali" principali per le versioni di Firefox OS rilasciate per il Flame:

+ + + +

Puoi scaricare i file e gli strumenti di ripristino ai seguenti link:

+ + + +

Per installare l'immagine di base sul tuo dispositivo:

+ +
    +
  1. Assicurati che l'opzione di debug remoto sia attivata sul tuo Flame, utilizzando l'opzione Debug Remoto/Debug via USB nelle Impostazioni di sviluppo del tuo dispositivo (l'opzione potrebbe chiamarsi in modo diverso a seconda che tu abbia installato una versione pari o inferiore alla 1.3 o pari o superiore alla 1.4).
    2. +
  2. Collega il Flame al tuo computer attraverso il cavo USB. Verifica che il computer sia connesso al dispositivo eseguendo il comando adb devices in un terminale.
    3. +
  3. Scarica ed estrai il software appropriato per il tuo sistema (il file .zip se utilizzi Mac o Linux, oppure il .exe se utilizzi Windows).
    4. +
  4. Entra nella directory in cui hai estratto il software ed eseguilo: +
      +
    • In Windows, entra nella directory tramite il prompt dei comandi, poi avvia lo script flash.bat (o fai doppio clic sul file).
      + NOTA: Se il file non fosse presente, puoi rinominare il file flash.sh in file.bat e usare quello.
      • +
    • In Linux / OSX, utilizza il terminale per entrare nella directory, poi esegui lo script flash.sh utilizzando il comando sudo ./flash.sh (se non lo avvii utilizzando sudo, lo script potrebbe non riconoscere il telefono e non funzionare).
      • +
    +
    5. +
+ +
+

Note: ti incoraggiamo, inoltre, a compilare da te Firefox OS per installarlo sul tuo Flame. Vedi l'articolo Compilare e installare Firefox OS.

+
+ +

Aggiornare il Flame ad una versione nightly

+ +
+

Nota: al momento le versioni di sviluppo Nightly di Firefox OS non supportano l'A-GPS. Questo potrebbe causare problemi di performance delle funzionalità GPS. Contiamo di risolvere il problema con un aggiornamento futuro sul canale Nightly.

+
+ +
    +
  1. Prima di aggiornare il tuo telefono alla versione nightly dovresti installare l'ultima immagine di base per assicurarti che il sistema sottostante sia aggiornato. Puoi scaricare un'immagine di base tramite i collegamenti qui sopra.
    2. +
  2. Poiché i passi descritti sopra installano una nuova versione del sistema operativo, dovrai abilitare nuovamente il debug remoto sul Flame, usando l'opzione Debug remoto nelle opzioni Sviluppo.
    3. +
  3. Scegli la versione Nightly che vuoi installare. Puoi trovarne varie all'indirizzo http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/. Probabilmente quella che ti interessa è una tra: + +
    4. +
  4. Scegli una versione e scarica sia il file b2g-XX.XX.en-US.android-arm.tar.gz che gaia.zip.
    5. +
  5. Scarica il shallow flash script e salvalo in una directory appropriata (ad esempio la stessa directory dove hai salvato i due file scaricati prima).
    6. +
  6. Installa le immagini sul telefono col seguente comando: +

    Mac

    + + 
    ./shallow_flash.sh -g /path/to/gaia.zip -G /path/to/b2g-XX.XX.en-US.android-arm.tar.gz
    + +

    Linux

    + + 
    ./shallow_flash.sh -ggaia.zip -Gb2g-XX.XX.en-US.android-arm.tar.gz
    + +

    Windows (Nota: istruzioni provvisorie, potrebbe non funzionare al momento; funzionante con Cygwin)

    + + 
    shallow_flash.sh -g gaia.zip -G b2g-XX.XX.en-US.android-arm.tar.gz
+
    +
    7. +
+ +
+

Nota: se ricevi un errore "permission denied" (permesso negato) durante l'esecuzione del comando, probabilmente lo script non ha i permessi corretti. Eseguire chmod +x shallow_flash.sh dovrebbe risolvere il problema.

+
+ +
+

Nota: uno "shallow flash" aggiorna solamente Gecko e Gaia, al contrario di un'installazione completa che aggiorna Gecko/Gaia ma anche il livello Gonk sottostante e i binari associati al particolare tipo di dispositivo. Per questo è il caso di installare prima l'immagine di base ufficiale, come suggerito sopra, e poi effettuare lo "shallow flash" sopra di essa, una volta che i livello Gonk e quello dei binari sono a posto.

+
+ +
+

Le immagini Shallow contengono altro oltre a Gecko e Gaia, quindi tutti i dati nel dispositivo verranno cancellati!

+
+ +

Una volta terminato, il telefono dovrebbe riavviarsi con la versione aggiornata e mostrare la sequenza di primo avvio.

+ +

Risoluzione dei problemi dei font

+ +

Dopo aver aggiornato Gecko e Gaia alla versione nightly con l'immagine base v180, si verifica un'incongruenza tra i font che Gecko e Gaia si aspettano e quelli forniti dall'immagine base. Per sopperire al problema, scarica il pacchetto di aggiornamento dei font, estrailo, entra nella cartella creata dall'estrazione ed esegui lo script flash.sh.

+ +

Spostartsi sul canale di aggiornamento nightly

+ +
    +
  1. Assicurati che il debug remoto sia abilitato sul tuo Flame, utilizzando l'opzione Debug remoto/Debug USB nelle Impostazioni di sviluppo del dispositivo.
    2. +
  2. Scarica lo script di modifica del canale: segui il link, fai clic sul pulsante Raw, poi utilizza la funzionalità di salvataggio del browser per salvare la pagina direttamente come change_channel.sh.
    3. +
  3. Nel terminale, utilizza cd per entrare nella cartella in cui hai salvato lo script e spostati nel canale di aggiornamento desiderato eseguendo il seguente comando:
    + + 
    ./change_channel.sh -v nightly
    +
    4. +
  4. Quando il telefono si sarà riavviato puoi verificare se esistono aggiornamenti tramite la voce Impostazioni > Informazioni dispositivo > Controlla ora
    5. +
+ +

Dovresti ora essere in grado di ricevere aggiornamenti OTA sul tuo telefono.

+ +
+

Nota: Puoi scegliere tra vari canali di aggiornamento. Esegui il comando "./change_channel.sh -h" per scoprire quali sono gli altri canali.

+
+ +

Modalità Fastboot

+ +

Se l'installazione di una nuova versione non va a buon fine, il telefono potrebbe smettere di rispondere, portandolo a riavviarsi in modalità ripristino. Questa modalità mette a disposizione alcune opzioni (Reboot, Update from adb, Wipe data, Wipe cache, e Update from sdcard). Purtroppo, selezionare Update from adb avvia una modalità di caricamento che non permette di utilizzare altri comandi di adb. Il comando adb sideload funzionerebbe, ma i vari script per l'installazione fanno affidamento su altri comandi che non funzionano in questa modalità.

+ +

Dalla modalità sideload, puoi forzare la modalità fastboot:

+ +
    +
  1. Spegni il telefono (potrebbe comportare la rimozione della batteria in casi estremi...)
    2. +
  2. Collega il cavo USB.
    3. +
  3. Riaccendi il telefono premendo contemporaneamente il pulsante di accensione e quello Volume giù.
    4. +
+ +

Il telefono dovrebbe mostrare il testo "FASTBOOT": si trova in modalità fastboot e in attesa di una connessione USB. Una volta connesso, adb dovrebbe riconoscerlo quando si esegue il comando fastboot devices. Nota che adb non lo riconosce. Lo riconosce solo fastboot. In questa modalità puoi usare lo script di installazione per la versione v180 come spiegato precedentemente. Poiché lo script utilizza sia comandi adb che comandi fastboot, potrebbero apparire alcuni errori iniziali riguardanti adb, ma l'installazione nel dispositivo dovrebbe essere avvenuta con successo al termine della procedura.

+ +

Modalità di download di emergenza

+ +

Quando l'installazione di una nuova distribuzione fallisce, il telefono diventa inutilizzabile e non si riesce ad avviarlo in modalità fastboot, è possibile utilizzare la modalità di download di emergenza per recuperare l'uso del telefono.

+ +

Per entrare nella modalità di download di emergenza sono necessari un cavo USB e lo Strumento per il Download di Emergenza. Installa questo strumento e segui le istruzioni.

+ +

Modalità ripristino

+ +

È possibile avviare la modalità ripristino per eliminare i dati presenti nel telefono o per aggiornare manualmente il firmware. Ci sono due procedure per entrare in questa modalità:

+ + + +

In modalità ripristino, utilizza i pulsanti di controllo volume per muoversi tra le voci disponibili e il pulsante di accensione per selezionare. Assicurati di aver effettuato un backup dei dati del telefono (contatti, SMS, ecc.) prima di eliminarli e di avere pronti i pacchetti di aggiornamento.

+ +

Caricare app sul tuo Flame

+ +

Lo strumento App Manager semplifica l'invio di app al telefono per provarle ecc. Le istruzioni complete sono disponibili nell'articolo Usare l'App Manager.

+ +
+

Nota: se stai utilizzando Firefox Nightly, puoi utilizzare il nostro nuovo strumento WebIDE, con le stesse funzionalità dell'app manager e molto di più.

+
+ +

 

+ +

Regolazione della RAM

+ +

È possibile regolare la quantità di RAM disponibile per testare come le app si comportino su terminali Firefox OS con minore memoria disponibile.

+ +

La procedura consiste nell'entrare in modalità fastboot (è necessario installare prima di tutto fastboot, disponibile nella stessa pagina dell'SDK insieme ad ADB) e digitare:

+ +
adb reboot bootloader
+fastboot oem mem [0|256-1024]
+ +

“0” indica la memoria rilevata automaticamente, mentre “256-1024” è la quantità in megabyte. Ad esempio, se si volesse impostare la quantità di RAM a 512 M, si dovrebbe digitare fastboot oem mem 512.

+ +

Sarà necessario riavviare il telefono affinché l'impostazione diventi effettiva. Sarà sufficiente digitare:

+ +
fastboot reboot
+ +

La quantità di memoria correntemente impostata può essere letta entrando in modalità fastboot e digitando:

+ +
fastboot getvar mem
+
+ +

Specifiche di rete e del dispositivo

+ +

Reti:

+ + + +

Hardware: ulteriori informazioni sono disponibili nell'articolo Specifiche di telefoni e dispositivi.

+ +

Altre caratteristiche includono:

+ + + +

Vedi anche

+ + diff --git a/files/it/archive/b2g_os/phone_guide/geeksphone/index.html b/files/it/archive/b2g_os/phone_guide/geeksphone/index.html new file mode 100644 index 0000000000..23cafa4fd9 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/geeksphone/index.html @@ -0,0 +1,156 @@ +--- +title: Geeksphone +slug: Archive/B2G_OS/Phone_guide/Geeksphone +translation_of: Archive/B2G_OS/Phone_guide/Geeksphone +--- +
+
Developer Preview editions of the Firefox OS phone are now becoming widely available to the community, mainly through Geeksphone. Since these are for developers, naturally we want to encourage you to tinker and play with them as much as possible! In this article we cover some basic tips on how to keep your phone up to date and how to tweak the system Gaia applications.
+
+ +
(Note that these instructions are for the older Keon and Peak, not necessarily the latest Geeksphone Revolution phone)
+ +

 

+ +

Updating your Geeksphone to the latest images

+ +

Firefox OS updates can be be downloaded from within the Settings app, listed under Device information. The phone can be set to check for updates daily, weekly, or monthly. In addition a “check now” button is provided. When an update is available you will be prompted to download and install the current version.

+ +

The screen for checking updates on the Firefox OS settings app

+ +

Flashing your phone

+ +

The team at Geeksphone is also now providing the latest stable and nightly builds as self contained downloads for flashing your phone.

+ +

Set up your phone and computer

+ +

Before trying to flash your phone make sure you have set it up as described in the section “Setting Up the Geeksphone Device” in Pushing Firefox OS Apps to the Geeksphone. This will ensure that you can push data to the phone. In that same section, follow the instructions to make sure your computer has the right USB drivers.

+ +
+

Note: It is particularly important that Windows computers be set up with the right USB drivers.

+
+ +

The builds are located at the Geeksphone download site. On this site you will be presented with options for selecting your device and what type of build you want to use.

+ +

Two phone images side by side, the Geeksphone Keon and Peak, with different software download options below each one.

+ +

Download your particular build and extract the archive to your filesystem. The archive contains the images and commands required to flash the phone using Windows, Mac OS, or Linux. Before attempting to flash the phone make sure that you have enabled Remote debugging on the phone. This option can be set by launching the Settings app and navigating to the Device information -> More information -> Developer tab. Also do not attempt to flash the phone if the power level is below 50%.

+ +

Enabling remote debugging on the Firefox OS Settings app

+ +

Windows

+ +
+

Note: You might need to install USB drivers on Windows. For instructions, see the section “Setting Up the Geeksphone Device” in Pushing Firefox OS Apps to the Geeksphone.

+
+ +

Open a Command Prompt (start -> type cmd in search -> enter on Windows 7, Windows key + X -> select Command Prompt on Windows 8) and cd to the directory containing the extracted files. Run:

+ +
flash.bat
+
+ +

Mac OS

+ +

Open a Terminal (Cmd + space -> type terminal -> enter) window and cd to the directory containing the extracted files. Run:

+ +
./flash_mac.sh
+
+ +

Linux

+ +

To flash a Keon from Linux add the following rules to /etc/udev/rules.d/51-android.rules

+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="05c6", ATTR{idProduct}=="8013", MODE="0666"
+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666"
+ +
 
+ +

Open a Terminal (control-alt-t on Ubuntu) window and cd to the directory containing the extracted files. Run:

+ +
./flash.sh
+
+ +

This should flash the new image to the phone. The phone will need to be set up again as all data will be cleared. If you want to backup your data and restore afterwards, you can follow the instructions at Backup the phone system partition.

+ +

If you have an 'unagi' or developer preview phone that is not a Geeksphone

+ +

If you have a developer phone that is not a Geeksphone such as an 'unagi' or a previously Android-based device, you may need to perform the following steps. If this is not you, please skip to the next section.

+ +

You will need to install adb and fastboot. These utilities can be found in the Android Developer Toolkit.

+ +

It is not necessary to install the entire toolkit. Download the toolkit from here and extract the contents. adb and fastboot are found in the /platform-tools/ folder. They can be copied to the /usr/bin of your Linux or Mac OS machine, or copied to another folder as long as that folder is added to your $PATH.

+ +

If you are attempting to flash your device and have another device plugged in via USB, your phone may not be detected by these utilities correctly. Only have your phone plugged in while trying to flash it.

+ +

Tweaking Gaia

+ +

If you are the industrious sort, you may want to tweak the default applications in Gaia — the UI in Firefox OS. In this section we will cover some of the basics for cloning Gaia and making changes to the default system apps. Bear in mind these tips are “at your own risk” and may involve you later referring to the section “Ok, I bricked my phone”. Before proceeding make sure that you have adb and fastboot installed on your system. To verify if these are installed open a terminal and type adb devices with your phone connected. You should see your phone listed under the attached devices.

+ +

You should also be able to run fastboot from the terminal. If you run fastboot, a set of parameter options should be displayed. If you do not have adb or fastboot installed, a quick Google search with your operating system will return several quick starts on how to install them. In addition to adb and fastboot you will need Git. If you do not currently have Git installed, have a look at this setup guide. Finally make sure your phone is set up for remote debugging as described in the previous section.

+ +

Once you have the prerequisites you can open a terminal and cd to the directory you would like to clone the Gaia source code to. Type the following commands:

+ +
git clone git://github.com/mozilla-b2g/gaia.git gaia
+cd gaia
+
+ +

This will clone the current Gaia code to your system.

+ +
+

If you plan on submitting changes back to the Gaia source, be sure to fork the source before cloning as described in Hacking Gaia.

+
+ +

Currently the Geeksphone Keon uses the v1.0.1 branch of Gaia code, so set the proper branch using the following command before you do anything else:

+ +
git checkout -b v1.0.1 origin/v1.0.1
+
+ +

Most of the system apps are located in the apps subdirectory of gaia. You can now make any changes to these Firefox OS apps you wish. Once you have made changes, make sure your device is mounted properly by first running:

+ +
adb remount
+ +

Next, run the following command to push the modified apps to your phone. This will by default push all the system apps to the phone:

+ +
B2G_SYSTEM_APPS=1 make install-gaia
+
+ +

If you only changed one of the apps you can specify the particular app using similar syntax. In this example only the calendar app will be pushed to the phone:

+ +
APP=calendar B2G_SYSTEM_APPS=1 make install-gaia
+
+ +

If you have issues while making the changes, you can reset the phone to default values using either of the following commands:

+ +
make production
+make reset-gaia
+
+ +
+

Note: Bear in mind that either of the above commands will clear any data or apps that you have pushed to the phone. If you want to backup your data and restore afterwards, you can follow the instructions at Backup the phone system partition.

+
+ +

"Ok, I bricked my phone"

+ +

If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with a simple procedure. The following illustrates resetting the Keon but other phones should have a similar process. You will also need to verify that you have fastboot installed.

+ +

First remove the USB cable and then remove the battery from the phone for 30 seconds. Then reinsert the battery and press the volume down button while holding the power button for a few seconds. Next reconnect the USB cable and run the following commands from a terminal window in the directory that contains the latest img files described in the first section of this post:

+ +
fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+
+ +

This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.

+ +

Go play!

+ +

We hope these instructions are useful to you, and naturally we want you to be as happy about Firefox OS and the possibilities as we are! Feel free to play around with updating your devices, make changes/updates to Gaia apps, and also be inspired to build you own open web apps.

+ +

See also

+ + diff --git a/files/it/archive/b2g_os/phone_guide/index.html b/files/it/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..378c500e80 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,24 @@ +--- +title: Guida ai telefoni di sviluppo Firefox OS +slug: Archive/B2G_OS/Phone_guide +translation_of: Archive/B2G_OS/Phone_guide +--- +

Questa sezione contiene informazioni per gli sviluppatori riguardo specifici modelli di telefoni cellulari che supportano Firefox OS. Sono disponibili informazioni generali per Compilare ed installare Firefox OS e sull'Hacking di Firefox OS. Gli sviluppatori che possiedono specifici modelli di telefoni cellulari possono trovare utili i seguenti articoli.

+
+
+ Telefoni cellulari con Firefox OS
+
+ In questo articolo sono elencati i vari telefoni cellulari Firefox OS, con ulteriori informazioni quali, ad esempio, i loro nomi in codice e la loro disponibilità.
+
+ Aggiornare e Modificare il proprio cellulare Firefox OS Developer Preview/Geeksphone
+
+ In questo articolo sono presenti alcuni consigli di base sul tenere aggiornato il proprio Geeksphone e su come modificare le applicazioni di sistema di Gaia.
+
+ Firefox OS ZTE OPEN
+
+ Questo articolo ha lo scopo di condividere le informazioni che abbiamo al momento a nostra disposizione sul modello Firefox OS ZTE OPEN. Man mano che altre informazioni saranno disponibili, verranno aggiunte qui.
+
+ Risoluzione problemi
+
+ Questo articolo contiene suggerimenti per risolvere problematiche comuni che si potrebbero riscontrare nell'utilizzo di Firefox OS.
+
diff --git a/files/it/archive/b2g_os/phone_guide/specifiche_telefoni_dispositivi/index.html b/files/it/archive/b2g_os/phone_guide/specifiche_telefoni_dispositivi/index.html new file mode 100644 index 0000000000..59f3ebe923 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/specifiche_telefoni_dispositivi/index.html @@ -0,0 +1,470 @@ +--- +title: Specifiche di telefoni e dispositivi +slug: Archive/B2G_OS/Phone_guide/Specifiche_telefoni_dispositivi +translation_of: Archive/B2G_OS/Phone_guide/Phone_specs +--- +
+

Questo articolo fornisce alcune informazioni sui dispositivi Firefox OS, indicando specifiche hardware, nomi in codice, versione di Firefox OS installata di default e altri dati.

+
+

Telefoni Firefox OS disponibili

+

Nelle varie fasi di sviluppo abbiamo avuto a disposizione diversi telefoni. Ora, con la commercializzazione dei dispositivi, abbiamo a disposizione diversi modelli da vari produttori partner.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Nome / Nome in codice

+ 		Data di rilascioVersione iniziale di Firefox OSNote di rilascio di Firefox OSDisponibilitàCommenti
+

Alcatel One Touch Fire

+

hamachi, buri

+ 		12 luglio, 20131.0.1Sviluppatori
+ Utenti		Attualmente disponibileDisponibile per il pubblico in Brasile, Uruguay, Italia, Germania, Serbia, Ungheria e Polonia. Disponibile presso i rivenditori su eBay.
otoro, unagi, inari    Dispositivo ZTE disponibile sul mercato, utilizzato per lo sviluppo prima dell'uscita dello ZTE Open.
+

ZTE Open

+

ikura

+ 		2 luglio 20131.0.1Sviluppatori
+ Utenti		Attualmente disponibileSimile ad inari; disponibile al pubblico su eBay.
+

LG Fireweb

+

leo

+ 		24 ottobre 20131.1Sviluppatori
+ Utenti		Attualmente disponibileIn vendita al pubblico in Brasile.
+

Geeksphone Keon

+

keon

+ 		24 aprile 20131.0.1Svilupattori
+ Utenti		Attualmente esauritoDispositivo per sviluppatori
+

Geeksphone Peak

+

peak

+ 		24 aprile 20131.0.1Sviluppatori
+ Utenti		Attualmente esauritoIl nome in codice per un certo periodo è stato "twist"; dispositivo per sviluppatori
Geeksphone Peak+----Progetto cancellato
Geeksphone Revolution4 marzo 20141.3pre-Attualmente disponibileAcquistabile online
+

LG Google Nexus 4

+

nexus-4

+ 		    Sperimentale. Non supportato da LG o da Google. Hardware fuori produzione.
+

Flame

+

"the reference device"

+ 		Tardo aprile 20141.3 Disponibile a breve 
+

Spreadtrum

+

tarako

+ 		Fine del secondo trimestre 2014?  Disponibile a breve 
+

Firefox OS per versione

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VersioneData di completamento (Feature Complete - FC)Data di rilascio ai partner
+ (Release to Partner - RTP)		Nome in codiceVersione di GeckoCorrezioni di sicurezza incluse
1.022 dicembre, 201221 febbraio, 2013TEFGecko 18Gecko 18
1.0.115 gennaio, 20136 settembre, 2013ShiraGecko 18Gecko 20
1.1.029 marzo, 20139 ottobre, 2013LeoGecko 18+ (nuove API)Gecko 23
1.1.1 Da definireHDCome 1.1.0, più WVGAGecko 23
1.2.015 settebmre, 20139 dicembre, 2013KoiGecko 26[39]Gecko 26
1.3.09 dicembre, 2013Da definire Gecko 28Gecko 28
1.4.017 marzo, 2014Da definire Gecko 30Gecko 30
+

Specifiche dei dispositivi

+

Si noti che vi sono alcuni casi in cui un dispositivo non è stato ufficialmente rilasciato, ma ci è stata data la possibilità di condividerne il nome in codice e alcune caratteristiche. NON inserire altre informazioni su questi dispositivi a meno che Andreas Gal o qualcun'altro che sia autorizzato a dare la propria benedizione al rilascio di queste informazioni al pubblico non abbia fatto annunci a riguardo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomeVersioniRisoluzioneDisplay (in pollici)CPUFotocamera/e, MpxRAMROMCapacità di memorizzazioneBatteria (in mAh)
+

Alcatel One Touch Fire

+

hamachi, buri

+ 		v1.0.1/v1.1 +

320 x 480
+ PX=1

+ 		3.5Qualcomm MSM7227A 1 GHzPosteriore: 3.2256MB512MB/data: probabilmente la stessa di inari; le specifiche parlano di una "memoria per l'utente" di 160MB. Probabilmente senza un DeviceStorage, è richiesta una scheda MicroSD (fino a 32GB)
+  		1400
+

ZTE Open / varianti

+

ikura

+ 		v1.0.1 (alla consegna)320 x 480
+ PX=1		3.5Qualcomm MSM7225A 800 MHzPosteriore: 3.2256MB512MB +

/data: 152M
+ Nessuno DeviceStorage, Richiesta scheda MicroSD

+ 		1200
+

LG Fireweb

+

leo

+ 		v1.1320 x 480
+ PX=1		4Qualcomm  MSM7227A 1 GHzPosteriore: 5512MB4GB +

/data: 1007.90M DeviceStorage: sì, capacità non certa. probabilmente 3.7G, ma può essere un errore di calcolo.  (Su un dispositivo unhapy  /sys/devices/platform/msm_sdcc.3/mmc_host/mmc0/mmc0:0001/block/mmcblk0/block risulta 7733248, assumendo blocchi da 512 byte otteniamo 3.7G)

+ 		1540
+

Geeksphone Keon

+

keon

+ 		+

v1.0.1 - nightly
+ scaricabile qui

+ 		320 x 480
+ PX=1		3.5Qualcomm Snapdragon S1 7225AB 1 GHzPosteriore: 3512MB4GB +

/data: 1.5G
+  DeviceStorage disponibile: 1023.4M

+ 		1580
+

Geeksphone Peak

+

peak

+ 		v1.0.1 - nightly
+ scaricabile qui		540 x 960
+ PX=1.5		4.3Qualcomm Snapdragon S4 8225 1.2 GHz dual-core +

Frontale: 2
+ Posteriore: 8

+ 		512MB4GB/data: 1.5G
+  DeviceStorage disponibile: 1023.4M		1800
Geeksphone Revolutionv1.3pre (alla consegna)540 x 960 PX=1.54.7Dual-core Intel® Atom™ processor Z2560 fino a 1.6GHz +

Frontale: 1.3 Posteriore: 8

+ 		1GB4GB +

/data: 2G
+  DeviceStorage disponibile: 2.5GB

+ 		2000
+

Nexus 4

+

nexus-4

+ 		v1.3 - nightly768 x 1280
+ 720p		4.7 +

Qualcomm
+ Snapdragon S4 Pro
+ 1.5 GHz quad-core

+ 		Posteriore: 82GB8 o 16GBtutto si trova in un grande calderone, non è disponibile uno slot MicroSD.  La dimensione del "calderone" varia a seconda della versione del dispositivo.2100
+

Foxconn InFocus

+

flatfish

+ 		 1280 x 80010A31 (Arm Cortex A7) Quad-Core 1.0 GHz +

Frontale: 2
+ Posteriore: 5

+ 		2GB16GB 7000
+

some phone thing

+

fugu

+ 		v1.2f (branch) per320 x 480   256MB   
+

Spreadtrum SC6821

+

tarako

+ 		v1.3 perHVGA
+ 320 x 480		3.5Cortex A5 1GHz0.3 (solo posteriore?)128MB (zram)2GB NAND flash (esterna) + 1GB LPDDR1 (interna)32GB (scheda MicroSD)1100
+

VIA Vixen

+

versione di flatfish sviluppata dalla comunità?

+ 		 1024 x 6007Cortex-A9 Dual Core 1.2 GHz +

Frontale: 0.3 Posteriore: 2
+  

+ 		1GB8GB  
+

Flame

+

"dispositivo di riferemento"

+ 		v1.3854 × 4804.5Qualcomm MSM8210 Snapdragon, 1.2GHZ Dual core processorFrontale: 2
+ Posteriore: 5		256MB -1GB (regolabile dallo sviluppatore)8GB 1800
+

Spiegazione delle colonne:

+ diff --git a/files/it/archive/b2g_os/phone_guide/zte_open/index.html b/files/it/archive/b2g_os/phone_guide/zte_open/index.html new file mode 100644 index 0000000000..7ccf6182a8 --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/zte_open/index.html @@ -0,0 +1,179 @@ +--- +title: The Firefox OS ZTE OPEN +slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN +translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN +--- +
+

Mozilla have partnered with ZTE to create the ZTE OPEN, a powerful Firefox OS-based device aimed at developers and early adopters worldwide. They are unlocked and open for testing and experimentation.

+
+

Purchasing a device

+

These devices are available through ZTE's US and UK eBay stores, and a separate Hong Kong page aimed at Asian and Oceanian customers who don't want to pay high postage costs. They are priced at $79.99/£59.99.

+ +

Upgrading Firefox OS

+

This section provides instructions for upgrading Firefox OS on your ZTE OPEN device.

+

General

+

In general, Firefox OS builds, updates and testing are done by connecting your phone to a computer using a USB cable, and using ADB (Android Debugging Bridge) and Fastboot to join the devices together and issue commands. You'll therefore need to install ADB and fastboot from the Android Developer Toolkit on your desktop machine. It is not necessary to install the entire toolkit. adb and fastboot are found in the /platform-tools/ folder.

+

Next, you need to go to your phone and enable remote debugging.

+

Firefox OS 1.1

+

On 10th December 2013: ZTE released a Firefox OS 1.1 upgrade for the ZTE OPEN. This now has fastboot enabled, which was caused the problems with the previous published builds.

+

At this point, it's best to first upgrade your phone to version 1.1, even if you wanted to go to version 1.2. To do this, download the 1.1 package that corresponds to your phone (OPEN (American Standard) or OPEN (European Standard)) and unzip it to get a PDF of instructions plus a firmware ZIP.

+
+

Note: User data will be wiped by the SD package installation. You should backup your data before starting.

+
+

Now follow these steps:

+
    +
  1. Power off your phone, remove the battery to access the microSD card and extract the card from its holder.
    2. +
  2. Connect the microSD card to your desktop machine.
    3. +
  3. Move US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip or EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip (depending on the version you downloaded) to the root directory of your microSD card. Do not unzip the file.
    4. +
  4. Disconnect the microSD card from your desktop computer and return it to your phone.
    5. +
  5. Hold the volume up and power keys down simultaneously. Volume up is activated by pressing the upper part of the long key on the left side of the phone. If you did it properly, you’ll enter the Firefox OS recovery mode. (Note that the Firefox OS logo may display briefly before you enter the recovery mode; sometimes this can take a little while.)
    6. +
  6. Use the volume up/down key to move from one item to the other in the menu, and chose “apply update from external storage.”
    7. +
  7. Press the power key to confirm the selection. You’ll see a new screen listing the files you have on the microSD card.
    8. +
  8. Again use volume up/down key to select the firmware: either US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip or EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip (depending on the version you downloaded), and press the power key to confirm.
    9. +
+

If everything went well, you’ll see a sequence of status messages, culminating with one that says, “Install from sdcard complete.” You’ll need to select “reboot system now”: your phone will reboot, and you’ll see the configuration screen you saw the first time you powered on the phone.

+

Firefox OS 1.2

+

In January 2014, ZTE released a beta version of Firefox OS 1.2 (fastboot enabled, with root access). It is basically version 1.1 baseline + version 1.2 Gecko and Gaia, and doesn't require the build to be put on the phone's SD Card.

+

With 1.1 installed as described above, open a terminal and check that the connection is made with the following command:

+
adb devices -l
+
+

You should see your device as something like, "roamer2    device usb:2-1.2", in response.

+

Download the appropriate version of the build from the Dropbox account ZTE has set up: US version or UK version. For Windows users, you can also download special instructions, and an upgrade tool to help you to install the new version easily. The steps below however will work on all operating systems – Linux, OS X, and Windows – without relying on the special tool.

+

Once you have the file, extract the contents, and open a console. Note that those steps will erase your personal data, so be sure to make a (backup) first. Then navigate to the folder where the files are. Still in the console, type this command:

+
adb reboot bootloader
+

While the phone is rebooting, execute the following command. (Fastboot only works inside a reboot):

+
sudo fastboot devices
+
+

If you see, "< waiting for device >", hit Ctrl-C and retry the command until you see something like, "ROAMER2    fastboot", in response.

+

Then, quickly execute the following commands while it is still rebooting:

+
fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot flash recovery recovery.img
+fastboot erase cache
+fastboot reboot
+

(The reboot completed before I was done entering all the commands as I was distracted. I simply restarted from the, "adb reboot bootloader".)

+

If everything went well, your phone should reboot at this point. You’ll find that this version of 1.2 from ZTE includes many test applications, which you can remove if you like.

+
+

Note: Upgrading your ZTE Open to Firefox 1.1 or 1.2 (fastboot enabled) by Frédéric Harper also provides a useful breakdown of the install process.

+
+

Phone features

+ +
+

Note: the Hong Kong phones also support tri-band 3G Networks — HSDPA 850/1900/2100 (850/1900 for US, CA, 850/1900/2100 for Asia, AU, and 900/2100 for EU.)

+
+

Wireless carriers

+
+

Pricing information is for reference only and may not be accurate. Visit the associated link for official information.

+
+

US carriers

+

AT&T

+ +
Sampling of prepaid AT&T plans
+

Prepaid GoPhone®, Smartphone Plans

+ +

Aio

+ +
Sampling of prepaid Aio plans
+ +

Good2GO

+ +
Sampling of prepaid Good2GO plans
+ +

Other {{ anch("AT&T") }} MVNOs

+

These carriers do not offer additional 3G data.

+ +

T-Mobile

+ +

Canadian carriers

+

The US version of the ZTE Open also work in Canada on carriers that use the Bell/Telus network, or the Rogers network. Some regional carriers like Sasktel or MTS that have UMTS should work too.

+

It will not work on carriers that do not use UMTS or GSM, like Public Mobile, nor on the carriers that use the AWS band like WIND Mobile, Mobilicity, Videotron or Eastlink.

+

Memory card

+

File system

+

In order to be recognized by the phone, the MicroSD card must be formatted as a FAT32 file system. If a card is new or has never been reformatted, it should work as is.

+

Device revisions

+

Revision 01

+

Phones produced before 09/27/2013 do not have fastboot enabled and must be updated. Normally, this would be handled by Software Updates, but since some users have reported trouble with this method, ZTE have made SD card packages available to enable fastboot on earlier devices. Flash images for:

+ +

The zip file is linked under Downloads. Once the file is downloaded and unzipped, follow the instructions in the bundled PDF to flash the package to your phone.

+

Related Support Forum Questions:

+ +

Revision 02

+

Phones produced on or after 09/27/2013 are fastboot enabled by default. This includes the Hong Kong phones.

+
+

Note: If you are unsure of your phone's revision, check it in Settings > Device Information > Software. If it is older than the following version numbers, you will need to update your phone using the above SD packages to enable fastboot.

+
    +
  • Phones from UK store：OPEN_EU_DEV_FFOS_V1.0.0B02
    • +
  • Phones from US store：OPEN_US_DEV_FFOS_V1.0.0B02 (Some phones may display this version incorrectly, see bug 916098.)
    • +
+
+

Device support

+

Once your phone has {{ anch("Device revisions","fastboot enabled") }}, you will then be able to build and install new Firefox OS/B2G builds on it (start at the build prerequisite instructions, and treat the ZTE like it is an Inari device, for the purposes of configuration), and recover your phone if necessary, using the procedure cited in the {{ anch("I bricked my phone") }} section.

+

If you encounter errors about setting the system time while flashing a custom build, you may need to download a modified boot image.

+

I bricked my phone

+

If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with the following simple procedure.

+

First remove the USB cable and then remove the battery from the phone for 30 seconds. Then reinsert the battery and press the volume up button while holding the power button for a few seconds. Next reconnect the USB cable and run the following commands from a terminal window in the directory that contains the SD package files described above (it is worth checking for an update to the SD package before you do this):

+
fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+
+

This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.

+

Headphones not working?

+

We found that the headset jack is designed by a Chinese manufacturer that has compatibility problems with other brands of headsets that include microphones. You may have voice mute problems when you try to use headsets made by Apple, Samsung, HTC, and others. You can buy a 3.5 mm headset adapter that reverses the microphone and ground pins to avoid this problem. For more information, see {{ Bug("812607") }}.

+

Other support notes

+

Some customers have come across an Issue of FOTA updates failing to enable fastboot; this is still under investigation, and we are assisting ZTE to analyze every scenario. We will post more information as it is available.

+

If your phone was unfortunately damaged during the FOTA update because of ZTE providing false or wrong update files, you can attempt to restore it to factory settings using the appropriate SD image and instructions referenced in {{ anch("Revision 01") }}. Otherwise, send your phone back to the eBay store you purchased it from in exchange for a new one. You may contact the store owner directly via an eBay message.

+

See also

+

Official Dev Phone page on Firefox Marketplace

+

Draft User Manual [en-US] - PDF

diff --git a/files/it/archive/b2g_os/phone_guide/zte_open_c/index.html b/files/it/archive/b2g_os/phone_guide/zte_open_c/index.html new file mode 100644 index 0000000000..b18b0ff3da --- /dev/null +++ b/files/it/archive/b2g_os/phone_guide/zte_open_c/index.html @@ -0,0 +1,263 @@ +--- +title: ZTE OPEN C +slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C +tags: + - Device + - Firefox OS + - Gaia + - Open C + - Phone + - Smartphone + - zte +translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C +--- +
+

Lo smartphone ZTE Open C Firefox OS rappresenta un'offerta evoluta di ZTE con hardware di fascia alta, tra cui una fotocamera a 3 MP e uno schermo da 4 pollici ed è disponibile con versione 1.3 di Firefox OS preinstallata.  Questo articolo fornisce informazioni sul telefono, incluse procedure dettagliate di aggiornamento e di risoluzione di problemi.

+
+ +
+

Nota: Le seguenti istruzioni non sono valide per dispositivi ZTE Open. Se hai un dispositivo ZTE Open dorvesti andare alla nostra pagina ZTE Open.

+
+ +
+

Nota: Il tool di aggiornamento necessario per lo sblocco del telefono (vedi sotto) è disponibile ad oggi solamente per Windows. Non acquistare questo telefono se non hai un sistema Windows e vuoi installare manualmente gli aggiornamenti di Firefox OS.

+
+ +

Open C blue nuit

+ +

Lo ZTE Open C è stato il primo telefono con l'ultimo aggiornamento di Firefox OS a metà 2014. Offre molteplici nuove funzionalità tra cui l'accesso diretto al lettore musicale dalla schermata di blocco o dalla barra delle notifiche e funzionalità avanzate di condivisione dati via Bluetooth, quali il trasferimento simultaneo di più file. Gli utenti ora possono navigare il telefono più rapidamente con gli "smart folder" che organizzano automaticamente le applicazioni in categorie, con prestazioni di scorrimento dello schermo migliorate e con tempi di avvio più rapidi per le applicazioni di sistema (ad esempio il calendario, i contatti, la fotocamera).

+ +

Acquistare un dispositivo

+ +

Il telefono viene venduto a US $69.99, ed è disponibile su eBay:

+ + + +
+

Nota: I telefoni non sono dotati di applicazioni pre-installate o servizi specifici di compagnie telefoniche. Sono inoltre completamente sbloccati per l'uso da parte degli sviluppatori.

+
+ +

Caratteristiche del telefono

+ +

Puoi trovare più informazioni alla nostra pagina dedicata alle specifiche per telefoni e dispositivi.

+ +

Aggiornare il software

+ +

Per aggiornare la versione di Firefox OS del tuo Open C il modo più semplice è quello di utilizzare le immagini disponibili sul sito web di ZTE. Vai alla pagina di supporto Software di ZTE, seleziona la tua regione nella colonna di sinistra, quindi Smart Phone nella colonna al centro, e Open C (European Standard) o Open C (American Standard), a seconda di dove è stato acquistato il telefono, nella colonna di destra. Quindi fai clic sul pulsante Selected per andare alla pagina di download.

+ +

Quando hai scaricato la build, troverai un PDF nel file ZIP che ti spiega come installarla.

+ +

 

+ +

Immagini di sistema fornite dalla Community francese di Mozilla

+ +
+

Ricordate che l'installazione delle rom della community non può prescindere dal rooting del telefono per il tramite del software windows Open C upgrade Tool. Il rooting con altri metodi (via linux. ad esempio) non vi permetterà di portare a buon fine l'installazione!

+
+ +

Ormai da qualche tempo, la community francese di Mozilla mette a disposizione degli utenti delle immagini di firefox os realizzate appositamente per lo ZTE Open C.

+ +

Al momento, questa è la procedura più semplice per aggiornare il vostro dispositivo. Anche in questo caso, però, sarà necessario avere un terminale con i permessi di root.

+ +

Anzitutto, recatevi sul portale dedicato e selezionate la tipologia di dispositivo in vostro possesso, scegliendo tra:

+ + + +

Dopo aver effettuato il rooting del vostro dispositivo con l'ausilio dell'Open C Upgrade Tool, scegliete l'immagine che preferite, a seconda del canale di sviluppo:

+ + + +

Prima di provvedere all'installazione tramite recovery mode, ricordate di verificare la carrispondenza del codice sha1.checksum, tramite il seguente comando:

+ +
 sha1sum update-xxxxxxxxxxxxxx.zip
+ +

 

+ +

Immagini di sistema fornite da Mozilla

+ +

Se non vuoi aggiornare Gecko e Gaia con le procedure descritte nei paragrafi precedenti puoi utilizzare direttamente le immagini fornite da Mozilla per i dispositivi Flame. Dopo aver sblocccato il telefono con il programma di aggiornamento di ZTE, puoi scaricare un'immagine di sistema dalla cartella delle nigthly builds. Questo procedimento cancellerà tutti i tuoi dati. Per eseguire un backup del tuo profilo utente utilizza questo script prima di scaricare la nuova immagine ma dopo aver sbloccato il telefono.

+ +

Scegli la distribuzione fra mozilla-central, aurora o vanilla e quindi scarica l'immagine con il runtime di Gecko. Ogni cartella ha una nomenclatura quale "2014-10-06-xx-yy-zz-mozilla-distribuzione-nome_in_codice_del_dispositivo" perciò tu dovrai cercare "2014-10-06-xx-yy-zz-mozilla-distribuzione-flame". L'immagine all'interno della cartella specifica la versione di Gecko e il linguaggio, "b2g-34.0a2.en-US.android-arm.tar.gz" identifica la versione 34 di Gecko e inglese-americano come linguaggio. Scarica "Gaia.zip" se vuoi aggiornare anche Gaia.

+ +

Per scaricare queste immagini sul telefono devi utilizzare lo script shallow_flash, che trovi qui, scaricalo ed esegui i seguenti comandi attraverso un emulatore di terminale.
+
+ Da Mac e Cygwin:

+ +
 ./shallow_flash.sh -g gaia.zip -G b2g-XX.XX.en-US.android-arm.tar.gz
+ +

Da Linux:

+ +
 ./shallow_flash.sh -ggaia.zip -Gb2g-XX.XX.en-US.android-arm.tar.gz
+ +

 

+ +

Aggiornamenti "manuali"

+ +

Se desideri aggiornare te stesso Gecko o Gaia, il processo è un po' più complicato in quanto il telefono è bloccato di default (senza privilegi di root). Per sbloccare il telefono si può utilizzare il programma Open_C_upgrade_Tool disponibile sul sito comebuy.com che ti permette di aggiornare il firmware per consentire l'accesso come root e abilitare fastboot. Con questi privilegi puoi successivamente aggiornare il telefono con nuove componenti software.

+ +
+

Nota: Questo programma di aggiornamento è disponibile solo per Wondows per ora.

+
+ +

Se vuoi sbloccare il telefono da OS X o Linux, segui la seguente procedura:

+ +
    +
  1. Scarica l'immagine disponibile al sito comebuy.com tramite il link riportato sopra (indicata con ZTE_OPENC_EU).
    2. +
  2. Fai l'unzip dell'immagine, dovresti trovare boot.img.
    3. +
  3. Aggiungi le seguenti linee in /etc/udev/android.rules:
    4. +
  4. + 
    SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", ATTR{idProduct}=="1350", MODE="0666", GROUP="plugdev"
+SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666", GROUP="plugdev"
    +
    5. +
  5.  Riavvia il dispositivo nella modalità fastboot utilizzando il comando: + 
    adb reboot-bootloader
    +
    6. +
  6. Carica sul dispositivo la nuova immagine boot.img utilizzando il seguente comando: + 
    fastboot flash boot boot.img
    +  Se preferisci, per verificre il corretto funzionamento della build prima di caricare la nuova immagine, puoi utilizzare il comando: + + 
      fastboot boot boot.img
    +
    7. +
  7. Riavvia il dispositivo utilizzando: + 
    fastboot reboot
    +
    8. +
  8. Ora dovresti avere un telefono sbloccato. Per verificare, il seguente comando dovrebbe restituire 0: + 
    adb shell getprop ro.secure
    +
    9. +
+ +

Aggiornare Gecko e Gaia

+ +

Dopo aver abilitato fastboot, potrai costruire e installare per Firefox OS/B2G le nuove componenti Gecko e Gaia.

+ +
+

Warning: Questo non significa che puoi installare un immagine completa per Flame. Renderebbe il telefono permanentemente inutilizzabile.

+
+ +
    +
  1. Parti dai prerequisiti di build e tratta l'Open C come se fosse un dispositivo Flame ai fini della configurazione: questo perchè Flame e Open C sono entrambi basati sul sistema Android Jellybean. 
    2. +
+ +
    +
  1. Durante lo step di configurazione è necessario fare riferimento ad un file di manifesto personalizzato per l'Open C. Scarica l'allegato di questa segnalazione di bug e salvalo localmente sul tuo disco fisso in un posto facilmente indirizzabile col nome di openc.xml.
    2. +
  2. Ripulisci la directory B2G, rimuovendo le cartelle non necessarie: + 
     rm -rf objdir-gecko/ out/ backup-flame/
    +
    3. +
  3. Opzionale: Prima di procedere con gli step successivi, puoi scegliare la versione di build di Gecko e Gaia. Per far ciò, apri il tuo file open.xml, cerca i tag di progetto gecko.git, gaia, e gonk-misc e modifica il valore dell'attributo revision per definire la build. Ad esempio puoi fare la build della versione 2.2. di Gecko and Gaia, modificando i valori di revision come mostrato di seguito: + 
    <project name="gecko.git" path="gecko" remote="mozillaorg" revision="v2.2"/>
+(...)
+<project name="gaia" path="gaia" remote="mozillaorg" revision="v2.2"/>
+<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="v2.2"/>
    + +
     
    +
    4. +
  4. Ora configura Firefox OS con il seguente comando: + 
    ./config.sh flame /PERCORSO/PER/openc.xml
+
    +
    5. +
  5. Quindi puoi creare Gecko e installarlo sul telefono utilizzando i seguenti comandi: + 
    ./build.sh gecko
+./flash.sh gecko
    + +
    +

    Nota: L'ultimo passo del comando flash.sh dovrebbe riavviare il dispositivo, ma la sequenza di avvio non si completerà (si bloccherà sulla spash page con la volpe animata). Non preoccuparti, è normale.

    +
    +
    6. +
  6. +

    Ora dovrai aggiornare anche Gaia, in modo tale che sul dispositivo la versione di Gecko lavorerà con la versione di Gaia.

    + + 
    cd gaia
+make reset-gaia
    + +

    In altrernativa, se vorrai installare anche Spark potrai utilizzare i seguenti comandi:

    + + 
    cd gaia
+make GAIA_DISTRIBUTION_DIR=distros/spark GAIA_DEV_PIXEL_PER_PX=1.5 make reset-gaia
    +
    7. +
  7. Infine, potresti aver bisogno di aggionare i font.
    8. +
+ +
+

Attenzione: Installando un'immagine completa di Flame sul dispositivo renderebbe inutilizzabile il telefono. (Questo perchè flash.sh utilizza adb push invece di fastboot flash)

+
+ +

 

+ +

Aggiornare Gaia

+ +

Per aggiornare solo Gaia, e non Gecko, devi fare un fork e quindi clonare il repository di Gaia da Github e successivamente installarlo sul dispositivo.

+ +
    +
  1. Assicurati di avere ADB installato.
    2. +
  2. Vai alla pagina https://github.com/mozilla-b2g/gaia, quindi fai clic sul pulsante "fork" nell'angolo in alto a destra per disporre del codice nel tuo repository personale.
    3. +
  3. Copia il codice dal repository che hai precedentemente creato sul tuo desktop/laptop utilizzando il seguente comando dal tuo terminale: + 
    git clone https://github.com/your-github-username/gaia.git
    +
    4. +
  4. Sempre dal terminale fai cd nella cartella creata.
    5. +
  5. Sul tuo dispositivo, abilita il debugging remoto (seleziona le opzioni ADB e Devtools).
    6. +
  6. Ora collega il telefono al computer via USB e controlla che sia stato riconosciuto eseguendo il comando  adb devices all'interno del terminale.
    7. +
  7. Esegui il seguente comando per riavviare il telefono e aggiornarlo col nuovo codice sorgente Gaia: + 
    make reset-gaia
    +
    8. +
+ +

Aggiornamento dei font

+ +

Dopo aver aggiornato Gecko/Gaia, potresti riscontrare un'incoerenza fra i font che Gecko e Gaia si aspettano e quelli che vengono forniti con l'immagine. Per fissare questo difetto scarica il nostro pacchetto per l'aggiornamento dei font, estrai il contenuto, spostati all'interno della cartella ed esegui lo script flash.sh.

+ +

Un'altra possibilità è quella di utilizzare lo script update_system_fonts.sh, che scaricherà e installerà i font di sistema automaticamente.

+ +

 

+ +

Il mio telefono non è più utilizzabile

+ +

Se il tuo telefono non dovesse più rispondere ai comandi, dovresti essere in grado di ripristinarlo utilizzando le immagini ufficiali e le istruzioni per installarle tramite scheda SD, sul sito web di ZTE:

+ + + +

Invece, se la partizione di sistema è difettosa, dovrai riparare il telefono utilizzando l'accesso diretto con fastboot. Assumendo che tu stia utilizzando Ubuntu GNU/Linux:

+ +
    +
  1. Scarica l'immagine di sistema di recovery dalla pagina di supporto di ZTE e estrai l'archivio update.zip sul tuo desktop (~/Desktop/).
    2. +
  2. Estrai il file recovery.img dall'archivio update.zip e salvalo sul tuo desktop.
    3. +
  3. Crea una cartella small-system/ sul tuo desktop e copia all'interno il file build.prop e le cartelle lib/ e bin/ che troverai nell'archio update.zip all'interno della cartella system.
    4. +
  4. Installa il pacchetto android-tools-fsutils (o installa ext4_utils dai sorgenti seguendo questa pagina di XDAdevelopers).
    5. +
  5. Crea la tua immagine small-system.img: + 
    make_ext4fs -l 53M small-system.img ~/Desktop/small-system/
    +
    6. +
  6. Sposta small-system.img sul desktop e riavvia il tuo dispositivo nella modalità  fastboot premendo i tasti di power + volume down.
    7. +
  7. Connetti il dispositivo al tuo computer (fastboot devices dovrebbe mostrare il dispositivo) e carica small-system.img su di esso: + 
    fastboot flash system ~/Desktop/small-system.img
    +
    8. +
  8. Quindi riavvia nella modalità di recovery utilizzando recovery.img: + 
    fastboot boot ~/Desktop/recovery.img
    +
    9. +
  9. Dal menu di boot seleziona apply update from ADB entry (utilizzando volume up e volume down per navigare e power per selezionare) e quindi: + 
    adb sideload ~/Desktop/update.zip
    +
    10. +
  10. +

    Alla fine del processo riavvia il telefono.

    +
    11. +
+ +
+

Nota: Fai riferimento a questo articolo nel supporto per maggiori informazioni.

+
diff --git a/files/it/archive/b2g_os/platform/apps_architecture/index.html b/files/it/archive/b2g_os/platform/apps_architecture/index.html new file mode 100644 index 0000000000..4a8abbf3f8 --- /dev/null +++ b/files/it/archive/b2g_os/platform/apps_architecture/index.html @@ -0,0 +1,38 @@ +--- +title: Architettura delle apps di Firefox OS +slug: Archive/B2G_OS/Platform/Apps_architecture +tags: + - Apps + - Architettura + - Firefox OS + - Guida +translation_of: Archive/B2G_OS/Platform/Apps_architecture +--- +
+

Questo articolo spiega i dettagli su come le applicazioni sono eseguite e gestite in Firefox OS. Queste informazioni saranno utili per la piattaforma degli sviluppatori di Firefox OS oltre che ai singoli team al lavoro per portare il sistema operativo verso nuovo hardware. Se sei uno sviluppatore di app queste informazioni potrebbero non esserti necessarie ma potresti comunque esserne interessato.

+
+ +

Il processo di avvio delle app

+ +

Quando l'utente seleziona l'app che desidera avviare, o quando un'app deve essere lanciata dal sistema, nella home screen viene inserito un collegamento dalla {{domxref("App")}} API, successivamente viene fatta una chiamata al metodo {{domxref("App.launch()")}} per avviare l'applicazione.

+ +

Gecko riceve la richiesta e invia il {{domxref("mozChromeEvent")}} all' app di sistema con i dettagli. L' app di sistema gestisce l'evento inserendo un nuovo {{HTMLElement("iframe")}} all'interno del suo DOM tree e caricando l' app all'interno del nuovo {{HTMLElement("iframe")}}. Quel frame sarà l'home della app fino al momento in cui terminerà.

+ +

Ogni app richiede un manifest che la descrive ed ha una particolare gerarchia all'interno del suo contenitore. Per dettagli è disponibile l'articolo App manifest.

+ +

Comunicare con Gecko

+ +

La comunicazione tra Gecko e l'app di sistema Gaia è effettuata tramite {{domxref("mozChromeEvent")}} e {{domxref("mozContentEvent")}}. mozChromeEvents sono trasmessi da chrome al contenuto e mozContentEvents sono trasmessi dal contenuto a chrome. La comunicazione è utilizzata per controllare la creazione e la chiusura sicura della UI per inserire le funzioni richieste per le notifiche e per gli altri compiti, incluso l'avviso all' app di sistema di avviare un' app.

+ +
+

Nota: Puoi trovare ulteriori informazioni sul funzionamento di questi eventi leggendo la nostra documentazione System app documentation. Puoi anche imparare molto sulle implementazioni dando un'occhiata al codice {{source("b2g/chrome/content/shell.js")}}.

+
+ +

Guarda anche

+ + diff --git a/files/it/archive/b2g_os/platform/architecture/index.html b/files/it/archive/b2g_os/platform/architecture/index.html new file mode 100644 index 0000000000..c226b82a56 --- /dev/null +++ b/files/it/archive/b2g_os/platform/architecture/index.html @@ -0,0 +1,761 @@ +--- +title: Visione architetturale di insieme +slug: Archive/B2G_OS/Platform/Architecture +tags: + - Architettura + - B2G + - Firefox OS + - Guida + - IPC + - IPDL +translation_of: Archive/B2G_OS/Architecture +--- +
+

Questo articolo offre una panoramica di alto livello dell'architettura della piattaforma Firefox OS, introducendo concetti chiave e spiegando come le sue componenti interagiscono a livello base.

+
+ +
+

Nota: Tieni presente che Firefox OS è ancora un prodotto in pre-release. L'architettura qui descritta non è necessariamente definitiva.

+
+ +

Terminologia

+ +

Seguono alcuni termini che vanno compresi prima di procedere oltre con la lettura della documentazione.

+ +
+
B2G
+
In breve Boot to Gecko.
+
Boot to Gecko
+
Il nome in codice del sistema operativo Firefox OS. Vedrai spesso questo termine riferito a Firefox OS, in quanto venne usato a lungo prima che il progetto avesse un nome ufficiale.
+
Firefox OS
+
Firefox OS è fondamentalmente Mozilla (e i partner OEM) con i rispettivi brand e servizi di supporto e il sistema Boot to Gecko, con l'obiettivo di crearne un prodotto finito.
+
Gaia
+
+
+
L'interfaccia utente della piattaforma Firefox OS. Ogni oggetto rappresentato sullo schermo, dopo aver avviato Firefox OS, viene gestito dallo strato di Gaia. Gaia implementa la schermata di blocco, la schermata iniziale, e tutte le applicazioni standard che ci si aspetta in un moderno smartphone. Gaia è implementato interamente con HTML, CSS e JavaScript. Le sue uniche interfacce al sistema operativo sottostante sono attraverso le open Web API. implementate dallo strato di Gecko. Applicazioni di terze parti possono essere installate attraverso Gaia.
+
+
+
Gecko
+
È l’ambiente di esecuzione delle app di Firefox OS; cioè, lo strato che fornische tutto il supporto per gli standard HTML, CSS e JavaScript. Garantisce che tutte le API siano correttamente funzionanti su ogni sistema operativo supportato da Gecko. Questo significa che Gecko include, fra l'altro, uno stack di rete, uno grafico, un motore che realizza il layout del contenuto, una macchina virtuale per l’esecuzione di codice JavaScript e livelli di portabilità per differenti piattaforme.
+
Gonk
+
Gonk è il sistema operativo di basso livello della piattaforma Firefox OS, consiste di un Kernel Linux (derivato da quello sviluppato nel progetto Android Open Source Project (AOSP)) e di uno strato di astrazione dell'hardware nello spazio di indirizzamento utente (userspace HAL). Il kernel e numerose librerie userspace sono noti progetti open source: Linux, libusb, bluez e via dicendo. Alcune parti del HAL sono condivise con il progetto AOSP: il GPS, la fotocamera, e altri. Si potrebbe dire che Gonk è una distribuzione di Linux. Gonk è uno dei sistemi su cui viene portato Gecko; cioè, così come c'è un porting di Gecko per Gonk, c'è un porting di Gecko per Mac OS, Windows e Android. Poichè il progetto Firefox OS ha il pieno controllo su Gonk, si possono esporre interfacce a Gecko che non possono essere esposte da altri sistemi operativi. Per esempio, Gecko ha accesso diretto allo stack di telefonia e al frame buffer di Gonk, ma non ha il medesimo accesso in ogni altro sistema operativo.
+
Jank
+
Questo termine normalmente utilizzato nel mondo delle app mobili, si riferisce all'effetto di lentezza piuttosto che di inefficienza indotto da codice non ottimizzato che blocca l'aggiornamento dell'interfaccia utente causando crash o ritardi nella risposta. I nostri ingegneri lavorano su Gaia utilizzano varie tecniche per cercare di evitare questo effetto a tutti i costi.
+
+ +

Architettura d'insieme

+ +

Nella seguente immagine viene confrontata l'architettura di piattaforme proprietarie e quella di Firefox OS.

+ +

on the left is a native mobile architecture stack, on the right is the Firefox OS architecture. they are similarm +except that the native stack is all proprietary device functionality, and the Firefox OS stack is all done with open source and we +b technologies.

+ +

Firefox OS ha eliminato lo strato di API native fra il sistema operativo e gli strati applicativi. Questa soluzione integrata riduce il carico della piattaforma e semplifica la gestione della sicurezza senza sacrificare le prestazioni e una ricca esperienza utente.

+ +
    +
  1. Gaia è l'insieme delle web app principali e dell'interfaccia utente di Firefox OS. È' scritto in HTML5, CSS e JavaScript. Espone un insieme di API per consentire al codice della UI di interagire con l'hardware del telefono e con le funzionalità di Gecko.
    2. +
  2. Gecko è il motore web e lo strato di presentazione di Firefox OS. Rappresenta l'interfaccia fra i contenuti web e il dispositivo. Gecko fornisce il motore di parsing e rendering HTML5, un insieme di Web API sicure per accedere alle funzionalità hardware, un framework per la gestione della sicurezza, un sistema per la gestione degli aggiornamenti e altri servizi core.
    3. +
  3. Gonk è il componente al livello del kernel nello stack di Firefox OS, è l'interfaccia fra Gecko e l'hardware del dispositivo. Gonk gestisce l'hardware sottostante e espone le funzionalità dell'hardware alle Web API implementate in Gecko. Gonk può essere visto come la “black box” che esegue il lavoro complesso e dettagliato dietro le scene, controllando il dispositivo mobile gestendo le richieste al livello hardware.
    4. +
  4. Il dispositivo mobile è il telefono su cui viene eseguito Firefox OS. L'OEM (Original Equipment Manifacturer, l'azienda che ha costruito il dispositivo) è responsabile per la fornitura del dispositivo mobile.
    5. +
+ +

Architettura specifica di Firefox OS

+ +

Firefox OS Architecture

+ +

Procedura di boot di Firefox OS

+ +

Questa sezione descrive il processo di boot (avvio) dei dispositivi Firefox OS, quali componenti sono coinvolte e dove. Come introduzione, il flusso generale di boot del sistema va dal bootloader nello spazio di indirizzamente del kernel, a init nel codice nativo, a B2G e Gecko nello spazio utente e quindi finalmente alla system app, al window manager, alla homescreen app all'interno di Gecko. Le altre applicazioni vengono eseguite successivamente.

+ +

+ +

Il processo di bootstrap

+ +

Quando un dispositivo Firefox OS viene avviato, l'esecuzione inizia nel bootloader primario. Da li, il processo di caricamento del sistema operativo procede nella modalità tipica; una successione di bootloader di più alto livello caricano quello successivo. Alla fine d questo processo, l'esecuzione viene passata al kernel Linux.

+ +

Ci sono alcuni punti che vale la pena menzionare nel processo di boot:

+ + + +

Il kernel Linux

+ +

Il kernel Linux utilizzato da Gonk è veramente simile a quello originale da cui è derivato (basato sul progetto Android Open Source Project). Ci sono piccole modifiche apportate nel progetto AOSP che non sono ancora stete depositate. Inoltre, i produttori di hardware alcune volte modificano il kernel e depositano tali modifiche sulla base della loro pianificazione. In generale, tuttavia, il kernel è simile all'originale.

+ +

Il processo di avvio di Linux è ben documentato altrove in Internet, pertanto questo articolo non ne parlerà.

+ +

Il Kernel Linux gestirà le componenti hardware del dispositivo e i principali processi. Al termine della sequenza di avvio del Kernel verrà avviato init nello spazio di indirizzamento utente (userspace), come avviene nella maggior parte dei sistemi UNIX-like. Init eseguirà i processi definiti in init.rc e di seguito quelli definiti in init.b2g.rc quali b2g (Il processo principale di Firefox OS, che contiene Gecko stesso) e rild (il processo che gestisce la componente hardware modem e radio del dispositivo) — vedi sotto per maggiori dettagli.

+ +

Dopo aver avviato init, il kernel gestisce le chiamate di sistema dai processi userspace e interrrupt dai dispositivi hardware. Molte funzionalità hardware vengono esposte ai processi userspace via sysfs. Ad esempio, il seguente è un estratto del codice che legge lo stato di carica della batteria in Gecko:

+ +
FILE *capacityFile = fopen("/sys/class/power_supply/battery/capacity", "r");
+double capacity = dom::battery::kDefaultLevel * 100;
+if (capacityFile) {
+  fscanf(capacityFile, "%lf", &capacity);
+  fclose(capacityFile);
+}
+ +

Altro sul processo di Init

+ +

Sempre init esegue il mount dei file system richiesti e l'avvio dei servizi di sistema. Dopo di che, rimane attivo come gestore di processi. Similmente a come avviene in altri sistemi UNIX-like. Esso interpreta script (i file init*.rc ) che contengono i comandi per avviare vari servizi. Il file init.rc di Firefox OS è sostanzialmente quello orignale di Android per quel dispositivo modificato per includere quanto necessario ad avviare Firefox OS, e varia da dispositivo a dispositivo.

+ +

Un compito chiave gestito dal processo di init è l'avvio del processo b2g; il core del sistema opetativo Firefox OS.

+ +

Il codice in init.rc per avviare b2g è simile al seguente:

+ +
service b2g /system/bin/b2g.sh
+  class main
+  onrestart restart media
+ +
+

Nota: Esattamente quanto init.rc differisce dalla versione di Android varia da dispositivo a dispositivo; alcune volte init.b2g.rc è semplicemente aggiunto, altre volte le modifche sono più significative.

+
+ +

L'archituttura dei processi userspace

+ +

Ora diamo uno sguardo di alto livello di come le varie componenti di Firefox OS interagiscono fra loro. Il diagramma mostra i principali processi userspace di Firefox OS.

+ +

Userspace diagram

+ +
+

Nota: Tieni a mente che Firefox OS è in sviluppo attivo, questo diagramma può cambiare e potrebbe non essere estremamente accurato.

+
+ +

b2g è il processo primario di sistema. VIene eseguito con privilegi molto alti; ha accesso alla maggior parte dei device hardware. b2g comunica con il modem, scrive sul framebuffer dello schermo, interagisce col GPS, con le fotocamere e altre funzionalità hardware. Internamente B2G esegue lo strato di Gecko (implementato da libxul.so). Leggi l'articolo su Gecko per conoscere i dettagli di come funziona e come B2G comunica con lui.

+ +

b2g

+ +

Il processo b2g avvia, di volta in volta, un numero di processi a bassa priorità chiamati content process. Si tratta di processi in cui vengono caricate applicazioni web e altri contenuti web. Comunicano con Gecko tramite IPDL, un sistema a passaggio di messaggi.

+ +

Il processo b2g esegue libxul, che referenzia b2g/app/b2g.js per le preferenze di default. Dalle preferenze viene letto il file HTML b2g/chrome/content/shell.html, compilato all'interno del file omni.ja. shell.html include a sua volta il file b2g/chrome/content/shell.js, il quale avvia la system app di Gaia.

+ +

rild

+ +

Il processo rild rappresenta l'interfaccia fra i servizi di telefonia di Firefox OS e l'hardware. rild è il deamon che implementa il Radio Interface Layer (RIL). In parte è codice proprietario ed è implementato dal produttore stesso dell'hardware per comunicare con il modulo modem/radio. Codice cliente può interfacciarsi con rild tramite un socket UNIX-domain su cui rild è in ascolto. Viene avviato dallo script di init, verosimilmente come segue:

+ +
service ril-daemon /system/bin/rild
+  socket rild stream 660 root radio
+ +

rilproxy

+ +

In Firefox OS il processo rilproxy è client di rild e agisce da proxy fra rild e b2g. È sufficente dire che tale proxy è richiesto come dettaglio di implementazione. Potete trovate il codice di rilproxy su GitHub.

+ +

mediaserver

+ +

Il processo mediaserver controlla la riproduzione di audio e video. Gecko si interfaccia ad esso tramite un meccanismo di chiamata di procedura remota di Android (RPC, Remote Procedure Call). Alcuni dei formati media che Gecko può riprodurre (OGG Vorbis audio, OGG Theora video, e WebM video) vengono decodificati da Gecko stesso e inviati direttamente al processo mediaserver. Altri formati vengono invece decodificati tramite libstagefright, che è in grado di accedere a codec proprietari e encoder hardware.

+ +
+

Note: Il mediaserver è un componente "temporaneo" di Firefox OS. Si prevede che verrà sostituito ma non prima della versione 2.0 di Firefox OS.

+
+ +

netd

+ +

Il processo netd viene utilizzato per configurare le interfacce di rete.

+ +

wpa_supplicant

+ +

Il processo wpa_supplicant è un servizio standard UNIX che gestisce la connettività con access point WIFI.

+ +

dbus-daemon

+ +

Il processo dbus-daemon implementa D-Bus, un sistema di comunicazione fra processi basato su bus di sistema a scambio di messaggi. Viene utilizzato da Firefox OS per la comunicazione Bluetooth.

+ +

Gecko

+ +

Gecko, come già accennato, implementa gli standard web (HTML, CSS, e JavaScript) e viene utilizzato per implementare qualsiasi cosa l'utente vede in Firefox OS e controlla tutte le interazioni con l'hardware del telefono. Le web app connettono l'HTML5 all'hardware attraverso l'utilizzo controllato e sicuro di Web API, implementate in Gecko. Le Web API offrono accesso a funzionalità dello strato hardware del telefono (quali la batteria o la vibrazione) e ai dati memorizzati o disponibili sul telefono (quali il calendario o i contatti). I contenuti web richiamano le Web API all'interno di HTML5.

+ +

Una app consiste in una collezione di contenuti web HTML5. Per costruire web app per dispositivi mobili Firefox OS gli sviluppatore semplicemente assemblano, pacchettizzano e distribuiscono questi contenuti web. A run time, i contenuti web vengono interpretati, compilati e renderizzati in un browser web. Per maggiori informazioni sulle App vai all'App Center.

+ +
+

Nota: Puoi trovare il codice sorgente di Gecko alla url http://dxr.mozilla.org. E 'un buon riferimento, ma con un numero limitato di repository. Oppure puoi utilizzare il tradizionale http://mxr.mozilla.org, che contiene più progetti Mozilla.

+
+ +

Diagramma architetturale di Gecko

+ +

+ + + +

I file di Gecko relativi a Firefox OS

+ +

b2g/

+ +

La cartella b2g contiene principalmente le funzioni relative a Firefox OS.

+ +
b2g/chrome/content
+ +

Contiene i file Javascript che vengono eseguiti dalla system app.

+ +
b2g/chrome/content/shell.html
+ +

È il punto di ingresso di Gaia - il codice HTML per la system app. shell.html carica settings.js e shell.js:.

+ +
<script type="application/javascript;version=1.8" src="chrome://browser/content/settings.js"> </script>
+<script type="application/javascript;version=1.8" src="chrome://browser/content/shell.js"> </script>
+ +

settings.js contiene i parametri di default di sistema.

+ +
b2g/chrome/content/shell.js
+ +

shell.js importa tutti i moduli necessari, registra i listener principali, imposta sendCustomEvent e sendChromeEvent per comunicare con Gaia e fornisce supporto per l'installazione delle webapp: dalle quote di indexedDB, alle funzionalità di RemoteDebugger, al supporto per le tastiere e ai tool di cattura delle schermate.

+ +

La funzionalità più importante di shell.js è quella di avviare la system app di Gaia e successivamente quello di delegare tutte le attività di gestione alla system app stessa.

+ +
let systemAppFrame =
+  document.createElementNS('http://www.w3.org/1999/xhtml', 'html:iframe');
+    ...
+  container.appendChild(systemAppFrame);
+ +
b2g/app/b2g.js
+ +

Questo script contiene le impostazioni predefinite, quali about:config nel browser e le stesse pref.js di Gaia. Queste impostazioni possono essere modificate dalla app di Settings o sovrascritte da user.js negli script di build di Gaia.

+ +

dom/{API}

+ +

Le nuove API (post-b2g) saranno collocate nella cartella dom/. Le vecchie API saranno collocate nella cartella dom/base, come ad esempio Navigator.cpp.

+ +
dom/apps
+ +

.jsm verranno caricati— .js API quali webapp.js installate

+ +
dom/apps/src/
+ +

Tutti i permessi sono definiti in PermissionsTable.jsm

+ +

dom/webidl

+ +

WebIDL è il linguaggio utilizzato per definire le web API. Dai una lettura a WebIDL_bindings per conoscere quali attribuiti sono supportati.

+ +

hal/gonk

+ +

Questa cartella contiene i file relativi ai livelli di porting di Gonk.

+ +

File generati

+ +
module/libpref/src/init/all.js
+ +

Contiene tutti i file di configurazione.

+ +
/system/b2g/ omni.ja and omni.js
+ +

Contiene i pacchetti di stile.

+ +

Eleborazione degli eventi di input

+ +

La maggior parte degli eventi di Gecko vengono innescati da azioni utente, quali la pressione di pulsanti, il tocco su un touch screen, e così via. Questi eventi vengono acquisiti da Gecko tramite l'interfaccia nsIAppShell implementata da Gonk che rappresenta il punto di ingresso principale per una applicazione di Gecko; cioè, il device driver della periferica di input richiamerà i metodi esposti dall'oggetto nsAppShell che rappresenta il sottosistema di Gecko per inviare eventi all'interfaccia utente.

+ +

Per esempio:

+ +
void GeckoInputDispatcher::notifyKey(nsecs_t eventTime,
+                                     int32_t deviceId,
+                                     int32_t source,
+                                     uint32_t policyFlags,
+                                     int32_t action,
+                                     int32_t flags,
+                                     int32_t keyCode,
+                                     int32_t scanCode,
+                                     int32_t metaState,
+                                     nsecs_t downTime) {
+  UserInputData data;
+  data.timeMs = nanosecsToMillisecs(eventTime);
+  data.type = UserInputData::KEY_DATA;
+  data.action = action;
+  data.flags = flags;
+  data.metaState = metaState;
+  data.key.keyCode = keyCode;
+  data.key.scanCode = scanCode;
+  {
+    MutexAutoLock lock(mQueueLock);
+    mEventQueue.push(data);
+  }
+  gAppShell->NotifyNativeEvent();
+}
+ +

Questi eventi provengono dal sistema input_event standard di Linux. Su questa struttura Firefox OS ha implementato uno strato di astrazione che fornisce alcune funzioni molto utili come il filtro degli eventi. Si può vedere il codice che crea eventi di input nel metodo EventHub :: GetEvents in widget/Gonk/libui/EventHub.cpp.

+ +

Una volta ricevuti da Gecko, gli eventi vengono inoltrati al DOM da nsAppShell:

+ +
static nsEventStatus sendKeyEventWithMsg(uint32_t keyCode,
+                                         uint32_t msg,
+                                         uint64_t timeMs,
+                                         uint32_t flags) {
+    nsKeyEvent event(true, msg, NULL);
+    event.keyCode = keyCode;
+    event.location = nsIDOMKeyEvent::DOM_KEY_LOCATION_MOBILE;
+    event.time = timeMs;
+    event.flags |= flags;
+    return nsWindow::DispatchInputEvent(event);
+}
+
+ +

Dopo di che, gli eventi vengono consumati da Gecko stesso o vengono inoltrati alle applicazioni Web come eventi DOM per ulteriori elaborazioni.

+ +

Grafica

+ +

Al livello più basso, Gecko utilizza OpenGL ES 2.0 per disegnare un contesto OpenGL. Questo avviene in NSWindow implementata da Gonk, con codice simile a questo:

+ +
gNativeWindow = new android::FramebufferNativeWindow();
+sGLContext = GLContextProvider::CreateForWindow(this);
+ +

La classe FramebufferNativeWindow è quella nativa Android; vedi FramebufferNativeWindow.cpp. Essa utilizza le API gralloc per accedere ai driver grafici per mappare i buffer dal framebuffer nella memoria.

+ +

Gecko usa i suoi Layers per comporre contesti sullo schermo. In sintesi accade quanto di seguito descritto:

+ +
    +
  1. Gecko scrive regioni di pagine separate in buffer di memoria. Spesso questi buffer sono nella memoria di sistema; altre volte sono delle texture mappate nello spazio di indirizzamento di Gecko, il che significha che Gecko sta scrivendo direttamente nela memoria video. Questo avviene generalmente attraverso il metodo BasicThebesLayer::PaintThebes().
    2. +
  2. Gecko quindi compone tutte le texture sullo schermo utilizzando comandi OpenGL. Questa composizione avviene in ThebesLayerOGL::RenderTo().
    3. +
+ +

I dettagli di come il Gecko gestisce il rendering dei contenuti web è oltre lo scopo di questo documento.

+ +

Hardware Abstraction Layer (HAL)

+ +

Lo strato di astrazione dell'hardware di Gecko è uno dei livelli di portabilità. Gestisce l'accesso alle interfacce di sistema di più basso livello su più piattaforme attraverso API C++, utilizzate dai livelli più alti di Gecko. Queste API sono implementate su base piattaforma all'interno del HAL di Gecko stesso. Lo strato di astrazione dell'hardware non viene esposto direttamente al codice JavaScript in Gecko - di questa interazione se ne occupano le Web API.

+ +

Diamo uno sguardo al processo da una prospettiva di più alto livello. Quando un utente utilizza una funzionalità del telefono (ad esempio effettua una chiamata, accede ad una rete wifi o si connette via Bluetooth), tutti gli strati dello stack tecnologico di Firefox OS vengono coinvolti per completare la richiesta. Le applicazioni e i contenuti web sottopongono le richieste per accedere al dispositivo attraverso chiamate alle Web API (direttamente all'interno di funzioni HTML5) implementate in Gecko. Gecko, a sua volta, sottopone le richieste a Gonk. Una singola richiesta di Gecko può innescare una serie complessa di operazioni, avviate e gestite da Gonk, sul dispositivo mobile.

+ +

Come lavora HAL

+ +

Consideriamo come esempio la API di Vibrazione. Definita in hal/Hal.h. In sintesi (semplificando la firma del metodo), abbiamo la seguente funzione:

+ +
void Vibrate(const nsTArray<uint32> &pattern);
+ +

Questa è la funzione chiamata dal codice di Gecko per abilitare la vibrazione del dispositivo in accordo con lo specifico pattern; una funzione corrispondente è disponibile per rimuovere la vibrazione. L'implementazione di Gonk di questo metodo è presente nel file hal/gonk/GonkHal.cpp:

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+  EnsureVibratorThreadInitialized();
+  sVibratorRunnable->Vibrate(pattern);
+}
+
+ +

Viene inviata la richiesta per avviare la vibrazione sul dispositivo ad un altro thread, tramite l'istruzione VibratorRunnable::Run(). Il ciclo principale di questo thread è simile al seguente:

+ +
while (!mShuttingDown) {
+  if (mIndex < mPattern.Length()) {
+    uint32_t duration = mPattern[mIndex];
+    if (mIndex % 2 == 0) {
+      vibrator_on(duration);
+    }
+    mIndex++;
+    mMonitor.Wait(PR_MillisecondsToInterval(duration));
+  }
+  else {
+    mMonitor.Wait();
+  }
+}
+
+ +

vibrator_on() è la API definita nel HAL di Gonk che avvia il motore di vibrazione. Internamente questo metodo invia un messaggio all'apposito driver scrivendo su un oggetto del kernel attraverso sysfs.

+ +

Implementazione delle API di Fallback del HAL

+ +

Le API HAL di Gecko sono sempre disponibili su tutte le piattaforme. Se Gecko viene portato su una nuova piattaforma che non espone il motore di vibrazione (ad esempio un desktop), viene comunque resa disponibile una API di fallback. Per il motore di vibrazione la API è implementata in hal/fallback/FallbackVibration.cpp.

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+}
+ +

Implementazione delle Sandbox

+ +

Poichè molti contenuti web vengono eseguiti in content process con privilegi bassi, non possiamo assumere che quei processi abbiano i privilegi adeguati (ad esempio) per avviare o spegnere il motore di vibrazione. Inoltre, vorremmo avere un posto unico in cui gestire eventuali situazioni di race condition. Nel HAL di Gecko questo viene gestito tramite una "sandbox". La sandbox agisce come un proxy, semplicemente inoltrando le richieste dei content process al "Gecko server". Le richieste vengono inoltrate utilizzando IPDL.

+ +

Per la vibrazione, questo viene gestito dalla funzione di Vibrate() implementata in hal/sandbox/SandboxHal.cpp:

+ +
void Vibrate(const nsTArray<uint32_t>& pattern, const WindowIdentifier &id) {
+  AutoInfallibleTArray<uint32_t, 8> p(pattern);
+
+  WindowIdentifier newID(id);
+  newID.AppendProcessID();
+  Hal()->SendVibrate(p, newID.AsArray(), GetTabChildFrom(newID.GetWindow()));
+}
+ +

Viene inviato un messaggio definito nell'interfaccia PHal, definita in hal/sandbox/PHal.ipdl. Questo metodo è descritto più o meno come segue:

+ +
Vibrate(uint32_t[] pattern);
+ +

Il messaggio viene ricevuto dal metodo HalParent::RecvVibrate() implementato in hal/sandbox/SandboxHal.cpp, come segue:

+ +
virtual bool RecvVibrate(const InfallibleTArray<unsigned int>& pattern,
+            const InfallibleTArray<uint64_t> &id,
+            PBrowserParent *browserParent) MOZ_OVERRIDE {
+
+  hal::Vibrate(pattern, newID);
+  return true;
+}
+ +

Sono stati omessi alcuni dettagli non rilevanti alla discussione; comunque, è stato mostrato come i messaggi progrediscono da un content process in Gecko a Gonk, quindi all'implementazione di Vibrate() nella HAL di Gonk e infine al driver che gestisce il motore di vibrazionie.

+ +

Le API DOM

+ +

Le interfacce DOM rappresentano la modalità con cui i web content comunicano con Gecko. In realtà c'è molto più e se sei interessato, puoi leggere l'articolo about the DOM. Le interfacce DOM vengono definite utilizzando IDL, che comprende sia una funzione esterna (foreign function interface, FFI) che un modello di oggetto (object model, OM) fra Javascript e C++.

+ +

La API di Vibrazione viene esposta attraverso un'interfaccia IDL nsIDOMNavigator.idl:

+ +
[implicit_jscontext] void mozVibrate(in jsval aPattern);
+ +

L'argomento jsval indica che mozVibrate() accetta come parametro di input qualsiasi valore. Il compilatore IDL, xpidl, genera l'interfaccia C++ che viene viene quindi implementata dalla classe Navigator in Navigator.cpp.

+ +
NS_IMETHODIMP Navigator::MozVibrate(const jsval& aPattern, JSContext* cx) {
+  // ...
+  hal::Vibrate(pattern);
+  return NS_OK;
+}
+ +

C'è molto più codice in questo metodo di quanto riportato, ma non è importante ai fini della discussione. Il punto è che la chiamata a hal::Vibrate() trasferisce il controllo dal DOM all'HAL di Gecko. Da qui, entriamo nell'implementazione del HAL discusso precedentemente fino al driver della scheda di rete. Soprattutto, l'implementazione del DOM è indipendente dalla piattaforma su cui è in esecuzione (Gonk, Windows, Mac OS X o qualsiasi altra). Inoltre non si preoccupa se il codice viene eseguito in un content process o nel server Gecko. Questo dettagli sono lasciati ai layer di sistema che se ne occupa.

+ +

L'API di Vibrazione è molto semplice e ciò la rende un buon esempio. L' API di SMS è un esempio di API più complessa che utilizza un proprio strato "remoto" per connettere il content process al server.

+ +

Radio Interface Layer (RIL)

+ +

Il RIL è stato menzionato nella sezione L'archituttura dei processi userspace. Questa sezione esaminerà come le varie componenti di questo strato interagiscono in maggior dettaglio.

+ +

Le principali componenti sono:

+ +
+
rild
+
Il daemon che interagisce con il firmware proprietario del modem.
+
rilproxy
+
il daemon che agisce come proxy fra rild e Gecko (implementato nel processo b2g). Questo risolve il problema di autorizzazione che si pone quando si cerca di interagire direttamente con rild, in quanto è possibile farlo solo per chi appartiene al gruppo radio.
+
b2g
+
Questo processo, conoscuto anche col nome di chrome, implementa Gecko. Le componenti di b2g che interagiscono con RIL sono un worker thread implementato in dom/system/gonk/ril_worker.js che interagisce con rild attraverso rilproxy e implementa la macchina a stati del modem; e l'interfaccia nsIRadioInterfaceLayer che è il thread primario del servizio XPCOM e agisce principalmente per scambiare messaggi fra il worker thread ril_worker.js e le varie componenti di Gecko, inclusi i content process.
+
I content process di Gecko
+
All'interno dei content process di Gecko l'interfaccia nsIRILContentHelper fornisce un servizio XPCOM che permette al codice che implementa parti del DOM, quali le API Telephony e SMS, di comunicare con l'interfaccia modem/radio, che risiede nel processo chrome.
+
+ +

Esempio: Communicazione da rild al DOM

+ +

Diamo un'occhiata ad un esempio di come le parti basse del sistema comunicano col DOM. Quando il modem riceve una chiamata in ingresso, avvisa rild utilizzando un meccanismo proprietario. rild quindi prepara un messaggio per il suo client in conformità con un protocollo "open" descritto in ril.h. Sempre nel caso di una chiamata in ingresso, un messaggio RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED viene generato e inviato da rild a rilproxy.

+ +

rilproxy, implementato in rilproxy.c, riceve questo messaggio nel suo ciclo principale mettendosi in polling sulla connessione con rild nel seguente modo:

+ +
ret = read(rilproxy_rw, data, 1024);
+
+if(ret > 0) {
+  writeToSocket(rild_rw, data, ret);
+}
+ +

Dopo aver ricevuto il messaggio da rild, rilproxy lo invia a Gecko attraverso la socket che li connette. Gecko riceve il messaggio tramite l'IPC thread:

+ +
int ret = read(fd, mIncoming->Data, 1024);
+// ... handle errors ...
+mIncoming->mSize = ret;
+sConsumer->MessageReceived(mIncoming.forget());
+
+ +

Il consumatore di questi messaggi è il SystemWorkerManager, che riconfeziona il messaggio e lo inoltra al worker thread ril_worker.js che implementa la macchina a stati di RIL; questo avviene nel metodo RILReceiver::MessageReceived():

+ +
virtual void MessageReceived(RilRawData *aMessage) {
+  nsRefPtr<DispatchRILEvent> dre(new DispatchRILEvent(aMessage));
+  mDispatcher->PostTask(dre);
+}
+ +

PostTask a sua volta chiama la funzione onRILMessage(),implementata in Javascript. Ciò avviene utilizzando la API JavaScript JS_CallFunctionName():

+ +
return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv),
+                           argv, argv);
+ +

onRILMessage() è implementata in dom/system/gonk/ril_woker.js, elabora il messaggio e lo scompone. Ciascun pacchetto viene quindi inviato ad un gestore appropriato:

+ +
handleParcel: function handleParcel(request_type, length) {
+  let method = this[request_type];
+  if (typeof method == "function") {
+    if (DEBUG) debug("Handling parcel as " + method.name);
+    method.call(this, length);
+  }
+}
+
+ +

Il gestore verifica la tipologia di richiesta assicurandosi che sia definita come funzione nel codice JavaScript, e solo successivamente chiamando il metodo. ril_worker.js implementa un metodo specifico per ciascun tipo di richiesta.

+ +

Nel nostro esempio in corrispondenza a RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED viene chiamato il seguente gestore:

+ +
RIL[UNSOLICITED_RESPONSE_CALL_STATE_CHANGED] = function UNSOLICITED_RESPONSE_CALL_STATE_CHANGED() {
+  this.getCurrentCalls();
+};
+ +

Come puoi notare dal codice, se lo stato è cambiato durante la ricezione della notifica viene aggiornato semplicemente chiamando il metodo getCurrentCall():

+ +
getCurrentCalls: function getCurrentCalls() {
+  Buf.simpleRequest(REQUEST_GET_CURRENT_CALLS);
+}
+ +

il quale invia una richiesta a rild per acquisire lo stato di tutte le chiamate attive. La richiesta segue il medesimo percorso ma inverso rispetto a quello seguito da RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED (cioè da ril_worker.js a SystemWorkerManager a Ril.cpp, quindi a rilproxy e finalmente a rild). rild quindi risponde, seguendo il medesimo percorso, fino al gestore dell'evento del messaggio REQUEST_GET_CURRENT_CALLS all'interno di ril_worker.js. In questo modo avvengono le comunicazioni bidirezionali.

+ +

Lo stato viene quindi comparato con lo stato precedente; se c'è stato un cambio, ril_worker.js aggiorna il servizio nsIRadioInterfaceLayer:

+ +
_handleChangedCallState: function _handleChangedCallState(changedCall) {
+  let message = {type: "callStateChange",
+                 call: changedCall};
+  this.sendDOMMessage(message);
+}
+ +

nsIRadioInterfaceLayer è implementato in dom/syste/gonk/RadioInterfaceLayer.js; il messaggio viene ricevuto dal suo metodo onmessage():

+ +
 onmessage: function onmessage(event) {
+   let message = event.data;
+   debug("Received message from worker: " + JSON.stringify(message));
+   switch (message.type) {
+     case "callStateChange":
+       // This one will handle its own notifications.
+       this.handleCallStateChange(message.call);
+       break;
+   ...
+
+ +

e successivamente inviato al content process tramite il Parent Process Message Manager (PPMM):

+ +
handleCallStateChange: function handleCallStateChange(call) {
+  [some internal state updating]
+  ppmm.sendAsyncMessage("RIL:CallStateChanged", call);
+}
+ +

Nel content process, il messaggio viene ricevuto dal metodo receiveMessage() definito nel servizio nsIRILContentHelper, dal Child Process Message Manager (CPMM):

+ +
receiveMessage: function receiveMessage(msg) {
+  let request;
+  debug("Received message '" + msg.name + "': " + JSON.stringify(msg.json));
+  switch (msg.name) {
+    case "RIL:CallStateChanged":
+      this._deliverTelephonyCallback("callStateChanged",
+                                     [msg.json.callIndex, msg.json.state,
+                                     msg.json.number, msg.json.isActive]);
+      break;
+ +

Questo, a sua volta, invoca nsIRILTelephonyCallback.callStateChanged() per ciascun oggetto che ha registrato un metodo di callback. Ogni applicazione web che accede alla API window.navigator.mozTelephony registra un proprio metodo di callback che inoltrerà gli eventi al codice JavaScript all'interno dell'applicatione web, sia come evento di cambio stato che di un evento di chiamata in ingresso.

+ +
NS_IMETHODIMP Telephony::CallStateChanged(PRUint32 aCallIndex, PRUint16 aCallState,
+                                          const nsAString& aNumber, bool aIsActive) {
+  [...]
+
+  if (modifiedCall) {
+    // Change state.
+    modifiedCall->ChangeState(aCallState);
+
+    // See if this should replace our current active call.
+    if (aIsActive) {
+      mActiveCall = modifiedCall;
+    }
+
+    return NS_OK;
+  }
+
+  nsRefPtr<TelephonyCall> call =
+          TelephonyCall::Create(this, aNumber, aCallState, aCallIndex);
+  nsRefPtr<CallEvent> event = CallEvent::Create(call);
+  nsresult rv = event->Dispatch(ToIDOMEventTarget(), NS_LITERAL_STRING("incoming"));
+  NS_ENSURE_SUCCESS(rv, rv);
+  return NS_OK;
+}
+ +

Le appicazioni possono ricevere tali eventi e aggiornare di conseguenza la propria interfaccia utente:

+ +
handleEvent: function fm_handleEvent(evt) {
+  switch (evt.call.state) {
+    case 'connected':
+      this.connected();
+      break;
+    case 'disconnected':
+      this.disconnected();
+      break;
+    default:
+      break;
+  }
+}
+ +

Dai uno sguardo all'implementazione di handleEvent() nell'applicazione Dialer come ulteriore esempio.

+ +

3G dati

+ +

Una "chiamata dati" viene inizializzata tramite un messaggio RIL; questo abilita la modalità di trasferimento dati al modem. Tale chiamata crea e attiva un'interfaccia Point-to-Point Protocol (PPP) nel kernel linux che potrà essere configurata utilizzando le interfacce usuali.

+ +
+

Nota: Questa sessione necessita di essere scritta.

+
+ +

API DOM relative

+ +

Segue la lista delle API DOM relative alla comunicazione con RIL:

+ + + +

Wi-Fi

+ +

La maggior parte del lavoro di back end per Firefox OS viene effettuato dal processo wpa_supplicant. Ciò significa che l'attività principale del back end è quella di gestire il supplicant e di svolgere alcuni compiti ausiliari quali caricare il driver del WIFI e abilitare o disabilitare le interfacce di rete. In pratica, questo significa che il back end è la macchina a stati, con un'evoluzione degli stati che segue quella del supplicant.

+ +
+

Nota: Molto di ciò che accade nel WIFI dipende dai cambiamenti di stato nel processo wpa_supplicant.

+
+ +

L'implementazione delle componenti che costituiscono il WiFi è suddivisa in due file:

+ +
+
dom/wifi/DOMWifiManager.js
+
Implementa le API esposte ai web content, come definite in nsIWifi.idl.
+
dom/wifi/WifiWorker.js
+
Implementa la macchina a stati e il codice che gestisce il supplicant.
+
+ +

Questi due file comunicano tra loro utilizzando il message manager. Il back end rimane in ascolto di messaggi che richiedono certi azioni, quali l'"associazione" e risponde con un messaggio quando l'azione richiesta è stata espletata.

+ +

La parte del DOM si pone in ascolto sia sulle risposte che di eventuali eventi che notificano cambiamenti di stato o l'aggiornamento di informazioni.

+ +
+

Nota: Ogni API sincrona del DOM viene implementata tenendo in cache i dati nella sua parte dell'interfaccia. Messaggi sincroni vanno evitati ogni qualvolta sia possibile.

+
+ +

WifiWorker.js

+ +

Questo file implementa la logica principale dell'interfaccia WIFI. Viene eseguito nel processo chrome e istanziato dal SystemWorkerManager. È suddiviso in due sezioni: una funzione anonima e il WifiWorker. La funzione anonima finisce per essere il WifiManager fornendo una API locale, comprese le notifiche per eventi quali le connessioni al supplicant e i risultati. In generale, contiene poca logica, risponde semplicemente con le informazioni richieste e controlla i dettagli della connessione con il richiedente.

+ +

Il WifiWorker si colloca fra il WifiManager e il DOM. Risponde agli eventi e li inoltra al DOM, riceve richieste dal DOM ed esegue le appropriate azioni sul supplicant. Inoltre mantiene le informazioni di stato del supplicant e queli azioni intraprendere di conseguenza.

+ +

DOMWifiManager.js

+ +

Implementa la API del DOM, gestisce le richieste da e verso i chiamanti e il WiFi worker. C'è veramente poca logica.

+ +
+

Nota: Per evitare messaggi sincroni nel processo chrome il WIFI manager tenendo in cache lo stato in funzione dell'evento ricevuto.

+
+ +

C'è un unico messaggio sincrono, inviato nel momento in cui la API del DOM viene istanziata per ottenere lo stato del supplicant.

+ +

DHCP

+ +

Il DHCP e il DNS sono gestiti dal processo di dhcpcd, lo standard DHCP client di Linux. Purtroppo esso non è in grado di reagire quanto la connessione di rete viene persa. Come conseguenza Firefox OS termina e riavvia dhcpcd ogni qualvolta si connette ad una data rete wireless.

+ +

dhcpcd è anche responsabile per la configurazione della rotta di default; viene inoltre effettuata una chiamata al network manager per configurare i server DNS.

+ +

Network Manager

+ +

Il gestore di rete (Network Manager) configura le interfacce di rete per le connettività 3G e WIFI.

+ +
+

Nota: Questa sessione necessita di essere scritta.

+
+ +

Processi e thread

+ +

Firefox OS utilizza i thread POSIX per implementare tutti i thread applicativi, inclusi i thread principali di ciascuna applicazione, i web workers e gli helper threads. I control group vengono utilizzati per gestire la priorità di esecuzione di processi e thread utilizzando lo scheduler standard di Linux. In funzione dello stato, il processo viene assegnato ad un differente control group. Abbiamo attualmente 6 livelli di priorità corrispondenti a 5 gruppi di controllo:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Livello di priorità dei processi
PrioritàControl groupUtilizzato da
MASTER Processo b2g
FOREGROUND_HIGHapps/criticalApplicazioni che utilizzano CPU wakelock
FOREGROUNDappsApplicazioni in foreground (visibili all'utente)
FOREGROUND_KEYBOARDappsApplicazione tastiera
BACKGROUND_PERCEIVABLEappsApplicazione audio in background (non visibili all'utente)
BACKGROUNDapps/bg_non_interactiveTutte le altre applicazioni in esecuzione in background
+ +

Alcuni livelli condividono lo stesso control group, in quanto quei livelli differiscono nella modalità con cui vengono gestiti dall'out of memory killer. Tutte le proprietà possono essere configurate durante il processo di build attraverso le preferenze; le principali proprietà sono diponibili nel file b2g/app/b2g.js.

+ +

I seguenti control groups vengono attualmente utilizzati:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Control groups
PercorsoAllocazione CPUDescrizione
 50% del tempo totale di CPUControl group di root riservato per il processo b2g principale per i deamon di sistema
apps50% del tempo totale di CPUApplicazioni regolari
apps/critical95% di appsApplicazioni critiche
apps/bg_perceivable10% di appsApplicazioni di background percepibili
apps/bg_non_interactive5% di appsApplicazioni di background
+ +
+

Nota: Per maggiori informazioni sull'out-of-memory killer e sulla modalità con cui Firefox OS gestisce le situazioni di memoria scarsa puoi leggere Out of memory management on Firefox OS.

+
+ +

All'interno di un processo il thread principale eredita il valore di nice del processo, mentre ai thread dei web worker viene assegnato un valore di nice maggiore di un'unità rispetto al thread principale, pertanto vengono eseguiti con una priorità inferiore. Questo per evitare che worker che fanno uso intensivo di CPU rallentino il thread principale. Le priorità sui processi vengono modificate in occasioni di eventi maggiori quali l'invio in background o foreground dell'applicazione, l'avvio di una nuova applicazione o l'acquisizione di CPU wakelock.

+ +
+

Note: Attualmente non è possibile utilizzare cgroups su dispositivi ICS a causa di un bug nel kernel.

+
+ +

 

+ +

 

diff --git a/files/it/archive/b2g_os/platform/feature_support_chart/index.html b/files/it/archive/b2g_os/platform/feature_support_chart/index.html new file mode 100644 index 0000000000..edbb159f49 --- /dev/null +++ b/files/it/archive/b2g_os/platform/feature_support_chart/index.html @@ -0,0 +1,158 @@ +--- +title: Tabella delle funzioni supportate +slug: Archive/B2G_OS/Platform/Feature_support_chart +tags: + - QA + - Testing +translation_of: Archive/B2G_OS/Platform/Feature_support_chart +--- +
+

Firefox OS è disponibile in diverse build, scaribili già pronte o compilabili ad hoc, inoltre alcune funzioni possono variare a seconda del dispositivo su cui la build viene installata. Nella tabella sottostante vengono elencate le funzioni disponibili per ciascuna build.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicheDispositivoEmulatoreDesktop
DialerCompletoSolo UI, no reteSolo UI, no rete
ContattiCompletoCompletoCompleto
SMSCompletoSolo UI, no reteSolo UI, no rete
FotocameraCompletoSolo UI, no supporto fotocameraSolo UI, Solo UI, supporto fotocamera non garantito
GalleriaCompletoCompletoCompleto
VideoCompletoSolo UICompleto
MusicaCompleto?Completo
Radio FMCompletoCompletoSolo UI
EmailCompletoCompletoCompleto
CalcolatriceCompletoCompletoCompleto
BrowserCompletoCompletoCompleto
MarketplaceCompletoCompletoCompleto
OrologioCompletoCompletoCompleto
AgendaCompletoCompletoCompleto
Schermata principaleCompletoCompletoCompleto
Blocca schermoCompletoCompletoCompleto
TastieraCompletoCompletoCompleto
Task ManagerCompletoCompletoCompleto
First-RunCompleto??
NotificheCompletoCompletoCompleto
Barra di statoCompletoImpossibile testare alcuni stati di reteImpossibile testare alcuni stati di rete
ImpostazioniCompletoCompletoCompleto
+ +

 

diff --git a/files/it/archive/b2g_os/platform/gaia/gaia_apps/index.html b/files/it/archive/b2g_os/platform/gaia/gaia_apps/index.html new file mode 100644 index 0000000000..204171bbf1 --- /dev/null +++ b/files/it/archive/b2g_os/platform/gaia/gaia_apps/index.html @@ -0,0 +1,90 @@ +--- +title: App Gaia +slug: Archive/B2G_OS/Platform/Gaia/Gaia_apps +tags: + - Apps + - Firefox OS + - Gaia +translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps +--- +
+

Gaia è il front-end di Firefox OS, contentente sia le funzionalità di amministrazione di sistema che le app pre-installate nei singoli dispositivi Firefox OS. Tutti i sorgenti Gaia — compresi il sistema e keyboard IMEs — sono completamente implementati in HTML5 (HTML + CSS + JavaScript) & Open WebAPIs. Questa raccolta di documenti contiene informazioini su come funzioni ogni applicazione disponibile nella famiglia Gaia.

+
+ +

Categorie di funzionalità di Gaia

+ +

Le diverse app di Gaia possono essere più o meno categorizzate nei seguenti gruppi.

+ +
+

Note: Molte delle pagine linkate per ulteriori informazioni sul funzionamento delle singole app sono pagine di README presenti nel repository Github di Gaia. Questo è necessario in quanto molte app hanno rapidi cicli di sviluppo e si evolvono spesso giorno per giorno, e non avrebbe senso cercare di mantenere le pagine di MDN aggiornate alle ultime modifiche. Le pagine di README aggiornate dagli ingegneri sono la più accurata fonte di informazioni.

+
+ +

Platform

+ +

Include System, Settings, Lockscreen, build scripts, e le app Bluetooth.

+ +

+ +

App Platform: altre spiegazioni

+ +
+
System
+
L'app System è la prima web app caricata da Gecko durante la Procedura di bootup di Firefox OS, e si occupa di molte mansioni necessarie generalmente per il funzionamento del sistema e non progettate specificatamente per una singola app.
+
Browser
+
L'app Browser (che ora è parte di System) rende disponibili funzionalità tipiche dei browser ove richieste — ad esempio per la navigazione nelle pagine, la ricerca ed i segnalibri.
+
Window Management
+
La funzionalità di gestione delle fineste di Firefox OS — incluso il ciclo vitale dell'app, le interazioni, le notifiche, le animazioni e molto altro — sono gestite da una parte specifica della System app. Questo articolo mette in luce la gestione delle finestre in Firefox OS nel dettaglio.
+
Settings
+
L'app Settings permette agli utenti Firefox OS di configurare le impostazioni del dispositivo, rispondere alle activities in arrivo (Web activities con nome configure), che permettono alle altre applicazioni di passare a diversi pannelli contenuti nella app Settings per gestire le configurazioni come richiesto (per esempio mostrando il pannello delle impostazioni Wi-Fi se non è disponibile alcuna connessione).
+
+ +

Communication

+ +

include le app Dialer, Contact, SMS e le app FTU.

+ +

+ +

App Communication: altre informazioni

+ +

TBD

+ +

Productivity

+ +

Include le app Email, Calendar, e Clock.

+ +

+ +

App Productivity: altre informazioni

+ +
+
Calendar
+
L'applicazione pre-installata per il calendario di Firefox OS.
+
Clock
+
L'applicazione standard di Firefox OS per l'orologio, che include sveglia, timer e cronometro.
+
Email
+
L'applicazione e-mail di Gaia.
+
+ +

Media

+ +

Include le app Camera, Gallery, Music, e Video, oltre ad altre funzioni legate alla multimedialità come wallpapers e forward lock DRM.

+ +

+ +

App Media: altre informazioni

+ +
+
Video
+
Video è un' applicazione che si occupa di visualizzare i video contenuti nella memoria di massa del dispositivo Firefox OS.
+
Camera
+
Camera permette agli utenti di realizzare foto e video dalla fotocamera del dispositivo, e di rispondere alle Web activities del tipo pick richiamate da altre app che necessitano delle funzionalità di Camera.
+
+ +

Altre funzionalità di Gaia

+ +

Oltre a queste funzioni, ce ne sono molte altre come browser, homescreen, marketplace, test framework, PDF viewer e app manager, che sono legate nello sviluppo a Gaia.

+ +
+
pdf.js
+
pdf.js è un lettore PDF basato su HTML5, usato in Gaia per visualizzare PDF. Notare che il codice di base per pdf.js è mantenuto in repository diversi da quelli di Gaia.
+
diff --git a/files/it/archive/b2g_os/platform/gaia/hacking/index.html b/files/it/archive/b2g_os/platform/gaia/hacking/index.html new file mode 100644 index 0000000000..ba99b3d1ab --- /dev/null +++ b/files/it/archive/b2g_os/platform/gaia/hacking/index.html @@ -0,0 +1,132 @@ +--- +title: Hacking Gaia +slug: Archive/B2G_OS/Platform/Gaia/Hacking +tags: + - B2G + - Firefox OS + - Gaia + - Sviluppo + - linee guida +translation_of: Firefox_OS/Developing_Gaia +--- +
+

Questa pagina è diretta agli sviluppatori Gaia. Se stai cercando informazioni su come compilare e installare Firefox OS dovresti leggere Compilare e installare Firefox OS.

+
+

Gaia è un insieme di web apps che creano l'interfaccia di Firefox OS. Ciò che vedi sullo schermo in Firefox OS è scritto usando le open Web technologies. Anche la schermata home e le app di default usano le stesse tecnologie.

+

Ottenere i sorgenti

+

Per ottenere  i sorgenti per Gaia, effettua un fork su GitHub  e usalo per scaricare i file tramite git.

+
$ git clone https://github.com/mozilla-b2g/gaia.git
+

Eseguire Gaia

+

Puoi usare Gaia sia su un desktop, dentro a Firefox, sia su un apparecchio mobile compatibile.

+

B2G desktop

+

B2G desktop è una build per desktop del runtime applicativo usato su Firefox OS che è possibile utilizzare per eseguire Gaia su un computer desktop.

+

Puoi scaricare una nightly build di B2G desktop da qui. In base alla versione su cui desideri lavorare potresti volere una versione specifica di latest-mozilla-b2g18. Esistono versioni per Linux (32 bit and 64 bit), Mac OS X e Windows.

+

Le nightly builds sono pacchettizate con una versione di Gaia recente. Una volta scaricato l'archivio, tutto ciò che dovrai fare è estrarlo in una cartella ed eseguire il file compilato di b2g nella cartella.

+
$ cd b2g
+$ ./b2g
+

Se vuoi usare una versione personalizzata di Gaia usando B2G devi creare un profilo:

+
$ cd /path/to/gaia
+$ DEBUG=1 DESKTOP=0 make
+

Questo comando genera una cartella chiamata profile nella directory gaia. L'opzione DEBUG esegue Gaia come una hosted app su di un web-server invece che come app pacchettizzate che devono essere ricompilate e ripacchettizate dopo ogni cambiamento. Una volta creato il nuovo profilo puo trovare la sua posizione leggendo l'ultima riga dell'output del comando precedente:

+
Profile Ready: please run [b2g|firefox] -profile /path/to/gaia/profile
+

A questo punto puoi usare il profilo personalizzato in B2G passandolo come variabile:

+
$ ./b2g /path/to/gaia/profile
+

Inoltre se vuoi puoi compilare B2G sai sorgenti.

+

Usare Gaia in Firefox

+

Puoi anche usare Gaia dentro a Firefox. Questo ti permette di mantenere veloce il ciclo di sviluppo e di avere gli strumenti per lo sviluppo ed il debug integrati in Firefox. Vedi Usare Gaia in Firefox per i dettagli su come usare Gaia in Firefox.

+

Usare Gaia su un dispositivo

+

Se possiedi un dispositivo compatibile puoi usare Gaia installando Firefox OS. Vedi Compilare ed installare Firefox OS per i dettagli. Puoi inoltre consultare la documentazione su come testare Firefox OS.

+

Test di unità

+

Vedi Gaia unit tests per la documentazione su come creare ed eseguire i test di unità per Gaia.

+

Segnala i Bug

+

I bug sono segnalati su Bugzilla nella sezione Boot2Gecko > Gaia. Segnala un nuovo bug under the Gaia component (or one of the sub-components).

+

Contribuisci a Gaia

+

Mozilla dipende dalle dalla comunità open source  per sviluppare Gaia e le app e ci piacerebbe che tu partecipassi.

+

Alcuni posti da cui trovare bug su cui lavorare:

+ +

Direttive sul codice

+ +

Regole in più

+

Sbagliato:

+
if (expression) doSomething();
+
+

Corretto:

+
if (expression) {
+  doSomething();
+}
+
+

Se lavori su un'app di sistema assicurati di leggere questo.

+

Prima di pubblicare una patch esegui gjslint  per controllare gli errori di formattazione:

+
gjslint --nojsdoc my_file.js
+

Pubblicare una patch

+

Prima di tutto riporta il bug su Bugzilla e segnala checi stai lavorando, usa il tuo account account Bugzilla.

+

Crea una nuova branch di Gaia in locale:

+
$ git branch branchname
+$ git checkout branchname
+

Segnala i tuoi cambiamenti:

+
$ git add /file/to/add
+$ git commit -m "Bug XXXXX - Fix the broken Gaia and save the world"
+

Esegui il push della tua branch:

+
$ git push origin branchname
+

Usando il bottone Pull sulla tua branch in GitHub segnala che sei disponibile a pubblicare il tuo codice.

+

Per richiedere una revisione della tua patch, allega la pull request al bug segnalato su Bugzilla aggiungendo l'URL della pull request e settando "review" ("r") a "?" quindi aggiungi il bugzilla ID di uno tra i proprietari del modulo (Molto importante - altrimenti il tuo bug non verrà controllato da nessuno). Puoi usare l'addon Github tweaks for bugzilla extension on AMO per aiutarti ad automatizzare questo processo. Questo addon ti aiuterà creando automaticamente l'allegato e  lo aggiungerà al bug su bugzilla; dovrai però segnalare che il bug ha bisogno della revisione di un proprietario.

+

I revisori potrebbero chiederti qualche modifica; potresti dover annulare i tuoi cambiamenti sulla tua branch ma una volta che avrai soddisfattole loro richieste incorporeranno la tua branch nella master del loro modulo. Potrebbero chiederti di anullare tutti i tuoi cambiamenti graduali per crearne uno singolo finale in modo che il tuo lavoro possa essere seguito meglio.

+

La persona che incorporerà il cambiamento nella master branch aggiungerà il tag r= flag nel commento al momento dell'incorporamento.

+

Opzioni per il comando make

+

Ci sono molte variabili nel Makefile che fanno riferimento a ambienti di sviluppo non più supportati o non sono ben documentate, non fare affidamento su queste perché potrebbero essere rimosse in futuro.

+

Default

+
make
+

Compile un profilo con le app packaged che può essere usato dalla versione B2G Desktop e può essere portato sul dispositivo.

+

Debug make

+
DEBUG=1 make
+

Con questa opzione attivata (DEBUG=1) Gaia può essere utilizzata come una hosted app su un webserver invece che come una app packaged che deve essere pacchettizzata dopo ogni cambiamento. Visita la pagina con l'ultima versione di Firefox Nightly per avere anche gli ultimi strumenti per sviluppatori specifici per B2G.

+

Push to device

+
make install-gaia
+
+make reset-gaia
+

Usando adb (Android Debug Bridge) puoi mandare al dispositivo la versione di Gaia che hai compilato. reset-gaia rimuoverà completamente tutti i file relativi al profilo utente e le web app prima di mandare al dispositivo la nuova versione di Gaia.

+

Selective build

+
APP=system make
+
+APP=system make install-gaia
+

L'opzione APP permette di specificare quali app mettere nella versione di Gaia che compilerai, questo è utile se non vuoi metterle tutte ogni volta che vuoi aggiornare Gaia sul tuo disposistivo.

+

High resolution image assets

+
GAIA_DEV_PIXELS_PER_PX=1.5 make
+

Questa variabile permette di usare diverse risoluzioni per le immagini di sistema, rimpiazzandole con  le rispettive versioni indicate,*@1.5x.(gif|jpg|png), se esistono.

+

Al momento Gaia è rivolta a tre differenti versioni di schermo, HBGA (320x240), qHD (540×960) e WVGA (480×800) ; puoi usare la variabile GAIA_DEV_PIXELS_PER_PX per essere sicuro che le immagini siano alla corretta risoluzione per dispositivi qHD e WVGA . Vedi l'articolo A pixel is not a pixel per maggiori informazioni sulla relazione tra pixel del dispositivo e i pixel css..

+

Script compression and optimization

+
GAIA_OPTIMIZE=1 make
+

Concatena le risorse di Gaia e ottimizza i file javascript interni per avere un minor tempo di caricamento.

+

Preference shortcuts

+
NOFTU=1
+
+

Disattiva la guida introduttiva per l'utente.

+
REMOTE_DEBUGGER=1
+

Abilita il debug tramite lo strumento adb.

+
DEVICE_DEBUG=1
+

Per le versioni di Firefox Os successive alla 1.2,  puoi usare questo parametro quando vuoi eseguire il debug delle app tramite lo strumento AppManager.

+

Distribution and market customization build

+
GAIA_DISTRIBUTION_DIR=./dir
+

Leggi Customization Overview per i dettagli.

+

Contatta il team in questi modi

+ diff --git a/files/it/archive/b2g_os/platform/gaia/index.html b/files/it/archive/b2g_os/platform/gaia/index.html new file mode 100644 index 0000000000..4536970556 --- /dev/null +++ b/files/it/archive/b2g_os/platform/gaia/index.html @@ -0,0 +1,62 @@ +--- +title: Gaia +slug: Archive/B2G_OS/Platform/Gaia +tags: + - B2G + - Gaia + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Platform/Gaia +--- +

Gaia è il livello di interfaccia utente di Firefox OS. Tutto ciò che appare sullo schermo dopo che Firefox OS è stato avviato è disegnato da Gaia, compresa la schermata di blocco, la schermata principale, il tastierino del telefono e le altre applicazioni. Gaia è stato sviluppato completamente in HTML, CSS, e JavaScript. La sua unica interfaccia col sistema operativo e con l'hardware sottostante sono le API Web standard, implementate da Gecko.

+ +

Grazie a questo design, non solo è possibile eseguire Gaia sui dispositivi Firefox OS, ma anche all'interno di altri sistemi operativi e browser web (seppure probabilmente con funzionalità limitate a seconda delle capapcità del browser).

+ +

Applicazioni di terze parti installate sul dispositivo insieme a Gaia possono essere lanciate da Gaia stesso.

+ + + + + + + + +
+

Documentazione su Gaia

+ +
+
Introduzione a Gaia
+
Gaia è l'applicazione per l'interfaccia utente dei dispositivi Firefox OS; non è altro che un'applicazione Web che viene eseguita sul software di Firefox OS. Questa guida introduce Gaia ad alto livello.
+
App Gaia
+
Informazioni sulle app di default della famiglia di Gaia, consigli su come usarle e come modificarle.
+
Guida all'hacking di Gaia
+
Una guida all'hacking e alla modifica dell'interfaccia di Gaia.
+
Primi passi col sistema di compilazione di Gaia
+
La maggior parte del lavoro inerente la compilazione è eseguito dagli script che si trovano all'interno della directory build/ di Gaia.
+
Consigli e FAQ per l'hacking di Gaia
+
Una lista di consigli e risposte a domande frequenti riguardo l'hacking di Gaia.
+
+ +

Vedi tutti...

+ 		+ + + + +

Risorse

+ + +
diff --git a/files/it/archive/b2g_os/platform/gonk/index.html b/files/it/archive/b2g_os/platform/gonk/index.html new file mode 100644 index 0000000000..8c50f1de6f --- /dev/null +++ b/files/it/archive/b2g_os/platform/gonk/index.html @@ -0,0 +1,109 @@ +--- +title: Gonk +slug: Archive/B2G_OS/Platform/Gonk +tags: + - Demoni + - Drivers + - Firefox OS + - Firmware + - Gecko + - Linux + - ODM + - OEM + - porting +translation_of: Archive/B2G_OS/Platform/Gonk +--- +

 

+ +
+

Gonk è la componente di più basso livella della piattaforma Firefox OS, composta da un kernel Linux basato sull'Android Open Source Project (AOSP) e il livello di astrazione hardware dell'userspace (HAL, Hardware Abstraction Layer). Lo scopo di questo articolo è illustrare le componenti di Gonk, per maggiori informazioni sull'architettura di Firefox OS e su quale sia il ruolo di Gonk nel sistema, è possibile leggere la guida sull'architettura di Firefox OS.

+
+ +

Visione d'insieme di Gonk

+ +

Gonk è il livello più basso (Kernel) dello stack di Firefox OS che funge da interfaccia tra Gecko e l'hardware, controllando quest'ultimo e rendendo disponibili le funzionalità hardware alle API Web implementate in Gecko. Gonck può essere visto come la "scatola magica" che si occupa di tutto il complesso lavoro necessario per il controllo del dispositivo a livello hardware.

+ +

Gonk è una distribuzione Linux minimale che include alcuni componenti di Android, come la fotocamera e il GPS, ed è esteso da Mozilla sfruttando progetti open source come libusb, bluez, e altri. Questa struttura rende semplice il porting da parte degli OEM di componenti già disponibili per altrte implementazioni Android (come i driver, il firmware, i demoni del livello service) su dispositivi Firefox OS.

+ +

Gonk è la destinazione del porting di Gecko, così come lo sono anche OS X, Windows e Android.

+ +
+

Note: Siccome i diversi dispositvi disponibili possono avere chipset e specifiche hardware differenti anche le distribuzioni di Gonk possono variare.

+
+ +

Dato che il progetto Firefox OS definisce Gonk, sono disponibili interfacce per Gecko che non sono disponibili su sistemi operativi differenti; per esempio Gecko dispone dell'accesso diretto alla parte telefonica e al buffer del display.

+ +

Architettura di Gonk

+ +

Ogni diverso dispositivo ha una combinazione di Gonk creata ad-hoc per il suo hardware e contenente librerie di sistema, driver e componenti del firmware richieste per il funzionamento del sistema operativo e delle altre componenti hardware. Queste componenti sono determinate dagli OEM in collaborazione con gli sviluppatori del chipset e con gli ODM. L' immagine seguente mostra un' esempio di implementazione di Gonk.

+ +

+ +

Questo esempio mostra i seguenti componenti principali (che rappresentano solo una porzione di tutti i possibili componenti presenti nelle implementazioni di Gonk):

+ + + +

Gonk inoltre avvia, gestisce e spenge il processo b2g, che è il layer Gecko di Firefox OS. Il processo b2g si comporta come un client per i demoni esposti da Gonk; questi interagiscono direttamente con l'hardware ed espongono a Gecko le funzioni hardware del telefono. Gecko comunica con questi demoni attraverso una il protocollo IPC. Questi componenti si scambiano comandi e protocolli per richiedere e fornire servizi. 

+ +
+

Note: Per ulteriori informazioni riguardo l'architettura Gonk vedere la guida all' architettura di Firefox OS.

+
+ +

Effettuare il porting di Gonk

+ +

Siccome Firefox OS è basato sul kernel di Android, effetturare il porting di firmware, driver, demoni di servizio e di altri componenti verso Firefox OS richiede poco sforzo. Se un componente custom (ad esempio un modulo RIL od un nuovo demone) è necessario, oppure se è necessaria una modifica al reference design dell' ODM, ulteriori integrazioni e test potrebbero rivelarsi necessari.

+ +

In b2g i client comunicano con un demone di sistema tramite una il protocollo IPC. Il client avvia una connessione tramite socket verso il demone, invia la richiesta (utilizzando il protocollo di richiesta del server) tramite la stessa connessione, riceve la risposta e chiude la connessione. Gli OEM sono responsabili per la struttura e per l'implementazione della comunicazione inter-processo tra client e server.

+ +
+

Note: per ulteriori informazioni riguardo il funzionamento del processo di porting vedere Porting di Firefox OS.

+
+ +

Come Mozilla lavora sui porting di Gonk insieme agli OEM e ai produttori di telefoni

+ +

Ogni implementazione di Gonk è il risultato della collaborazione di Mozilla, gli OEM e relativi produttori di componenti (ODM, produttori di chipset).

+ +

Mozilla rende disponibile il codice ed i file di supporto a Gonk necessari per l'implementazione in Firefox OS e per la sua distribuzione. Le repository comprendono il kernel Linux (con pochi cambiamenti) e aggiunte per il funzionamento con Gecko.

+ +

Gli OEM sono responsabilii per la creazione, compilazione, testing, certificazione e distribuzione dell'immagine di Firefox OS per uno specifico dispositivo. Per quanto riguarda la versione di Gonk di queste immagini di Firefox OS gli OEM sono responsabili per la maggior parte degli sforzi al fine di garantire la compatibilità tra le chiamate delle Web API e le funzioni dell'hardware del dispositivo. Il tipo e lo scopo dello sforzo richiesto è fortemente dipendente dallo specifico chipset utilizzato nel telefono (e dagli altri componenti).

+ +

Componenti del dispositivo

+ +

Gli OEM collaborano con i produttori del chipset e con gli ODM per rendere disponibili tutti i componenti relativi allo specifico dispositivo, al fine di far funzionare correttamente il sistema operativo. Per esempio, il produttore della scheda Wi-Fi dovrebbe fornire il chipset e il software affiliato. Questi componenti possono includere:

+ + + +

Integrazione tra Gonk e Gecko

+ +

Gli OEM devono assicurare che le funzionalità hardware del dispositivo mobile siano correttamente e completamente aperte alle implementazioni per le Web API di Gecko. Questo prevede:

+ + + +

Codice sorgente di Gonk

+ +

Il repository principale di B2G su Github contiene il progetto supportato per i port di Gonk su vari terminali. Lo si può quindi considerare come il repository di Gonk. La lista dei terminali supportati è disponibile nel file B2G/config.sh.

+ +

La maggior parte del lavoro quotidiano su Gonk consiste nel porting del sistema su diverse piattaforme e nell'assicurarsi che Gecko funzioni bene su questi terminali.

+ +
+
+ +

 

diff --git a/files/it/archive/b2g_os/platform/index.html b/files/it/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..5708ef1ee5 --- /dev/null +++ b/files/it/archive/b2g_os/platform/index.html @@ -0,0 +1,82 @@ +--- +title: The Firefox OS platform +slug: Archive/B2G_OS/Platform +tags: + - B2G + - Firefox OS + - Landing + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Platform +--- +

The Firefox OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on Firefox OS, if you're working on developing or porting the platform—or are simply curious—the following documentation may be of interest to you.

+ + + + + + + +
+

Documentation about the Firefox OS platform

+
+
+ Gaia
+
+ Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.
+
+ Gonk
+
+ Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.
+
+ Gecko
+
+ Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.
+
+  Security
+
+ Documentation about security in Firefox OS; this includes topics about security devices from every perspective: for app developers, device integrators, and so forth.
+
+ Feature support chart
+
+ A chart of which features are available in which types of Firefox OS builds.
+
+ Firefox OS architecture overview
+
+ An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.
+
+ Firefox OS apps architecture
+
+ An overview of the application model on Firefox OS.
+
+ Firefox OS settings list
+
+ A list of common setting names that can be used with the Settings API.
+
+

View All...

+ 		+

Getting help from the community

+

If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!

+
    +
  • Consult the Boot to Gecko project forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}
    • +
+
    +
  • Ask your question on Mozilla's Boot to Gecko IRC channel: #b2g
    • +
+

Don't forget about the netiquette...

+
+ + +

Resources

+ +
+

 

diff --git a/files/it/archive/b2g_os/platform/settings_list/index.html b/files/it/archive/b2g_os/platform/settings_list/index.html new file mode 100644 index 0000000000..8e8f22eb2d --- /dev/null +++ b/files/it/archive/b2g_os/platform/settings_list/index.html @@ -0,0 +1,719 @@ +--- +title: Lista delle impostazioni di Firefox OS +slug: Archive/B2G_OS/Platform/Settings_list +tags: + - API + - Firefox OS + - Reference + - Settings + - WebAPI +translation_of: Archive/B2G_OS/Platform/Settings_list +--- +
+

Firefox OS offre diverse opzioni per configurare il dispositivo e le sue caratteristiche predefinite. Queste possono essere utilizzate da app certificate usando le API Settings.

+
+ +
+

Note: A causa delle diverse caratteristiche dei dispositivi e delle versioni di Firefox OS, questa lista potrebbe non corrispondere perfettamente alle funzioni effettivamente disponibili su ciascun dispositivo.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome dell'impostazioneTipoValore di default
accessibility.invertBooleanfalse
accessibility.screenreaderBooleanfalse
alarm.enabledBooleanfalse
app.reportCrashesStringask
app.update.intervalNumber86400
audio.volume.alarmNumber15
audio.volume.bt_scoNumber15
audio.volume.dtmfNumber15
audio.volume.contentNumber15
audio.volume.notificationNumber15
audio.volume.ttsNumber15
audio.volume.telephonyNumber5
bluetooth.enabledBooleanfalse
bluetooth.debugging.enabledBooleanfalse
camera.shutter.enabledBooleantrue
clear.remote-windows.dataBooleanfalse
debug.grid.enabledBooleanfalse
debug.oop.disabledBooleanfalse
debug.fps.enabledBooleanfalse
debug.ttl.enabledBooleanfalse
debug.log-animations.enabledBooleanfalse
debug.paint-flashing.enabledBooleanfalse
debug.peformancedata.sharedBooleanfalse
deviceinfo.firmware_revisionString 
deviceinfo.hardwareString 
deviceinfo.osString 
deviceinfo.platform_build_idString 
deviceinfo.platform_versionString 
deviceinfo.softwareString 
deviceinfo.update_channelString 
gaia.system.checkForUpdatesBooleanfalse
general.useragent.updates.enabledBooleantrue
geolocation.enabledBooleantrue
keyboard.layouts.englishBooleantrue
keyboard.layouts.dvorakBooleanfalse
keyboard.layouts.otherlatinsBooleanfalse
keyboard.layouts.cyrillicBooleanfalse
keyboard.layouts.arabicBooleanfalse
keyboard.layouts.hebrewBooleanfalse
keyboard.layouts.zhuyinBooleanfalse
keyboard.layouts.pinyinBooleanfalse
keyboard.layouts.greekBooleanfalse
keyboard.layouts.japaneseBooleanfalse
keyboard.layouts.polishBooleanfalse
keyboard.layouts.portugueseBooleanfalse
keyboard.layouts.spanishBooleanfalse
keyboard.vibrationBooleanfalse
keyboard.clicksoundBooleanfalse
keyboard.autocorrectBooleantrue
keyboard.wordsuggestionBooleantrue
keyboard.currentStringen
language.currentStringen-US
lockscreen.passcode-lock.codeString0000
lockscreen.passcode-lock.timeoutNumber0
lockscreen.passcode-lock.enabledBooleanfalse
lockscreen.notifications-preview.enabledBooleantrue
lockscreen.enabledBooleantrue
lockscreen.lockedBooleantrue
lockscreen.unlock-sound.enabledBooleanfalse
mail.sent-sound.enabledBooleantrue
message.sent-sound.enabledBooleantrue
operatorvariant.mccString0
operatorvariant.mncString0
ril.iccInfo.mbdnString 
ril.sms.strict7BitEncoding.enabledBooleanfalse
ril.cellbroadcast.searchlistString 
debug.console.enabledBooleanfalse
phone.ring.keypadBooleantrue
powersave.enabledBooleanfalse
powersave.thresholdNumber0
privacy.donottrackheader.enabledBooleanfalse
ril.callwaiting.enabled  
ril.cf.enabledBooleanfalse
ril.data.enabledBooleanfalse
ril.data.apnString 
ril.data.carrierString 
ril.data.defaultServiceIdNumber0
ril.data.passwdString 
ril.data.httpProxyHostString 
ril.data.httpProxyPortNumber0
ril.data.mmscString 
ril.data.mmsproxyString 
ril.data.mmsportNumber0
ril.data.roaming_enabledBooleanfalse
ril.data.userString 
ril.mms.apnString 
ril.mms.carrierString 
ril.mms.httpProxyHostString 
ril.mms.httpProxyPortString 
ril.mms.mmscString 
ril.mms.mmsportString 
ril.mms.mmsproxyString 
ril.mms.passwdString 
ril.mms.userString 
ril.radio.preferredNetworkTypeString 
ril.radio.disabledBooleanfalse
ril.supl.apnString 
ril.supl.carrierString 
ril.supl.httpProxyHostString 
ril.supl.httpProxyPortString 
ril.supl.passwdString 
ril.supl.userString 
ril.sms.strict7BitEncoding.enabledBooleanfalse
ril.sms.defaultServiceIdNumber0
ril.telephony.defaultServiceIdNumber0
ring.enabledBooleantrue
screen.automatic-brightnessBooleantrue
screen.brightnessNumber1
screen.timeoutNumber60
tethering.usb.enabledBooleanfalse
tethering.usb.ipString192.168.0.1
tethering.usb.prefixString24
tethering.usb.dhcpserver.startipString192.168.0.10
tethering.usb.dhcpserver.endipString192.168.0.30
tethering.wifi.enabledBooleanfalse
tethering.wifi.ipString192.168.1.1
tethering.wifi.prefixString24
tethering.wifi.dhcpserver.startipString192.168.1.10
tethering.wifi.dhcpserver.endipString192.168.1.30
tethering.wifi.ssidStringFirefoxHotspot
tethering.wifi.security.typeStringopen
tethering.wifi.security.passwordString1234567890
tethering.wifi.connectedClientsNumber0
tethering.usb.connectedClientsNumber0
time.nitz.automatic-update.enabledBooleantrue
time.timezone  
ums.enabledBooleanfalse
ums.modeNumber0
vibration.enabledBooleantrue
wifi.enabledBooleantrue
wifi.screen_off_timeoutNumber600000
wifi.disabled_by_wakelockBooleanfalse
wifi.notificationBooleanfalse
wifi.connect_via_settingsBooleanfalse
icc.displayTextTimeoutNumber40000
icc.inputTextTimeoutNumber40000
+ +

Vedi anche

+ + diff --git a/files/it/archive/b2g_os/preparazione_della_tua_prima_build_di_b2g/index.html b/files/it/archive/b2g_os/preparazione_della_tua_prima_build_di_b2g/index.html new file mode 100644 index 0000000000..1190d4a7b9 --- /dev/null +++ b/files/it/archive/b2g_os/preparazione_della_tua_prima_build_di_b2g/index.html @@ -0,0 +1,132 @@ +--- +title: Preparazione della tua prima build di B2G +slug: Archive/B2G_OS/Preparazione_della_tua_prima_build_di_B2G +translation_of: Archive/B2G_OS/Preparing_for_your_first_B2G_build +--- +
+

Before you can build B2G, you need to clone the repository and configure your build tree. This article explains how to do that. 

+
+

Depending on your internet connection, the configuration step takes a number of hours to download the files necessary to build FirefoxOS (with a mediocre 150 kBps connection, downloading gigabytes of Android repositories can take tens of hours).  Waiting is not as fun as doing, so after you have read through this page and have kicked off the configure script, consider using the time to set up and try out the Firefox OS simulator, begin familiarizing yourself with Documentation for app developers including Designing and Building an App, or familiarize yourself with the information on upcoming steps.

+
+

You might want to have a side task prepared, or a friend available to go for a coffee with, while you are running the B2G config and build steps. They can take a bit of time.

+
+

Clone B2G repository

+

The first step, before you can start your first build, is to clone the B2G repository. This will not fetch everything! Instead, it will fetch the B2G build system and setup utilities. Most of the actual B2G code is in the main Mozilla Mercurial repository.

+

To clone the repository, use git:

+
git clone git://github.com/mozilla-b2g/B2G.git
+

After cloning (which should only take a minute with a fast connection), cd into the B2G directory:

+
cd B2G
+
+

Configuring B2G for your device

+
+ Important: Remember that only devices running Android 4.0.4 (Ice Cream Sandwich), 4.3 (Jelly Bean) and 4.4 (KitKat) and platforms based around it are supported (current Firefox OS devices are). Please check that your phone is actually running one of those supported versions, otherwise this step will most likely fail since some drivers are pulled from non-Nexus devices. Also, if you have to flash your device with the matching stock release. Keep in mind that some USB hubs don't work well with flashing tools, so you may have to connect your device to a built-in USB port.
+
+ Important: if you are doing the build on Ubuntu 12.10+ or Fedora, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources, for the process to work (these distros use GCC 4.7 by default). Read Changing the default host compiler to find out how to do it.
+
+ Note: please read all the instructions below before running any of the build process commands, to make sure you are doing the right thing for you!
+

Once you've retrieved the core B2G build system, you need to configure it for the device on which you plan to install it. To get a list of supported devices, you can use the config.sh utility — run the following command from within the B2G directory:

+
./config.sh
+
+

This will display a list of the supported devices, like so:

+
Usage: ./config.sh [-cdflnq] (device name)
+Flags are passed through to |./repo sync|.
+
+Valid devices to configure are:
+- galaxy-s2
+- galaxy-nexus
+- nexus-4
+- nexus-s
+- nexus-s-4g
+- flo "(Nexus 7 2013)"
+- flame
+- otoro
+- unagi
+- inari
+- keon
+- peak
+- leo
+- hamachi
+- helix
+- wasabi
+- fugu
+- tara
+- pandaboard
+- emulator
+- emulator-jb
+- emulator-kk
+- emulator-x86
+- emulator-x86-jb
+- emulator-x86-kk
+
+

If your device isn't listed, you should stop right now and either help port B2G to your device or wait until someone else does it. We'd prefer it if you help out!

+
+ Note: You can find the device name of your phone on the Firefox OS Phones page.
+
+ Note: Configuring and building B2G for Keon on a Mac DOESN'T WORK. You'll need to use Linux when building for this device.
+
+ Note: If for any reason you want to build against a specific version of Gecko, see {{anch("Building against a custom Gecko")}} before you proceed. If you want to build a branch other than the the default for your device (for example, to build a specific version of B2G), see {{anch("Building a branch")}}. Note: the default branch varies by device and is not necessarily trunk.
+

This would be a good time for a coffee break, since at this point, you'll be doing your first pull of all the code needed to build Boot to Gecko. Running the device config step as indicated below can take a long time; you may stop it with Ctrl-C and restart it at a later time. If you think some part of the process may have been terminated without completing, run './repo sync' to repair any possible problems.

+

Configuring the B2G build for a mobile device

+

At this point, connect your device if it is not already connected; the configure process will need to access it.

+

If your device was listed in the results shown above, you can start the configure process by running config.sh again, this time specifying your device's name. For example, to build for the Samsung Google Nexus S, you would type:

+
./config.sh nexus-s
+
+
+ Note: If you get an error message like fatal: manifest 'nexus-s.xml' not available, chances are that you simply have to specify the branch you want to use. See {{anch("Building a branch")}} for details.
+
+ Note: If the config step fails with an error message like error: manifest required for this command -- please run init, then changes are that the manifest file for the repo (located at B2G/.repo/manifest.xml) wasn't created successfully. You should try running config.sh again. If you are doing this for a new device you could add it to config.sh and then hand it your local manifest file like so:
+ ./config.sh <device> -m path/to/manifest.
+

Near the start of the configuration you might need to set the option for color usage, then after this the process continues. You can just select 'y' here, as you probably want a color build.

+

Configuring a build using a system backup

+

If your phone no longer has Android on it, and your B2G tree doesn't have the binary blobs in it, but you wisely made a backup of the /system partition, you can perform the build on the system backup like this:

+
ANDROIDFS_DIR=<absolute path to parent dir of system dir> ./config.sh <target>
+
+

The build system will default to looking in someplace like backup-inari/system (depending on the device configuration); if you place the files in the expected place you won't need to specify the directory.

+

Note that if your phone always had Firefox OS on it to begin with and never ran Android, it's still fine to pull the /system partition per the above directions — this will give you the right files.

+

Configuring the B2G build for an emulator

+

If you want to build an emulator rather than on a real phone, you can specify emulator to get the ARM device emulator, or emulator-x86 to build the x86 emulator. The latter is faster but not as accurate a representation of an actual mobile device and not as well supported; using it is not advised.

+

So, to build the ARM emulator, you would use the following command:

+
./config.sh emulator
+
+

Near the start of the configuration you might need to set the option for color usage, then after this the process continues. You can just select 'y' here, as you probabaly want a color build.

+

By this point you should be ready to start the build, unless you need any of the more advanced information detailed below.

+

Beware that building for the emulator may fail on 64-bit Linux.

+
+ Note: Developers on Mac OS X 10.9 or above have to switch to emulator-jb or emulator-kk instead, because AOSP ICS based emulator can't be built on Mac OS X 10.9. See Requirements for Mac OS X for further information.
+

Building against a custom Gecko

+

There may be times that you want or need to build Boot to Gecko based on a different version of Gecko than the one that's used by default (as specified in the manifest). You can do so by editing the file .userconfig. For example, if you want to build against mozilla-central:

+
export GECKO_PATH=/path/to/mozilla-central
+export GECKO_OBJDIR=/path/to/mozilla-central/objdir-gonk
+
+
+

Note: if building against a custom Gecko in Mac OS X, the mozilla-central directory must be in a case sensitive file system.
+  

+
+

Note that you can do this either before you pull the repository (i.e. before the config.sh step above) or at any later point.  You can also keep multiple builds (with debugging on or not, etc) by having multiple userconfig files (with different settings--each needs a different OBJDIR, of course) and making .userconfig a symlink that points to whichever config you want to build at the moment.

+

For more information, read Changing the Gecko source tree.

+

Building a branch

+

If you want to build for a branch other than the default branch (note: the default branch may not be "master"!), you will need to prefix your call to config.sh with a branch name, like this:

+
BRANCH=branch-name ./config.sh <device>
+

The branch names are pretty logical, and largely follow the names of the products/versions, so v1-train, v1.0.0, v1.0.1, v1.1, v1.1.0hd, v1.2, v1.3, v1.4  and so on into the future. As an example, to build B2G Firefox 1.2, for the Arm emulator, you'd enter

+
BRANCH=v1.2 ./config.sh emulator
+

If you have run config.sh already, you can see the names of the branches, by going to B2G/.repo/manifests and doing "git branch -a" (this isn't populated unti then.) The branch name is given as the final token on the line, e.g. "v1-train" or "master":

+
  remotes/origin/master
+  remotes/origin/v1-train
+  remotes/origin/v1.0.0
+  remotes/origin/v1.0.1
+

See Customization with the .userconfig file for additional customizations you can do.

+

Copying your B2G tree to a new machine

+

If you've previously set up the B2G tree and then gotten a new computer (lucky you!), you'll find your life will be much easier if you simply migrate your entire B2G tree from your old computer to your new one, rather than setting the whole thing up again. To do that, mount your old computer's drive onto your new computer, then do this:

+
rsync -a source/ dest/
+
+

Where source is the full path (including the trailing slash) of the source tree, and dest is where you want to put it (the trailing slash is also important!).

+
+ Note: If you copy the files from a computer with another platform ensure to run './build.sh clean' before you start the build process. If you don't do this you might encounter compilation issues.
+

If you do this, you can skip all of the rest of this article and move right on to building.

+

Updating your B2G tree

+

When the repository is updated to a newer version of B2G, you'll want to update your B2G tree. To do this, you can run the following commands:

+
git fetch origin
+git checkout origin/master
+

You can check that these worked correctly by running:

+
git show HEAD
+

and checking that the commit shown matches the latest commit shown at: https://github.com/mozilla-b2g/B2G/commits/master

diff --git a/files/it/archive/b2g_os/prerequisiti_firefox_os_build/index.html b/files/it/archive/b2g_os/prerequisiti_firefox_os_build/index.html new file mode 100644 index 0000000000..b2b35ee9df --- /dev/null +++ b/files/it/archive/b2g_os/prerequisiti_firefox_os_build/index.html @@ -0,0 +1,455 @@ +--- +title: Prerequisiti Firefox OS build +slug: Archive/B2G_OS/Prerequisiti_Firefox_OS_build +translation_of: Archive/B2G_OS/B2G_OS_build_prerequisites +--- +
+

Prima di ottnere il codice per compilare Firefox OS, ti serve un sistema di build ben configurato — questa pagina ti mostra come fare. Attualmente, è possibile compilare su sistemi Linux e OS X a 64-bit.

+
+
+

Nota: Per compilare Firefox OS su un telefono, comincia tenendo il tuo telefono DISCONNESSO dal computer. Ti diremo quando collegarlo.

+
+

Avere un dispositivo/emulatore compatibile

+

Hai bisogno di un dispositivo compatibile, su cui compilare, oppure utilizzando un emulatore. Difficilmente supportiamo alcuni telefoni, alcuni necessitano di molte variazioni. Al momento supportiamo delle variazioni specifiche e alcuni dispositivi sono costantemente supportati.

+
+

Note:  Il codice sorgente B2G della Mozilla è l'implementazione di referenza di B2G, ma i rivenditori di telefoni sono liberi di aggiungere ulteriori patch o apportare modifiche. Quando compri l'Alcatel One Touch per esempio, questo contiene la versione del rivenditore. Ciò non significa che faccia differenza per le applicazioni installate, ma può esserlo a livello di piattaforma. Il porting sul Nexus 4 è mantenuto direttamente da Mozilla; è evidentemente molto più semplice lavorare sulla nostra versione di Gecko, rispetto alle altre.

+
+

Set 1

+

Il Set numero 1 rappresenta l'obbiettivo principale di sviluppo ed è tipicamente il primo a ricevere bug-fix e funzionalità.

+
+
+ Keon
+
+ Il Keon è il Geeksphone Keon , fù uno dei primi telefoni per sviluppatori.Nota che le build per questo telefono sono rilasciate dalla Geeksphone.
+
+ Inari
+
+ Inari è un'altro dispositivo per testare. Usa qusta configurazione per build-are sui dispositivi ZTE Open.Attenzione: le build più nuove di Firefox OS potrebbero avere problemi  con il boot sulla partizione di default dei ZTE Open.
+
+ Flame
+
+ Il Flame è il nuovo telefono standard di referenza della Mozilla;doversti usare la configurazione del Flame se stai build-ando per il ZTE Open C,entrambi sono basati sul sistema Android Jellybean.
+
+ Emulatore (ARM e x86)
+
+ Ci sono due emulatori disponibili: uno emula il codice ARM ,l'altro esegue tutto in codice x86. Impara di più suill'installazione ed utilizzo degli emulatori.
+
+ Nota bene che non dovresti utilizzare l'emulatore x86 — è difficile da installare e non è ben supportato.
+
+ Desktop
+
+ Puoi anche build-are una versione di Firefox OS per desktop; questa esegue  Gecko in applicazione XULRunner , e successivamente usi l'esperienza utente di  Gaia ,dentro.
+
+

Puoi ,ovviamente , build-are il client desktop oppure uno degli emulatori senza un telefono.

+

Set 2

+

I dispositivi del Set numero 2,sono funzionanti nella norma e molti sviluppatori (in particolare i sviluppatori di app) li utilizzano ,di conseguenza tendono ad accogliere i cambiamenti in secondo piano.

+
+
+ Samsung Nexus S
+
+ I modelli del Nexus S,di cui si è a conoscenza del loro funzionamento ,sono il GT-I9020A e il GTI9023.Gli altri potrebbero funzionare.
+
+ Samsung Nexus S 4G
+
+ Il SPH-D720 è supprtato come dispositivo del Set 2.
+
+

Set 3

+

Firefox Os può essere preparato per questi dispositivi ,ma non hanno funzionato perfettamente su regolari basi degli sviluppatori principali. La loro affidabilità e le loro funzionalità potreggo avere delle latenze,facilemnte avvertibili,più dei dispositivi del Set 1 e del Set 2 .

+
+
+ Samsung Galaxy S2
+
+ L'unico modello cu sui funziona è il i9100; nessun'altra versione funziona officialmente. (Il i9100P potrebbe funzionare, dato che l'unica cosa che differisce è l'aggiunta di un chip NFC)
+
+ Samsung Galaxy Nexus
+
+ Non siamo a conoscenza di eventuali varianti non compatibili.
+
+ Nexus 4
+
+ Alcuni utenti sull'IRC lo hanno testato con successo. Potrebbe o no,richiedere il re-flash di Android 4.3 se prima aveva Android 4.4 ( Android build disponibili da Google )
+
+ Nexus 5
+
+ Alcuni utenti sull'IRC lo hanno testato con successo.
+
+ Tara
+
+ Tara è un'altro dipsositivo per testare.Il Manifest del  Tara è presente solo nel branch master. Lo script/comando pre ottenere il codice è  "BRANCH=master ./config.sh tara".
+
+ Unagi
+
+ Unagi è un dispositivo utilizzato per il test e svilupo della piattaforma come smartphone di fascia basso-media. Molti degli sviluppatori di Firefox OS ,lavorano sul Unagi.
+
+ Pandaboard
+
+ La Pandaboard è una board di sviluppo basata sull'architettura OMAP 4,utilizzato per sviluppare su piattaforme mobili.
+
+
+ Importante: Solo i dispositivi con almeno Android 4 sono supportati.Se iltuo dispositivo è presente nella lista ma ha un versione di Android più vecchia, serve prima aggiornarlo prima di fare qualsiasi cosa.
+
+

Appunto: I dispositivi dei Set 2 e Set 3 ,hanno il tasto Home software anzichè hardware.

+

Tutti i dispositivi del Set 1 hanno un pulsante Home hardware che permette all'utente di tornare alla schermata di Home. Molti dispositivi basati su Android ICS,hanno i pulsanti sullo schermo  per la navigzione. Ora abbiamo un pulsante virtuale per i dispositivi senza pulsante hardware.Se non è già attivo automaticamente ,vai su Impostazioni,poi su  Opzioni Sviluppatore ,e dopo  Abilita il tasto home .

+

Nella versione 1.4 c'è anche un'opzione per "Home gesture abilitate",attivandole verrà rimosso il pulsante sullo schermo in favore dello swipe dal basso verso l'alto per tornare alla home.

+
+

Requisiti per GNU/Linux

+

Per fare la build su linux, avrai bisogno:

+ +

Questo è molto più dei reali requisiti minimi,ma ogni tanto il build-ing fallisce solo per la mancanza di risosrse. Un tipico errore in questo caso è "arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)".

+

Avrai bisogno anche dei seguenti strumenti installati

+ +

Problemi della build per emulatore

+

Se stai facendo una build per emulatore , you need to pay attention to these issues:

+
+

First, note that you shouldn't use the x86 emulator — it is hard to install and not well supported.

+
+

Next, the build-system for the emulator builds both 32bit and 64bit versions of the emulator. As the emulator depends on OpenGL, this means that you need to have both 32bit and 64bit versions of OpenGL libraries installed on your system. See the discussion in bug 897727.

+

There are two ways that you can solve this problem:

+ +

If your linux distro has multilib packages for OpenGL libraries, you can attempt installing them. You might then have to manually create some symlinks.

+

For example, here is the situation on Ubuntu 12.04 LTS x86-64. On this distribution, the libgl1-mesa-dev package cannot be installed simultaneously in x86-64 and i386 versions, but you can have the following combination of packages simultaneously installed:

+
sudo apt-get install libgl1-mesa-dev libglapi-mesa:i386 libgl1-mesa-glx:i386
+

After having run this command, you will still have to manually create some symlinks for the emulator build to succeed:

+
sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
+sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so
+

Solution #2: just patch the emulator so it only builds 64bit

+

Just apply this patch to the sdk/ git repository under the B2G repo. This will cause the B2G emulator to only attempt to build the 64bit emulator if you're on a 64bit system, thus avoiding any multilib issues. The 32bit emulator is unused anyway on a 64bit system. This is the simplest solution, until this patch eventually bit-rots.

+

64 bit requirement installation

+

This section lists the commands you need to run in different Linux distributions to install all the requirements for building Firefox OS.

+

Ubuntu 12.04 / Linux Mint 13 / Debian 6

+

Run the following command in Terminal:

+
sudo apt-get update
+sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip
+

If you'll build for the "Flame" reference device or Nexus 5, run the following command in Terminal:

+
sudo apt-get install libxml2-utils
+

And see the above comments about emulator build issues!

+

Ubuntu 12.10

+

Run the following command in Terminal:

+
sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip
+

In addition to the emulator build issues discussed above, the compiler will default to gcc-4.7, which will fail to build with an error along the following lines:

+

"KeyedVector.h:193:31: error: indexOfKey was not declared in this scope, and no declarations were found by argument-dependent lookup at the point of instantiation"

+

To fix this, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources: Read Changing the default host compiler to find out how to do it.

+

In a fresh Ubuntu 12.10 install, you'll get an error about unmet dependencies for ia32-libs. The following commands fix it:

+
sudo dpkg --add-architecture i386
+sudo apt-get update
+sudo apt-get install ia32-libs
+

Ubuntu 13.04

+

Run the following command in Terminal:

+
sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip
+

In addition to the emulator build issues discussed above, the compiler will default to gcc-4.7, which will fail to build with an error along the following lines:

+

"KeyedVector.h:193:31: error: indexOfKey was not declared in this scope, and no declarations were found by argument-dependent lookup at the point of instantiation"

+

To fix this, you will need to specify GCC 4.6 as the default host compiler after having retrieved the B2G sources: Read Changing the default host compiler to find out how to do it.

+

Ubuntu 13.10

+

With Ubuntu 13.10, multi-arch packages are now the main way to support multiple architectures (e.g. 32-bit on a 64-bit install).  You must tell your Ubuntu system that you want to support 32-bit packages as well:
+  

+
sudo dpkg --add-architecture i386
+sudo apt-get update
+

Once you've completed that, then you can install the necessary packages:

+
sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip libxml2-utils
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.6 1
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.8 2
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.6 1
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.8 2
+
+sudo update-alternatives --set gcc "/usr/bin/gcc-4.6"
+
+sudo update-alternatives --set g++ "/usr/bin/g++-4.6"
+


+ Fedora 17/18/19/20

+

Run the following command in Terminal:

+
sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686 zip perl-Digest-SHA wget
+

In addition to the above you will need GCC 4.6.x in order to compile the project:

+ +

Download the right version for your Fedora installation, then install it to /opt, with the following command on Fedora 17/18:

+
curl -O http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc18.tar.xz
+sudo tar -x -a -C /opt -f gcc-4.6.4-fc18.tar.xz
+
+

And with the following command for Fedora 19/20:

+
curl -O http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc19.tar.xz
+sudo tar -x -a -C /opt -f gcc-4.6.4-fc19.tar.xz
+
+

You will need to specify GCC 4.6.x as the default host compiler after having retrieved the B2G sources: Read Changing the default host compiler to find out how to do it.

+

If build fails with the compiler complaining about not finding libmpc.so.2, install the package compat-libmpc

+

Arch Linux

+

Run the following command in Terminal:

+
sudo pacman -S --needed alsa-lib autoconf2.13 bison ccache curl firefox flex gcc-multilib git gperf libnotify libxt libx11 mesa multilib-devel wget wireless_tools yasm zip lib32-mesa lib32-mesa-libgl lib32-ncurses lib32-readline lib32-zlib
+

To install the lib32-* packages you need to have the multilib repository enabled.

+

B2G can only be compiled with gcc4.6.4, and because Arch Linux always has bleeding edge software you will need to install gcc46-multilib from AUR. Note that you will have to edit the PKGBUILD and add staticlibs to the options array, or gcc will be unable to compile B2G and give you a cannot find -lgcc error when compiling. You will also need to add the following to your .userconfig file:

+
export CC=gcc-4.6.4
+export CXX=g++-4.6.4
+

By default, Arch Linux uses Python3. You'll have to force it to use the old python2. You can do that by linking the python2 executable to python but this is discouraged and considered error-prone. This will also break python 3 if it is installed on your system. A better way is to use virtualenv/virtualenvwrapper:

+
sudo pacman -S python-virtualenvwrapper
+source /usr/bin/virtualenvwrapper.sh
+mkvirtualenv -p `which python2` firefoxos
+workon firefoxos
+
+

Android will complain that you need make 3.81 or make 3.82 instead of 4.0. You can download make 3.81 from AUR.  This will install the make-3.81 binary on your path, you need to create a symlink named make to a location earlier in the PATH variable for the build to use the correct version.

+
mkdir -p ~/bin
+ln -s `which make-3.81` ~/bin/make
+export PATH=~/bin:$PATH
+
+

Android also needs the Java6 SDK and Arch only has Java7.  Unfortunately the aur build is broken, but you can still download the Java 6 SDK and install it manually.  You will then need to put it in your path.

+
cp ~/Downloads/jdk-6u45-linux-x64.bin /opt
+su
+cd /opt
+chmod +x jdk-6u45-linux-x64.bin
+./jdk-6u45-linux-x64.bin
+exit
+ln -s /opt/jdk1.6.0_45/bin/java ~/bin/java
+
+
+

Gentoo Linux

+
Installing ccache
+

You will need to install ccache, a tool for caching partial builds.

+
# emerge -av ccache
+
+

Because ccache is known to frequently cause support issues, Gentoo encourages you to use it explicitly and sparingly.

+

To enable the required use of ccache, on the subsequent step of this guide where the ./build.sh script is called, Gentoo users should instead run the command with an explicitly extended path, ie.

+
PATH=/usr/lib64/ccache/bin:$PATH ./build.sh
+
+
Generating Partition Images
+

If you are building B2G for actual physical hardware, then you may at some point also wish to generate some partition images for upload to your device. (For example, to restore backed up files to the device via the fastboot utility)

+

The filesystem image format used in this case is YAFFS2 (Yet Another Filesystem 2). Gentoo has support for the very latest (ie. git HEAD) yaffs2-utils userland package in portage. (Note: You will also need kernel patches if you want to mount YAFFS2 images, but this is not really required since you can deconstruct and rebuild them instead.)

+
# emerge --autounmask-write yaffs2-utils; etc-update; emerge -av yaffs2-utils
+

In order to generate such an image, simply change to the parent directory of the partition filesystem tree you wish to package, and issue a command like this:

+
mkyaffs2image system/ system.img
+

Requirements for Mac OS X

+

To build Firefox OS on Mac OS X, there are a number of prequisite steps you need to follow, which are detailed below. We also discuss common errors you might come across in particular situations, and solutions to those.

+
+

Note: Configuring and Building B2G for Keon WON'T WORK on a Mac. You'll need to use Linux to build B2G for this device.

+
+

Version Compatibility

+

XCode 4.2 or older are not compatible with Mac OS X 10.9 (a.k.a. "Mavericks"), so you may be surprised to find build failures of Firefox OS. Basically you can no longer build ICS emulator on Mac OS X 10.9 or above, and flatfish fails to build with XCode 5.x series.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Version compatibility of Mac OS X 10.9.x
 emulator (ICS)flatfish (JB-4.2)emulator-jb (JB-4.3)emulator-kk (KitKat-4.4)
XCode 4.3.3XXXX
XCode 4.4.1XO[1]OO
XCode 4.5.2XO[1]OO
XCode 4.6.3XO[1]OO
XCode 5.0.2XXOO
XCode 5.1.1XXOO
+
    +
  1. You must have environment variable BUILD_MAC_SDK_EXPERIMENTAL=1 exported to build flatfish.
    2. +
+

Install XCode Command Line Utilities

+

You need to install Xcode's Command Line Utilities. You can download just the Command Line Utilities from Apple's developer downloads page for your particular version of OS X, however if you would like the entire Xcode suite of applications, you can install Xcode through the Mac App Store. 

+

Xcode 4.3.1 (OS X 10.7 "Lion") and other newer versions such as 4.4.1+ (that is, Mac OS X 10.8 "Mountain Lion"), won't necessarily include the required Command Line Utilities. When you install Xcode, make sure to go into Preferences, then the Downloads panel, and install the Command Line Utilities. In addition, make sure you have at least 20 GB of free disk space.

+

Screenshot of Xcode Downloads Command Line Tools

+
+

Note: The Firefox OS emulator requires a Core 2 Duo processor or later; that is, a system that is compatible with Mac OS X 10.7 "Lion". You do not actually have to be running Lion, you just have to be compatible with it. You can, however, build any Firefox OS build on many older Macs.

+
+
+

Note: XCode 4.2.x or older is not compatible with Mac OS X 10.9 or above, and XCode 4.3.x has no platform SDK for 10.8. Please install a newer version. If you're also working on flatfish, please make sure any of XCode 4.4, 4.5, and 4.6 is available.

+
+

Run Firefox OS Mac Bootstrap

+

Next, open a terminal and run the following command:

+
curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash
+

This will pull and run a bootstrap script that makes sure you have all the prerequisites met to build the emulator. It will also prompt you for permission to install anything you're missing, and provide warnings and suggested fixes to problems. The script will check for and install the following items:

+ +

Xcode wrangling

+

If you have already upgraded to Xcode 4.4+ and get the message that Xcode is outdated, check the Xcode path with:

+
xcode-select -print-path
+

If it still points to /Developer you can update the path with:

+
sudo xcode-select -switch /Applications/Xcode.app
+

Making the Mac OS X 10.6 SDK available

+

You also need to have the Mac OS X 10.6 SDK available. The SDK needs to be available at

+
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/
+

If it cannot be found there you will need to extract and copy it from Xcode 4.3. To do this:

+
    +
  1. Download the XCode 4.3 .dmg file from the Apple Developer portal (you'll need an Apple Developer account).
    2. +
  2. Download the utility Pacifist and use it to extract the 10.6 SDK from the XCode 4.3 .dmg file. Click on the "Extract Package" button, find the SDK by searching for 10.6 in the search box, then Ctrl + click on the MacOSX10.6.sdk directory and Extract it to a suitable location.
    3. +
  3. Add a symlink from the 10.6 SDK location to the /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/ directory. For example, if you put the 10.6 SDK on your desktop, the comment would be
    4. +
+
ln -s /Users/<yourusername>/Desktop/MacOSX10.6.sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/
+
+

Note: This is not necessary for Mac OS X 10.9 or above, because 10.6 SDK is for ICS and ICS doesn't supports Mac OS X 10.9.

+
+

Be aware of Mac file system case sensitivity

+

By default, Mac OS X ships with a case-insensitive file system.  This is problematic because the Linux kernel has a number of files with the same name, but different case.  For example, see the header files xt_CONNMARK.h and xt_connmark.h.  This results in a number of files appearing to be modified in /kernel after a fresh ./config.sh.

+

In many cases you can run the build just fine; for some platforms, however, you may encounter the following error:

+
ERROR: You have uncommited changes in kernel
+You may force overwriting these changes
+with |source build/envsetup.sh force|
+
+ERROR: Patching of kernel/ failed.
+

Please see bug 867259 for more discussion and possible fixes for this problem.

+

Alternatively, it will always be safest to build on a case sensitive file system.  The easiest way to do this is to create a separate, mountable disk image with case-sensitivity enabled.  You can do this using Apple's Disk Utility application or from the command line:

+
hdiutil create -volname 'firefoxos' -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.sparseimage
+

Mount the drive with:

+
open ~/firefoxos.sparseimage
+

Change into the mounted drive with:

+
cd /Volumes/firefoxos/
+

You can then check out the code and compile from this location without worrying about case-sensitivity problems.

+

Mountain Lion homebrew gotcha

+
+
+ If you are on Mountain Lion and you receive an error during the installation of the dependencies via homebrew, such as:
+
+
+ 
clang: error: unable to execute command: Segmentation fault: 11
+ ... try reinstalling the dependency manually adding the --use-gcc flag, for example: + 
brew install mpfr --use-gcc
+
+

Follow Samsung Galaxy S2 extra steps

+

If you plan to build for the Samsung Galaxy S2, you will also need to install heimdall. See {{ anch("Installing heimdall") }} for details. This is not done for you by the bootstrap script!

+
+ Note: If you have installed the Samsung Kies tool, which is used to manage the contents of many Samsung phones, you will have to remove it before you can flash Firefox OS onto your device. You can use the standard application removal process on Windows; on Mac, the Kies install disk image has a utility to fully remove Kies from your system. Flashing will not work if you have Kies installed. If you forget to remove Kies, the build system will detect it and remind you to uninstall it. Note also that the uninstall tool does not correctly remove the folder ~/Library/Application Support/.FUS, and leaves a reference to a utility there in your user startup items list. You will want to remove these manually.
+

Fix libmpc dependency if broken

+

gcc 4.6 was built with libmpc 0.9; if you then use homebrew to update packages, libmpc gets updated to version 1.0, but homebrew doesn't rebuild gcc 4.6 after the library version changes. So you need to create a symlink to make things work again, like this:

+
cd /usr/local/lib/
+ln -s libmpc.3.dylib libmpc.2.dylib
+

Optional: Install HAX

+

Intel provides a special driver that lets the B2G emulator run its code natively on your Mac instead of being emulated, when you're using the x86 emulator. If you wish to use this, you can download and install it. It's not required, but it can improve emulation performance and stability.  

+

Before you install HAX you will need to install the Android SDK.

+

Install adb

+

The build process needs to pull binary blobs from the Android installation on the phone before building B2G (unless you're building the emulator, of course).  For this, you will need adb, the Android Debug Bridge. Our Installing ADB article explains how to get adb installed.

+
+

Note for future when you start to use adb: adb needs the phone's lock screen to be unlocked in order to see your phone (at least in later versions of Firefox OS). You'll probably want to disable the lock screen (we'll get to how later in the build instructions).

+
+

Install heimdall

+

Heimdall is a utility for flashing the Samsung Galaxy S2. It's used by the Boot to Gecko flash utility to replace the contents of the phone with Firefox OS, as well as to flash updated versions of B2G and Gaia onto the device. You'll need it if you want to install Firefox OS on a Galaxy S2; it is not needed for any other device. For other devices, we build and use the fastboot utility instead.

+
+ Note: Again, it's important to note that this is only required for installing Firefox OS on the Samsung Galaxy S2.
+

There are two ways to install heimdall:

+ +

Configure ccache

+

The B2G build process uses ccache. The default cache size for ccache is 1GB, but the B2G build easily saturates this; around 3GB is recommended. You can configure your cache by running the following command inside terminal:

+
$ ccache --max-size 3GB
+

For Linux: configure the udev rule for your phone

+
+

Note: This section is specific to Linux; Mac OS X has the necessary device permissions set up already.

+
+

Next, you need to confingure the udev rule for your phone,

+

You can get the USB vendor ID by running lsusb with your phone plugged in, but typically it's Google 18d1, Samsung 04e8, ZTE 19d2, Geeksphone/Qualcomm 05c6. Add this line in your /etc/udev/rules.d/android.rules file (replacing XXXX with the ID for your device):

+
SUBSYSTEM=="usb", ATTR{idVendor}=="XXXX", MODE="0666", GROUP="plugdev"
+

Take ZTE for example, the content in android.rules will be

+
SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", MODE="0666", GROUP="plugdev"
+
+

If the file doesn't exist, create it. The rules.d directory is usually read only by default, so you may have to use chmod to make the directory writeable, or the file, or both.

+
+

Once you've saved the file, and closed it,  make the file readable:

+
sudo chmod a+r /etc/udev/rules.d/android.rules
+
+

Now that the udev rules have been updated, restart the udev daemon. For ubuntu:

+
sudo service udev restart
+

Finally, unplug and the USB cable but don't replug it in because we need to enable remote debugging on the phone first.

+

Enable remote debugging

+

Before you plug your phone back into your USB port, put it USB developer mode. This allows you to debug and flash the phone. To enable developer mode, on your phone enable Remote Debugging in Developer settings (this was called Developer mode on older versions.) Once the option is checked, remote debugging is enabled, and you are ready to go.

+

At this point, connect your phone to your computer via a USB cable (if you created the udev rule before, this will trigger udev to detect the phone and create the device node with the right permissions). Now you can check if you can list your device via the adb devices command (remember that adb can only see your phone when the lock screen is unlocked). If everything has worked ok, you should see an output similar to this (the following is for a Geeksphone Keon):

+
$ adb devices
+List of devices attached
+full_keon       device
+

If the device did not list as expect, check the file name and the script are all correct (see previous section), then restart the computer and retype the command again. Note also that if your device uses fastboot, the bootloader may identify itself with a different vendor ID than the one you see when the device boots normally.

+

Backup the phone system partition

+
+

Note: You have to do this before you build your device if you do not have an existing system backup, because some libraries will be referenced in build time. These library might be proprietary so we can't provide in our code base.

+
+

It is recommended that you back up the entire Android system partition on your phone.

+

You can use this copy of the binary blobs for Android in case you later delete your B2G tree. To do this, run:

+
adb pull /system <backup target dir>/system
+
+

 Depending on the phone, you may also need to pull the /data and/or /vendor directories:

+
adb pull /data <backup target dir>/data
+adb pull /vendor <backup target dir>/vendor
+
+

If the pull commands fail with an "insufficient permission" message, try the following:

+ +

On to the next step

+
+

At this point, you should be ready to fetch the Firefox OS code!

+
diff --git a/files/it/archive/b2g_os/quickstart/app_tools/index.html b/files/it/archive/b2g_os/quickstart/app_tools/index.html new file mode 100644 index 0000000000..5d8657ae2a --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/app_tools/index.html @@ -0,0 +1,16 @@ +--- +title: Strumenti di sviluppo per le app +slug: Archive/B2G_OS/Quickstart/App_tools +translation_of: Archive/B2G_OS/Quickstart/App_tools +--- +
+

Cosa si usa per sviluppare le App Open Web? La risposta è "Gli stessi che si utilizzano abitualmente quando si sviluppa per il Web". La seguente è una lista di strumenti e risorse per aiutarti a sviluppare le tue prime App Open Web. Possono essere facilmente integrati nel tuo metodo di sviluppo web, se ne hai uno, o puoi creare un nuovo flusso di lavoro basandoti su di essi.

+
+

Test di validazione dell'app

+

La tua app è pronta per Firefox Marketplace? Il Test di validazione dell'app analizzerà il tuo manifest e ti mostrerà gli errori che potrebbe avere, o gli avvertimenti a cui dovresti prestare attenzione.

+

Firefox OS Simulator

+

Installare e utilizzare il Firefox OS Simulator è il modo più semplice per avere la tua app pronta in breve tempo. Dopo averlo installato, il simulatore è accessibile dal menu Sviluppo Web -> Firefox OS Simulator. Assieme al simulatore viene lanciata una console JavaScript che permette di eseguire il debug delle applicazioni dall'interno del simulatore.

+

App Manager

+

Il nuovo arrivato per quanto riguarda gli strumenti di test si chiama App Manager. Questo strumento ti permette di collegare Firefox a un dispositivo compatibile via USB (o a un simulatore Firefox OS), inviare app direttamente al dispositivo, validarle ed eseguirne il debug mentre vengono eseguite sul dispositivo.

+

Strumenti di sviluppo di Firefox

+

Firefox ora include un insieme di strumenti di sviluppo predefiniti progettati da zero per consentire un'esperienza di sviluppo rapida ed efficiente. Per scoprire di più riguardo questi strumenti, e conoscere una lista dettagliata di cos'altro Mozilla abbia da offrire, visita la  zona Strumenti.

diff --git a/files/it/archive/b2g_os/quickstart/index.html b/files/it/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..325ec38fd0 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/index.html @@ -0,0 +1,48 @@ +--- +title: Crea +slug: Archive/B2G_OS/Quickstart +tags: + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +
+

Informazioni rapide per lo sviluppo di app open web.

+
+
+
+ Introduzione alle app open web
+
+ Cosa sono le app open web? In cosa differiscono dalle normali pagine web? Perché la differenza è importante? Questo articolo punta a rispondere a queste e ad altre domande.
+
+ La tua prima app
+
+ Questo articolo ti guida attraverso i passaggi base e le conoscenze addizionali rispetto allo sviluppo di normali pagine web per creare app open web installabili.
+
+ Introduzione a Firefox OS
+
+ Una presentazione di Firefox OS, la nuova piattaforma mobile di Mozilla basata sulle app open web.
+
+ Introduzione ai manifesti
+
+ FAQ creata per rispondere a qualsiasi domanda tu abbia sui manifesti, l'hosting delle app, origini e altri argomenti correlati.
+
+ Sviluppo di app per sviluppatori web
+
+ Per gli sviluppatori web: in cosa le app open web differiscono da ciò a cui sei abituato? Questo articolo spiega tutto.
+
+ Sviluppo di app per sviluppatori mobile
+
+ Per gli sviluppatori di applicazioni mobile native: quali vantaggi ti portano le app open web, e in cosa differiscono da ciò a cui sei abituato? Qui ci sono alcune idee.
+
+ Sviluppo di funzionalità per le app
+
+ Questa pagina presenta i diversi tipi di funzionalità che potresti voler includere nelle tue app, con link a ulteriori informazioni.
+
+ Pagamenti
+
+ Come puoi implementare le funzionalità per ricevere pagamenti dagli utenti che installano le tue app open web? Qui trovi i dettagli.
+
+ Strumenti per le app
+
+ Nell’ultimo articolo di questa sezione sono raccolti alcuni link a ulteriore documentazione sugli strumenti a disposizione degli sviluppatori per creare app open web di qualità.
+
diff --git a/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html b/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html new file mode 100644 index 0000000000..bd1a8d4cb5 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html @@ -0,0 +1,53 @@ +--- +title: Introduzione alle app web aperte +slug: Archive/B2G_OS/Quickstart/Intro_app_web_aperte +translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps +--- +

Multidispositivo

+
+

This article is designed to act as a good starting point for anyone wishing to learn more about Open Web Apps, whether you are a developer or project manager, or have another role relevant to app development or delivery. Here we'll provide you with a light, high level overview of Open Web Apps and the philosophy behind them.

+
+

Open Web Apps are essentially no different than standard websites or Web pages. They are built using standard open Web technologies — HTML, CSS, JavaScript, etc. — and can be accessed using a Web browser. The main differences lie in their ability to be installed on a device and work offline, and access to advanced APIs that allow interaction with device features such as the camera, address book, and other such things. In addition, they are built on open technologies as much as is possible. Where differences lie in technology implementation between platforms, efforts should be made to ensure that both are supported, through a combination of feature detection and appropriate code for different platforms, and graceful degradation.

+

Advantages of Open Web Apps

+

Let's look at the advantages of Open Web Apps in a little more detail:

+ +

The following video also looks at general advantages of open web apps, and developing for the Firefox OS platform:

+

+

Il Web è la piattaforma

+

An open web app as it exists as installed on a platform like Firefox OS is not a bookmark ‚Äî it‚Äôs a proper part of the system. Le app web rappresentano una importante promessa per il futuro Sono un'opportunità che non dobbiamo perdere se non vogliamo che il Web torni ancora una volta a essere frammentato. Tenendo presente ciò, appare chiaro che l'obiettivo delle app web aperte (AWA per brevità) è diventare standardizzare ed entrare a far parte del "Web". Se avranno successo, le AWA eventualmente funzioneranno su ogni browser, sistema operativo e dispositivo.

+

Noi di Mozilla stiamo lavorando sodo per realizzare una piattaforma di app sostenuta interamente dal Web aperto. Non vogliamo creare una "piattaforma Mozilla" o una "piattaforma Firefox". Il Web è la piattaforma. Stiamo realizzando una collezione di API aperte e implementazioni per dimostrare che le app portabili possono esistere sul Web senza essere bloccate dai lucchetti dei venditori. Altri gruppi come Facebook e Google Chrome stanno lavorando su piattaforme di app che si appoggiano al Web. Le app di Facebook sono progettate per agganciarsi al sito di Facebook, mentre le app di Chrome sono progettate per i dispositivi con Chrome OS e per i server di Google. Le app di Chrome sono le più simili alle app web aperte. Continua la nostra collaborazione con il team di Google Chrome per stare al passo con l'evoluzione degli standard delle app e sicuramente condividiamo in gran parte la stessa visione. Esiste un enorme potenziale per tutte le piattaforme di app basate sul Web di convergere e estendiamo a ogni venditore l'invito di aiutarci a creare le API per app web aperte più adatte.

+

Sebbene al momento sia necessario un motore basato su Mozilla Firefox ("Web runtime") per utilizzare le app web aperte, in futuro non sarà sempre così. Stiamo ancora lavorando su molti punti di questo progetto e non ci è possibile implementare tutto su ogni browser contemporaneamente. Anche se numerose parti delle app web aperte sono già standardizzate, ci sono molti altri aspetti ancora da definire. È nostra intenzione e speranza rendere le app web aperte una funzionalità standardizzata disponibile su tutti i principali browser.

+

Quindi quando si consultano le pagine di MDN sulle app web aperte è opportuno tenere conto che, nonostante molte informazioni siano al momento specifiche per Firefox, se tutto procede come auspicato in futuro consentiranno di sviluppare app per tutti i browser.

+

Standard web

+

La tecnologia AWA non è una sola, più che altro è un ombrello sotto il quale si raggruppano numerose tecnologie differenti, alcune delle quali ancora molto giovani. Attualmente alcune parti di AWA sono standardizzate (HTML5, CSS, JavaScript, IndexedDB, ecc.) Altre parti non sono state ancora standardizzate, pertanto Mozilla le ha implementate solo in Firefox e altri prodotti Mozilla. Dal momento che la missione di Mozilla è condividere le potenzialità del Web con tutti, questa situazione è solo temporanea. Per questa ragione nei documenti AWA tenteremo di identificare con chiarezza le parti non ancora standardizzate.

+

Tieni anche in considerazione che potrebbero esistere anche altre tecnologie proposte per AWA candidate a definirne lo standard e non utilizzate da Mozilla.

+

Standard finali a cui miriamo

+

Le seguenti parti, non ancora standardizzate per tutte le piattaforme web, al momento sono disponibili solo su Firefox:

+ +

Marketplace

+

Acquista una volta, utilizza dappertutto

+

Mozilla ha sviluppato da zero un sistema che permette agli utenti di acquistare un'app una sola volta e utilizzarla su tutti i suoi dispositivi HTML5. Molto presto Mozilla lancerà il primo telefono cellulare Firefox OS, che tuttavia sarà solo uno dei tanti dispositivi su cui utilizzare le app. Quando acquisti un'app da Firefox Marketplace, il sistema installa una ricevuta sul tuo dispositivo. La ricevuta è un JSON Web Token contenente metadati con un collegamento alla chiave pubblica di Firefox Marketplace e all'URL del servizio di verifica. All'avvio dell'app, essa è in grado di verificare la ricevuta, tuttavia la ricevuta del dispositivo non è legata a Firefox Marketplace. Si tratta semplicemente di una prova di acquisto crittograficamente verificabile. Chiunque può vendere app web aperte se rispetta le specifiche della ricevuta. Quando acquisti un'app, essa è pensata per essere portabile su tutti i dispositivi che supportano il sistema per app web aperte.

+

Mozilla is building the infrastructure needed to run Open Web Apps on any HTML5 device. Firefox for Android will let you install and run apps (you can try it today on the nightly build). Installed app icons go to your home screen just like regular Android apps. You can also install and run Web apps on your Windows, Mac, or Linux desktop using Firefox (this currently works in the nightly build). Currently some version of Firefox is required, but it is intended that the Open Web Apps system will eventually be supported by all major browsers as a set of standards. From day one Mozilla has included all major HTML5 compliant browsers in its proof of concepts; you can take a look at this hosted JavaScript shim for ideas on how to support the apps platform on a non-Firefox browser.

+

In futuro il sistema di app web aperte supporterà la sincronizzazione delle app installate tra tutti i dispositivi. Poiché le ricevute sono portabili, esse possono essere sincronizzate direttamente dall'utente, se lo desidera. In caso non fosse ovvio, un'app web aperta gratuita può essere eseguita in qualsiasi browser, in quanto non è diversa da un sito web. Potrebbe tuttavia utilizzare nuove API specifiche per cellulari che non sono state implementate su tutte le piattaforme.

+

The video below provides a useful overview of the advantages of open marketplaces and an open web approach to app discovery:

+

+

API WebPayment

+

Commercio di app

+

Parte del successo delle piattaforme di app per cellulari come iOS e Android è la facilità con cui è possibile sperimentare nuovi modelli di business attraverso i pagamenti via cellulare. Questi modelli si stanno ancora evolvendo ma non c'è dubbio che al momento il commercio di app si svolga in maniera molto più naturale sui cellulari piuttosto che sui computer desktop. In particolare è molto più comodo addebitare un acquisto sulla bolletta del telefono quando lo si sta utilizzando come strumento per accedere alla rete. Grazie al lancio di Firefox OS l'ecosistema delle app supporterà l'acquisto e i pagamenti in-app attraverso l'API WebPayment. Garantire l'efficienza nel gestire il commercio è un fattore cruciale nella crescita di una piattaforma di app. L'API per i pagamenti che proponiamo è assolutamente facoltativa. Mozilla non impedirà ad alcuna app di utilizzare un proprio sistema di pagamenti in-app.

+

Vedi anche

+ diff --git a/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html b/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html new file mode 100644 index 0000000000..88b6068425 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html @@ -0,0 +1,16 @@ +--- +title: Introduzione a Firefox OS +slug: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS +translation_of: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS +--- +
+

Note: The Quickstart section has been updated with a new, more focused Quickstart article, which replaces all the previous Quickstart articles. We hope you'll find this more useful, and a quicker learning experience than the older set of articles.

+
+
+

Firefox OS è un nuovo sistema operativo mobile sviluppato da Mozilla all'interno del progetto Boot to Gecko (B2G). Firefox OS utilizza il Kernel Linux e un motore di runtime basato su Gecko, che consente agli utenti di eseguire applicazioni sviluppate interamente utilizzando HTML, CSS, JavaScript e anche le Open Web API.

+
+

Firefox OS (conosciuto anche con il nome in codice Boot to Gecko o B2G) è un sistema operativo mobile open source, basato sul Kernel Linux, il quale fa il boot all'interno di una runtime engine bassata su Gecko, questo da la possibilità agli utenti di far girare applicazioni sviluppate solo con HTML, CSS, JavaScript e le Open Web APIs. Firefox OS è un sistema operativo mobile libero dalle tecnologie proprietarie, in più offre una potente piattaforma di svillupo dando la possibilità di creare prodottti eccellenti. Inoltre, è un sistema flessibile, in grado di rende felice l'utilizzatore finale.

+

+

Firefox OS utilizza di default l'interfaccia grafica Gaia, che gestisce le funzioni fondamentali del telefono, ad esempio impostazioni, chiamate, SMS, prendere e archiviare foto, ecc

+

For Web developers, the most important part to understand is that the entire user interface is a Web app, one that is capable of displaying and launching other Web apps. Any modifications you make to the user interface and any applications you create to run on Firefox OS are Web pages, albeit with enhanced access to the mobile device's hardware and services.

+

Firefox OS is currently under heavy development; we are constantly working on ways to make it easier for you to use and hack on Gaia and create apps. However, you need knowledge about systems in order to do things like build the entire Firefox OS stack, or flash a phone with a build of Firefox OS. To find such information, and lots more besides, head on over to our Firefox OS content zone.

diff --git a/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html b/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html new file mode 100644 index 0000000000..b470246ed7 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html @@ -0,0 +1,262 @@ +--- +title: La tua prima app +slug: Archive/B2G_OS/Quickstart/La_tua_prima_app +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +
+
+

Le applicazioni web aperte offrono agli sviluppatori esattamente quello che hanno voluto per anni: un ambiente multi-piattaforma dedicata alle applicazioni installabili create con solo HTLM, CSS e JavaScript — Firefox OS è la prima piattaforma aperta dedicata alle apllicazioni web. Questa guida si propone di farvi ottenere rapidamente le basi e le istruzioni di complicazione in modo da poter creare la prossima grande app!

+
+ +

Se vuoi seguire questa guida, è possibile scaricare il nostro modello di applicazione di avvio rapido. Trova più info leggendo la nostra guida sul modello dell'applicazioni.

+ +

Struttura di un'applicazione

+ +

Packaged vs. Hosted Apps

+ +

Ci sono due tipi di applicazioni web aperte: packaged e hosted. Le applicazioni Packaged sono essenzialmente formate da un file zip contenente tutto il necessario: HTML, CSS, JavaScript, immagini, manifest, etc. Le applicazioni Hosted (ospitate) sono eseguite e gestite da un server su un determinato dominio, proprio come un normale sito web. Entrambi i tipi di app richiedono un manifest valido. Quando arriva il momento di inserire la vostra app nel Marketplace di Firefox si carica sia l'app sotto forma di file zip che a indiciare l'url del dominio dove si trovano i vari file dell'applicazione sul server.

+ +
+

{{EmbedYouTube("Q7x-B13y33Q")}}

+ +
+

   Realizzato in collaborazione con Treehouse: DACCI UN'OCCHIATA!

+
+
+ +

Ai fini di questa guida, svilupperete la vostra applicazione Hosted in localhost. Un volta che l'applicazione è pronta di può decidere di caricarla nel Marketplace di Firefox come "Hosted App".

+ +

Manifest di una App

+ +

Ogni applicazione Firefox richiede un file manifest.webapp alla radice dell'app. Il file manifest.webapp fornisce importanti informazioni sull'app come: la versione, nome, descrizione, posizione delle icone e immagini, strighe locali, domini di dove l'app si andrà a installare, e molto altro (Solo il nome e la descrizione sono richieste). Il semploce manifest incluso in un applicazione si presenta:

+ +
{
+  "version": "0.1",
+  "name": "Open Web App",
+  "description": "La vostra nuova App Web",
+  "launch_path": "/app-template/index.html",
+  "icons": {
+    "16": "/app-template/app-icons/icon-16.png",
+    "48": "/app-template/app-icons/icon-48.png",
+    "128": "/app-template/app-icons/icon-128.png"
+  },
+  "developer": {
+    "name": "Il tuo nome",
+    "url": "http://sitodellapp.com"
+  },
+  "locales": {
+    "es": {
+      "description": "Su nueva aplicación impresionante Open Web",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    },
+    "it": {
+      "description": "La vostra nuova fantastica Open Web App",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    }
+  },
+  "default_locale": "it"
+}
+ +
+

{{EmbedYouTube("dgAUgHQOm8M#t")}}

+ +
+

Realizzato in collaborazione con Treehouse: DACCI UN'OCCHIATA!

+
+
+ +

 

+ +

Un Manifest di base dovrà essere sempre la prima cosa da creare per la vostra app. Per maggiori info leggere l'App Manifest.

+ +

App Layout & Design

+ +

Il design responsive è diventato sempre più importante, se prendiamo in considerazione il fatto che le risoluzioni dello schermo dei vari device sono ormai diventate degli standard da seguire.
+ Anche se l'obiettivo principale della vostra applicazione, è quella di distribuirla sulle piattaforme mobili come Firefox OS, potette comunque rendere compatibile l'applicazione con le altre piattaforme. Per fare si che la vostra applicazioni adatti in automatico il layout in base al dispositivo, come mostrato in questo esempio, dovete utilizzare il CSS media queries:

+ +
/* The following are examples of different CSS media queries */
+
+/* Basic desktop/screen width sniff */
+@media only screen and (min-width : 1224px) {
+  /* styles */
+}
+
+/* Traditional iPhone width */
+@media
+  only screen and (-webkit-min-device-pixel-ratio : 1.5),
+  only screen and (min-device-pixel-ratio : 1.5) {
+  /* styles */
+}
+
+/* Device settings at different orientations */
+@media screen and (orientation:portrait) {
+  /* styles */
+}
+@media screen and (orientation:landscape) {
+  /* styles */
+}
+ +

There are many JavaScript and CSS frameworks available to aid in responsive design and mobile app development (Bootstrap, etc.); choose the framework(s) that best fit your app and development style.

+ +

Web APIs

+ +

JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's WebAPI effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the WebAPI page. Of course JavaScript feature detection is still the best practice:

+ +
// If this device supports the vibrate API...
+if('vibrate' in navigator) {
+    // ... vibrate for a second
+    navigator.vibrate(1000);
+}
+ +

In the following example snippet we modify the display style of a <div> based on changes in the device's battery state:

+ +
// Create the battery indicator listeners
+(function() {
+  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
+      indicator, indicatorPercentage;
+
+  if(battery) {
+    indicator = document.getElementById('indicator'),
+    indicatorPercentage = document.getElementById('indicator-percentage');
+
+    // Set listeners for changes
+    battery.addEventListener('chargingchange', updateBattery);
+    battery.addEventListener('levelchange', updateBattery);
+
+    // Update immediately
+    updateBattery();
+  }
+
+  function updateBattery() {
+    // Update percentage width and text
+    var level = (battery.level * 100) + '%';
+    indicatorPercentage.style.width = level;
+    indicatorPercentage.innerHTML = 'Battery: ' + level;
+    // Update charging status
+    indicator.className = battery.charging ? 'charging' : '';
+  }
+})();
+ +

In the code sample above, once you confirm that the Battery API is supported, you can add event listeners for chargingchange and levelchange to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.

+ +

Check the WebAPI page frequently to keep up to date with device API statuses!

+ +

Install API functionality

+ +

In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:

+ +
<button id="install-btn">Install app</button>
+ +

This button's functionality is implemented using the Install API (see install.js):

+ +
var manifest_url = location.href + 'manifest.webapp';
+
+function install(ev) {
+  ev.preventDefault();
+  // define the manifest URL
+  // install the app
+  var installLocFind = navigator.mozApps.install(manifest_url);
+  installLocFind.onsuccess = function(data) {
+    // App is installed, do something
+  };
+  installLocFind.onerror = function() {
+    // App wasn't installed, info is in
+    // installapp.error.name
+    alert(installLocFind.error.name);
+  };
+};
+
+// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
+var button = document.getElementById('install-btn');
+
+var installCheck = navigator.mozApps.checkInstalled(manifest_url);
+
+installCheck.onsuccess = function() {
+  if(installCheck.result) {
+    button.style.display = "none";
+  } else {
+    button.addEventListener('click', install, false);
+  };
+};
+
+ +

Let's run through briefly what is going on:

+ +
    +
  1. We get a reference to the install button and store it in the variable button.
    2. +
  2. We use navigator.mozApps.checkInstalled to check whether the app defined by the manifest at http://people.mozilla.com/~cmills/location-finder/manifest.webapp is already installed on the device. This test is stored in the variable installCheck.
    3. +
  3. When the test is successfully carried out, its success event is fired, therefore installCheck.onsuccess = function() { ... } is run.
    4. +
  4. We then test for the existance of installCheck.result using an if statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.
    5. +
  5. If the app isn't installed, we add a click event listener to the button, so the install() function is run when the button is clicked.
    6. +
  6. When the button is clicked and the install() function is run, we store the manifest file location in a variable called manifest_url, and then install the app using navigator.mozApps.install(manifest_url), storing a reference to that installation in the installLocFind variable. You'll notice that this installation also fires success and error events, so you can run actions dependant on whether the install happened successfully or not.
    7. +
+ +

You may want to verify the implementation state of the API when first coming to Installable web apps.

+ +
+

Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allow installable web apps to install on the desktop. See FAQs about apps manifests for more information on origins.

+
+ +

WebRT APIs (Permissions-based APIs)

+ +

There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the manifest.webapp file like so:

+ +
// New key in the manifest: "permissions"
+// Request access to any number of APIs
+// Here we request permissions to the systemXHR API
+"permissions": {
+    "systemXHR": {}
+}
+ +

The three levels of permission are as follows:

+ +
    +
  • Normal — APIs that don't need any kind of special access permissions.
    • +
  • Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.
    • +
  • Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.
    • +
+ +

For more information on app permission levels, read Types of packaged apps. You can find out more information about what APIs require permissions, and what permissions are required, at App permissions.

+ +
+

It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.

+
+ +

Tools & Testing

+ +

Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps:

+ +

Firefox OS Simulator

+ +

Installing and using the Firefox OS Simulator is the easiest way to get up and running with your app. After installed the simulator is accessible via the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so that you may debug your application from within the simulator!

+ +

App Manager

+ +

The new kid on the block with regards to testing tools is called the App Manager. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.

+ +

Unit Testing

+ +

Unit tests are extremely valuable when testing on different devices and builds. jQuery's QUnit is a popular client-side testing utility, but you can use any set of testing tools you'd like.

+ +

Installing Firefox OS on a Device

+ +

Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on MDN.

+ +

Dedicated Firefox OS developer preview devices are also available: read our Developer preview phone page for more information.

+ +

App Submission and Distribution

+ +

Once your app is complete, you can host it yourself like a standard web site or app (read Self-publishing apps for more information), or it can be submitted to the Firefox Marketplace. Your app's manifest will be validated and you may choose which devices your app will support (i.e. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated you may add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved your app is available to the world for purchase and installation.

+ +

More Marketplace & Listing Information

+ +
    +
  1. Submitting an App to the Firefox OS Marketplace
    2. +
  2. Marketplace Review Criteria
    3. +
  3. App Submission Video Walkthrough
    4. +
+
diff --git a/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html b/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html new file mode 100644 index 0000000000..521d78d1c5 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html @@ -0,0 +1,52 @@ +--- +title: Sviluppo delle App per Sviluppatori web +slug: Archive/B2G_OS/Quickstart/per_sviluppatori_web +translation_of: Archive/B2G_OS/Quickstart/For_Web_developers +--- +
+

Se sei uno Sviluppatore web e hai un sito o una applicazione web che vuoi trasformare in una app installabile, ci sono tecnicamente poche cose da fare. Questo articolo spiega i requisiti minimi, insieme alle idee da conoscere sulle web app e quanto sono diverse dai siti web comuni.

+
+

I requisiti minimi sono pochi:

+
    +
  1. Creare un app manifest.
    2. +
  2. Distribuire il file app manifest con l'estensione .webapp. Impostare l'header Content-Type in application/x-web-app-manifest+json.
    3. +
  3. Pubblicare l'app, sul proprio sito, nell' app store o su entrambi. Pubblicare in proprio richiede  l'aggiunta di codice al tuo sito, per gestire l'installazione e l'aggiornamento dell'app nel browser degli utilizzatori.
    4. +
+

Funzionalità facoltative

+

Filosoficamente, l'idea di una Open Web App installabile è molto di più che aggiungere semplicemente un file manifest al sito.  Le tecnologie degli Standard Web possono essere viste come piattaforme per applicazioni in piena regola che permettono ad un browser di rappresentare le interfacce utente, interpretare il codice e utilizzare i protocolli Web per comunicare con il server.

+

Mozilla offre eseguibili "Web runtime" per varie piattaforme in modo che le applicazioni siano in grado di funzionare nella propria finestra senza il contorno di un browser.

+

Per "appificare" un sito Web ci sono alcune aspetti specifici da considerare:

+ +

Se vuoi avvantaggiarti completamente delle capacità offerte alle app installabili, hai cose da fare in abbondanza, ad esempio:

+ +

Tecnologie utili

+

Ci sono alcune tecnologie web che potrebbero essere utili per scrivere app installabili. Nella lista seguente non c'è nulla ad uso esclusivo delle sole app ma dell'intero Web.

+ +

Leggi anche

+ diff --git a/files/it/archive/b2g_os/security/index.html b/files/it/archive/b2g_os/security/index.html new file mode 100644 index 0000000000..f4c05fab41 --- /dev/null +++ b/files/it/archive/b2g_os/security/index.html @@ -0,0 +1,63 @@ +--- +title: La sicurezza in Firefox OS +slug: Archive/B2G_OS/Security +tags: + - Firefox OS + - Mobile + - Security +translation_of: Archive/B2G_OS/Security +--- +

I seguenti articoli coprono gli argomenti inerenti la sicurezza in Firefox OS. Questi includono nozioni sulle opzioni di sicurezza generali, sulla sicurezza delle applicazioni e su come il processo di installazione venga mantenuto sicuro.

+ + + + + + + + +
+

Documentazione sulla sicurezza di Firefox OS

+ +
+
Il modello della sicurezza di FIrefox OS
+
Una presentazione sul modello di sicurezza di Firefox OS.
+
System security
+
Dettagli sui controlli di sicurezza presenti in Firefox OS.
+
Sicurezza delle applicazioni in Firefox OS
+
Una presentazione su come sono mantenute sicure le applicazioni su Firefox OS.
+
Installare e aggiornare applicazioni in modo sicuro
+
Come Firefox OS riesce a installare e aggiornare le applicazioni in modo sicuro.
+
 Debug e test di sicurezza con Firefox OS
+
 Questa guida mostra il procedimento per un semplice test di sicurezza, partendo dall'apertura da remoto del debugger JavaScript all'impostazione di un proxy che intercetti il traffico HTTP(S) generato da una versione Desktop di Firefox OS.
+
+ +

Vedi tutto...

+ 		+

Trovare aiuto nella community

+ +

Se stai lavorando con Firefox OS o stai sviluppando un' applicazione che vorresti funzionasse su di un dispositivo Firefox OS, ci sono risorse della community per aiutarti!

+ +
    +
  • Consulta il forum del progetto Boot to Gecko: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}
    • +
+ +
    +
  • Chiedi aiuto nel canale IRC di Mozilla Boot to Gecko : #b2g
    • +
+ +

Non dimenticarti della netiquette...

+ + + + + +
+ +

 

+ +

+Firefox OS
diff --git a/files/it/archive/b2g_os/security/security_model/index.html b/files/it/archive/b2g_os/security/security_model/index.html new file mode 100644 index 0000000000..8e94417927 --- /dev/null +++ b/files/it/archive/b2g_os/security/security_model/index.html @@ -0,0 +1,386 @@ +--- +title: La sicurezza di Firefox OS +slug: Archive/B2G_OS/Security/Security_model +translation_of: Archive/B2G_OS/Security/Security_model +--- +
+

Questo documento fornisce una presentazione del security framework di Firefox OS, realizzato appositamente per proteggere i dispositivi mobili dalle minacce rivole alla piattaforma, alle app ed ai dati. Il modello della sicurezza implementato da Mozilla su Firefox OS è globale, integrato e stratificato su più livelli per fornire la migliore protezione contro i rischi della sicurezza specifici degli smartphone. 

+
+ +

Platform Security

+ +

La piattaforma Firefox OS usa un modello della sicurezza stratificato con l'obiettivo di mitigare i rischi di violazione ad ogni livello. Contromisure da prima linea e strategie di difesa accurate si uniscono così per fornire globalmente protezioni agli attacchi.

+ +

Secure Architecture

+ +

Firefox OS collega le applicazioni basate sul web all'hardware sottostante. Consiste in una stack di tecnologie integrate suddivisa nei seguenti livelli:

+ +

+ + + +

Il livello Gecko si comporta come intermediario tra le app web (al livello Gaia) e il telefono. Il compito di Gonk è rende a lui disponibili le funzionalità hardware affinchè possa gestire l'accesso delle app web alle API web. Gecko si impone così come passaggio obbligato ed unico per le richieste d'accesso comportando l'assenza di un accesso diretto o una "back door" al dispositivo. In sostanza Gecko fornisce i permessi e previene gli accessi non autorizzati.

+ +

Secure System Deployment

+ +

Firefox OS è già intallato negli smartphone. L'immagine di sistema è creata da una sorgente fidata e conosciuta — di solito gli OEM stessi — responsabile dell' assemblaggio, della creazione della build, del test e della firma digitale del pacchetto distribuito.

+ +

Le misure di sicurezza sono attive su tutti il livelli della stack. I privilegi del file sistem sono gestiti dalla Linux's access control list (ACLs). Le app di sistema sono installate su di un volume read-only (che diventa read-write solo durante gli aggiornamenti) e generalmente solo le aree con contenuto utente possono essere read-write. Vari componenti hardware del dispositivo hanno sistemi di sicurezza interni implementati come pratica standard dai produttori (ad esempio nei chipset). Il nucleo centrale della piattaforma (Gecko e Gonk) è strutturato per migliorare la sua resistenza contro potenziali attacchi e le caratteristiche di hardcoding del compilatore sono utilizzate per questo scopo ove possibile. Per altri dettagli vedere sicurezza del Runtime.

+ +

Secure System Updates

+ +

I seguenti aggiornamenti e patch a Firefox OS sono diffusi tramite un processo sicuro elaborato da Mozilla per assicurare il mantenimento dell'integrità dell'immagine sistema sul dispositivo. Anche l'aggiornamento è fornito da fonti affidabili e conosciute— di solito dagli OEM — responsabili dell'assemblggio, della creazione della build build, del test e della firma digitale del pacchetto distribuito.

+ +

Gli aggiornamenti di sistema possono influire su tutta la stack o solo su porzioni porzioni della stessa. Se gli aggiornamenti includono modifiche a Gonck sarà usto il processo FOTA (Firmware Over the Air) per l'installazione. Questa metodologia può anche includere cambiamenti su qualsiasi altra parte della stack, inclusa la gestione del dispositivo (FOTA, firmware / driver), la gestione delle impostaioni (Firefox OS settings), gli aggiornamenti sulla sicurezza, Gaia, Gecko, e altro.

+ +

GLi aggiornamenti che invece non includono Gonck possono esere effettuati usando la Mozilla System Update Utility. Firefox OS usa lo stesso framework per gli aggiornamenti, i processi, e per il formato Mozilla ARchive (MAR) (usato per i pacchetti di aggiornamento) di Firefox per Desktop.

+ +

un servizio integrato — che piò essere fornito dagli OEM — controlla regolarmente se sono disponibili aggiornamenti per il dispositivo in uso, se ve ne sono viene proposta all'utente l'installazione. PRima che il processo di aggiornamento venga avviato è controllato se lo spazio disponibile nel dispositivo è sufficiente e che la distribuazione sia verificata per:

+ + + +

Le seguente misure di sicurezza sono applicate durante il processo di aggiornamento:

+ + + +

Sono disposti controlli rigorosi per assiucurare che l'aggiornamento sia propriamente applicato al telefono.

+ +
+

Note: Per maggiori informazioni su come funzionano, sono creati e distribuiti gli aggiornamenti, leggere Creare e applicare pacchetti di aggiornamento per Firefox OS.

+
+ +

Sicurezza nelle app

+ +

Firefox OS usa una precisa strategia per proteggere lo smartphone da applicazioni dannose o intrusive; questa consiste in una serie di meccanismi come: livelli di permessi impliciti basati sul modello di affidabilità delle app, modlità sandbox in runtime, accesso hardware riservato alle sole API, modello dei permessi robusto e  processo sicuro di installazione e aggiornamento. Per dettagli tecnici consultare Sicurezza delle applicazioni.

+ +

In Firefox OS, tutte le applicazioni sono app web — programmi scritti in HTML5, JavaScript, CSS, media, ed altre tecnologie web (le pagine web visualizzate nel browser non sono considerate app web in questo contesto). Poichè non ci sono applicazioni binare ("native") installate dall'utente, tutto l'accesso al sistema è delegato strettamente alle API Web. Anche l'accesso al file system è veicolato dalle API Web e da un database back-end SQLite — non c'è accesso diretto dalle app ai file salvati nella scheda SD.

+ +

Firefox OS limita e espande la quantità di risorse accessibili o utilizzabili da un'app, mentre inoltre supporta un ampio spettro di applicazioni con vari livelli di permesso. Mozilla ha inoltre implementato uno stretto controllo su che tipo di applicazioni possono accedere alle API Web. Per esempio, solo app certificate (cioè già incluse nel telefono) possono avere accesso all'API Telephony. L'app Dialer hai i privilegi per L'API Telephony per effettuare telefonate, ma ciò non è vero per tutte le app certificate.

+ +

Questo previene tutte quelle situazioni in cui, per esempio, le app di terze parti avviano telefonate verso numeri a pagamento, provocando un grosso impatto sulla bolletta telefonica.

+ +

Comunque anche altre app OEM selezionate possono avere accesso alle API Telephony. Per esempio, un operatore può fornire un sistema di gestione del proprio account telefonico, per il supporto dei clienti.

+ +

Applicazioni affidabili e non

+ +

Firefox OS divide le app nei seguenti tipi:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Tipi

+ 		+

Livello di affidabilità

+ 		+

Descrizione

+
+

Certificate

+ 		+

Molto affidabili

+ 		+

App di sistema approvate dagli OEM (a causa di rischi inierenti la corruzione del dispositivo o di sue funzionalità critiche). Solo app di sistema e servizi, escluse le applicazioni di terze parti.
+ Questa designazione è riservata solo ad un piccolo numero di app con rilevanza critica. Esempi: SMS, Bluetooth, fotocamera, orologio di sistema, componente telefonica, e il sistema di composizione di default (per assicurare che i servizi d'emergenza siano sempre disponibili).

+
+

Privilegiate

+ 		+

Affidabili

+ 		+

App di teze parti recensite, approvate, e firmate digitalmente su un Marketplace autorizzato.

+
+

Web (tutto il resto)

+ 		+

non affidabili

+ 		+

Contenuto web regolare. include sia le app installate (salvate sullo smartphne) che le hosted (remote, con il solo manifest presente nel dispositivo). Il manifesto per le app hosted può essere ottenuto dal marketplace Marketplace.

+
+ +

Il livello di affidabilità determina, in parte, le capacità dell'applicazione di accedere alle funzionalià del dispositivo.

+ + + +

Alcune operazioni, come l'accesso alla rete, sono considerate implicite in ogni app. In generale, più l' operazione eseguita è sensibile, più il livello di affidabilità dev'essere elevato (ad esempio, comporre un numero e accedere alla lista dei contatti sono operazioni sensibili).

+ +
+

Note: Per più informazioni sulle API disponibili e il loro livello, conusltare permessi delle app.

+
+ +

Principio dei minimi permessi

+ +

Per le web app, il framework della sicurezza di Firefox OS segue il principio dei minimi permessi: partire con il livello di permessi minimo, per poi aggiungere altri privilegi solo se necessari e ragionevoli. Di default, un'applicazione è pressochè priva di autorizzazioni, a un livello comprabile a quello delle app non affidabili. Se l'applicazione effettua chiamate alle API che necessitano di autorizzazioni aggiuntive, deve elencarle nel manifest dell'applicazione (che verrà approfondito successivamente in questo documento). Gecko si occuperà di considerare le richieste ed eventualmente di garantire l'accesso alle API Web richieste dall'applicazione, ma solo se le condizioni di privilegio sono espresse esplicitamente nel manifest. Gecko soddisferà le richieste solo se il type della app Web (certificate, affidabili, o web) è sufficientemente qualificato per l'accesso.

+ +

Il processo di revisione delle app privilegiate Marketplace

+ +

Affinchè un app diventi privilegiata, il fornitore dell'applicazione deve inviarla su in Marketplace autorizzato per l'analisi. Il Marketplace sottopone l'applicazione ad una revisione precisa del codice: verifica la sua autenticità e integrita, assicurando che i permessi richiesti siano effettivamente usati per le finalità indicate, verificando che l'uso dei permessi impliciti sia appropriato e validando ogni interfaccia tra contenuto delle app privilegiate e non, abbiano le appropriate restrizioni per prevenire attacchi che sfruttino l'elevazione dei privilegi. Il Marketplace ha la responsabilità di assicurare che le app non abbiano comportamenti ambigui con i privilegi assegnati.

+ +

Dopo che un applicazione è stata approvata, il suo manifesto è firmato digitalmente dal Marketplace e reso disponibile per il download da parte degli utenti. La firma assicura che, anche se lo store online fosse hackerato, l'hacker non possa installare contenuto arbitrario o codice maligno sul dispositivo. Grazie a questo processo di veto le app del Marketplace possono avere accesso ad una più ampia gamma di privilegi rispetto al normale contenuto web. 

+ +
+

Note: per saperne di più sui Marketplace e sul Firefox Marketplace, visitare la Marketplace zone.

+
+ +

App Packaged Hosted

+ +

Le app per Firefox OS possono essere packaged (salvate sul telefono) o hosted (Salvate su un server remoto, con il solo manifest sul dispositivo). Ci sono delle differenze nel modo in cui la sicurezza è gestita in ogniuna di esse. Inoltre le app packaged e hosted sono eseguite in sandbox, cosa che verrà approfondita più avanti in questo documento.

+ +
+

Note: Per maggiori infomazioni su app Hosted e packaged consultare Opzioni di pubblicazione delle app.

+
+ +

App Packaged

+ +

Un'app packaged consiste in un file ZIP contenete sia le risorse (HTML5, CSS, JavaScript, images, media) che un manifest contenente una dichiarazione esplicita di asset con i relativi hash. Le app certificate e prvilegiate devono essere del tipo packaged perchè il manifest deve essere firmato digitalmente. Quando un utente richiede un app il file ZIP è scaricato sul dispositivo e il manifesto viene letto da una locazione conosciuta all'interno del file ZIP. Durante il processo di installazione gli assets dell'applicazione sono verificati e rimangono salvati locamente nel pacchetto. L' esplicitazione di tutti i permessi, mostrando all'utente come l'app intende maneggiare i dati personali, è richiesta al runtime e deve rimanere tale per default.

+ +

Per fare riferimento alle risorse in un app packaged si usa un URL con all'inizio la dicitura app: nel seguente formato:

+ +

app://identificatore/percorso_interno_al_file_zip/file.html

+ +

dove app:// rappresenta il punto di montaggio del file ZIP, e l'identificatore è un UUID generaato all'installazione dell'app nel telefono. Questo meccanismo assicura che le risorse siano identificate con un app: URL che contiene il file ZIP. Il percorso in app: è relativo, quindi i collegamenti alle risorse nel file ZIP sono permessi.

+ +

Mentre le app packaged sono create principalmente per essere app certifcate o privilegiate, anche le normali app wab possono essere packaged. However, they do not gain any increase in trust or permissions access simply because they are packaged.

+ +

App Hosted

+ +

Le app Hosted sono posizionate su un server web e caricate tramite HTTP. Solo il manifest è salvato sul dispositivo le restanti comonenti si trovano su server remoti. Certe API sono disponibili solo alle app certificate o privilegiate (ossia privilegiate). Perciò, un'app hosted non potrà avere accesso alle operazioni delle API Web che richiedono lo status di app privilegiate o certificate.

+ +

Dal punto di vista della sicurezza le app hosted sono trattaate come comuni siti web. Un'app hosted è caricata invocando un URL hard-coded, e completamente qualificato che punta alla pagina d'avvio nella cartella radice dell'app su quel server web. Una volta che un'app hosted è caricata, il telefono la collega alle pagine usando gli stessi URL che sono usati nonrmalmente navigando nel sito web.

+ +

App Manifest

+ +

Un manifest di una Open Web App contiene informazioni che un browser Web necessita per interagire con un'app, è un file JSON con (almeno) un nome e una descrizione per l'applicazione. Per maggiori dettagli, fare riferimento a FAQ sui manifest delle app.

+ +

Manifest d'esempio

+ +

il codice seguente è un esempio di manifest con alcune semplici impostazioni:

+ +
{
+  "name": "Il titolo dell'applicazione va qui",
+  "description": "La descrizione dell'applicazione va qui",
+  "launch_path": "/",
+  "icons": {
+    "128": "/img/icon-128.png"
+  },
+  "developer": {
+    "name": "il tuo nome o quello dell'organizzazione",
+    "url": "http://la-tua-homepage-va-qui.org"
+  },
+  "default_locale": "it"
+}
+ +

Le impostazioni di sicurezza del Manifest

+ +

Il manifest può contenere varie informazioni, incluse le seguenti impostazioni sulla sicurezza:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Campo

+ 		+

Descrizione

+
+

permissions

+ 		+

Permissions required by the app. An app must list every Web API it intends to use that requires user permission. Most permissions make sense for privileged apps or certified apps, but not for hosted apps. Properties per API:

+ +
    +
  • description: A string specifying the intent behind requesting use of this API. Required.
    • +
  • access: A string specifying the type of access required for the permission. Implicit permissions are granted at install time. Required for only a few APIs. Accepted values: read, readwrite, readcreate, and createonly.
    • +
+
+

installs_allowed_from

+ 		+

The Origin of the app; can be singular or an array of origins (scheme+unique hostname) that are allowed to trigger installation of this app. Allows app providers to restrict installs from only an authorized Marketplace (such as https://marketplace.firefox.com/).

+
+

csp

+ 		+

Content Security Policy (CSP). Applied to all pages loaded in the app. Used to harden the app against bugs that would allow an attacker to inject code into the app. If unspecified, privileged and certified apps have system-defined defaults. Syntax:
+ https://developer.mozilla.org/en-US/docs/Apps/Manifest#csp

+ +

Note that this directive can only increase the CSP applied. You cannot use it, for example, to reduce the CSP applied to a privileged App.

+
+

type

+ 		+

Type of application (web, privileged, or certified).

+
+ +

Firefox OS requires that the manifest be served with a specific mime-type (application/x-web-app-manifest+json) and from the same fully-qualified host name (origin) from which the app is served. This restriction is relaxed when the manifest app (and thus the app manifest) is same-origin with the page that requested the app to be installed. This mechanism is used to ensure that it's not possible to trick a website into hosting an application manifest.

+ +

Sandboxed Execution

+ +

This section describes application and execution sandboxes.

+ +

Application Sandbox

+ +

The Firefox OS security framework uses sandboxing as a defense-in-depth strategy to mitigate risks and protect the mobile phone, platform, and data. Sandboxing is a way of putting boundaries and restrictions around an app during run-time execution. Each app runs in its own worker space and it has access only to the Web APIs and the data it is permitted to access, as well as the resources associated with that worker space (IndexedDB databases, cookies, offline storage, and so on).

+ +

The following figure provides an overview of this security model.

+ +

+ +

By isolating each app, its impact is contained within its own worker space and it cannot interfere with anything (such as other apps or their data) outside of that worker space.

+ +

Execution Sandbox

+ +

B2G (Gecko) runs in a highly-privileged system process that has access to hardware features in the mobile phone. At runtime, each app runs inside an execution environment that is a child process of the B2G system process. Each child process has a restricted set of OS privileges — for example, a child process cannot directly read or write arbitrary files on the file system. Privileged access is provided through Web APIs, which are mediated by the parent B2G process. The parent ensures that, when a child process requests a privileged API, it has the necessary permission to perform this action.

+ +

Apps communicate only with the B2G core process, not with other processes or apps. Apps do not run independently of B2G, nor can apps open each other. The only “communication” between apps is indirect (for example, when one app sets a system alarm and another app triggers a system notification as a result of it), and is mediated through the B2G process.

+ +

Hardware Access Only via the Web API

+ +

Web apps have only one entry point to access mobile phone functionality: the Firefox OS Web APIs, which are implemented in Gecko. Gecko provides the sole gateway to the mobile device and underlying services. The only way to access device hardware functionality is to make a Web API call. There is no “native” API and there are no other routes (no “back doors”) to bypass this mechanism and interact directly with the hardware or penetrate into low-level software layer.

+ +

Security Infrastructure

+ +

The following figure shows the components of the Firefox OS security framework:

+ +

+ + + +

Permissions Management and Enforcement

+ +

Firefox OS security is designed to verify and enforce the permissions granted to web apps.

+ +

The system grants a particular permission to an app only if the content requests it, and only if it has the appropriate permissions requested in the app’s manifest. Some permissions require further authorization from the user, who is prompted to grant permission (as in the case of an app requesting access to the user’s current location). This app-centric framework provides more granular control over permissions than traditional role-centric approaches (in which individual roles are each assigned a set of permissions).

+ +

A given Web API has a set of actions and listeners. Each Web API has a required level of permission. Every time a Web API is called, Gecko checks permission requirements (role lookup) based on:

+ + + +

If the request does not meet the permission criteria, then Gecko rejects the request. For example, untrusted apps cannot execute any Web APIs that are reserved for trusted apps.

+ +

Prompting Users for Permission

+ +

In addition to permissions that are implicitly associated with the web apps, certain operations require explicit permission from the user before they can be executed (for example, "can the web app access your camera?"). For these operations, web apps are required to specify, in their manifest, their justification for requiring this permission. This data usage intention informs users about what the web app intends to do with this data if permission is granted, as well as any risk involved. This allows users to make informed decisions and maintain control over their data.

+ +

Secure App Update Process

+ +

+ +

For app upgrades and patches to a privileged app, app providers submit the updated package to an authorized Marketplace, where it is reviewed and, if approved, signed and made available to users. On Firefox OS devices, an App Update Utility periodically checks for app updates. If an update is available, then the user is asked whether they want to install it. Before a update is installed on the mobile device, the package is verified for:

+ + + +

Rigorous checks are in place to ensure that the update is applied properly to the mobile phone. The complete update package must be downloaded in a specific and secure location before the update process begins. Installation does not overwrite any user data.

+ +
+

Note: For more information on app updates, read Updating apps.

+
+ +

Device Security (Hardware)

+ +

Security mechanisms for the mobile device hardware are typically handled by the OEM. For example, an OEM might offer SIM (Subscriber Identity Module) card locks, along with PUK (PIN Unlock Key) codes to unlock SIM cards that have become locked following incorrect PIN entries. Contact your OEM for details. Firefox OS does allow users to configure passcodes and timeout screens, which are described in the next section.

+ +

Data Security

+ +

Users can store personal data on their phone that they want to keep private, including contacts, financial information (bank & credit card details), passwords, calendars, and so on. Firefox OS is designed to protect against malicious apps that could steal, exploit, or destroy sensitive data.

+ +

Passcode and Timeout Screens

+ +

Firefox OS allows users to set a passcode to their mobile phone so only those who supply the passcode can use the phone. Firefox OS also provides a timeout screen that is displayed after a configurable period of phone inactivity, requiring passcode authentication before resuming use of the phone.

+ +

Sandboxed Data

+ +

As described earlier, apps are sandboxed at runtime. This prevents apps from accessing data that belongs to other apps unless that data is explicitly shared, and the app has sufficient permissions to access it.

+ +

Serialized Data

+ +

Web apps do not have direct read and write access to the file system. Instead, all access to storage occurs only through Web APIs. Web APIs read from, and write to, storage via an intermediary SQLite database. There is no direct I/O access. Each app has its own data store, which is serialized to disk by the database.

+ +

Data Destruction

+ +

When a user uninstalls an app, all of the data (cookies, localStorage, IndexedDB, and so on) associated with that application is deleted.

+ +

Privacy

+ +

Mozilla is committed to protecting user privacy and user data according to its privacy principles (https://www.mozilla.org/privacy/), which stem from the Mozilla Manifesto (https://www.mozilla.org/about/manifesto.html). The Mozilla Firefox Privacy Policy describes how Mozilla collects and uses information about users of the Mozilla Firefox web browser, including what Firefox sends to websites, what Mozilla does to secure data, Mozilla data practices, and so on. For more information, see:

+ + + +

Firefox OS implements these principles by putting the control of the user data in the hands of the user, who gets to decide where this personal information goes. Firefox OS provides the following features:

+ + diff --git a/files/it/archive/b2g_os/simulator/index.html b/files/it/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..fd5cf7e8ce --- /dev/null +++ b/files/it/archive/b2g_os/simulator/index.html @@ -0,0 +1,244 @@ +--- +title: Firefox OS Simulator +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +
+ Il simulatore di Firefox OS non supporta attualmente Mac OS X 10.9 (Mavericks). Per i dettagli vedere il bug 930511 . C'è una soluzione che consiste nel far partire Firefox dal file immagine (DMG) senza installarlo realmente.
+
+

Firefox OS Simulator é ancora in stato di sviluppo, e non è ancora affidabile e completo come noi vorremmo che fosse.

+

Se trovate qualsiasi bug, vi preghimo di segnalarlo su GitHub, per qualsiasi domanda scrivete alla mailing list dev-developer-tools oppure a #devtools su irc.mozilla.org.

+

Leggi Come attivare il verbose logging e ricevere l'ultima preview build nella sezione Getting help.

+
+

L'add-on Firefox OS Simulator è uno strumento che vi permette di testare e debaggare la vostra app Firefox OS sul desktop. Il ciclo codice-test é molto più veloce rispetto al simulatore piuttosto che con un dispositivo reale, e ovviamente, non avrete bisogno di un dispositivo reale per utilizzarlo.

+

Essentially, the Simulator add-on consists of:

+ +

The screenshot below shows a debugging session using the Simulator.

+

The Dashboard is on the top-right, running inside a Firefox tab. We've added one app, a packaged app called "Where am I?". At the top-left the app is running in the Simulator. We've also connected the debugging tools, which are in the panel at the bottom. You can see that the Console pane displays messages about the app.

+

+

This guide covers the following topics:

+ +
+ For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the Simulator Walkthrough page.
+

Installing the Simulator add-on

+

The Simulator is packaged and distributed as a Firefox add-on. To install it:

+
    +
  1. Using Firefox, go to the Simulator's page on addons.mozilla.org.
    2. +
  2. Click "Add to Firefox".
    3. +
  3. Once the add-on has downloaded you will be prompted to install it: click "Install Now".
    4. +
+

Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and a dialog titled "Warning: Unresponsive script" may appear. It it does, click "Continue" to wait for installation to finish. This should not occur from Firefox 27 onwards.
+
+ Once you have installed the Simulator add-on, Firefox will periodically check for newer versions and keep it up to date for you.

+

The Dashboard opens automatically when you install the Simulator, and you can reopen it at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer", then "Firefox OS Simulator":

+


+ The Dashboard is the tool you use to add your app to the Simulator and run it. Here's what it looks like:

+

Adding, removing and refreshing apps

+

Adding apps

+

To add a packaged app to the Simulator, open the Dashboard, click "Add Directory" and select the manifest file for your app.
+
+ To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL: so you can add any website as an app just by entering its URL.
+
+ When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on Manifest Validation for details on what tests are run.

+

Unless manifest validation reveals that your app has errors, the Dashboard will then automatically run your app in the Simulator.

+

Managing apps

+

Once you have added an app, it will appear in the Manager's list of installed apps:
+
+ Each entry gives us the following information about the app:

+ +

It also gives us four commands:

+ +
+

Refresh App from the Simulator window: you can update and reload an app directly from the Simulator window using the menubar action or its associated shortcut while the app is running.

+
+

Manifest validation

+

When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:

+ +

It summarises the problems encountered in the entry for the app: clicking on the summary provides more details.

+

Manifest errors

+

The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:

+ +

Here's the result of trying to add a manifest file with a missing "name":
+

+

Manifest warnings

+

The Dashboard will report the following manifest issues as warnings:

+ +

Simulator-specific warnings

+

Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:

+ +

Running the Simulator

+

There are two different ways the Simulator may be started:

+ +

Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.
+
+ The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a toolbar at the bottom and a menubar at the top that contains some extra features:

+

+

To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:

+

+

Simulator toolbar

+

In the bottom toolbar, from left to right, these are the Home button, the Screen Rotation button, and the Geolocation button.

+ +

+

Simulator menubar

+

In the top menubar, you can access some useful commands to make development more efficient:

+

+ +

The keyboard shortcut for the "App Refresh" command makes it possible to iteratively develop an app much like a web page:

+ +
+

"Refresh App and Clear Data" hidden shortcut: sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, Shift - Ctrl/Cmd - R, that will refresh the running app while clearing the following data:

+
    +
  • +

    localStorage / sessionStorage

    +
    • +
  • +

    cookies

    +
    • +
  • +

    indexedDB

    +
    • +
  • +

    appCache

    +
    • +
+
+

Attaching developer tools

+

You can attach developer tools to the Simulator, to help debug your app. At the moment you can only attach the JavaScript Debugger, the Web Console, the Style Editor, the Profiler and the Network Monitor, but we're working on adding support for more developer tools.

+
+

Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.

+
+

To attach developer tools to the Simulator, click the "Connect" button for an app:

+

+

The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:

+

+

Web Console

+

The app can log to this console using the global console object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (Learn more about the Web Console.)

+

Debugger

+

Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (Learn more about the Debugger.)

+

Style Editor

+

You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (Learn more about the Style Editor.)

+

Profiler

+

Using the Profiler tool connected to the app, you can to find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (Learn more about the Profiler.)

+

Network Monitor

+

Thanks to the new Network Monitor, you can analyze the status, headers, content and timing of all the network requests initiated by the app through a friendly interface. (Learn more about the Network Monitor.)

+

Receipts

+

If you are developing a paid app, you should test your receipt validation code (e.g. the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.

+

Thanks to the "Receipts" menu in each app entry on the Simulator Dashboard, you can install an app with a "Valid", "Invalid", or "Refunded" test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:

+

+

Push to device

+

If you have a Firefox OS device you can connect it to the Simulator, and can then push apps from the Dashboard to the device.

+

Connecting a device

+

To connect the device, follow the instructions in the guide to connecting a Firefox OS device to the desktop. Note that you don't have to install ADB, as the Simulator add-on includes it already.

+

Pushing apps to the device

+

Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note "Device connected" appear on the left of the Dashboard, and a new command appear in the entry for each app labeled "Push":

+

+

Click "Push", and the app will be installed on the Firefox OS device.

+
+

Manual Steps:

+
    +
  • +

    Once you’ve pushed the app to the device, you need to manually close and restart it again, to get updated content

    +
    • +
  • +

    If you update anything in the manifest (e.g. app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect

    +
    • +
+
+

Firefox OS Device Connection Confirmation

+

On every device reboot, the first "Push" request needs to be confirmed on the device:

+

+

Troubleshooting on Linux

+

If you are unable to connect your device after creating udev rules, please see this bug.

+

Limitations of the Simulator

+

Note that the Firefox OS Simulator isn't a perfect simulation.

+

Hardware limitations

+

Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.

+

Audio/video codecs

+

The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:

+ +

This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.

+

Unsupported APIs

+

Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:

+ +

Getting help

+

The Firefox OS Simulator is still at an early stage of development, and isn't yet as reliable and complete as we'd like it to be.

+

If you find any bugs, please file them on GitHub. If you have a question, try asking us on the dev-developer-tools mailing list or on #devtools on irc.mozilla.org.

+

How to enable verbose logging

+

Use about:config to create the preference extensions.r2d2b2g@mozilla.org.sdk.console.logLevel, set it to the integer value 0, and disable/reenable the addon. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).

+

How to get the latest preview build

+

As the section on installing the Simulator explains, you can get the latest release of the Simulator add-on from addons.mozilla.org.

+

Sometimes you might want to try out the very latest features before they're officially released. If so, you can download preview builds from the following URLs:

+ +

Be aware that preview builds are less stable and thoroughly tested than release builds.

diff --git a/files/it/archive/b2g_os/sviluppo_applicazioni/index.html b/files/it/archive/b2g_os/sviluppo_applicazioni/index.html new file mode 100644 index 0000000000..50331abb97 --- /dev/null +++ b/files/it/archive/b2g_os/sviluppo_applicazioni/index.html @@ -0,0 +1,14 @@ +--- +title: Sviluppo applicazioni perFirefox OS +slug: Archive/B2G_OS/Sviluppo_applicazioni +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS +--- +

Per informazioni esaurienti sullo sviluppo di app per Firefox OS vedi il  Firefox Marketplace Developer Hub.

+

Puoi anche controlare le App Development API Reference.

+

Le app per Firefox OS non sono niente più di Open Web apps che vengono installate su un dispositivo ccon installato Firefox OS.

+ +
+ Note: Firefox OS currently identifies using the same UA string as Firefox for Android, except without the Android; clause. For example: Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0a1.
diff --git a/files/it/archive/b2g_os/tvs_connected_devices/index.html b/files/it/archive/b2g_os/tvs_connected_devices/index.html new file mode 100644 index 0000000000..eafe6726be --- /dev/null +++ b/files/it/archive/b2g_os/tvs_connected_devices/index.html @@ -0,0 +1,175 @@ +--- +title: TV e dispositivi connessi +slug: Archive/B2G_OS/TVs_connected_devices +tags: + - B2G + - Firefox OS + - Firefox OS e dispositivi connessi + - Gaia + - Guida + - TV +translation_of: Mozilla/Firefox_OS_for_TV +--- +

Questo articolo è scritto per sviluppatori web interessanti a Firefox OS per TV, allo stato attuale dei lavori e futuro, e allo sviluppo di web app per TV. Descrive come realizzare ed eseguire un simulatore di Firefox OS per TV, quindi come iniziare a scrivere app e installarle su TV.

+ +

Le differenze principali nell'utilizzo di Firefox OS su un TV piuttosto che su un telefono (o su un desktop) sono:

+ + + +

Stato attuale e piani futuri

+ +

Dalla versione 2.2 in avanti Gaia può essere eseguito su una TV. Puoi trovare le app out-of-the-box per smart TV nella cartella gaia/tv_apps; le app con prefisso smart- identificano le app per smart TV. A partire dalla prima metà del 2015, saranno disponibili sul mercato televisori con interfaccia uente (UI) basate sulle app che vedremo di seguito.

+ +
+

Nota: smart-home e smart-deck sono delle buone app da utilizzare come template iniziale per lo sviluppo delle tue app, piuttosto che come fonte di idee o ispirazione.

+
+ +

Sviluppare app per TV

+ +

In questa sezione esplorerai come predisporre un ambiente per eseguire e testare le tue app per TV, e come scrivere una semplice app di test.

+ +

Scaricare gli strumenti

+ +

Ti servono tre componenti principali per costruire l'ambiente di sviluppo:

+ + + +
+

Nota: Non ti serve fare il fork del repository di Gaia ne configurare l'upstream, ma è una buona pratica se vuoi contribuire al progetto riportando indietro le eventuali modifiche.

+
+ +

Configurare il tuo ambiente

+ +

Ora devi creare un profilo di Gaia specifico per TV. Dal tuo repository locale esegui il seguente comando:

+ +
make GAIA_DEVICE_TYPE=tv DEVICE_DEBUG=1
+ +

Verrà creato un profilo per TV all'interno della cartella profile ottimizzato per il debugging. Verrà creata una versione hosted delle app di Gaia che potrà essere servita direttamente dal server HTTPD disponibile in Firefox Desktop come estensione. Quando apporterai una modifica sarà sufficiente effettuare un refresh della app (o della finestra del browser) per verificarne il risultato, invece di ricostruire il profilo, pubblicarlo sul dispositivo, e così via. Questa modalità è molto utile per un rapido sviluppo di CSS/JS/HTML.

+ +

Eseguire nel simulatore

+ +

Ora esegui il Simulatore di Firefox Desktop configurando opportunamente la dimensione dello schermo, abilitando il debug remoto lato server e impostando il path del profilo:

+ +
path/to/b2g-bin -screen 1920x1080 -start-debugger-server 6000 -profile /path/to/gaia/profile
+
+ +
+

Nota: Se la risoluzione dello schermo è superiore a quella del tuo PC, le app di sistema non lavoreranno correttamente. Riduci la dimensione dello schermo per adattarla a quella del tuo sistema.

+
+ +
+

Nota: Trovi b2g-bin nel pacchetto b2g installato assieme al simulatore di Firefox OS.

+
+ +
+

Nota: Il path -profile /path/to/gaia/profile che devi impostare è quello che ti stato restituito quando hai creato il profilo (dopo aver eseguito il comando di make come mostrato precedentemente).

+
+ +

Se tutto procede correttamente dovresti vedere la app di orologio. Temporaneamente è la app di atterraggio.

+ +

+ +

Premendo il tasto di Home nella parte inferiore della finestra viene avviata la app di Home, che rappresenta il punto di ingresso principale per le app per Smart TV. Puoi navigare utilizzando i tasti con le frecce; puoi anche selezionare l'icona Apps per avviare il contenitore delle App (App deck), dove potrai trovare la tua app di test dopo che l'avremo creata (vedi la sezione sottostante {{anch("Esempio Hello World ")}}).

+ +

+ +

Lo schermata principale che contiene le App (App deck) è simile alla seguente:

+ +

+ +

Esempio Hello World

+ +

Ora proverai a svluppare una app di test, così potrai renderti conto di quanto sia facile iniziare. Utilizzerai lo strumento WebIDE di Mozilla. Ti consente di avviare facilmente una web app, di modificare il codice HTML/CSS/JS, di fare attività di test/debug delle app — senza avere a disposizione un dispositivo reale.

+ +

Per aprire WebIDE in Firefox per Desktop, seleziona Tools > Web Developer > WebIDE dal menù principale. Ora clicca Open App nell'angolo in alto a sinistra di WebIDE e scegli New App… dal menu.

+ +

+ +

Seleziona HelloWorld, inserisci il Project Name (nome del progetto) e clicca OK.

+ +

+ +

Dopo aver specificato la cartella in cui salvare il progetto, WebIDE produrrà un template di App con poche righe di codice:

+ +

+ +

Ora puoi programmare la tua app direttamente da WebIDE, piuttosto che utilizzare qualsiasi altro editor.

+ +

Esuguire la tua app sulla TV

+ +

Se hai una televisione Panasonic VIERA con Firefox OS puoi eseguire le tue applicazioni sulla TV via WebIDE e trovi le spiegazioni nell'articolo How to connect WebIDE to TV (VIErA CX/CR series). 

+ +

Poichè non è ancora presente alcun simulatore per TV in WebIDE, dovrai provare l'applicazione di esempio nel simulatore di Firefox OS scaricato precedentemente.

+ +
    +
  1. Se non l'hai ancora avviato, segui le istruzioni nella sezione precedente {{anch("Eseguire nel simulatore")}} per avviare l'ambiente per TV all'interno del simulatore di Firefox OS (ricordati di aggiungere il parametro -start-debugger-server 6000).
    2. +
  2. Da WebIDE, clicca Select Runtime nell'angolo in alto a destra quindi seleziona Remote Runtime dal menu.
    +
    3. +
  3. Assicurati di digitare localhost:6000 nella form e premi OK.
    +
    4. +
  4. Clicca sull'icona Install and Run (l'icona di "avvio") di WebIDE. Dovresti ora vedere la tua app in esecuzione all'interno del Simulatore di Firefox OS.
    +
    5. +
  5. Ora clicca sull'icona di Debug App (l'icona "strumento") di WebIDE per avviare il debug della tua app direttamente nel simulatore utilizzando la Toolbox di DevTools.
    +
    6. +
+ +
+

Nota: Puoi trovare maggiori informazioni sulle modalità di debug delle tue app leggendo Debugging apps.

+
+ +

Interagire con meccanismi di controllo remoto per TV

+ +

Una delle differenze più evidenti fra telefoni e TV è la disponibilità di meccanismi di input. In generale, la TV non ha un touch screen, di conseguenza le app non possono essere controllate da eventi di mouse o di touch. In questo caso il meccanismo di controllo è rappresentato dal telecomando del televisore attraverso la pressione dei tasti.

+ +

Il focus è un altro aspetto importante da evidenziare. E' importante assicurarsi che il focus sia sempre sull'elemento corretto, non potendo selezionare direttamente l'elemento sulla TV tramite pressione sullo schermo.

+ +
+

Nota: I tasti dei telecomandi sono definiti nella specifica W3C DOM Level 3 KeyboardEvent key Values; vedi la sezione Media Controller Keys.

+
+ +

Vedi inoltre

+ +

Sviluppare app per TV è molto simile a come avviene per ogni altro dispositivo. Devi sviluppare codice seguendo gli standard Web, progettare l'interfaccia in modalità responsive e rispettare le caratteristiche specifiche di piattaforma.

+ + + +

Ci sono comunque alcune differenze di concetto e di interazione, Molte di queste sono descritte nella sezione Firefox OS for TV UX Overview di MDN.

+ + + +

Inoltre, leggi i seguenti:

+ + diff --git a/files/it/archive/b2g_os/usare_l_app_manager/index.html b/files/it/archive/b2g_os/usare_l_app_manager/index.html new file mode 100644 index 0000000000..e6171ce168 --- /dev/null +++ b/files/it/archive/b2g_os/usare_l_app_manager/index.html @@ -0,0 +1,247 @@ +--- +title: Usare l'App Manager +slug: Archive/B2G_OS/usare_l_app_Manager +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +
+

L'app manager è uno strumento disponibile nella versione per Desktop di Firefox. Fornisce molti strumenti utili per aiutarti a testare , sviluppare e debuggare, direttamente dal tuo browser, applicazioni web HTML5 su Firefox OS phone e Firefox OS simulator.

+
+ +

{{EmbedYouTube("z1Bxg1UJVf0")}}

+ +

L'App Manager è composto da:

+ + + +

Setup rapido:

+ +

Questa sezione è progettata per portarti "up and running" il più velocemente possibile;; se avessi bisogno di informazioni più dettagliate puoi andare alla sezione {{ anch("Device and system configuration") }}  e ominciare da quel punto. Vedi anche la sezione {{ anch("Troubleshooting") }} se hai problemi e cerchi aiuto.

+ +
    +
  1. Controlla di avere Firefox Desktop 26+ installato
    2. +
  2. Apri l'App Manager (nella barra degli indirizzi, scrivi about:app-manager)
    3. +
  3. Se non possiedi un terminale fisico: +
      +
    1. Installa il Firefox OS Simulator
      2. +
    2. Nella toolbar, in basso dell'App Manager's, fai click su Start Simulator, poi fai click sul nome del simulatore installato, che dovrebbe apparire.
      3. +
    +
    4. +
  4. Se hai un apparato fisico: +
      +
    1. Assicurari che il terminale abbia la versione di Firegox OS maggiore di 1.2+
      2. +
    2. Su Windows assicurati di aver installato i drivers forniti dal costruttore del telefono
      3. +
    3. Nelle impostazioni del tuo apparato, disabilita il Blocco dello Schermo (Settings > Screen Lock) e abilita il Debug Remoto (Settings > Device information > More information > Developer)
      4. +
    4. Installa lo ADB Helper add-on su Firefox Desktop
      5. +
    5. Connetti il tuo apparato al tuo computer con un cavo USB
      6. +
    6. Dovresti vedere il nome del tuo apparato nella barra in basso dell'App Manager. Fai click sopra di esso.
      7. +
    +
    5. +
  5. La barra in basso dovrebbe visualizzare la scritta: "Connected to: xxx"
    6. +
  6. Fai click su Apps panel e aggiungi una app (packaged or hosted)
    7. +
  7. Il pulsante Refresh convalida la tua applicazione e la installa sul Simulatore/Apparato
    8. +
  8. Il pulsante Debug connette gli strumenti di sviluppo all'applicazione in esecuzione
    9. +
  9. Vedi la sezione {{ anch("Troubleshooting") }} se hai problemi e cerchi aiuto.
    10. +
+ +

Configurazione del sistema e dell'Apparato

+ +

La prima cosa che devi fare quando usi l'App Manager è assicurarti che il tuo sistema e il tuo telefono siano configurati conrrettamente. Questa sezione ti guiderà attraverso passo per passo attraverso le configurazioni necessarie.

+ +

Firefox 1.2+ necessario

+ +

Assicurati che sul tuo apparato sia installato Firefox OS 1.2/Boot2Gecko 1.2 o superiore. Per controllare quale versione di Firefox OS sia installato sul terminale, Settings > Device Information > Software.

+ +

Se non hai una versione sufficentemente aggiornata, devi installare una nightly build di Firefox 1.2+, oppure configurarne e compilarne una da solo dal codice sorgente.

+ +

Builds disponibili:

+ + + +

Per compilare da solo la dua distribuzione di Firefox OS 1.2+, segui le istruzioni che trovi a Building and installing Firefox OS, incominciando da Firefox OS build prerequisites.

+ +

Debug remoto

+ +

Devi, poi, abilitare il debug remoto in Firefox OS. Per farlo, vai in Settings > Device information > More information > Developer e spunta la casella il Remote Debugging.

+ +

ADB o ADB helper

+ +

Il processo usa il Android Debug Bridge (ADB) per mantenere la connessione e la comunicazione tra apparato e computer. Ci sono due modalità di funzionamento per ADB:

+ + + +
+

Nota: Non è necessario eseguire questo comando se installi ADB Helper Add-on.

+
+ +

Connettere il tuo apparato all'App Manager

+ +

Finita la configurazione , puoi collegare l'apparato al computer e far partire l'App Manager:

+ +
    +
  1. Connetti l'apparato al computer con il cavo USB.
    2. +
  2. Disabilita lo Screen lock sul tuo apparato andando in Settings > Screen Lock e togliendo lo spunto a Lock Screen . Il motivo per cui è il passaggio precedente è una buona idea poichè lo screen lock determina la disconnissione del terminale; ciò significa che non è più disponibile per il debugging.
    3. +
  3. Apri l'App Manager — Su Firefox Desktop seleziona dal menu Tools > Web Developer > App Manager, o digita about:app-manager nella barra degli indirizzi.
    4. +
  4. Sul fonfo della tab dell'App Manager, vedrai una barra di stato della connessione (vedi screenshot sotto). Dovresti poter connettere il tuo apparato premendo il bottone "Connect to localhost:6000".
    5. +
  5. Se va tutto bene, dovrebbe comparitr una scritta sul terminale: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.
    6. +
+ +

+ +
+

Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the {{anch("Enable port forwarding")}} section, above.

+
+ +

Using a Firefox OS Simulator Add-on

+ +

If you haven't got a real device available to use with App Manager, you can still try it out using a Firefox OS Simulator Add-on. To start off, install the simulator with the following button (multiple versions are available; you are advised to install them all, for maximum flexibility):

+ +

Install Simulator

+ +

Once you've installed the simulator(s), you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. At least three buttons will appear:

+ + + +

Apps panel

+ +

Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps panel. From here, you can import an existing app to push onto your device and debug:

+ + + +

Information about your app should appear on the right hand side of the window, as seen below:

+ +

+ +

Manifest editor

+ +

From Firefox 28 onwards, the Apps Panel includes an editor for the app manifest:

+ +

+ +

Debugging

+ +

Clicking on "Update" will update (install) the app on the device. Clicking on "debug" will connect a toolbox to the app, allowing you to debug its code directly:

+ +

+ +
+

Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.

+
+ +

Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:

+ +

+ +

Errors

+ +

If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.

+ +

+ +

You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.

+ +

Device panel

+ +

The Device tab displays information about the connected device. From the "Installed Apps" window, apps on the device can be started and debugged.

+ +

+ +
+

Note: Certified Apps are not listed by default. See how to debug certified apps.

+
+ +

The "Permissions" window shows the required priviledges for different Web APIs on the current device:

+ +

+ +

Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.

+ +

Debugging Certified Apps

+ +

Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref devtools.debugger.forbid-certified-apps to false in your profile. To do this, follow the steps below:

+ +
    +
  1. +

    On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:

    + + 
    adb shell
    + +

    Your prompt should change to root@android.

    +
    2. +
  2. +

    Next, stop B2G running using the following command:

    + + 
    stop b2g
    +
    3. +
  3. +

    Navigate to the following directory:

    + + 
    cd /data/b2g/mozilla/*.default/
    +
    4. +
  4. +

    Here, update the prefs.js file with the following line:

    + + 
    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    +
    5. +
  5. +

    After you've finished editing and saving the file, start B2G again using the following command:

    + + 
    start b2g
    +
    6. +
  6. +

    Exit the android filesystem using the exit command; this will return you to your normal terminal prompt.

    +
    7. +
  7. +

    Next, reconnect to the App Manager and you should see certified apps appear for debugging.

    +
    8. +
+ +
+

Note: If you want to add this preference to your Gaia build you can run make DEVICE_DEBUG=1 reset-gaia.

+
+ +

Troubleshooting

+ +

If the device is not recognized:

+ + + +

Can't connect your device to the App Manager or start the simulator? Let us know or file a bug.

diff --git a/files/it/archive/b2g_os/ux/building_blocks/action_menu/index.html b/files/it/archive/b2g_os/ux/building_blocks/action_menu/index.html new file mode 100644 index 0000000000..23fe4c62cb --- /dev/null +++ b/files/it/archive/b2g_os/ux/building_blocks/action_menu/index.html @@ -0,0 +1,46 @@ +--- +title: Menu delle azioni +slug: Archive/B2G_OS/UX/Building_blocks/Action_menu +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Action_menu +--- +

Il menu delle azioni presenta una lista di azioni,relative all'app in uso, tra cui l'utente può scegliere. Leggi la Guida allo sviluppo per i dettagli su come aggiungere il menu delle azioni alla tua app.

+

Caratteristiche

+ +

Aspetto

+ + + + + + + +
+

Il menu aperto

+

+

Il menu resta aperto e aspetta che l'utente scelga un elemento premendolo.

+ 		+

Un elemento viene premuto

+

+

L'aspetto del menu mentre l'utente preme l'elemento "Option 03" con il dito.

+
+

Variazioni

+

Le principali variazioni all'aspetto del menu sono date dal titolo, che può esserci o no.

+

+

Interazione

+

Questo diagramma mostra il processo di interazione dell'utente con il menu delle azioni.

+

+

Vedi anche

+ diff --git a/files/it/archive/b2g_os/ux/building_blocks/bottoni/index.html b/files/it/archive/b2g_os/ux/building_blocks/bottoni/index.html new file mode 100644 index 0000000000..446c9f3928 --- /dev/null +++ b/files/it/archive/b2g_os/ux/building_blocks/bottoni/index.html @@ -0,0 +1,231 @@ +--- +title: Bottoni +slug: Archive/B2G_OS/UX/Building_blocks/Bottoni +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Button +--- +

Svolgono un compito quando vengono premuti. Sono un elemento dell'interfaccia molto flessibile e possono avere una gran varietà di aspetti e stili. Vedi la Guida allo sviluppo per le specifiche e le descrizioni di come dovrebbero apparire e funzionare.

+

Caratteristiche

+ +

Ci sono molti tipi di bottoni:

+
+
+ Bottoni azione
+
+ Usati quando le azioni sono poche e non è richiesta una lista. Il bottone principale è sempre indicato con un colore speciale.
+
+ Bottoni lista
+
+ Usato quando deve essere visualizzata una lista di azioni o per visualizzare un selettore.
+
+ Bottoni per l'input
+
+ Usati quando è richiesto un input da associare all'azione.
+
+ Bottoni speciali/personalizzati
+
+ Sono bottoni speciali per azioni specifiche come la registrazione, la chiamata, etc etc.
+
+

Aspetto

+

I bottoni normali dovrebbero apparire così. Non dimenticare che puoi usare i fogli di stile e immagini di background per personalizzare l'aspetto dei bottoni. Vedi la Guida allo sviluppo per capire come fare le personalizzazioni.

+

Bottoni azione

+

Usati quando le azioni sono poche e non è richiesta una lista. Il bottone principale è sempre indicato con un colore speciale.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Primary actionSecondary actionDelete
Normal
Pressed
Disabled
+

Su sfondo scuro i bottoni disabilitati possono avere un aspetto diverso, simile all'immagine sotto.

+ + + + + + + + + + + + + + + +
 Primary actionSecondary action
Disabled
+

Bottoni lista

+

Usato quando deve essere visualizzata una lista di azioni o per visualizzare un selettore.

+

Innescare azioni

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Trigger an action in the current viewTrigger an action in a new viewDisplay a value selector
Normal
Pressed
Disabled
+

Selettori

+

Una volta aperto deve essere premuto uno dei valori proposti per chiuderlo. Un selettore ha questo aspetto:

+ + + + + + + + + + + + + + + +
NormalPressedDisabled
+

Bottoni per l'input

+

Usati quando è richiesto un input da associare all'azione.

+ + + + + + + + + + + + + + + +
NormalPressedDisabled
+

Bottoni speciali

+

I bottoni speciali sono bottoni usati per scopi speciali come usare la macchina fotografica del dispositivo, rispondere e effettuare una chiamata  e accedere al tastierino numerico. Naturalmente puoi usare questi bottoni per altri scopi.

+

Bottone foto/video

+

Questo bottone non ha uno stato disabilitato, se non è possibile fare foto non dovresti semplicemente mostrarlo.

+ + + + + + + + + + + + + + + + + + + + + + + +
 Record videoStop recording videoCapture photo
Normal
Pressed
+

Bottoni telefono

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Pick upHang upHide keypad
Normal
Pressed
Disabled
+

Bottoni personalizzati

+

Esempi di bottoni personalizzati per aggiungere un contatto alla rubrica.

+ + + + + + + + + + + + + + + +
Normal
Pressed
Disabled
+

Vedi anche

+ diff --git a/files/it/archive/b2g_os/ux/building_blocks/conferme/index.html b/files/it/archive/b2g_os/ux/building_blocks/conferme/index.html new file mode 100644 index 0000000000..5e1bac0d82 --- /dev/null +++ b/files/it/archive/b2g_os/ux/building_blocks/conferme/index.html @@ -0,0 +1,87 @@ +--- +title: Conferme +slug: Archive/B2G_OS/UX/Building_blocks/Conferme +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Confirmation +--- +

Una richiesta di conferma chiede all'utente conferma per una scelta, come garantire o annullare i permessi di un'app, o fornisce istruzioni per eseguire un'azione, come richiedere all'utente di riavviare il dispositivo dopo aver cambiato SIM. Vedi la Guida allo sviluppo per informazioni su come implementare queste richieste nella tua app.

+

Caratteristiche

+ +

Aspetto

+

Ecco alcuni esempi di come devono apparire le richieste di conferma.

+ + + + + + + + + + + +
+

Normale

+

+

Un elemento {{HTMLElement("h1")}} è usato per dare il titolo "Confirmation" alla richiesta. Il bottone Delete ha come classe "delete" per mostrarlo come richiesto nelle linee guida della GUI.

+ 		+

Con elementi nel corpo

+

+

In questo esempio  è stato usato un corpo con immagini  e testo e relativi stili. Al bottone "Action" è stata applicata la Classe "recommend"  per indicare che è il bottone da premere per continuare a svolgere l'azione per cui si chiede conferma all'utente.

+
+

Senza titolo

+

+

Esattamente come l'esempio precedente ma senza l'elemento{{HTMLElement("h1")}} a creare il titolo della richiesta.

+ 		+

In modalità modifica

+

Va

+
+

Variazioni sul tema

+

Le varianti possibili sono quelle elencate sopra nella sezione aspetto. Questo schema semplificato ti aiuterà a capire quali sono i componenti di una richiesta di conferma e a vedere che hai il controllo su ciò che apparirà nei tuoi layout e nei contenuti.

+ + + + + + + + + + + +
+

Richiesta di permessi

+

+

In questo esempio le icone ed il titolo sono usate per identificare l'app che richiede i permessi e che permessi vuole.

+

Il testo nel corpo pagina deve fornire dettagli su ciò che l'app vuole fare con i permessi ed i dati dell'utente.

+ 		+

Richesta di conferma per azioni

+

+

Esempio molto semplice di richiesta di conferma; la richiesta pone una domanda all'utente che deve risponedere, non c'è il titolo.

+
+

Richiesta conferma per azione

+

+

Un esempio più completo per la conferma di un'azione con titolo ed icona.

+ 		 
+

Interazione

+

Cancellare messaggi

+

In questo esempio una richiesta viene fatta all'utente per chiedere se è certo di voler cancellare i messaggi selezionati dalla lista delle email. Toccando il bottone "delete" verrà mostrato il messaggio di richiesta di conferma; i messaggi verranno cancellati soltanto se l'utente tocca il bottone "Delete" nella richiesta di conferma.

+

+

Confermare una richiesta di privilegi/permessi

+

In questo esempio l'utente apre per la la prima volta un'app che richiede i permessi per usare le API di  geolocalizzazione. Poichè l'app richiede questi permessi per funzionare li chiede immediatamente. Quando l'utente tocca il bottone "Don't Allow" ( che nega il permesso all'app di usare i servizi di geolocalizzazione) o "Allow" (che invece concede i permessi) la richiesta viene chiusa e la scelta dell'utente ha effetto

+

Nota che questo esempio include una checkbox nella richiesta per salvare la scelta dell'utente in modo che non venga fatta la stessa  richiesta in futuro dalla stessa app.

+

Vedi anche

+ diff --git a/files/it/archive/b2g_os/ux/building_blocks/index.html b/files/it/archive/b2g_os/ux/building_blocks/index.html new file mode 100644 index 0000000000..98d5964764 --- /dev/null +++ b/files/it/archive/b2g_os/ux/building_blocks/index.html @@ -0,0 +1,528 @@ +--- +title: Firefox OS UX building blocks +slug: Archive/B2G_OS/UX/Building_blocks +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x +--- +

Qui troverai le specifiche e le descrizioni degli elementi per l'interfaccia delle app di Firefox OS insieme ad esempi e modelli di come dovrebbero apparire e funzionare.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+


+  Dettagli
+ Esempi e guide

+ 		+

 

+
+

Bottoni

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Conferme

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Filtri

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Titoli

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Aree di input

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Liste

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+ +
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Indicatori di attività e barre di progresso

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Scrolling

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Seek bar

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Qui troverai le specifiche e le descrizioni degli elementi per l'interfaccia delle app di Firefox OS insieme ad esempi e modelli di come dovrebbero apparire e funzionare.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+


+  Dettagli
+ Esempi e guide

+ 		+

 

+
+

Button

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Conferme

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Filtri

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Titoli

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Aree di input

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Liste

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+ +
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Indicatori di attività e barre di progresso

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Scrolling

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Seek bar

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Stati

+
+


+ Dettagli
+ Esempi e guide

+ 		+

 

+
+

Bottoni

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Schede

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Barra degli strumenti

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+ +
+

+ +

Dettagli

+ 		+

 

+
+ +

 

+ +

Stati

+
+


+ Dettagli
+ Esempi e guide

+ 		+

 

+
+

Bottoni

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Schede

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+

Barra degli strumenti

+
+

+ +

Dettagli
+ Esempi e guide

+ 		+

 

+
+ +
+

+ +

Dettagli

+ 		+

 

+
+ +

 

diff --git a/files/it/archive/b2g_os/ux/design_asset_library/index.html b/files/it/archive/b2g_os/ux/design_asset_library/index.html new file mode 100644 index 0000000000..6cc81d2bc0 --- /dev/null +++ b/files/it/archive/b2g_os/ux/design_asset_library/index.html @@ -0,0 +1,31 @@ +--- +title: Design asset library +slug: Archive/B2G_OS/UX/Design_asset_library +translation_of: Archive/B2G_OS/Firefox_OS_apps/Design_asset_library +--- +

Qui troverai le specifiche per il design, lavori artistici e altri materiali che ti saranno utili per ultimare l'aspetto della tua Web app. La maggioranza dei file sono in formato Photoshop.

+

Design asset library

+ +

Controlli comuni

+ +

Colori

+ +

Icone

+ +

Vedi anche

+ diff --git a/files/it/archive/b2g_os/web_applications/index.html b/files/it/archive/b2g_os/web_applications/index.html new file mode 100644 index 0000000000..6debfb629d --- /dev/null +++ b/files/it/archive/b2g_os/web_applications/index.html @@ -0,0 +1,61 @@ +--- +title: Web applications +slug: Archive/B2G_OS/Web_applications +tags: + - Web apps +--- +

This page is intended to be a first, non thorough, attempt to collect web apps.

+ +

Categories

+ + + + + + + + + + + + + + + + + + + + +
Note taking apps
NameLicenseHomepage
LavernaMozilla Public License Version 2.0https://laverna.cc/
   
+ +

 

+ + + + + + + + + + + + + + + + + + + + +
Voip
NameLicenseHomepage
SkypeProprietary softwarehttps://web.skype.com/
DiscordProprietary softwarehttps://discordapp.com/
+ +

 

+ +

Further references:

+ +

Alternatives to - http://alternativeto.net/platform/online/

+ +

Dmoz.org - https://www.dmoz.org/Computers/Internet/On_the_Web/Web_Applications/

diff --git a/files/it/archive/index.html b/files/it/archive/index.html new file mode 100644 index 0000000000..0ea2218ac1 --- /dev/null +++ b/files/it/archive/index.html @@ -0,0 +1,21 @@ +--- +title: Archive of obsolete content +slug: Archive +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive +--- +

Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.

+ +

There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should not be used for building new Web sites or apps for modern browsers. It's here for historical reference only.

+ +
+

Note to writers: We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are extremely obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the MDN Web Docs chat room before moving content here.

+
+ +

{{SubpagesWithSummaries}}

+ + + +

{{ListSubpages("/it/docs/Archive", 2, 0, 1)}}

diff --git a/files/it/archive/mdn/index.html b/files/it/archive/mdn/index.html new file mode 100644 index 0000000000..9e550840e3 --- /dev/null +++ b/files/it/archive/mdn/index.html @@ -0,0 +1,20 @@ +--- +title: MDN Archive +slug: Archive/MDN +tags: + - Archive + - MDN + - NeedsTranslation + - TopicStub +translation_of: Archive/MDN +--- +

{{MDNSidebar}}

+ +
+

Obsolete
+ This documentation is obsolete.

+
+ +

The documentation listed below is archived, obsolete material about MDN itself.

+ +

{{LandingPageListSubpages}}

diff --git a/files/it/archive/mozilla/index.html b/files/it/archive/mozilla/index.html new file mode 100644 index 0000000000..0acec76e6d --- /dev/null +++ b/files/it/archive/mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla +--- +

These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.

+

{{SubpagesWithSummaries}}

diff --git a/files/it/archive/mozilla/persona/.well-known-browserid/index.html b/files/it/archive/mozilla/persona/.well-known-browserid/index.html new file mode 100644 index 0000000000..66614c5b3d --- /dev/null +++ b/files/it/archive/mozilla/persona/.well-known-browserid/index.html @@ -0,0 +1,44 @@ +--- +title: .well-known-browserid +slug: Archive/Mozilla/Persona/.well-known-browserid +translation_of: Archive/Mozilla/Persona/.well-known-browserid +--- +

Domains advertise their ability to act as Persona Identity Providers (IdPs) by publishing a support document at /.well-known/browserid. This JSON-formatted document must be served over HTTPS with the content type application/json.

+

This document may either specify how to provision and authenticate users, or may delegate its authority to another Identity Provider.

+

Note: you should also consult the BrowserID Protocol Specification as the authoritative technical reference.

+

Basic Support

+

A domain which directly acts an an IdP must provide three values in its support document:

+ +

Example /.well-known/browserid file:

+
{
+    "public-key": {
+        "algorithm": "RS",
+        "n": "82818905405105134410187227495885391609221288015566078542117409373192106382993306537273677557482085204736975067567111831005921322991127165013340443563713385983456311886801211241492470711576322130577278575529202840052753612576061450560588102139907846854501252327551303482213505265853706269864950437458242988327",
+        "e": "65537"
+    },
+    "authentication": "/browserid/sign_in.html",
+    "provisioning": "/browserid/provision.html"
+}
+

Delegated Support

+

HTTP redirects and other means of "moving" a /.well-known/browserid file are not permitted. If an IdP would like to delegate to another domain for authentication and provisioning, it may publish a support document which only contains an authority entry.

+

Example /.well-known/browserid:

+
{
+  "authority": "subdomain.example.com"
+}
+
+

Then subdomain.example.com would host its own support document, as per the example above.

+

The authority field is specified as a hostname plus, optionally, a port. It may not contain a path. So "example.com", "subdomain.example.com", and "subdomain.example.com:8080" are all valid, but "subdomain.example.com/login" is not.

+

A domain may delegate to any other domain, so long as the other domain publishes a /.well-known/browserid document.

+

Checklist

+ +

Many of these can be tested automatically with the check_primary_support script from the Persona codebase.

diff --git "a/files/it/archive/mozilla/persona/compatibilit\303\240_con_i_browser/index.html" "b/files/it/archive/mozilla/persona/compatibilit\303\240_con_i_browser/index.html" new file mode 100644 index 0000000000..33af33db7c --- /dev/null +++ "b/files/it/archive/mozilla/persona/compatibilit\303\240_con_i_browser/index.html" @@ -0,0 +1,86 @@ +--- +title: Browser compatibility +slug: Archive/Mozilla/Persona/Compatibilità_con_i_Browser +translation_of: Archive/Mozilla/Persona/Browser_compatibility +--- +

Browser supportati

+

Persona è sviluppato, testato e supportato dai seguenti browser. Grazie alla libreria JavaScript multipiattaforma di Persona, gli utenti non hanno bisogno di componenti aggiuntivi per usare il sistema.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browser Desktop
Internet Explorer8.0*, 9.0†, 10.0** (vedi Modalità Compatibilità più sotto)
FirefoxVersione Stabile Corrente, Beta, Aurora, Nightly, e Extended Support Releases
+ Versione Stabile Precedente
ChromeUltima Versione Stabile
SafariUltima Versione Stabile
OperaUltima Versione Stabile‡
Browser iOS
Safari MobileiOS 5.x — 6.x
Browser Android
Browser Predefinito2.2 — 4.x
FirefoxVersione Stabile Corrente, Beta, Aurora, Nightly
+ Versione Stabile Precedente
ChromeUltima Versione Stabile
+

*: Per Windows XP. †: Per Windows Vista e Windows 7. **Windows 8.  ‡: Tempo permettendo.

+

Browser non supportati

+ +

"Modalità compatibilità" di Internet Explorer

+

Dalla versione 8.0 in poi, Internet Explorer supporta la cosiddetta Modalità Compatibilità, nella quale il browser può emulare una versione del browser precedente alla 8.0 nel renderizzare una pagina. Questa funzionalità può essere controllata in tre modi

+
    +
  1. come impostazione locale del browser
    2. +
  2. basandosi sulla presenza e il valore della dichiarazione DOCTYPE nella pagina
    3. +
  3. come istruzione inviata dal sito stesso, utilizzando l'intestazione "X-UA-Compatible" come intestazione HTTP o tramite l'uso del tag <meta> nella pagina. Questo metodo bypassa gli altri due.
    4. +
+

Poiché le versioni di Internet Explorer precedenti alla 8.0 non sono supportate da Persona, qualsiasi versione di Internet Explorer configurata per emulare versioni pre-8.0 non funzioneranno con Persona. Il problema solitamente si verifica per una di queste ragioni:

+ +

Per ulteriori informazioni, vedere "Comprendere le Modalità Compatibilità in Internet Explorer 8" e "Complicazioni su IE8 e IE9".

+

Altri Browser

+

Anche se non esplicitamente supportato, qualunque browser includa sia {{ domxref("window.postMessage()") }} che {{ domxref("Storage", "localStorage") }} dovrebbe funzionare. Queste API sono disponibli in tutti i principali browser da Marzo 2010.

+

Problemi noti

+ diff --git a/files/it/archive/mozilla/persona/index.html b/files/it/archive/mozilla/persona/index.html new file mode 100644 index 0000000000..ae58667799 --- /dev/null +++ b/files/it/archive/mozilla/persona/index.html @@ -0,0 +1,175 @@ +--- +title: Persona +slug: Archive/Mozilla/Persona +translation_of: Archive/Mozilla/Persona +--- +
+
Sistema di autenticazione singola semplice e attento alla privacy: permetti ai tuoi utenti di autenticarsi sul tuo sito con il proprio indirizzo email e liberati dalla gestione delle password.
+ +
+

Mozilla Persona è un sistema di login per il Web utilizzabile con qualsiasi browser, facile da usare e da integrare. Funziona su tutti i principali browser e puoi iniziare a usarlo subito.

+ +

Perché dovresti usare Persona sul tuo sito?

+ +
    +
  1. Persona elimina completamente le password per i singoli siti, liberando l'utente dalla necessità di creare, gestire e tenere al sicuro le password.
    2. +
  2. Persona è facile da usare. In solo due clic, un utente Persona può autenticarsi su un nuovo sito, come Voost, aggirando gli ostacoli associati alla creazione di un account.
    3. +
  3. Persona è facile da implementare. Gli sviluppatori possono aggiungere Persona sul proprio sito in mezza giornata.
    4. +
  4. Non c'è alcun vincolo. Gli sviluppatori ottengono da tutti i loro utenti un indirizzo verificato, mentre gli utenti possono utilizzare qualsiasi indirizzo email con Persona.
    5. +
+ +

Inoltre, Persona può solo migliorare: è sviluppato su un protocollo aperto e decentralizzato, che è progettato per permettere un'integrazione diretta all'interno dei browser e il supporto nativo da parte dei provider di posta. I siti che implementano Persona oggi, otterranno automaticamente questi miglioramenti, senza bisogno di modificare il proprio codice.

+
+ +
+
+

Usare Persona sul proprio sito

+ + +
+

Per iniziare

+ +
+
Perché Persona?
+
Che cosa ha di speciale persona rispetto ad altri sistemi di identificazione e autenticazione.
+
Preparazione veloce
+
Una guida passo passo che insegna come aggiungere Persona al proprio sito web.
+
+ +

Riferimento delle API

+ +
+
La API navigator.id
+
L'API del browser.
+
Riferimento dell'API di verifica
+
L'API di verifica remota.
+
+
+ +
+

Guide

+ +
+
Considerazioni sulla sicurezza
+
Pratiche e tecniche per assicurarsi che il proprio deploy di Persona sia sicuro.
+
Compatibilità con i browser
+
Scopri esattamente quali browser supportano Persona.
+
Internazionalizzazione
+
Scopri come Persona gestisce lingue diverse.
+
Guida dell'implementatore
+
Suggerimenti dai siti che hanno già aggiunto il supporto a Persona.
+
+
+ +
+

Risorse

+ +
+
Librerie e plugin
+
Trova librerie semplici da aggiungere per il tuo linguaggio di programmazione, framework web, blog o content management system preferito.
+
Ricette per Persona
+
Codice sorgente di esempio per i siti che usano Persona. Include esempi per C# (MVC3), PHP, Node.js e altri.
+
Linee guida per l'interfaccia utente
+
Come presentare l'autenticazione con Persona ai propri utenti.
+
+
+
+ +
+

Diventare un Identity Provider

+ +

Se sei un provider di email o un servizio di provider di identificazione, controlla i link qui sotto per scoprire come diventare un Identity Provider di Persona.

+ +
+
+
+
Panoramica di Identity Provider
+
Una visione di alto livello su Persona Identity Providers.
+
+
+ +
+
+
Implementare un Identity Provider
+
Una guida minuziosa ai dettagli tecnici su come diventare un Identity Provider.
+
+
+ +
+
+
.well-known/browserid
+
Una panoramica sul file .well-known/browserid, che gli Identity Provider utilizzano per indicare il proprio supporto al protocollo.
+
+
+
+ +
+

Il progetto Persona

+ +
+
+
+
Glossario
+
Definizioni sulla terminologia di BrowserID e Persona.
+
FAQ
+
Risposte alle domande più comuni.
+
Visione di insieme del protocollo
+
Una visione di insieme tecnica a medio livello del protocollo BrowserID sottostante.
+
+
+ +
+
+
Crittografia
+
Informazioni riguardo i concetti crittografici che sono alla base di Persona e BrowserID.
+
Specifiche
+
Qui si trovano i dettagli più tecnici.
+
+
+ +
+
+
Il sito di Persona
+
Per far funzionare Persona stiamo ospitando tre servizi su https://login.persona.org: un Identity Provider per quando gli altri non funzionano, un implementazione delle API {{domxref("navigator.id")}}, e un servizio di veifica.
+
Il codice sorgente di Persona
+
Il codice sorgete di persona è su GitHub. Le pull request sono le benvenute!
+
+
+
+ + + +
    +
  1. Usare persona su un sito + +
      +
    1. Perché usare Persona?
      2. +
    2. Per cominciare
      3. +
    3. Consigli per implementare Persona
      4. +
    4. Considerazioni sulla sicurezza
      5. +
    5. Compatibilità con i browser
      6. +
    6. Internazionalizzazione
      7. +
    7. L'API navigator.id
      8. +
    8. L'API di verifica remota
      9. +
    9. Librerie e plugin
      10. +
    10. Linee guida per l'interfaccia utente
      11. +
    +
    2. +
  2. Diventare un Identity Provider +
      +
    1. Visione di insieme di Identity Provider
      2. +
    2. Implementare un Identity Provider
      3. +
    3. Formato .well-known-browserid
      4. +
    +
    3. +
  3. Il progetto Persona +
      +
    1. Glossario
      2. +
    2. FAQ
      3. +
    3. Servizi ospitati di Persona
      4. +
    4. Visione di insieme del protocollo
      5. +
    5. Crittografia
      6. +
    +
    4. +
+
diff --git a/files/it/archive/mozilla/persona/internationalization/index.html b/files/it/archive/mozilla/persona/internationalization/index.html new file mode 100644 index 0000000000..29ebccf30a --- /dev/null +++ b/files/it/archive/mozilla/persona/internationalization/index.html @@ -0,0 +1,49 @@ +--- +title: Internazionalizzazione +slug: Archive/Mozilla/Persona/Internationalization +translation_of: Archive/Mozilla/Persona/Internationalization +--- +

What's localized in Persona

+

In the future, the user interface for signing into sites with Persona will be directly integrated into the browser, and thus localized along with the browser's own localization. For browsers without integrated support, Persona's user interface consists of a series of dialogs served from login.persona.org. These dialogs are translated by a team of community volunteers, and more than 45 locales are currently enabled in production.

+

How Persona chooses localizations

+

The Persona service selects a language using the Accept-Language header sent alongside the browser's requests. The algorithm used to map an Accept-Language header to a language is the same as that used by mozilla.org:

+
    +
  1. For each language tag in the Accept-Language header: +
      +
    • check if we have an exact match for the language identified by the language tag
      • +
    • check if we have an exact match for the language identified by the first part of the language tag
      • +
    +
    2. +
  2. If a match can't be made using rule (1), fall back to en-US. However, en or en-US is almost always the last accept-lang header sent by most browsers.
    3. +
+

For example, the table below lists the language selected for various Accept-Language headers, if the following locales were supported: en-US, es, es-MX:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Accept-Language HeaderSelected language
es-AR,es;q=0.8,en-us;q=0.5es
es-MX,es;q=0.8,en-us;q=0.5es-MX
es-es,en-us;q=0.5en-US
es-esen-US
+

There is currently no way for a website to force the dialogs to appear in another language. This is because the Persona UI is logically (and in future native implementations will actually be) part of the browser UI, so its language should be consistent with the language selected for the browser.

+

How you can help

+

Persona uses Mozilla Verbatim to help volunteers create new translations. If you want to help out, read about getting started with Verbatim and check out the "BrowserID" project on Verbatim.

+

 

diff --git a/files/it/archive/mozilla/persona/libraries_and_plugins/index.html b/files/it/archive/mozilla/persona/libraries_and_plugins/index.html new file mode 100644 index 0000000000..2e11654b68 --- /dev/null +++ b/files/it/archive/mozilla/persona/libraries_and_plugins/index.html @@ -0,0 +1,195 @@ +--- +title: Librerie e plugin +slug: Archive/Mozilla/Persona/Libraries_and_plugins +translation_of: Archive/Mozilla/Persona/Libraries_and_plugins +--- +

Want to use Persona on your website or blog? Implementing Persona from scratch is easy, but the plugins and libraries listed here might get you going faster!
+
+ This page lists three types of libraries:
+
+ 1. Plugins that integrate Persona with existing frameworks and content management systems
+ 2. Utility libraries that are useful when building new plugins or integrating Persona into a site from scratch
+ 3. Everything else related to Persona, including libraries for turning your domain into a Persona Identity Provider
+
+ This is a community-maintained list. If you've created a library or plugin, please add it to this page.

+
+ This page is currently being revised and some plugins may be out of date. Please review plugins before using them.
+

Plugins

+

Clojure

+ +

Cold Fusion

+ +

Haskell

+ +

Java

+ +

JavaScript

+ +

Node.js

+ +

PHP

+ +

Python

+ +

Ruby

+ +

Perl

+ +

Erlang

+ +

Miscellaneous

+ +

Didn't see your language or framework listed? LoginRadius, a hosted authentication widget, offers Persona integration for a wide variety of platforms.

+

Verification Libraries

+

Go

+ +

Java

+ +

Node.js

+ +

Perl

+ +

PHP

+ +

Ruby

+ +

Utility Libraries

+

C

+ +

Go

+ +

Haskell

+ +

.Net

+ +

Node.js

+ +

PHP

+ +

Python

+ +

Ur/Web

+ +

Everything Else

+

Perl

+ +

Python

+ +

Ruby

+ +

PHP

+ +

Racket

+ +

Orchard CMS

+ diff --git a/files/it/archive/mozilla/persona/marchio/index.html b/files/it/archive/mozilla/persona/marchio/index.html new file mode 100644 index 0000000000..e7ac828695 --- /dev/null +++ b/files/it/archive/mozilla/persona/marchio/index.html @@ -0,0 +1,13 @@ +--- +title: Personalizzazione dei bottoni +slug: Archive/Mozilla/Persona/marchio +translation_of: Archive/Mozilla/Persona/User_interface_guidelines +--- +

I bottoni per l'accesso con Persona

+

Immagini

+

I bottoni "Accesso con Persona" sono disponibili in tre colorazioni:

+

Scarica (.psd)

+

Versioni basate su CSS

+

Sawyer Hollenshead ha creato un set eccellente di bottoni basati su CSS. Demo / Scarica (.zip)

+

Ulteriori informazioni

+

Puoi trovare ulteriori informazioni sul visual design di Persona alla pagina style primer di Sean Martell (disponibile solo in Inglese).

diff --git a/files/it/archive/mozilla/persona/quick_setup/index.html b/files/it/archive/mozilla/persona/quick_setup/index.html new file mode 100644 index 0000000000..076e004ca1 --- /dev/null +++ b/files/it/archive/mozilla/persona/quick_setup/index.html @@ -0,0 +1,273 @@ +--- +title: Setup veloce +slug: Archive/Mozilla/Persona/Quick_Setup +translation_of: Archive/Mozilla/Persona/Quick_Setup +--- +

Aggiungere il sistema di login Persona al tuo sito richiede solo cinque passaggi:

+ +
    +
  1. Includere la libreria JavaScript di Persona nelle tue pagine.
    2. +
  2. Aggiungere i bottoni di “login” e “logout”.
    3. +
  3. Watch for login and logout actions.
    4. +
  4. Verificare le credenziali dell'utente.
    5. +
  5. Rivedere le best practices.
    6. +
+ +

Dovresti riuscire a implementarlo e farlo funzionare in un solo pomeriggio, ma innanzitutto: se hai intenzione di usare Persona sul tuo sito, per piacere prendi un momento per sottoscrivere la mailing list Persona notices. Genera un traffico estremamente basso, viene solo usata per annunciare cambiamenti o questioni di sicurezza che potrebbero avere un impatto negativo sul tuo sito.

+ +

Step 1: Includi la libreria di Persona

+ +

Persona é progettato per essere indipendente dal browser e funzionare bene su tutti i maggiori browser per desktop e mobile.

+ +

Ci aspettiamo che in futuro i browser supporteranno nativamente Persona, ma nel frattempo forniamo una libreria JavaScript che implementa completamente l'interfaccia utente e la parte client-side del protocollo. Includendo questa libreria, i tuoi utenti saranno in grado di registrarsi con Persona anche se il loro browser non lo supporta nativamente.

+ +

Questa libreria è caricata nella tua pagina, Persona funziona necessita di ({{ domxref("navigator.id.watch()", "watch()") }}, {{ domxref("navigator.id.request()", "request()") }}, and {{ domxref("navigator.id.logout()", "logout()") }}) sarà disponibile al mondo navigator.id object.

+ +

Includere la libreria JavaScript di Persona, tu puoi mettere questo script tag in fondo al body della pagina:

+ +
<script src="https://login.persona.org/include.js"></script>
+
+ +

Devi includere questo script in ogni pagina dove gli utenti utilizzeranno Persona {{ domxref("navigator.id") }}. Ciò perchè Persona è ancora in svilippo, tu non dovresti auto accogliere il file include.js

+ +

Step 2: Aggiungere il bottone di login e di logout

+ +

Because Persona is designed as a DOM API, you must call functions when a user clicks a login or logout button on your site. To open the Persona dialog and prompt the user to log in, you should invoke {{ domxref("navigator.id.request()") }}. For logout, invoke {{ domxref("navigator.id.logout()") }}. Note, the call to {{ domxref("navigator.id.logout()", "logout()") }} must be made in the click handler of the logout button.

+ +

For example:

+ +
var signinLink = document.getElementById('signin');
+if (signinLink) {
+  signinLink.onclick = function() { navigator.id.request(); };
+}
+
+var signoutLink = document.getElementById('signout');
+if (signoutLink) {
+  signoutLink.onclick = function() { navigator.id.logout(); };
+}
+
+ +

What should those buttons look like? Check out our Branding Resources page for premade images and CSS-based buttons!

+ +

Step 3: Watch for login and logout actions

+ +

For Persona to function, you need to tell it what to do when a user logs in or out. This is done by calling the {{ domxref("navigator.id.watch()") }} function and supplying three parameters:

+ +
    +
  1. +

    The email address of the user currently logged into your site from this computer, or null if no one is logged in. For example, you might examine the browser's cookies to determine who is signed in.

    +
    2. +
  2. +

    A function to invoke when an onlogin action is triggered. This function is passed a single parameter, an “identity assertion,” which must be verified.

    +
    3. +
  3. +

    A function to invoke when an onlogout action is triggered. This function is not passed any parameters.

    +
    4. +
+ +
+

Note: You must always include both onlogin and onlogout when you call {{ domxref("navigator.id.watch()") }}.

+
+ +

For example, if you currently think Bob is logged into your site, you might do this:

+ +
var currentUser = 'bob@example.com';
+
+navigator.id.watch({
+  loggedInUser: currentUser,
+  onlogin: function(assertion) {
+    // A user has logged in! Here you need to:
+    // 1. Send the assertion to your backend for verification and to create a session.
+    // 2. Update your UI.
+    $.ajax({ /* <-- This example uses jQuery, but you can use whatever you'd like */
+      type: 'POST',
+      url: '/auth/login', // This is a URL on your website.
+      data: {assertion: assertion},
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) { alert("Login failure: " + err); }
+    });
+  },
+  onlogout: function() {
+    // A user has logged out! Here you need to:
+    // Tear down the user's session by redirecting the user or making a call to your backend.
+    // Also, make sure loggedInUser will get set to null on the next page load.
+    // (That's a literal JavaScript null. Not false, 0, or undefined. null.)
+    $.ajax({
+      type: 'POST',
+      url: '/auth/logout', // This is a URL on your website.
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) { alert("Logout failure: " + err); }
+    });
+  }
+});
+
+ +

In this example, both onlogin and onlogout are implemented by making an asynchronous POST request to your site’s backend. The backend then logs the user in or out, usually by setting or deleting information in a session cookie. Then, if everything checks out, the page reloads to take into account the new login state.

+ +

You can, of course, use AJAX to implement this without reloading or redirecting, but that’s beyond the scope of this tutorial.

+ +

Here is another example, this time not using jQuery.

+ +
function simpleXhrSentinel(xhr) {
+    return function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200)
+                // reload page to reflect new login state
+                window.location.reload();
+            else
+                alert("XMLHttpRequest error: " + xhr.status); } } }
+
+function verifyAssertion(assertion) {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // verification of user's email address and it must arrange for the binding
+    // of currentUser to said address when the page is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "/xhr/sign-in", true);
+    // see http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
+    var param = "assert="+assertion;
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhr.setRequestHeader("Content-length", param.length);
+    xhr.setRequestHeader("Connection", "close");
+    xhr.send(param); // for verification by your backend
+
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+function signoutUser() {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // sign out (usually the resetting of one or more session variables) and
+    // it must arrange for the binding of currentUser to 'null' when the page
+    // is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "/xhr/sign-out", true);
+    xhr.send(null);
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+// Go!
+navigator.id.watch( {
+    loggedInUser: currentUser,
+         onlogin: verifyAssertion,
+        onlogout: signoutUser } );
+
+ +

You must call navigator.id.watch() on every page with a login or logout button. To support Persona enhancements like automatic login and global logout for your users, you should call this function on every page of your site.

+ +

Persona will compare the email address you've passed into loggedInUser with its own knowledge of whether a user is currently logged in, and who they are. If these don't match, it may automatically invoke onlogin or onlogout on page load.

+ +

 

+ +

Step 4: Verify the user’s credentials

+ +

Instead of passwords, Persona uses “identity assertions,” which are kind of like single-use, single-site passwords combined with the user’s email address. When a user wants to log in, your onlogin callback will be invoked with an assertion from that user. Before you can log them in, you must verify that the assertion is valid.

+ +

It’s extremely important that you verify the assertion on your server, and not in JavaScript running on the user’s browser, since that would be easy to forge. The example above handed off the assertion to the site’s backend by using jQuery’s $.ajax() helper to POST it to /auth/login.

+ +

Once your server has an assertion, how do you verify it? The easiest way is to use a helper service provided by Mozilla. Simply POST the assertion to https://verifier.login.persona.org/verify with two parameters:

+ +
    +
  1. assertion: The identity assertion provided by the user.
    2. +
  2. audience: The hostname and port of your website. You must hardcode this value in your backend; do not derive it from any data supplied by the user.
    3. +
+ +

For example, if you’re example.com, you can use the command line to test an assertion with:

+ +
$ curl -d "assertion=<ASSERTION>&audience=https://example.com:443" "https://verifier.login.persona.org/verify"
+
+ +

If it’s valid, you’ll get a JSON response like this:

+ +
{
+  "status": "okay",
+  "email": "bob@eyedee.me",
+  "audience": "https://example.com:443",
+  "expires": 1308859352261,
+  "issuer": "eyedee.me"
+}
+
+ +

You can learn more about the verification service by reading The Verification Service API. An example /api/login implementation, using Python, the Flask web framework, and the Requests HTTP library might look like this:

+ +
@app.route('/auth/login', methods=['POST'])
+def login():
+    # The request has to have an assertion for us to verify
+    if 'assertion' not in request.form:
+        abort(400)
+
+    # Send the assertion to Mozilla's verifier service.
+    data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'}
+    resp = requests.post('https://verifier.login.persona.org/verify', data=data, verify=True)
+
+    # Did the verifier respond?
+    if resp.ok:
+        # Parse the response
+        verification_data = json.loads(resp.content)
+
+        # Check if the assertion was valid
+        if verification_data['status'] == 'okay':
+            # Log the user in by setting a secure session cookie
+            session.update({'email': verification_data['email']})
+            return resp.content
+
+    # Oops, something failed. Abort.
+    abort(500)
+
+ +

For an example on how to use Persona in a C# ASP.Net MVC3 application, visit this application demo or see the Controller code below:

+ +

 

+ +
public class AuthController : Controller
+{
+    [HttpPost]
+    public ActionResult Login(string assertion)
+    {
+        if (assertion == null)
+        {
+            // The 'assertion' key of the API wasn't POSTED. Redirect,
+            // or whatever you'd like, to try again.
+            return RedirectToAction("Index", "Home");
+        }
+
+        using (var web = new WebClient())
+        {
+            // Build the data we're going to POST.
+            var data = new NameValueCollection();
+            data["assertion"] = assertion;
+            data["audience"] = "https://example.com:443"; // Use your website's URL here.
+
+
+            // POST the data to the Persona provider (in this case Mozilla)
+            var response = web.UploadValues("https://verifier.login.persona.org/verify", "POST", data);
+            var buffer = Encoding.Convert(Encoding.GetEncoding("iso-8859-1"), Encoding.UTF8, response);
+
+
+            // Convert the response to JSON.
+            var tempString = Encoding.UTF8.GetString(buffer, 0, response.Length);
+            var reader = new JsonReader();
+            dynamic output = reader.Read(tempString);
+
+            if (output.status == "okay")
+            {
+                string email = output.email; // Since this is dynamic, convert it to string.
+                FormsAuthentication.SetAuthCookie(email, true);
+                return RedirectToAction("Index", "Home");
+            }
+
+            // Could not log in, do something else.
+            return RedirectToAction("Index", "Home");
+        }
+    }
+}
+ +

The session management is probably very similar to your existing login system. The first big change is in verifying the user’s identity by checking an assertion instead of checking a password. The other big change is ensuring that the user’s email address is available for use as the loggedInEmail parameter to {{ domxref("navigator.id.watch()") }}.

+ +

Logout is simple: you just need to remove the user’s session cookie.

+ +

Step 5: Review best practices

+ +

Once everything works and you’ve successfully logged into and out of your site, you should take a moment to review best practices for using Persona safely and securely.

+ +

If you're making a production-ready site, you may want to write integration tests that simulate logging a user in and out of your site using Persona. To facilitate this action in Selenium, consider using the bidpom library. The sites mockmyid.com and personatestuser.org may also be helpful.

+ +

Lastly, don’t forget to sign up for the Persona notices mailing list so you’re notified of any security issues or backwards incompatible changes to the Persona API. The list is extremely low traffic: it’s only used to announce changes which may adversely impact your site.

+ +

 

diff --git a/files/it/archive/mozilla/persona/remote_verification_api/index.html b/files/it/archive/mozilla/persona/remote_verification_api/index.html new file mode 100644 index 0000000000..05a0e1e7b5 --- /dev/null +++ b/files/it/archive/mozilla/persona/remote_verification_api/index.html @@ -0,0 +1,171 @@ +--- +title: API di verifica remota +slug: Archive/Mozilla/Persona/Remote_Verification_API +translation_of: Archive/Mozilla/Persona/Remote_Verification_API +--- +

Summary

+

When a user tries to log into a website, their browser generates a data structure called an assertion, which is essentially a cryptographically signed email address. The browser sends this assertion to the web site, which must verify that the assertion is valid before logging the user in.

+

Assertions can be verified locally, or with an API hosted at https://verifier.login.persona.org/verify. This page describes how to use the API.

+

Method

+

HTTP POST request to https://verifier.login.persona.org/verify.

+

Parameters

+
+
+ assertion
+
+ The assertion supplied by the user. Available as the first parameter passed to the onlogin function in {{ domxref("navigator.id.watch()") }}.
+
+ audience
+
+ The protocol, domain name, and port of your site. For example, "https://example.com:443".
+
+

Return values

+

The call returns a JSON structure containing a status element, which may be either "okay" or "failure". Depending on the value of status, the structure contains additional elements listed below.

+

"okay"

+

The assertion is valid.

+

In this case the JSON structure contains the following additional elements:

+ + + + + + + + + + + + + + + + + + + +
"email"The address contained in the assertion, for the intended person being logged in.
"audience"The audience value contained in the assertion. Expected to be your own website URL.
"expires"The date the assertion expires, expressed as the primitive value of a Date object: that is, the number of milliseconds since midnight 01 January, 1970 UTC.
"issuer"The hostname of the identity provider that issued the assertion.
+

"failure"

+

The assertion is invalid. In this case the JSON structure contains one additional element:

+ + + + + + + +
"reason"A string explaining why verification failed.
+

Examples

+

node.js

+

This example uses a node.js server using express.js

+
var express = require("express"),
+    app = express.createServer(),
+    https = require("https"),
+    querystring = require("querystring");
+/* ... */
+
+// The audience must match what your browser's address bar shows,
+// including protocol, hostname, and port
+var audience = "http://localhost:8888";
+
+app.post("/authenticate", function(req, res) {
+  var vreq = https.request({
+    host: "verifier.login.persona.org",
+    path: "/verify",
+    method: "POST"
+  }, function(vres) {
+    var body = "";
+    vres.on('data', function(chunk) { body+=chunk; } )
+        .on('end', function() {
+          try {
+            var verifierResp = JSON.parse(body);
+            var valid = verifierResp && verifierResp.status === "okay";
+            var email = valid ? verifierResp.email : null;
+            req.session.email = email;
+            if (valid) {
+              console.log("assertion verified successfully for email:", email);
+              res.json(email);
+            } else {
+              console.log("failed to verify assertion:", verifierResp.reason);
+              res.send(verifierResp.reason, 403);
+            }
+          } catch(e) {
+            console.log("non-JSON response from verifier");
+            // bogus response from verifier!
+            res.send("bogus response from verifier!", 403);
+
+          }
+        });
+  });
+
+  vreq.setHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+  var data = querystring.stringify({
+    assertion: req.body.assertion,
+    audience: audience
+  });
+
+  vreq.setHeader('Content-Length', data.length);
+  vreq.write(data);
+  vreq.end();
+
+  console.log("verifying assertion!");
+});
+
+
+

via Lloyd Hilaiel

+

PHP

+
$url = 'https://verifier.login.persona.org/verify';
+$assert = filter_input(
+    INPUT_POST,
+    'assertion',
+    FILTER_UNSAFE_RAW,
+    FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH
+);
+//Use the $_POST superglobal array for PHP < 5.2 and write your own filter
+$params = 'assertion=' . urlencode($assert) . '&audience=' .
+           urlencode('http://example.com:80');
+$ch = curl_init();
+$options = array(
+    CURLOPT_URL => $url,
+    CURLOPT_RETURNTRANSFER => TRUE,
+    CURLOPT_POST => 2,
+    //CURLOPT_SSL_VERIFYPEER => true,   //This currently blocks connection to 'https://verifier.login.persona.org/verify'
+    CURLOPT_SSL_VERIFYPEER => 0,
+
+    CURLOPT_SSL_VERIFYHOST => 2,
+    CURLOPT_POSTFIELDS => $params
+);
+curl_setopt_array($ch, $options);
+$result = curl_exec($ch);
+curl_close($ch);
+echo $result;
+

Via Christian Heilmann

+

Java

+
@Override
+protected void doPost(final HttpServletRequest req,
+   final HttpServletResponse resp) throws ServletException,
+   IOException {
+
+   final String audience = req.getServerName();
+   final String assertion = req.getParameter("assertion");
+   final Verifier verifier = new Verifier();
+   final BrowserIDResponse personaResponse = verifier.verify(assertion,audience);
+   final Status status = personaResponse.getStatus();
+
+   if (status == Status.OK) {
+     /* Authentication with Persona was successful */
+     String email = personaResponse.getEmail();
+     log.info("{} has sucessfully signed in", email);
+     HttpSession session = req.getSession(true);
+     session.setAttribute("email", email);
+
+   } else {
+     /* Authentication with Persona failed */
+     log.info("Sign in failed...");
+
+   }
+}
+
+

Via Javier

+

 

+

Note: If you send the assertion and audience parameters as a JSON-object, they must not be URL-encoded. If they are sent as regular HTTP POST parameters, as in the example above, they must be URL-encoded.

diff --git a/files/it/archive/mozilla/persona/security_considerations/index.html b/files/it/archive/mozilla/persona/security_considerations/index.html new file mode 100644 index 0000000000..7d13904b45 --- /dev/null +++ b/files/it/archive/mozilla/persona/security_considerations/index.html @@ -0,0 +1,55 @@ +--- +title: Considerazioni sulla sicurezza +slug: Archive/Mozilla/Persona/Security_Considerations +translation_of: Archive/Mozilla/Persona/Security_Considerations +--- +

When you add Persona support to your website, Persona takes on as much of the security burden as it can. However, some aspects of security can only be handled by your website. They're listed below.

+

Essential practices

+

Verify assertions on your server

+

When using Persona, identity assertions are passed into the onlogin function passed to {{ domxref("navigator.id.watch()") }}. You should always pass the assertion to your server for verification, and only your server should decide to grant the user additional permissions based on the verification result:

+
// Inside navigator.id.watch({ ...
+onlogin: function(assertion) {
+  // A user wants to log in! Here you need to:
+  // 1. Send the assertion to your backend for verification and to create a session.
+  // 2. Update your UI.
+},
+
+

If you try to verify the assertion using the JavaScript executing in the user's browser, then a malicious user will be able to impersonate a legitimate user of your site by locally injecting code and subverting your JavaScript. This is possible because you're not fully in control of the user's browser, where the code executes.

+

Again, you should always pass the assertion to your server for verification. Even if you're using the remote verification API.

+

Explicitly specify the audience parameter

+

To verify an assertion, you may issue a POST request to https://verifier.login.persona.org/verify. The request includes a parameter called audience:

+
assertion=<ASSERTION>&audience=https://mysite.com:443"
+

The audience parameter is required. You should always specify the audience explicitly in your code, or in your code's configuration. Specifically:

+ +

If you trust the user's browser to tell you the audience, then it becomes possible for a malicious web site to reuse assertions for its web site to log into your web site.

+

Verify SSL certificates

+

To verify an assertion, you may issue a POST request to https://verifier.login.persona.org/verify. You must ensure that your HTTPS request verifies the certificate sent from the server against a trusted root certificate. If you don't, then an attacker could pose as verifier.login.persona.org and issue false verifications.

+

Check that the library you are using to make the request verifies certificates correctly, and that you are initializing it with the appropriate root certificate(s).

+

For example, Python 2.7's standard urllib2 module does not validate server certificates. Instead, we recommend using the "requests" or "urllib3" modules in Python 2.x, or the standard http.client.HTTPSConnection class in Python 3.x. For Perl, ensure that you are using at least version 6.0 of libwww-perl. Depending on the language, library, and operating system that you're using, you may need to supply either a list of trusted CA roots or the single CA used by verifier.login.persona.org.

+

Implement CSRF protection

+

In a CSRF (Cross-Site Request Forgery) login attack, an attacker uses a cross-site request forgery to log the user into a web site using the attacker's credentials.

+

For example: a user visits a malicious web site containing a form element. The form's action attribute is set to an HTTP POST request to http://www.google.com/login, supplying the attacker's username and password. When the user submits the form, the request is sent to Google, the login succeeds and the Google server sets a cookie in the user's browser. Now the user's unknowingly logged into the attacker's Google account.

+

The attack can be used to gather sensitive information about the user. For example, Google's Web History feature logs all the user's Google search terms. If a user is logged into the attacker's Google account and the attacker has Web History enabled, then the user is giving the attacker all this information.

+

CSRF login attacks, and potential defenses against them, are documented more fully in Robust Defenses for Cross-Site Request Forgery (PDF). They're not specific to Persona: most login mechanisms are potentially vulnerable to them.

+

There are a variety of techniques which can be used to protect a site from CSRF login attacks, which are documented more fully in the study above.

+

One approach is to create a secret identifier in the server, shared with the browser, and require the browser to supply it when making login requests. For example:

+
    +
  1. As soon as the user lands on your site, before they try to log in, create a session for them on the server. Store the session ID in a browser cookie.
    2. +
  2. On the server, generate a random string of at least 10 alphanumeric characters. A randomly generated UUID is a good option. This is the CSRF token. Store it in the session.
    3. +
  3. Deliver the CSRF token to the browser by either embedding it in JavaScript or HTML as a hidden form variable.
    4. +
  4. Ensure that the AJAX submission or form POST includes the CSRF token.
    5. +
  5. On the server side, before accepting an assertion, check that the submitted CSRF token matches the session-stored CSRF token.
    6. +
+

Enhancements

+

Content Security Policy (CSP)

+

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware.

+

If you use CSP on your site, you may need to tweak your policy to enable Persona. Depending on your policy, you may need to:

+ +

An example Apache configuration might include:

+
Header set X-Content-Security-Policy: "default-src 'self'; frame-src 'self' https://login.persona.org ; script-src 'self' https://login.persona.org"
diff --git a/files/it/archive/mozilla/persona/the_implementor_s_guide/index.html b/files/it/archive/mozilla/persona/the_implementor_s_guide/index.html new file mode 100644 index 0000000000..2bd12dcc0b --- /dev/null +++ b/files/it/archive/mozilla/persona/the_implementor_s_guide/index.html @@ -0,0 +1,57 @@ +--- +title: The implementor's guide +slug: Archive/Mozilla/Persona/The_implementor_s_guide +tags: + - NeedsTranslation + - Persona + - TopicStub +translation_of: Archive/Mozilla/Persona/The_implementor_s_guide +--- +

The Quick setup guide should be enough to get you started, but when building a full production site you'll probably need features that aren't covered in that guide. In this page we've collected features that are commonly needed by sign-in systems, and explained the best-practice way to implement them with Persona.

+
+
+
+ Call logout() after a failed login
+
+ Always call logout() if you reject an assertion, to avoid a mismatch between your idea of the current user and Persona's idea, which can lead to an endless loop of failed logins.
+
+
+
+ Adding extra email addresses with Persona
+
+ How to let your users add secondary email addresses using Persona.
+
+
+
+ Enabling users to change their email address
+
+ How to let your users change their email address using Persona.
+
+
+
+ Problems integrating with CSRF protection
+
+ A problem caused by the interaction between a common mechanism for CSRF (Cross Site Request Forgery) protection and Persona's Observer API.
+
+
+
+ Supporting users who don't have JavaScript
+
+ Persona requires JavaScript. This page has some tips for supporting users who have JavaScript disabled.
+
+
+
+
+
+ Call request() or get() only from a key handler or in response to a keypress
+
+ Because Persona uses popup windows, you must call request() or get() only in response to a click or a key press, not some other event.
+
+
+
+ Testing your system
+
+ Some pointers for simulating users logging in and out of your website.
+
+
+

 

diff --git a/files/it/archive/mozilla/persona/the_implementor_s_guide/testing/index.html b/files/it/archive/mozilla/persona/the_implementor_s_guide/testing/index.html new file mode 100644 index 0000000000..4ace111864 --- /dev/null +++ b/files/it/archive/mozilla/persona/the_implementor_s_guide/testing/index.html @@ -0,0 +1,8 @@ +--- +title: Testing +slug: Archive/Mozilla/Persona/The_implementor_s_guide/Testing +translation_of: Archive/Mozilla/Persona/The_implementor_s_guide/Testing +--- +

If you're making a production system you will need to write integration tests that simulate logging a user in and out of your site using Persona.

+

If you're using Selenium for testing, consider using the bidpom library. The sites mockmyid.com and personatestuser.org may also be helpful.

+

You may also want to consider stubbyid.

diff --git a/files/it/archive/mozilla/persona/the_navigator.id_api/index.html b/files/it/archive/mozilla/persona/the_navigator.id_api/index.html new file mode 100644 index 0000000000..7ab75d0f93 --- /dev/null +++ b/files/it/archive/mozilla/persona/the_navigator.id_api/index.html @@ -0,0 +1,148 @@ +--- +title: La API navigator.id +slug: Archive/Mozilla/Persona/The_navigator.id_API +translation_of: Archive/Mozilla/Persona/The_navigator.id_API +--- +
For full details about the navigator.id API, refer to its reference pages.
+ +

With Persona, a website asks the user to provide an "assertion", which is a digitally signed email address. By verifying the signature, the site can be assured that the user really does control the address in question. The site can then use this email address as an identifier for that user.

+ +

To ask for an assertion, the website uses a JavaScript API defined by the id object, which is a member of the global navigator object.

+ +

In future we expect the id object to be built into the browser, but at the moment it isn't, so sites using Persona need to include the polyfill library hosted at https://login.persona.org/include.js in their pages. After that, they can work as if id is just a built-in member of navigator.

+ +

There are two current versions of the API: the "Callback API", and the newer "Observer API".

+ +

The Callback API

+ +

The Callback API consists of a single function, get(). It takes two arguments:

+ + + +

You call get(), and in the callback you send the assertion to the server to verify the assertion. If verification succeeds, you can log the user in:

+ +
var signin = document.getElementById('sign-in');
+signin.addEventListener("click", getAssertion, false);
+
+// get an assertion
+function getAssertion() {
+  navigator.id.get(verifyAssertion, {
+                     backgroundColor: "#606B72",
+                     siteName: "My Example Site"
+                   });
+}
+
+// send the assertion to the server for verification
+function verifyAssertion(assertion) {
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "/verify", true);
+  var param = "assertion="+assertion;
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.setRequestHeader("Content-length", param.length);
+  xhr.setRequestHeader("Connection", "close");
+  xhr.send(param);
+  xhr.onload = handleVerificationResponse(xhr);
+}
+ +

The Observer API

+ +

The Observer API consists of three functions: request(), watch(), and logout().

+ +

You call request() to ask for a signed assertion, as you do using get() in the old API. But request() doesn't take a callback parameter: instead, you call another function watch(), with which you register callbacks for onlogin and onlogout events. Persona calls these callbacks when a user logs in or out respectively. Like the callback to get(), the onlogin callback gets a signed assertion for you to verify.

+ +

You call logout() when a user logs out of your site, so Persona can update its state.

+ +

The main difference between this API and the Callback API is that the Callback API doesn't maintain any state: it doesn't have any idea which user is currently logged into Persona in general or any site in particular. Each website is responsible for its own session management.

+ +

By contrast the Observer API implements session management: the browser keeps track of which user it thinks is logged into a particular site and can trigger the onlogin and onlogout callbacks when its idea of the state changes. Because of this, you need to ensure that your website's state and Persona's state are kept in synch, and this tends to make the Observer API more complex to use.

+ +

Here's an example showing the Observer API:

+ +
var signin = document.getElementById('sign-in');
+var signout = document.getElementById('sign-out');
+
+signin.addEventListener("click", function() {
+  navigator.id.request();
+}, false);
+
+signout.addEventListener("click", function() {
+  navigator.id.logout();
+}, false);
+
+function handleUserResponse(xhr) {
+  return function() {
+    if (xhr.status == 200) {
+        if (xhr.responseText == "no user") {
+            logoutUser();
+        }
+        else {
+            loginUser(xhr.responseText);
+        }
+      navigator.id.watch({
+        loggedInUser: currentUser,
+        onlogin: function(assertion) {
+          verifyAssertion(assertion);
+        },
+        onlogout: function() {
+          logoutUser();
+        }
+      });
+    }
+    else {
+        navigator.id.logout();
+        alert("XMLHttpRequest error: " + xhr.status);
+    }
+  }
+}
+
+function checkCurrentUser() {
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", "/currentuser", true);
+  xhr.send();
+  xhr.onload = handleUserResponse(xhr);
+}
+
+checkCurrentUser();
+
+function loginUser(loggedInUser) {
+  // update your UI to show that the user is logged in
+}
+
+function logoutUser() {
+  // update your UI to show that the user is logged out
+}
+
+function handleVerificationResponse(xhr) {
+  // if successfully verified, log the user in
+}
+
+function verifyAssertion(assertion) {
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "/verify", true);
+  var param = "assertion="+assertion;
+  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+  xhr.setRequestHeader("Content-length", param.length);
+  xhr.setRequestHeader("Connection", "close");
+  xhr.send(param);
+  xhr.onload = handleVerificationResponse(xhr);
+}
+
+ +

This code adds listeners which call request() and logout() when the user clicks "Sign in" and "Sign out" respectively. It then checks whether the server thinks someone is logged in already, and updates its UI if it thinks someone is. The code then calls watch() to start listening for login and logout events. When Persona triggers onlogout the code updates its state to log the user out, and when Persona triggers onlogin the code sends the assertion to the server for verification.

+ +

Although the Observer API is more complex to use, it provides two extra features: seamless first-time sign-in, and global logout.

+ +

Seamless first-time sign-in

+ +

The first time a user signs in using Persona, they may need to create a Persona account. This will happen if they haven't used Persona before and if their email provider does not support Persona. In this case they will be invited to create an account using the fallback provider operated by Mozilla, which will ask them to prove ownership of their email address. After creating an account, if the original website uses the Callback API, the user will not be automatically redirected to the website and signed in: they will have to navigate back to it.

+ +

If the website uses the Observer API, then once the user finishes creating their account with the fallback provider, they will be immediately redirected to the site, the watch() API will call the onlogin listener, and the user will be signed in.

+ +

Global logout

+ +

With the Observer API, the website listens to the onlogout event. If the user signs out of Persona by visiting https://login.persona.org/ and signing out there, then the Observer API triggers this event for all websites that are listening. In response, the site should log the user out.

+ +

This means that if the user doesn't always trust the other people that may access their computer, they can sign out in one place, and this will be propagated to all sites that use the Observer API. 

diff --git a/files/it/archive/mozilla/persona/why_persona/index.html b/files/it/archive/mozilla/persona/why_persona/index.html new file mode 100644 index 0000000000..b2f606d85b --- /dev/null +++ b/files/it/archive/mozilla/persona/why_persona/index.html @@ -0,0 +1,59 @@ +--- +title: Perché Persona per Mozilla? +slug: Archive/Mozilla/Persona/Why_Persona +translation_of: Archive/Mozilla/Persona/Why_Persona +--- +
+ Persona is an openly distributed, cross-browser identity system providing a solution to the traditional password model. It addresses the usability deficiencies that plague other privacy-related systems such as OpenID, without resorting to a centralized infrastructure such as Facebook Connect.
+
+  
+
+ The current approach for establishing and managing user names and passwords is tedious, inefficient, and unsecure. Users must create and remember complex passwords for each site and service. Sites then must securely encrypt and store passwords to prevent the leaking of sensitive information. The prevention and negation of security leaks is the primary reason for the use of Persona, but the flexibility of its systems outclasses most standard identity security systems.
+
+  
+
+
+ Note: For more detailed information about Persona and its functions see What is Persona and how does it work?
+
+

Persona eliminates the need for per-site passwords

+

Persona utilizes a safe, two-click system built on top of public-key cryptography for logging in to websites. The user's browser generates a cryptographic affirmation of identity that expires after a few minutes and is only valid on one site. By avoiding passwords, users do not need to worry about remembering several distinct passwords and need no longer be concerned with unsecure access to their password. This quick and easy sign-in process eliminates the current inefficiencies of traditional account registration and allows users to quickly establish accounts on websites.

+

Persona uses email addresses as identities

+
+
+
+
+ Persona's system relies on email addresses as their key component because of email's inherent versatile and private nature. The pre-existing infrastructure works very well from not only a design perspective but an ideal perspective of openly maintained and safe transfer of identity across the Internet.
+
+
+
+

 

+

Benefits for the user

+ +
+

Advantages for developers

+
+ +
+

How Persona is different from other providers of single sign-on

+
+

Persona protects privacy, provides the user with control, and embellishes choice in a way that other security providers can't. Many social networks like Facebook and Google+ require users to use their real names, accept their policies, and limit users to only one account. Persona allows users to keep their work, school, and social identities separate by using email addresses as a unique identifier rather than real names. Because of this anonymity you are guaranteed an extra layer of identity and network protection that most social networks do not have.

+

Persona also takes a new approach to protecting user privacy by placing the user's browser in the center of the authentication process. The browser obtains credentials provided by the user's email, then presents these credentials to a website. The email provider cannot track the user, but sites can still have confidence in the identity of the user by cryptographically verifying the credentials. Most other systems, even distributed systems like OpenID, require sites to connect to central networks before allowing a user to log in.

+

The efficiency of Persona allows an advanced relationship between developers and users. Mozilla is leading the way in open and free web development, and Persona supports Mozilla's design philosophy through its easy-to-use interface and user protection features.

diff --git a/files/it/archive/mozilla/xbl/index.html b/files/it/archive/mozilla/xbl/index.html new file mode 100644 index 0000000000..d47f050234 --- /dev/null +++ b/files/it/archive/mozilla/xbl/index.html @@ -0,0 +1,27 @@ +--- +title: XBL +slug: Archive/Mozilla/XBL +tags: + - Tutte_le_categorie + - XBL +translation_of: Archive/Mozilla/XBL +--- +

+

XML Binding Language (XBL, a volte chiamato anche Extensible Bindings Language) è un linguaggio per descrivere i binding che possono essere associati ad elementi di altri documenti. L'elemento al quale il binding è associato, chiamato bound element, acquisisce il nuovo comportamento specificato dal binding. +

I binding possono contenere gestori di eventi che sono registrati per il bound element, un'implementazione di nuovi metodi e proprietà che divengono accessibili dal bound element e del contenuto anonimo che viene inserito sotto il bound element. +

La maggior parte dei widget XUL sono almeno parzialmente implementati utilizzando XBL. E' inoltre possibile costruire widget riutilizzabili partendo da XUL, HTML, SVG e altri linguaggi utilizzando XBL. +

+

Specifiche

+

XBL 1.0 è specificato in XBL 1.0 Reference. Purtroppo, l'attuale implementazione in Mozilla è differente dalle specifiche e non vi è alcun documento conosciuto che descriva tali differenze. E' sperabile che la Reference venga aggiornata per descrivere l'implementazione di Mozilla. +

XBL 1.0 è una tecnologia specifica di Mozilla e non uno standard W3C. Tuttavia, si sta lavorando su almeno due standard: sXBL e XBL 2.0. +

+ +

Alcune differenze tra sXBL e XBL2 sono elencate in un articolo di Anne van Kesteren (EN). +

+

Vedi anche

+ +{{ languages( { "en": "en/XBL", "fr": "fr/XBL", "pl": "pl/XBL", "pt": "pt/XBL" } ) }} diff --git a/files/it/archive/mozilla/xul/index.html b/files/it/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..5de9e8752f --- /dev/null +++ b/files/it/archive/mozilla/xul/index.html @@ -0,0 +1,63 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - Tutte_le_categorie + - XUL +translation_of: Archive/Mozilla/XUL +--- +

 

+ +
Tutorial XUL
+Un tutorial guidato che aiuta i principianti a iniziare a programmare in XUL, originariamente pubblicato in XULPlanet.
+ +
XUL (XML User Interface Language) è un linguaggio di Mozilla basato su XML che permette di creare applicazioni multipiattaforma, ricche di funzionalità, che possono funzionare connesse a Internet oppure no. Queste applicazioni possono essere facilmente personalizzate con testi alternativi, elementi grafici, e layout, in modo che possano essere facilmente personalizzate o localizzate. Gli sviluppatori web che già conoscono l'HTML dinamico (DHTML) possono imparare XUL e iniziare a sviluppare rapidamente. Aprendo la pagina XUL Periodic Table con Firefox o un qualsiasi altro browser basato su Gecko si vedranno alcuni esempi dimostrativi di XUL.
+ + + + + + + + +
+

Documentazione

+ +
+
Reference sugli elementi XUL
+
Si veda anche la documentazione MDC su Sistema di Preferenze e richlistbox.
+
+ +
+
La gioia di XUL
+
Descrive le funzionalità e i componenti principali di XUL.
+
+ +
+
Adattare le applicazioni XUL per Firefox 1.5
+
Una lista di cambiamenti in Firefox 1.5 che interessano gli sviluppatori.
+
+ +
+
Guida ai Template XUL
+
Una guida dettagliata sui Template di XUL, che servono essenzialmente a generare contenuti da una fonte dati.
+
+ 		+

Strumenti

+ + + +

Argomenti correlati

+ +
+
JavaScript, XBL, CSS, RDF, Estensioni, XULRunner
+
+
+ +

Interwiki Language Links

+ +

{{ languages( { "en": "en/XUL", "es": "es/XUL", "fr": "fr/XUL", "ja": "ja/XUL", "pl": "pl/XUL", "pt": "pt/XUL" } ) }}

diff --git a/files/it/archive/mozilla/xul/tutorial/index.html b/files/it/archive/mozilla/xul/tutorial/index.html new file mode 100644 index 0000000000..30a8c31e2c --- /dev/null +++ b/files/it/archive/mozilla/xul/tutorial/index.html @@ -0,0 +1,170 @@ +--- +title: Guida a XUL +slug: Archive/Mozilla/XUL/Tutorial +tags: + - Guide + - XUL + - XUL_guida +translation_of: Archive/Mozilla/XUL/Tutorial +--- +

Questo tutorial descrive XUL, the XML Il linguaggio di interfaccia utente. Questo linguaggio è stato creato per le applicazioni Mozilla e viene utilizzato per descrivere l' interfaccia utente.

+ +

Introduzione

+ + + +

Elementi basilari

+ + + +

Il Modello a scatola

+ + + +

Altri elementi di Layout

+ + + +

Barre degli strumenti e Menù

+ + + +

Eventi e Script

+ + + +

Modello ad oggetti del documento

+ + + +

Alberi

+ + + +

RDF e Modelli

+ + + +

Temi e Località

+ + + +

Collegamenti

+ + + +

Tipi di finestre specializzate

+ + + +

Installazione

+ + + +
+

Questa guida XUL è stata originariamente creata da Neil Deakin. Lui ha cortesemente dato a noi il permesso di usarla come parte di MDN.

+
+ +
+

Informazioni sul documento originale

+ +
    +
  • Autore: Neil Deakin
    • +
  • Informazione di Copyright: © 1999-2005 XULPlanet.com
    • +
+
+ +

 

diff --git a/files/it/archive/mozilla/xulrunner/a_cosa_serve_xulrunner/index.html b/files/it/archive/mozilla/xulrunner/a_cosa_serve_xulrunner/index.html new file mode 100644 index 0000000000..6ad5d00746 --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/a_cosa_serve_xulrunner/index.html @@ -0,0 +1,63 @@ +--- +title: A cosa serve XULRunner +slug: Archive/Mozilla/XULRunner/A_cosa_serve_XULRunner +translation_of: Archive/Mozilla/XULRunner/What_XULRunner_Provides +--- +

 

+

L'obbiettivo di XULRunner è fornire una soluzione per il rilascio di applicazioni XUL (in particolare Firefox e Thunderbird) e fornire un meccanismo per incorporare parti di programma. Le seguenti funzionalità sono già state implementate o sono pianificate:

+

 

+

Funzionalità di Gecko

+ +

Funzionalità dell'interfaccia utente

+

I seguenti elementi dell'interfaccia utente sono forniti da XULRunner, ma possono essere sovrascritti dai programmi quando necessario:

+ +

Incorporare le API

+

Le API seguenti sono contenute in XULRunner:

+ +

La lista dei "forse"

+

Le seguenti funzionalità sono state discusse e potrebbero essere incluse in XULRunner per il tempo lo permette e le dimensioni del codice saranno accettabili:

+ +

Cosa rimane fuori

+

XULRunner non fornisce:

+ +

Interwiki Language Links

+

{{ languages( { "en": "en/XULRunner/What_XULRunner_Provides", "ja": "ja/XULRunner/What_XULRunner_Provides" } ) }}

diff --git a/files/it/archive/mozilla/xulrunner/applicazioni_basate_su_xulrunner/index.html b/files/it/archive/mozilla/xulrunner/applicazioni_basate_su_xulrunner/index.html new file mode 100644 index 0000000000..fddf5aef0f --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/applicazioni_basate_su_xulrunner/index.html @@ -0,0 +1,45 @@ +--- +title: Applicazioni basate su XULRunner +slug: Archive/Mozilla/XULRunner/Applicazioni_basate_su_XULRunner +tags: + - XULRunner +translation_of: Archive/Mozilla/XULRunner/Hall_of_Fame +--- +

+

In questa pagina tentiamo di tenere traccia di tutte le applicazioni esistenti basate su XULRunner. +

+ +{{ languages( { "en": "en/XULRunner_Hall_of_Fame", "fr": "fr/Floril\u00e8ge_des_applications_XULrunner" } ) }} diff --git a/files/it/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html b/files/it/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html new file mode 100644 index 0000000000..0a9c732401 --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html @@ -0,0 +1,271 @@ +--- +title: Primi passi con XULRunner +slug: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner +translation_of: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner +--- +

{{ Next("Windows and menus in XULRunner") }}

+ +

Questo articolo è stato rivisto e riscritto da Luigi Sentina. La mission di questo è quella di mostrare con un semplice esempio come sia facile costruire applicazioni dektop e molto altro ancora con la tecnologia messa a disposizione da XULrunner. L'articolo originale un pò "datato" (dato che faceva riferimento ad una vecchia versione di XULRunner) è stato rivisto sulla base dell'esempio originale (dato che non realmente testato per qualsiasi informazione potete contattarmi a info@luigisentina.com) Nell'esempio verrà creata la classica applicazione "Ciao Mondo" utilizzando la versione "runtime" (vedere sotto).

+ +

L'alternativa è la versione SDK ma ci vogliono conoscenze del linguaccio C++ e affini! Per correttezza vi rimando il link originale se qualcuno dovesse essere interessato:  Creating XULRunner Apps with the Mozilla Build System.

+ +

Step 1: Download XULRunner

+ +

Puoi trovare il download di XULRunner nella pagina principale di MDC. Dal momento che non stiamo creando componenti XPCOM binari, Dobbiamo scaricare il pacchetto di runtime XULRunner, non l'SDK.

+ +

Il download di XULRunner per Windows prevede un file zip da scompattare in una determianta "posizione" all'interno della nostra applicazione. Quindi non c'e nessun programma da installare. Il vantaggio è propio questo, non avendo un installer rende possibile creare applicazioni "stand-alone" ovvero quelle applicazioni che funzionano in maniera autonoma e svincolata da altri oggetti o software. Inoltre il fatto che non si "agganci" al sistema Windows non rischiamo di creare alcun conflitto da una possibile installazione o disintallazione di XULRunner.

+ +

La versione MAC è distribuita nel formato compresso  tar.bz2. Come per Windows estraggo il contenuto direttamente nella mia applicazione anche se in molte guide vi diranno di installarlo nel percorso locale:  /Library/Frameworks.

+ +

In Ubuntu desktop e le sue varianti (Xubuntu, Kubuntu, ...), dalla versione 11.10 (Oneiric Ocelot), XULRunner non è più mantenuto e non esiste nel repository di Ubuntu. Pertanto, è necessario compilare XULRunner manualmente o scaricare una versione binaria dal server FTP di Mozilla. Un modo per raggiungere questo obiettivo è quello di eseguire il seguente script ogni volta che si desidera installare una nuova versione:

+ +
FIREFOX_VERSION=`grep -Po  "\d{2}\.\d+" /usr/lib/firefox/platform.ini`
+ARCH=`uname -p`
+XURL=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$FIREFOX_VERSION/runtimes/xulrunner-$FIREFOX_VERSION.en-US.linux-$ARCH.tar.bz2
+cd /opt
+sudo sh -c "wget -O- $XURL | tar -xj"
+sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner
+sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell
+ +

Per comodità si potrebbe anche salvare questo script in un file. Nota: Se si utilizza Firefox costruire dal repository Ubuntuzilla e sostituire / usr / lib / firefox / platform.ini con / opt / firefox / platform.ini.

+ +

Step 2: Installazione di  XULRunner

+ +

Su Windows, scompattare temporanemaente il file zip in una cartella qualsiasi. Come vedremo più avani per creare un applicazione esiste una gerarchia per le applicazioni basata su XULRunner. Quindi in seguito verrà spostata o copiata nella posizione finale.

+ +

Su Mac, estrarre il contenuto del archivio tar.bz2 , e copiarne (temporaneamente) il contenuto nella directory: /Library/Frameworks directory, o se preferite anche in un altra posizione.

+ +

Su Linux, è sufficiente scompattare l'archivio, se si utilizza XULRunner pre-release.

+ +
+

In alternativa, se hai scaricato l'archivio compresso di XULRunner e vuoi installare sul vostro sistema potete farlo eseguendo

+ +

xulrunner --register-global

+ +

come amministratore per registrare XULRunner per tutti gli utenti della macchina.
+
+ Per registrare XULRunner per una singolo utente

+ +

xulrunner --register-user

+
+ +
+

In tutti i sistemi puoi decomprimere il file omni.ja in qualche directory cambiare l'estensione del file in ".zip" e quindi utilizzare lo strumento di decompressione del file system normale per aprirlo. I contenuti di omni.ja sono disponibili per le applicazioni XULRunner e utili risorse per costruire facilmente incredibili applicazioni!

+
+ +

Step 3: Creare la struttura delle cartelle

+ +

Per capire la struttura di un' applicazione XULRunner procederemo con il classico esempio "Ciao mondo".

+ +

Su Windows ho creato una nuova cartella nel percorso c:\program files\miaapp
+ La struttura "gerarchica" di un applicazione su tutti i sistemi operativi è la seguente:

+ +
+ miaapp/
+|
++-+ chrome/
+| |
+| +-+ content/
+| | |
+| | +-- main.xul
+| | |
+| | +-- main.js
+| |
+| +-- chrome.manifest
+|
++-+ defaults/
+| |
+| +-+ preferences/
+|   |
+|   +-- prefs.js
+|
++-- application.ini
+|
++-- chrome.manifest
+
+ +

Nell'esempio si noti che ci sono 5 file nella struttura di cartelle: Application.ini, chrome.manifest (2), prefs.js e main.xul. Il file / chrome / chrome.manifest è facoltativo, ma potrebbe essere utile per la retrocompatibilità. Vedere la nota che segue.

+ +
+

Per maggiori dettagli sulla struttura di fasci installabili in generale, consultare:: Structure of an installable bundle.

+
+ +
Nota: Nelle prime release di XULRunner il file chrome.manifest risiedeva nella root principale come mostrato nella gerarchia sopra. Nelle versioni precedenti è stato spostato nella cartella chrome. Tuttavia per avere una retrocompatibilità lasceremo entrambe i file dove nel primo (root) avrà il link al secondo file dentro chrome e quindi al suo interno comparirà solamente il path: manifest chrome/chrome.manifest. Il contenuto del secondo è spiegato più sotto. 
+ +

I file nell'applicazione di esempio
+
+ Step 4: Il file application.ini

+ +

Il file application.ini è il punto di ingresso per la nostra applicazione. In questo file è sono specificate alcuni parametri di configurazione per la piattaforma XULrunner usata. Sotto per il nostro esempio

+ +
[App]
+Vendor=XULTest
+Name=miaapp
+Version=1.0
+BuildID=20100901
+ID=xulapp@xultest.org
+
+[Gecko]
+MinVersion=16.0
+MaxVersion=22.0
+
+ +
Nota: MinVersion e MaxVersion sono fondamentali per il funzionamento indicano il "range" della versione XULRunner della nostra applicazione. Al momento della stesura di questo testo l'ultima versione disponibile è la 22. (MaxVersion:22.0). 
+ +
Nota: Il nome della nostra applicazione deve avere un minimo di 3 caratteri tutti minuscoli
+ +

Step 5: I  file chrome.manifest

+ +

Il file chrome manifest è usato da XULRunner per specificare gli URI (percorsi) per le risorse utilizzate. Queste possono essere file  JAR o file non compressi o cartelle. Nel nostro esempio utilizziamo cartelle non compresse. Questo è il contenuto del nostro file nella directory chrome/chrome.manifest: (da non confondere con quello nella root principale)

+ +
 content miaapp content/
+
+ +

Come gia spiegato nello Step 3, il file chrome.manifest nella root princiapale conterrà solamente il path che punta al "reale" chrome.manifest.Il contenuto pertanto (ripeto) sarà:

+ +
manifest chrome/chrome.manifest
+ +

Step 6: Il file prefs.js

+ +

Il file prefs.js può contenere molte proprietà a seconde del tipo di applicazione che state creando (per farvi un idea digitate sul browser Firefox about:config e premete il pulsante "farò attenzione"). Nel nostro esempio usiamo una configurazione minima, la più importante che non può mancare è la prima riga. Questa infatti setta la prima pagina (finestra) XUL che verrà aperta quando lanceremo la nostra applicazione (nell' esempio main.xul).
+ Queso è il contenuto:

+ +
pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");
+
+/* debugging prefs, disable these before you deploy your application! */
+pref("browser.dom.window.dump.enabled", true);
+pref("javascript.options.showInConsole", true);
+pref("javascript.options.strict", true);
+pref("nglayout.debug.disable_xul_cache", true);
+pref("nglayout.debug.disable_xul_fastload", true);
+
+ +
+

Le varie prefs sono descritte nel dettagli qui: XULRunner:Specifying Startup Chrome Window.

+ +

Per quelle di Debug qui: Debugging a XULRunner Application

+
+ +

Step 7: Il file main.xul

+ +

Faccio un premessa, il nome "main.xul" non è obbligatorio la pagina può chiamarsi come meglio credete l'importante è che vi ricordiate di cambiare il nome anche nel file prefs.js allo step 6. Creeremo una semplice XUL window, (finestra xul) con il minimo indispensabile per il nostro esmpio "Ciao Mondo". Ecco come si presenta il nostro file main.xul:

+ +
<?xml version="1.0"?>
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <script type="application/javascript" src="chrome://myapp/content/main.js"/>
+
+  <caption label="Ciao Mondo"/>
+  <separator/>
+  <button label="More >>" oncommand="showMore();"/>
+  <separator/>
+  <description id="more-text" hidden="true">E' solamente un semplie esempio ma con l'esperienza potrete creare delel vere e proprie applicazioni professionali!</description>
+
+</window>
+
+ +
Nota: Assicurarsi che no vi siano spazi bianchi all'inizio del filee XML/XUL
+ +

come potete notare viene incluso nel file xul il relativo file .Js (è buona norma chiamarli nello stesso modo). Nel "button" viene richiamata attraverso il "command" (che equivale al classico "onclick") la funzione shoMore();  che ovviamente sarà all'interno del file javascript. Si possono includere molti file .Js a seconde delle esigenze!
+  

+ +

Il file main.js

+ +

ecco l'unica funzione all'interno del nostro file main.js:

+ +
function showMore() {
+  document.getElementById("more-text").hidden = false;
+}
+
+ +
+

Per maggiori informazioni su potete vedere qui:  XUL

+ +

Per implementare html ai file XUL vedere qui Adding HTML Elements.

+
+ +

Step 8: Eseguire l' applicazione

+ +

Finalmente vediamo come eseguire la nostra applicazione.

+ +

Windows

+ +

Apriamo una finestra di prompt, e proviamo ad eseguire questo comando:

+ +
c:\miaapp\xulrunner\xulrunner.exe c:\miaapp\application.ini
+
+ +

Se avete creato l'applicazione sulla cartella programmi potete usare

+ +
​%ProgramFiles%\miaapp\xulrunner\xulrunner.exe %ProgramFiles%\miaapp\application.ini
+
+ +

per la cartella "Program File (x86)" nei sistemi a 64 bit usare questo: 

+ +
​%ProgramFiles(x86)
+ +
+

Nota:  Puoi anche creare un vero e proprio file di installer per distribuire la tua creazione per maggiori dettagli vedere Creare un Installer per Applicazioni XUL.

+
+ +

Mac

+ +

On the Mac, before you can run a XULRunner application with everything intact, you must install it using the --install-app xulrunner commandline flag. Installing the application creates an OS X application bundle:

+ +
 /Library/Frameworks/XUL.framework/xulrunner-bin --install-app /<path>/<to>/myapp.zip
+
+ +

Once installed, you can run the application:

+ +
 /Library/Frameworks/XUL.framework/xulrunner-bin "/Applications/Finkle/TestApp.app/Contents/Resources/application.ini"
+
+ +

You may run it without installing (but with the menu bar and dock icon missing) in OS X by typing:

+ +
/Library/Frameworks/XUL.framework/xulrunner-bin "/<full path>/TestApp/application.ini"
+
+ +
+

Note: The full path is required or a "Error: couldn't parse application.ini."-message will be returned.

+
+ +

This might also be simplified using a very simple shell script (i call mine "run.sh"):

+ +
#!/bin/sh
+/Library/Frameworks/XUL.framework/xulrunner-bin `pwd`/application.ini
+
+ +

Linux

+ +

On Ubuntu, you can run the application from a terminal. First change into the \myapp folder, then start the application by:

+ +
 xulrunner application.ini
+
+ +

You should now see a window that looks something like this. This particular screenshot is from Ubuntu 10.

+ +

myapp-screenshot.png

+ +

Alternative: Run XUL apps with Firefox

+ +

With Firefox 3 and later, you can tell the Firefox executable to run a XUL application from the command line. The XUL application will run instead of the Firefox browser that normally starts. This is similar to starting a XUL app using XULRunner. See Using Firefox to run XULRunner applications. This does not work if Firefox itself was installed as a XUL app - you need to use the installed XULRunner directly.

+ +

Further Reading:

+ +

There are many things you can do with XULRunner. Before you get too far into things you might want to read the XULRunner tips article. Also, throughout this tutorial you've been introduced to various bits of the Toolkit API and it may help you to get familiar with it. Once you've got an application that's ready for the world you'll love our article titled Deploying XULRunner.

+ +

For now, click the "next" link to learn about windows and menus in XULRunner!

+ +

{{ Next("Windows and menus in XULRunner") }}

+ +
+

Original Document Information

+ +
    +
  • Author: Mark Finkle, October 2, 2006
    • +
+
+ +

{{ languages( { "ja": "ja/Getting_started_with_XULRunner", "ko": "ko/Getting_started_with_XULRunner" } ) }}

diff --git a/files/it/archive/mozilla/xulrunner/index.html b/files/it/archive/mozilla/xulrunner/index.html new file mode 100644 index 0000000000..ecb6ce492f --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/index.html @@ -0,0 +1,11 @@ +--- +title: XULRunner +slug: Archive/Mozilla/XULRunner +translation_of: Archive/Mozilla/XULRunner +--- +

 

+

XULRunner è un pacchetto di runtime Mozilla che può essere utilizzato per l'avvio di applicazioni XUL + XPCOM, anche ricche come Firefox e Thunderbird. Fornisce il meccanismo per installare, aggiornare e disinstallare tali applicazioni. XULRunner fornisce inoltre libxul, una soluzione che permette di incorporare le tecnologie Mozilla in altri programmi.

+ +

Versioni

XULRunner 1.8.0.4 è una developer preview stabile, basata sullo stesso codice di base di Firefox 1.5.0.4. E' disponibile per Windows, Mac OS X e Linux, in inglese. Si vedano le note di rilascio per ulteriori dettagli sull'installazione, la disinstallazione e altro.

Panoramica

Documentazione

Applicazioni di esempio
Semplici applicazioni che è possibile copiare.
A XULRunner Tutorial (EN)
Una breve introduzione a XULRunner.
Rilasciare applicazioni con XULRunner 1.8
Spiega come utilizzare XULRunner 1.8 per sviluppare e rilasciare applicazioni XUL standalone in ambiente di produzione.
Applicazioni basate su XULRunner
Tutte le applicazioni disponibili basate su XULRunner.

Argomenti correlati
+

 

+

{{ languages( { "ca": "ca/XULRunner", "en": "en/XULRunner", "es": "es/XULRunner", "fr": "fr/XULRunner", "zh-cn": "cn/XULRunner", "ja": "ja/XULRunner", "pl": "pl/XULRunner" } ) }}

diff --git a/files/it/archive/mozilla/xulrunner/note_di_rilascio_di_xulrunner_1.8.0.4/index.html b/files/it/archive/mozilla/xulrunner/note_di_rilascio_di_xulrunner_1.8.0.4/index.html new file mode 100644 index 0000000000..f2557a0040 --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/note_di_rilascio_di_xulrunner_1.8.0.4/index.html @@ -0,0 +1,82 @@ +--- +title: Note di rilascio di XULRunner 1.8.0.4 +slug: Archive/Mozilla/XULRunner/Note_di_rilascio_di_XULRunner_1.8.0.4 +translation_of: Archive/Mozilla/XULRunner/1.8.0.4 +--- +

XULRunner 1.8.0.4 è una versione di anteprima stabile del framework Mozilla XULRunner. Essa rimpiazza la versione 1.8.0.1; tutti gli utenti dovrebbero aggiornarla. La nuova versione fornisce gli strumenti per lanciare applicazioni XUL standalone ed incorporare le API che possono essere utilizzate per visualizzare le pagine web in applicazioni nativa o in applicazioni Java. +

+

Requisiti di sistema

+

Prima dell'installazione, assicurarsi che il computer risponda ai requisiti di sistema. I requisiti minimi sono identici a quelli di Firefox. +

+

Installare XULRunner

+

Mozilla fornisce XULRunner per Windows, Mac OS X e Linux, al momento solo in inglese: +

+ +

Windows

+ +

Mac OS X

+ +

Linux

+ +


+

+

Disinstallare XULRunner

+

Windows/Linux

+ +

Mac OS X

+

Se si hanno più versioni di XULRunner installate sul sistema, non è possibile disinstallarne soltanto una. +

+ +

Installare applicazioni XUL

+

Le applicazioni XUL si possono ottenere da diverse fonti e sono tipicamente compresse in un archizio ZIP con l'estensione <tt>.xulapp</tt> o <tt>.xpi</tt>. +

+ +

Windows

+

Eseguire il seguente comando da Avvio -> Esegui o dal prompt dei comandi: +"C:\Program Files\Mozilla XULRunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "C:\Documents and Settings\UTENTE\Desktop\NOME_APPLICAZIONE.xpi" +

L'applicazione verrà installata in <tt>C:\Program Files\NOME_VENDITORE\NOME_APPLICAZIONE</tt> +

+

Mac OS X

+

Eseguire il seguente comando dal Terminale: +

+
/Library/Frameworks/XUL.framework/xulrunner-bin --install-app ~/Desktop/NOME_APPLICAZIONE.xpi
+
+

L'applicazione verrà installata in <tt>/Applications/NOME_VENDITORE/NOME_APPLICAZIONE</tt> +

+

Linux

+

Eseguire il seguente comando dalla shell: +

+
/opt/xulrunner/1.8.0.4/xulrunner/xulrunner --install-app ~/Desktop/NOME_APPLICAZIONE.xpi
+
+

L'applicazione verrà installata in <tt>/usr/lib/NOME_VENDITORE/NOME_APPLICAZIONE</tt> +

+

Problemi conosciuti

+ +

Frequently Asked Questions

+

+
Perchè installare XULRunner è così complicato? Perchè non c'è un facile programma di installazione? +
Perchè nessuno lo ha ancora creato! Questa versione è un'anteprima per sviluppatori: ulteriori funzionalità per l'installazione e il rilascio di XULRunner e delle applicazioni basate su di esso saranno disponibili in versioni future. +

Sto scrivendo un'applicazione XUL, come posso rilasciarla? +
Per ora Mozilla consiglia che XULRunner venga rilasciato privatamente insieme ad ogni applicazione. Si veda Rilasciare applicazioni con XULRunner 1.8 per ulteriori informazioni. +

Dove sono i sorgenti? +
Qui. +

Credo di aver trovato un bug, come posso segnalarlo? +
bugzilla.mozilla.org viene utilizzato per tenere traccia dei bug di tutti i prodotti Mozilla. Per favore, prima di segnalare un nuovo bug controlla se è già stato segnalato da qualcun altro. +

Come posso aiutarvi? +
Se vuoi aiutare gli sviluppatori di XULRunner ma non sai da dove iniziare, visita la pagina della XULRunner:Community e poni domande sui newsgroup o sul canale IRC. +

+{{ languages( { "en": "en/XULRunner_1.8.0.4_Release_Notes", "fr": "fr/Notes_de_versions_de_XULRunner_1.8.0.4", "ja": "ja/XULRunner_1.8.0.4_Release_Notes" } ) }} diff --git a/files/it/archive/mozilla/xulrunner/xulrunner_faq/index.html b/files/it/archive/mozilla/xulrunner/xulrunner_faq/index.html new file mode 100644 index 0000000000..6602428faa --- /dev/null +++ b/files/it/archive/mozilla/xulrunner/xulrunner_faq/index.html @@ -0,0 +1,24 @@ +--- +title: XULRunner FAQ +slug: Archive/Mozilla/XULRunner/XULRunner_FAQ +tags: + - XULRunner +translation_of: Archive/Mozilla/XULRunner/FAQ +--- +

+

Questa pagina ha lo scopo di rispondere alle domande più frequenti e correggere gli errori più comuni riguardo a XULRunner. +

+
XULRunner è un browser? +
No. Si può utilizzare XULRunner per creare un browser (come mybrowser example o Firefox), ma non esiste "il browser XULRunner". +

XULRunner è uno strumento di sviluppo? +
Non esattamente; XULRunner è una tecnologia internet runtime. Può essere utilizzato per creare strumenti di sviluppo (l'AJAX Toolkit Framework, per esempio). In futuro ci sarà un XULRunner Developer Kit che conterrà vari strumenti di sviluppo. +

XULRunner assomiglia a linguaggi di programmazione come Java o .NET (o Python o...)? +
L'obiettivo di XULRunner è facilitare lo sviluppo e il rilascio di applicazioni internet. Non è concepito per essere un ambiente runtime completo; per questo XULRunner richiede poca memoria e una più semplice strategia di rilascio rispetto a un runtime completo. +

Se utilizzo XULRunner devo scrivere le mie applicazioni in XUL? +
No! Puoi scrivere le tue applicazioni in un qualunque linguaggio supportato dalla piattaforma web Mozilla, compresi HTML, XHTML, SVG, o XUL. +

Ma allora perchè si chiama XULRunner, invece di HTMLRunner o qualche altro nome simile? +
Il nome non è definitivo. E' possibile proporre nomi alternativi a Benjamin Smedberg. +

Quando Firefox si baserà su XULRunner? +
Si veda la XULRunner roadmap. Attualmente è previsto per Firefox 3 (XULRunner 1.9), verso la fine del 2007. +

+{{ languages( { "en": "en/XULRunner_FAQ", "fr": "fr/FAQ_de_XULRunner", "ja": "ja/XULRunner_FAQ" } ) }} diff --git a/files/it/archive/rss/index.html b/files/it/archive/rss/index.html new file mode 100644 index 0000000000..bd80105f0c --- /dev/null +++ b/files/it/archive/rss/index.html @@ -0,0 +1,35 @@ +--- +title: RSS +slug: Archive/RSS +tags: + - RSS + - Tutte_le_categorie +translation_of: Archive/RSS +--- +

+

+
RSS:Iniziare
+Una guida RSS per i principianti.
+

Really Simple Syndication (RSS) è un formato dati molto popolare, simile ad HTML e basato su XML per riassumere le news di un sito. Questo formato ha una storia confusa ed esiste una moltitudine di Versioni RSS incompatibili tra loro. Alcune di esse sono basate su RDF, mentre altre (la maggior parte) sono basate su XML. Indipendentemente da ciò, RSS è molto usato per segnalare su un sito le news di un altro sito, i post su un blog, IPradio e IPTV. +

+ + +
+

Documentazione

+
Perchè RSS Slash è popolare - contare i commenti +
Charles Iliya Krempeaux ha scritto questo articolo sul modulo RSS Slash, sul perchè è così diffuso e come utilizzarlo per avere un conteggio dei commenti. +
+
The Myth of RSS Compatibility (EN) +
Mark Pilgrim racconta la storia di RSS e alcuni dettagli delle incompatibilità tra le diverse versioni. +
+
Atomic RSS (EN) +
Tim Bray spiega come utilizzare Atom 1.0 come microformato e il modulo per RSS 2.0. +
+		 +

Argomenti correlati

+ +
+

Interwiki Language Links +

{{ languages( { "en": "en/RSS", "fr": "fr/RSS", "ja": "ja/RSS", "pl": "pl/RSS", "pt": "pt/RSS" } ) }} diff --git a/files/it/archive/rss/iniziare/index.html b/files/it/archive/rss/iniziare/index.html new file mode 100644 index 0000000000..b6b7419afd --- /dev/null +++ b/files/it/archive/rss/iniziare/index.html @@ -0,0 +1,6 @@ +--- +title: Iniziare +slug: Archive/RSS/Iniziare +translation_of: Archive/RSS/Getting_Started +--- +

(empty)

diff --git a/files/it/archive/standard_web/index.html b/files/it/archive/standard_web/index.html new file mode 100644 index 0000000000..485e14ddca --- /dev/null +++ b/files/it/archive/standard_web/index.html @@ -0,0 +1,75 @@ +--- +title: Standard Web +slug: Archive/Standard_Web +tags: + - Standard_Web + - Tutte_le_categorie +translation_of: Archive/Web_Standards +--- +

 

+
+ Gli standard del Web sono stati progettati per trarre i benefici piu grandi dal enorme numero di utenti, assicurando la visibilità a lungo termine di qualsiasi documento publicato sul Web.Seguendo questi standard la progettazione e la realizzazione del Web sono semplificate e i costi di produzione sono minimizzati, permettendo la distribuzione di siti che sono acessibili dalla maggior parte di persone e di dispositivi Internet.I siti sviluppati seguendo questa traccia continueranno a funzionare correttamente nonostante l'evoluzione dell'interfaccia del broswer o il lancio di nuovi dispositivi internet nel mercato.
+ + + + + + + +
+

Documentazione

+
+
+ Importare applicazioni da Internet Explorer a Mozilla
+
+ Hai mai avuto qualche problema provando a far lavorare le applicazioni specifiche per Internet Explorer con Mozilla? Questo articolo copre le problematiche comuni associate all'importazione di applicazioni al broswer open source basato su Mozilla.
+
+
+
+ Usare gli standard Web nelle tue pagine Web
+
+ Questo articolo mostra una panoramica sul processo di aggiornamento sui contenuti delle tue paggine Web in accordo con gli standard W3C.
+
+
+
+ Scegliere gli standard in accordo alle pratiche proprietarie
+
+ Nel mondo dello sviluppo, gli standard sono necessari perchè le applicazioni sono disegnate da diversi gruppi di sviluppatori.
+
+
+
+ I vantaggi degli standard Web nel business
+
+ Questo articolo discute come su come aderire agli standard Web, lasciandosi alle spalle tecnologie e markup proprietari, e contriubuendo al raggiungimento degli obiettivi dell'azienda.
+
+

Vedi tutti...

+ 		+

Communità

+
    +
  • Vedi forum Mozilla...
    • +
+

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

+ +

Tools

+ +

View All...

+ +
+
+ CSS, DHTML, HTML, Sviluppo Web, XHTML, XML
+
+
+
+

{{ Note(1) }} - The Web Standards Project

+

Categories

+

Interwiki Language Links

+

 

+

{{ languages( { "ca": "ca/Est\u00e0ndards_web", "de": "de/Web-Standards", "es": "es/Est\u00e1ndares_Web", "fr": "fr/Standards_du_Web", "ja": "ja/Web_Standards", "ko": "ko/Web_Standards", "pl": "pl/Standardy_WWW", "pt": "pt/Normas_Web" } ) }}

diff --git a/files/it/archive/standard_web/issues_arising_from_arbitrary-element_hover/index.html b/files/it/archive/standard_web/issues_arising_from_arbitrary-element_hover/index.html new file mode 100644 index 0000000000..bdabe77777 --- /dev/null +++ b/files/it/archive/standard_web/issues_arising_from_arbitrary-element_hover/index.html @@ -0,0 +1,104 @@ +--- +title: Problemi Derivanti Dall Hover Su Elementi Arbitrari +slug: Archive/Standard_Web/Issues_Arising_From_Arbitrary-Element_hover +tags: + - CSS + - Tutte_le_categorie +translation_of: Archive/Web_Standards/Issues_Arising_From_Arbitrary-Element_hover +--- +

 

+ +

Summary: Thanks to long-standing limitations, we're used to thinking of hover styles as applying only to hyperlinks, which has led to some sloppy authoring practices that are now causing problems for some Web sites. This technote explains the source of the problems and how to avoid encountering them.

+ +

Molti sviluppatori fanno uso della pseudo-classe CSS2 :hover per applicare uno stile ai collegamenti. Questa innovazione, introdotta per la prima volta da Microsoft® Internet Explorer e poi introdotta nelle specifiche CSS, è molto utilizzata per modificare i collegamenti testuali, in particolare quelli che sono si vuole far apparire e agire come "rollover" in JavaScript. Tuttavia, il progredire del supporto ai CSS da parte dei browser, ha portato in qualche caso ad un utilizzo spregiudicato di questa funzionalità.

+ +

Hover ed elementi che non sono collegamenti

+ +

La Sezione 5.11.3 dei CSS2 definisce tre pseudo-classi dinamiche (:hover, :active, e :focus) e dice:

+ +
La specifica non definisce quali elementi possano essere nei suddetti stati, o come si entra e si esce da tali stati. Uno scipt può modificare se certi elementi reagiscono o meno agli eventi geenrati dall'utente, e su dispositivi differenti ci possono essere differenti metodi di puntamento e attivazione.
+ +

Quindi, benchè gli sviluppatori siano abituati a pensare che questi stati si applicano esclusivamente ai collegamenti, in realtà non ci sono tali limitazioni nei CSS2. Ogni elemento, in teoria, potrebbe assumere uno dei tre stati sopra elencati, e quindi assumere lo stile ad essi associato.

+ +

 

+ +

Pseudo-classi generiche

+ +

La seconda parte del problema si manifesta quando si considera l'effetto della pseudo-classe generica nel selettore. Per esempio:

+ +
:hover {color: red;}
+ +

Questo è equivalente alla regola CSS2:

+ +
*:hover {color: red;}
+ +

..che si traduce in "ogni elemento su cui si passa deve assumere il colore rosso". Quindi, passando sopra paragrafi, tabelle, intestazioni e ogni altro elemento in un documento, dovrebbe far diventare il testo rosso.

+ +

Una comune variante è utilizzare insieme una classe generica e la pseudo-classe hover, come in questo caso:

+ +
.nav:hover {color: red;}
+ +

Nei casi in cui la classe nav viene applicata solo a collegamenti, non si verificano problemi. Ma nei casi comuni in cui è associata anche ad altri marcatori, come in questo caso:

+ +
<td class="nav">
+<a href="one.html" class="nav">one</a> |
+<a href="two.html" class="nav">two</a> |
+<a href="thr.html" class="nav">three</a> |
+<a href="fou.html" class="nav">four</a>
+</td>
+ +

Poichè si applica la classe nav anche alla cella della tabella, anche i caratteri esterni ai collegamenti (|) diventeranno rossi quando l'utente passerà con il puntatore del mouse sopra un qualsiasi punto della tabella, oltre che quando passerà sopra i collegamenti.

+ +

Il comportamento di Gecko

+ +

In browser basati su Netscape Gecko build 20020410 o successivi (Netscape 6.1+), gli stili associati a :hover possono essere applicati a qualsiasi elemento del documento. Quindi gli sviluppatori che utilizzano pseudo-classi generiche, o combinazioni simili, sono a rischio di vedere questi stili applicati ad altri elementi oltre che ai collegamenti. Il metodo più corretto di correggere questo problema è aggiungere il giusto marcatore come selettore dello stile, come in questo esempio:

+ +
a:hover {color: red;}
+a.nav:hover {color: red;}
+ +

In un tentativo di evitare l'insorgere di problemi con vecchie pagine, i browser basati su Mozilla 1.0 e successivi (Netscape 7+) includono un accorgimento che restringe l'applicazione di pseudo-classi generiche solo ai collegamenti, nel caso in cui il documento venga interpretato nel modo "quirks". Nei browser basati sul motore di Mozilla 1.3b e successivi, questa modalità viene estesa a comprendere selettori che combinano classi generiche con la pseudo-classe :hover (si veda {{ Bug(169078) }} per dettagli).

+ +

Problemi dei collegamenti con attributo Name

+ +

In aggiunti agli effetti sopra descritti, ci sono due altri effetti relativamente comuni, che gli sviluppatori possono non aspettarsi. Uno può essere facilmente corretto con la validazione, ma il secondo è un po' più sottile.

+ +

Prima di tutto, c'è il problema degli sviluppatori che utilizzano collegamenti con attributo Name, senza marcatore di chiusura. Per esempio:

+ +
<a name="pagetop">
+<h2>My Page</h2>
+ +

Senza un </a>, tutto quanto viene dopo viene formalmente considerato come facente parte del collegamento. E questo generalmente significa che tutto il resto del documento assume lo stile associato a hover. Si consideri l'effetto generato da questo stile:

+ +
a:hover {color: red;}
+ +

In un documento con un collegamento con attributo Name e che non viene correttamente chiuso, tutto il testo che segue l'apertura del collegamento, assumerà il colore rosso (sempre che un'altra regola del CSS non intervenga).

+ +

Questo ci porta al secondo problema, che consiste nel fatto che collegamenti con attributo Name possono avere stile hover. Benchè gli sviluppatori vogliano che il selettore a:hover sia associato solo ai veri collegamenti, esso sarà associato anche a quelli con attributo Name, dato che il selettore dichiara semplicemente che qualsiasi elemento a può passare nello stato hover. Per evitare questo problema, gli sviluppatori possono utilizzare una sintassi con pseudo-classi multiple descritta nei CSS2:

+ +
a:link:hover {color: red;}
+a:visited:hover {color: maroon;}
+ +

Si noti che, con questa sintassi, è possibile associare stili diversi a collegamenti visitati e non visitati, quando ci si passa sopra con il puntatore del mouse. Questo non era possibile con il solo a:hover. Ovviamente questo significa che il selettore a:link:hover si applica solamente ai collegamenti non visitati, per cui gli sviluppatori che vogliono applicare lo stesso stile sia a collegamenti visitati e non visitati, devono raggruppare i due selettori in una regola singola.

+ +

Raccomandazioni

+ +

Per evitare problemi inattesi, gli sviluppatori sono fortemente incoraggiati ad associare nomi agli elementi che usano pseudo-classi dinamiche per i collegamenti. Inoltre, le pseudo-classi multiple evitano che gli stili hover siano applicati a collegamenti non reali. Quindi, usare sempre a:hover invece di :hover, e a:link:hover (e a:visited:hover) sono preferiti al più semplice a:hover.

+ +

Collegamenti

+ + + +
+

Original Document Information

+ +
    +
  • Author(s): Eric A. Meyer, Netscape Communications
    • +
  • Last Updated Date: Published 07 Mar 2003; Revised 21 Mar 2003
    • +
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
    • +
  • Note: This reprinted article was originally part of the DevEdge site.
    • +
+
+ +

 

diff --git a/files/it/archive/standard_web/rdf_in_fifty_words_or_less/index.html b/files/it/archive/standard_web/rdf_in_fifty_words_or_less/index.html new file mode 100644 index 0000000000..5940fa2cb1 --- /dev/null +++ b/files/it/archive/standard_web/rdf_in_fifty_words_or_less/index.html @@ -0,0 +1,76 @@ +--- +title: RDF in cinquanta parole o meno +slug: Archive/Standard_Web/RDF_in_Fifty_Words_or_Less +tags: + - RDF + - Tutte_le_categorie +translation_of: Archive/Web_Standards/RDF_in_Fifty_Words_or_Less +--- +

+

Okay, probabilmente saranno un pò più di cinquanta parole, ma i punti chiave sono abbastanza semplici (e segnati in grassetto per colo i quali vogliono andare dritti al punto). Con Resource Description Framework (framework di descrizione risorse) o "RDF", intendiamo due cose. +

+
+Primo, RDF è un modello basato su grafi per la descrizione di risorse Internet (come pagine web e messaggi email), e di come tali risorse sono correlate l'un l'altra. +
+

Ma cosa vuol dire effettivamente? Per uno sviluppatore Mozilla, significa che il modello dati RDF (il "grafo") può essere usato come meccanismo per integrare ed organizzare risorse Internet. +

Vediamo un esempio: segnalibri. Comunemente, molti browser web permettono l'organizzazione dei propri segnalibri in maniera gerarchica all'interno di cartelle (folders). Ogni segnalibro è un puntatore ad una pagina web chiamata URI (Uniform Resource Identifier). +

Ma una pagina web è solo uno dei tipi di risorse Internet. Esistono tonnellate di tipi, inclusi messaggi email, articoli UseNet (o gli interi newsgroup), e risultati di ricerca del proprio motore preferito, giusto per dirne alcuni. Fondamentalmente, non c'è ragione per cui non possano essere trattati come "segnalibri" anche questi, raggruppandoli in cartelle a proprio piacimento, o creando cartelle "furbe" che, una volta aperte, generino dinamicamente il loro contenuto eseguendo ricerche da voi setssi definite. +

Ed un "segnalibro" può veramente avere proprietà arbitrarie asssociate ad esso: su potrebbe voolere inventare un proprio schema di "classificazione" per un segnalibro a la Macintosh con i suoi codici colore "hot", "warm", "cool". Oppure si potrebbe voler collegare un segnalibro ad un altro, o mantenerlo in molteplici cartelle nello stesso momento. +

Il grafo RDF fornisce un modello dati perfetto sul quale costruire un servizio di bookmarking "universale" come descritto sopra: il grafo può contenere puntatori a risorse arbitrarie e può raggrupparli pressoché in ogni maniera immaginabile. +

Ma aspettate, c'è dell'altro... +

+
+Secondo, RDF è una sintassi di serializzazione (serialization syntax). Questa sintassi permette al modello di grafo la comunicazione tra gli "agenti". +
+

Okay, cosa diamine significa "questo"? Fondamentalmente, significa che parti del modello dati RDF possono essere comunicate tra nodi della rete, e che il contenuto del grafo può cambiare dinamicamente mano a mano che le informazioni arrivano da un servizio remoto +

Torniamo indietro all'esempio dei segnalibri. Diciamo che una delle "cartelle" segnalibro è in realtà un puntatore alla mia casella email. Quando viene aperta la cartella. voila! Tutti i messaggi ricevuti durante la notte appaiono. +

Ma come avviene tutto questo? La cartella inbox in realtà è un puntatore ad una risorsa Internet che contiene un altro RDF che estende il grafo. Questa "risorsa Internet" è un URI che si riferisce ad uno script CGI (diciamo, <tt>http://www.mozilla.org/smart-mail/ge...n&folder=inbox</tt>). Lo script genera un RDF serializzato, che principalmente è un modo di formattare un grafo in XML: +

+
<rdf:RDF
+    xmlns:rdf="http://www.w3.org/TR/WD-rdf-syntax#"
+    xmlns:sm="http://www.mozilla.org/smart-mail/schema#">
+  <rdf:Description
+    about="http://www.mozilla.org/smart-mail/ge...n&folder=inbox">
+    <sm:message id="4025293">
+       <sm:recipient>
+         Chris Waterson "waterson@netscape.com"
+       </sm:recipient>
+       <sm:sender>
+         Aunt Helga "helga@netcenter.net"
+       </sm:sender>
+       <sm:received-by>x-wing.mcom.com</sm:received-by>
+       <sm:subject>Grandi novità per Yam Soup!</sm:subject>
+       <sm:body>
+         http://www.mozilla.org/smart-mail/ge...cgi?id=4025293
+       </sm:body>
+    </sm:message>
+    <sm:message id="4025294">
+       <sm:recipient>
+         Chris Waterson "waterson@netscape.com"
+       </sm:recipient>
+       <sm:sender>
+         Sarah Waterson "waterson.2@postbox.acs.ohio-state.edu"
+       </sm:sender>
+       <sm:received-by>x-wing.mcom.com</sm:received-by>
+       <sm:subject>Abbiamo vinto il nostro gioco</sm:subject>
+       <sm:body>
+         http://www.mozilla.org/smart-mail/ge...cgi?id=4025294
+       </sm:body>
+    </sm:message>
+  </rdf:Description>
+</rdf:RDF>
+
+

Dopo aver ricevuto la mostruosità sopra mostrata, il motore RDF modella il documento nel luogo appropriato, mentre l'albero di controllo che attualmente implementa l'interfaccia ai segnalibri riceve la notifica per disegnare nuove icone per la zuppa Yam (Yam Soup) da Zia Helga. +

Questo è esattamente il modo in cui funziona SmartMail. +

Contatti: +Chris Waterson (waterson@netscape.com) +

+
+

Original Document Information

+ +
+

Interwiki Language Links +

{{ languages( { "ko": "ko/RDF_in_Fifty_Words_or_Less", "en": "en/RDF_in_Fifty_Words_or_Less" } ) }} diff --git a/files/it/archive/web/index.html b/files/it/archive/web/index.html new file mode 100644 index 0000000000..6f60d315ff --- /dev/null +++ b/files/it/archive/web/index.html @@ -0,0 +1,12 @@ +--- +title: Archived open Web documentation +slug: Archive/Web +tags: + - Archived + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Web +--- +

The documentation listed below is archived, obsolete material about open Web topics.

+

{{SubpagesWithSummaries}}

diff --git a/files/it/archive/web/server-side_javascript/index.html b/files/it/archive/web/server-side_javascript/index.html new file mode 100644 index 0000000000..8f69b4481f --- /dev/null +++ b/files/it/archive/web/server-side_javascript/index.html @@ -0,0 +1,14 @@ +--- +title: Server-Side JavaScript +slug: Archive/Web/Server-Side_JavaScript +translation_of: Archive/Web/Server-Side_JavaScript +--- +

Vi propongo la mia idea: usare un solo linguaggio per scrivere intere Web Apps, lo stesso linguaggio che milioni di persone usano già tutti i giorni. 

+ +

Sembra scontato, ma per almeno i primi dodici anni dell'evoluzione del Web, gli sviluppatori hanno usato parecchi linguaggi diversi sul server che erano disponibili sul browser, il che ha portato a uno disgregamento di gruppi, un know-how inconsistente e un mucchio di esercitazioni di string manipulation server-side per fare in modo di generare pagine HTML o AJAX.

+ +

La semplicità nell'usare JavaScript lato server faceva parte della vision che Netscape aveva ai tempi di Netscape LiveWire. Ma allora i server da 350 MHz erano il meglio che si poteva trovare e Mozilla ancora non emergeva come tecnologia Web poichè ancora ancorata a Netscape.  Oggi, i cicli computazionali sono aumentati di 10 volte e grazie al lavoro di Mozilla su Rhino (interpreter JavaScript di Java) e SpiderMonkey (interprete JavaScript di C) e JavaScript stesso, abbiamo a disposizione basi molto solide per usare JavaScript in maniera straordinaria ed utile su lato server, con performance della stessa gamma di ambienti di sviluppo lato server come PHP e Ruby on Rails. 

+ +

Adesso grazie a TraceMonkey , JavaScript(sia lato client che server) vede un aumento della velocità di 20 e 40 volte, secondo quanto afferma Brendan Eich, CTO di Mozilla e creatore di JavaScript. JavaScript lato server è un altro modo in cui, come afferma in questo articolo Eich : "Mozilla vuole che la gente pensi a JavaScript come un linguaggio di uso più generico e che mostri quanto possa essere una piattaforma per creare intere applicazioni.

+ +

Oggi, molti vendors stanno incorporando Mozilla Rhino o Mozilla SpiderMonkey nei Web server. Alcuni, come ad esempio Aptana che ha il Jaxer server(open source), ha incorporato l'intero motore Mozilla(che include SpiderMonkey) all'interno di un Web server per attivare AJAX lato server e gli accessi al DOM lato server oltre all'esecuzione di JavaScript su lato server.

diff --git a/files/it/cambiamenti_di_xmlhttprequest_in_gecko1.8/index.html b/files/it/cambiamenti_di_xmlhttprequest_in_gecko1.8/index.html new file mode 100644 index 0000000000..5fa5eeedcd --- /dev/null +++ b/files/it/cambiamenti_di_xmlhttprequest_in_gecko1.8/index.html @@ -0,0 +1,17 @@ +--- +title: Cambiamenti di XMLHttpRequest in Gecko1.8 +slug: Cambiamenti_di_XMLHttpRequest_in_Gecko1.8 +tags: + - Estensioni + - Tutte_le_categorie + - XMLHttpRequest +translation_of: Mozilla/XMLHttpRequest_changes_for_Gecko_1.8 +--- +

Questo documento descrive alcuni dei cambiamento che sono stati fatti all'implementazione di XMLHttpRequest di Gecko dalla versione 1.7 (che era usata per esempio da Firefox 1.0) alla 1.8. Queste modifiche si applicano solo alle estensioni e alle applicazioni in XUL. Non si applicano invece alle pagine web. +

+

Cambiamenti a XMLHttpRequest.send

+

Se si passa un'istanza di nsIInputStream al metodo send, non bisogna più includere le intestazioni <tt>Content-Length</tt> e <tt>Content-Type</tt> all'inizio dello stream. Invece, l'intestazione <tt>Content-Length</tt> verrà dedotta dalla lunghezza dello stream e <tt>Content-Type</tt> sarà specificato manualmente chiamando il metodo setRequestHeader. Queste modifiche sono pienamente documentate in nsIXMLHttpRequest.idl. +

+

Cambiamenti a XMLHttpRequest.onreadystatechange

+

Il tipo di questo attributo ora è nsIOnReadyStateChangeHandler, non più nsIOnReadystatechangehandler (a S di State ora è maiuscola). +

{{ languages( { "en": "en/XMLHttpRequest_changes_for_Gecko1.8" } ) }} diff --git a/files/it/circa_il_document_object_model/index.html b/files/it/circa_il_document_object_model/index.html new file mode 100644 index 0000000000..733960449c --- /dev/null +++ b/files/it/circa_il_document_object_model/index.html @@ -0,0 +1,17 @@ +--- +title: Circa il Document Object Model +slug: Circa_il_Document_Object_Model +tags: + - DOM + - Tutte_le_categorie +translation_of: Web/API/Document_Object_Model +--- +

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/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" "b/files/it/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" new file mode 100644 index 0000000000..4826f292a1 --- /dev/null +++ "b/files/it/conoscere_i_css/cascata_ed_ereditariet\303\240/index.html" @@ -0,0 +1,86 @@ +--- +title: Cascata ed ereditarietà +slug: Conoscere_i_CSS/Cascata_ed_ereditarietà +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Building_blocks/Cascade_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 new file mode 100644 index 0000000000..f85f4b3db0 --- /dev/null +++ b/files/it/conoscere_i_css/che_cosa_sono_i_css/index.html @@ -0,0 +1,113 @@ +--- +title: Cosa è CSS +slug: Conoscere_i_CSS/Che_cosa_sono_i_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{ 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 new file mode 100644 index 0000000000..2c3719a7e7 --- /dev/null +++ b/files/it/conoscere_i_css/come_funzionano_i_css/index.html @@ -0,0 +1,117 @@ +--- +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 +--- +

+

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 new file mode 100644 index 0000000000..e26e23cf8b --- /dev/null +++ b/files/it/conoscere_i_css/css_leggibili/index.html @@ -0,0 +1,156 @@ +--- +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 +--- +

+

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 new file mode 100644 index 0000000000..09c970edd2 --- /dev/null +++ b/files/it/conoscere_i_css/i_selettori/index.html @@ -0,0 +1,150 @@ +--- +title: I Selettori +slug: Conoscere_i_CSS/I_Selettori +tags: + - Conoscere_i_CSS +translation_of: Learn/CSS/Building_blocks/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 new file mode 100644 index 0000000000..1575848fb2 --- /dev/null +++ b/files/it/conoscere_i_css/index.html @@ -0,0 +1,42 @@ +--- +title: Iniziare (Esercitazione di CSS) +slug: Conoscere_i_CSS +translation_of: Learn/CSS/First_steps +--- +

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" new file mode 100644 index 0000000000..b7d304c91f --- /dev/null +++ "b/files/it/conoscere_i_css/perch\303\251_usare_i_css/index.html" @@ -0,0 +1,106 @@ +--- +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 +--- +

 

+ +

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 new file mode 100644 index 0000000000..563552085e --- /dev/null +++ b/files/it/costruire_e_decostruire_un_documento_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/creare_estensioni_personalizzate_per_firefox_con_il_sistema_di_sviluppo_di_mozilla/index.html b/files/it/creare_estensioni_personalizzate_per_firefox_con_il_sistema_di_sviluppo_di_mozilla/index.html new file mode 100644 index 0000000000..48813c2b19 --- /dev/null +++ b/files/it/creare_estensioni_personalizzate_per_firefox_con_il_sistema_di_sviluppo_di_mozilla/index.html @@ -0,0 +1,588 @@ +--- +title: >- + Creare Estensioni personalizzate per Firefox con il sistema di sviluppo di + Mozilla +slug: >- + Creare_Estensioni_personalizzate_per_Firefox_con_il_sistema_di_sviluppo_di_Mozilla +tags: + - Documentazione_build + - Estensioni + - TraduzioneIncompleta + - Tutte_le_categorie + - XPCOM +translation_of: >- + Archive/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System +--- +
Nota: Tutte le istruzioni contenute in questo articolo si applicano solo al ramo di Mozilla 1.8 (cioè Firefox 1.5). Cercheremo di tenere questo articolo aggiornato ai cambiamenti. Ciò che può sicuramente essere escluso è che funzioni con i rami 1.7 (firefox 1.0) o precedenti.
+ +

Esiste un'abbondanza di materiale su come creare un'estensione per Firefox. Tutta questa documentazione però presume che si stia sviluppando un'estensione utilizzando esclusivamente XUL e JavaScript. Per estensioni più complesse, potrebbe essere necessario creare dei componenti in C++ per fornire funzionalità aggiuntive. Le ragioni per la quale potrebbe essere necessario includere componenti C++ nell'estensione, possono essere:

+ + + +

Questo articolo descrive come impostare l'ambiente di sviluppo per un'estensioni di Firefox grande e complessa con alcuni o tutti i requisiti menzionati più sotto. Il processo di raccolta di queste informazioni è stato un pò faticoso a causa della mancanza di informazioni pubblicate su questo argomento, ma è stato assistito da vari membri della comunità di sviluppo di Mozilla, che hanno mostrato una pazienza estrema nel rispondere alle domande di novizi impreparati. In quest'articolo potrebbero esserci molte cose inesatte, poco chiare o non accurate. L'obbiettivo è quello di limare queste istruzioni fino a farle divenire una guida definitiva per seri programmatori che intendano estendere la piattaforma di Firefox. Se sei uno dei tanti che ne sanno di più, il tuo aiuto per migliorare questo articolo sarà enormemente apprezzato.

+ +

Devo ricordare chenon è necessario compilare Mozilla o usare il Mozilla build system se si vogliono creare componenti C++ per Mozilla. Se si vuole solo creare un componente XPCOM o due, questa è probailmente una guida troppo elaborata, e si farebbe meglio a dare invece uno sguardo a questo documento. D'altra parte, si si è uno sviluppatore (o un team di sviluppo) con una certa esperienza, e si sa che si andrà a realizzare una estensione grande e complessa, si può tenere in considerazione l'approccio descritto in questo documento.

+ +

Un'ultima nota: ho provato queste tecniche solo con Firefox, ma probabilmente funzionano più o meno bene anche con altre piattaforme basate su Gecko, come Thunderbird o Seamonkey. Se qualcuno può confermarmelo e/o fornire linee guida su cosa differisce, Aggiorenrò l'articolo per incorporare tali informazioni.

+ +

Bambi Incontra Mozilla

+ +

Niente di questo doocumento è per i deboli di cuore, In particolare, i passi iniziali richiedono di effettuare il build di Mozilla, che è un enorme - no, gargantuesco! - progetto. Più di uno sviluppatore è stato portato sull'orlo della pazzia provando ad effettuare il build per la prima volta. Se non si è sviluppatori C++ esperti, non me ne preoccuperò. Passate a JavaScript.

+ +

Su piattaforme Windows

+ +

Per il mio primo build di Mozilla ho usato questa guida. Non riesco a ricordare perché, ma mi sono bloccato per diverse maniere, ed il tutto è terminato solo dopo aver preso molto più tempo di quanto avessi preventivato. Ecco una guida di insieme che ha ricevuto buone critiche. Seguite metodicamente ogni passo e probabilmente avrete la meglio. Tenete in mente che una volta fatto funzionare il build, probabilmente da lì in poi potrete lavorare senza sforzi. Forse.

+ +

I can’t even remember why anymore, but I got stuck in a number of places, and the whole affair ended up taking far longer than I originally expected. Much furniture was smashed, much hair torn out by the roots. Here’s a {{ mediawiki.external('http://whereswalden.com/mozilla/msvcfree/ comprehensive looking guide') }} that’s gotten good reviews. Follow every step methodically and you’ll probably be alright. Focus on the fact that once you get the build working, it’ll probably work effortlessly from then on. Maybe.

+ +

Su altre piattaforme

+ +

Non ho mai provato ad effettuare build su altre piattaforme, per cui non so nulla di questo. Immagino comunuque che nei sistemi Unix-like il procedimento sia più semplice. Si può consultare questa lista completa di piattaforme per cui sono disponibili istruzioni per il building.

+ +

Strutturare il proprio progetto

+ +

Mozilla include un insieme di estensioni complesse che sono integrate nel suo processo di build. Per questo motivo si rende necessario risolvere tutti i problemi correlati alla creazione e registrazione di componenti XPCOM, build di file JAR e manifests, installazione del tutto nella directory extensions/ di Firefox e così via. Si rende quindi necessario fare riferimento a questa struttura per costruire la nostra estensione.

+ +

Prima di tutto, pensiamo ad un nome accattivante per l'estensione e creiamo la directory con quel nome come sottodirectory di /mozilla/extensions/. Usare solo lettere minuscole. Ci dovrebbe essere un insieme di altre directory (inspector/, reporter/ e così via) nello stesso livello dell'albero di build.

+ +


+ Notare che prima di effettuare il build di qualcosa, il build system di Mozilla invoca un processo di configurazione che genera i makefile usati per effettuare il build, a partire dallo schema di makefile chiamato Makefile.in. Il makefile attuale tende ad essere molto simile o anche identico allo schema, ma la maggiore flessibilità data dalla sua generaziione automatica è uno dei punti che rendono il sistema di build così potente.

+ +

Anatomia di una semplice estensione C++

+ +

Assumiamo stiate usando C++ per scrivere componenti XPCOM che possono essere usati da altri componenti C++ o da JavaScript. Il processo di creazione di un componente è relativamente lineare, utilizzando il build system di Mozilla.

+ +

Nel caso più semplice, un componente consisterà di una singola directory principale con due sottodirectory, public/ e src/. La directory principale deve contenere un Makefile.in (da ora in poi ci riferiremo a questo come al makefile anche se sappiamo che viene usato per generare quello vero). Questo Makefile ci dà due informazioni. Primo, elenca le sotodirectory che compongono l'estensione, di modo che il build system sa dove cercare per makefile aggiuntivi. Secondo, istruisce il build system sul creare una nuova estensione, piuttosto che copiare i componenti direttamente nella directory binaria di Firefox. Il primo vantaggio di usare una estensione è che diventa veramente facile realizzare un pacchetto con tutto il necessario ed installarlo su un'altra macchina.

+ +

Detto ciò ecco il makefile di base, puro e semplice (Makefile.in nella directory principale dell'estensione):

+ +
DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= public src
+
+XPI_NAME		= myextension
+INSTALL_EXTENSION_ID	= myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+
+ +

Una descrizione dettagliata del processo di build, che descrive le caratteristiche chiave di questo makefile, può essere trovata a questo indirizzo. MODULE e XPI_NAME sono entrambi impostati come il nome della propria estensione. sono ripetuti in tutti i makefile del progetto di modo che ogni file sia inserito nella stessa posizione all'interno dell'area operativa XPI (XPI staging area , v. sotto). INSTALL_EXTENSION_ID è l'ID univoco della propria estensione. Questo può essere un GUID, ma il formato visto sopra è più grazioso e, diciamocelo, molto più semplice da ricordare. Non è necessario fornire un XPI_PKGNAME, ma se si crea un file XPI, pronto per la distribuzione, viene automaticamente creato nella radice dell'area operativa XPI (/mozilla/$(MOZ_OBJDIR)/dist/xpi-stage/).

+ +

Ogni estensione deve includere un file install.rdf che indica a Firefox come deve essere installata. Questo file dovrebbe essere posizionato nella directory principale dell'estensione ed essere simile a questo:

+ +
<?xml version=\"1.0\"?>
+
+<RDF xmlns=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"
+     xmlns:em=\"http://www.mozilla.org/2004/em-rdf#\">
+  <Description about=\"urn:mozilla:install-manifest\">
+    <em:id>myextension@mycompany.com</em:id>
+    <em:version>0.1</em:version>
+
+    <em:targetApplication>
+      <!-- Firefox -->
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.0+</em:minVersion>
+        <em:maxVersion>1.0+</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- front-end metadata -->
+    <em:name>My First Extension</em:name>
+    <em:description>Just an example.</em:description>
+    <em:creator>allpeers.com</em:creator>
+    <em:homepageURL>http://www.allpeers.com/blog/</em:homepageURL>
+  </Description>
+</RDF>
+
+ +

MozillaZine ha una descrizione dettagliata del formato del file install.rdf. Usare la variabile DIST_FILES nel makefile per dire a make di copiare il file nella directory dell'estensione e (opzionalmente) nel file XPI.

+ +

Interfacce pubbliche

+ +

La directory public/ contiene ogni interfaccia che deve essere accedibile da altri moduli. Questi possono essere file IDL che descrivono interfacce XPCOM, i quali vengono usati per generare file header C++ per l'inclusione all'interno del proprio file sorgente. Possono anche essere normali file header C++ che vengono usati direttamente da altri moduli. Il modo più facile per permettere questa ultimaoperazione è l'implementazione inline di tutti i metodi, così da non avere dipendenze aggiuntive in fase di linking. Si dovrà altrimenti eseguire illink statico al proprio modulo se si usano questi header pubblici in altri moduli. Personalmente scoraggerei qyesta pratica (tra l'altro, il linking static significa avere lo stesso codice caricato più di una volta in memoria, il quale non sarà poi disponibile per Javascript o altri linguaggi diversi dal C++) e incoraggerei l'uso di XPCOM dove possibile.

+ +

Il Makefile nella directory public/ dovrebbe seguire questo modello:

+ +
DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE		= myextension
+XPIDL_MODULE	= myextension
+
+XPI_NAME = myextension
+
+EXPORTS = \
+		myHeader.h \
+		$(NULL)
+
+XPIDLSRCS	= \
+		myIFirstComponent.idl \
+		myISecondComponent.idl \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+ +

XPIDL_MODULE è il nome del file XPT generato che contine informazioni de tipo riguardanto le proprie interfacce IDL. Se si hanno più moduli, assicurarsi assolutamente di usare un valore differente di XPIDL_MODULE per ognuno. In caso contrario il primo modulo XPT verrà sovrascritto dal secondo e si otterrnno errori NS_ERROR_XPC_BAD_IID quando si proverà ad accedere alle interfacce IDL dal proprio codice. I file sotto EXPORTS vengono copiati direttamente nella directory /mozilla/$(MOZ_OBJDIR)/dist/include/myextension/ e sono quindi accedibili da altri moduli (il valore di MOZ_OBJDIR è definito in /mozilla/.mozconfig). XPIDLSRCS sono eseguiti attraverso il processore IDL, e gli header C++ generati vengono copiati nella stesa directory di inclusione. In aggiunta, viene generato un file XPT (tipo libreria) e posizionato nella sottodirectory components/ dell'estensione.

+ +

File sorgenti

+ +

Ora è il momento di creare il makefile ed i file sorgente nella sottodirectory src/. Se si stanno reimplementando interfacce descritte usando IDL, la maniera più facile di farlo è lasciare la directory src/ vuota ed eseguire make solo nella directory public/; spiegheremo tra breve il perché.

+ +

Si può poi aprire il file header generato per la propria interfaccia da /mozilla/$(MOZ_OBJDIR)/dist/include/myextension/. QUesta directory contiene i file .H e .CPP dei componenti che possono essere copiati ed incollati all'interno dei propri file di implementazione. Tutto ciò che c'è da fare è riempire gli abbozzi di implementazione presenti nel file C++ e si è pronti per partire.

+ +

Ecco un esempio del makefile da inserire all'interno della directory src:

+ +
DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME =  myExtension
+
+XPI_NAME = myextension
+
+REQUIRES	= xpcom \
+		  string \
+		  $(NULL)
+
+CPPSRCS		= \
+		  myFirstComponent.cpp \
+		  mySecondComponent.cpp \
+		  myExtension.cpp \
+		  $(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+EXTRA_DSO_LDOPTS += \
+  $(XPCOM_GLUE_LDOPTS) \
+  $(NSPR_LIBS) \
+  $(NULL)
+
+# NOTE: If you are coding against the 1.8.0 branch (not 1.8 branch or trunk), the
+# above line won't work, due to linker flag issues. Use the following
+# variables instead:
+#
+# EXTRA_DSO_LDOPTS += \
+#   $(MOZ_COMPONENT_LIBS) \
+#   $(NULL)
+#
+# Unfortunately, using MOZ_COMPONENT_LIBS links against xpcom_core, which means
+# your components will not work in future versions of Firefox.
+
+ +

La sezione REQUIRES dice a make quali moduli sono utilizzati dal proprio componente. Questo causa l'aggiunta delle sottodirectory di /mozilla/$(MOZ_OBJDIR)/dist/include/ interessate nel path di inclusione del compilatore C++. Se si stanno includendo header Mozilla ed il compilatore non riesce a trovarli, potrebbe benissimo significare che in REQUIRES non sono stati elencati tutti i moduli necessari. CPPSRCS i file sorgente che devono essere compilati.

+ +

In questo esempio, i primi due file contengono l'implementazione dei due componenti dell'estensione. Il fuile finale, myExtension.cpp, contiene il codice necessario per registrare questi componenti, come descritto nella prossima sezione.

+ +

Registrare i componenti

+ +

Pre poter utilizzare i propri componenti da altri moduli C++ e JavaScript, devono prima essere registrati. Per fare ciò, l'estensione deve implementare una classe che espone l'interfaccia nsIModule, che ha i metodi per accedere ai componenti definiti in un modulo. Fortunatamente, questo può essere fatto attraverso l'uso di semplici macro, in modo da non doversi preoccupare dei dettagli di funzionamento.

+ +

Il primo passo è la definizione di un CID, ID di contratto (contract ID ) ed un nome di classe per ogni componente. Inserire il codice seguente (adattando alle proprie esigenze i vari #defines) all'interno dell'header di ogni componente che si vuole istanziare tramite il component manager (gestore dei componenti ):

+ +
// {00000000-0000-0000-0000-000000000000}
+#define MYFIRSTCOMPONENT_CID \
+	{ 0x00000000, 0x0000, 0x0000, \
+	{ 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 } }
+
+#define MYFIRSTCOMPONENT_CONTRACTID	\"@mycompany.com/myfirst;1\"
+#define MYFIRSTCOMPONENT_CLASSNAME	\"My First Component\"
+
+ +

Ovviamente è necessario compilare il CID con GUID vero. In Windows, questo può essere fatto usando guidgen.exe. Gli utenti Unix possono usare uuidgen (fornito direttamente da molte distribuzioni unix e Linux).

+ +

Si deve poi creare il file myExtension.cpp in modo simile a questo:

+ +
#include \"nsXPCOM.h\"
+
+#include \"nsIGenericFactory.h\"
+
+/**
+ * Componenti da registrare
+ */
+#include \"myFirstComponent.h\"
+#include \"mySecondComponent.h\"
+
+NS_GENERIC_FACTORY_CONSTRUCTOR(myFirstComponent)
+NS_GENERIC_FACTORY_CONSTRUCTOR(mySecondComponent)
+
+//----------------------------------------------------------
+
+static const nsModuleComponentInfo components[] =
+{
+	{
+		MYFIRSTCOMPONENT_CLASSNAME,
+		MYFIRSTCOMPONENT_CID,
+		MYFIRSTCOMPONENT_CONTRACTID,
+		myFirstComponentConstructor
+	},
+	{
+		MYSECONDCOMPONENT_CLASSNAME,
+		MYSECONDCOMPONENT_CID,
+		MYSECONDCOMPONENT_CONTRACTID,
+		mySecondComponentConstructor
+	},
+};
+
+NS_IMPL_NSGETMODULE(MyExtension, components)
+
+ +

La macro NS_IMPL_NSGETMODULE crea l'oggetto modulo appropriato fornendo l'accesso a tutti i componenti elencati nell'array nsModuleComponentInfo.

+ +

Effettuare il build

+ +

Come detto prima, probabilmente si vuole effettuare il build di una estensione immediatamente dopo aver creato i propri file IDL in modo da generare gli abbozzi C++ per le proprie implementazioni dei componenti. Assumo che abbiate già compilato con successo Firefox. Se non è così, andate all'inizio di questo articolo e non tornate finché non avrete un firefox.exe fuzionante. Non passate dal via. Non ritirate 20 Euro.

+ +

Ancora qui? Okay, ora va modificato il proprio .mozconfig (nella directory radice /mozilla/) di modo che la propria estensione venga compilata con insieme Mozilla. Aggiungere le seguenti linee alla fine del file:

+ +
ac_add_options --enable-extensions=default,myextension
+
+ +

Lanciare poi make dalla directory radice di Mozilla:

+ +
make -f client.mk build
+
+ +

Anche si si ha una versione compilata recentemente di Firefox, si dovrà attendere per un po' mentre il make visita ricorsivamente tutto l'albero di directory del codice sorgente di Mozilla cercando nuovo materiale (la mia macchina, che è abbastanza veloce, impiega 10-15 minuti). Raggiungerà anche la vostra estensione e genererà una serie di elementi all'interno di /mozilla/$(MOZ_OBJDIR)/:

+ + + +

Gran parte di questo materiale non è creato in questo primo passo finché make segnalerà di non trovare i file sorgenti per i componenti. Non c'è da preoccuparsi di questo: tutto ciò che serve sono i file header generati che contengono gli abbozzi delle implementazioni C++. Perché la compilazone possa terminare devono essere rimpolpate le implementazioni dei componenti. Va ricordato che non si dovrebbe mai modificare uno di questi file generati automaticamente. Vanno sempre modificati i file usati per generarli e riavviari make. Possono esserci delle eccezioni, a questa regola, ma se si stanno cambiando i file automaticamente generati, molto ptobabilmente si sta sbagliando qualcosa.

+ +

Il processo di esplorazione dell'intero albero di Mozilla dura molto tempo. Se si ha già una build di Mozilla, è possibile evitarlo creando un makefile direttamente per ogni estensione. Nella directory radice del proprio $(MOZ_OBJDIR) si digita (da una shell compatibile con bash):

+ +
../build/autoconf/make-makefile extensions/myextension
+
+ +

Se la propria $(MOZ_OBJDIR) è posizionata fuori da $(TOPSRCDIR), è necessario digitare:

+ +
$(TOPSRCDIR)/build/autoconf/make-makefile -t $(TOPSRCDIR) extensions/myextension
+
+ +

perché lo script sappia dove si trovano i sorgenti (it'll use the extension path you gave it relative to the current dir to figure out where you want your makefiles to go).

+ +

Questo genererà il makefile appropriato per l'estensoine. Che si effettui il build di tutto l'albero Mozilla o si prenda questa scorciatoia, da ora in poi è possibile compilare andando in /mozilla/$(MOZ_OBJDIR)/extensions/myextension/ e digitando "make" sulla linea di comando. Questo dovrebbe effettuare il build del proprio componente senza disturbare il resto di Mozilla. Se tutto funziona, si vedrà il proprio file XPI nell'area operativa XPI. Si vedrà anche la versione "esplosa" del pacchetto XPI (ad esempio la struttura decompressa delle directory) all'interno di /mozilla/$(MOZ_OBJDIR)/dist/bin/extensions. (se qualcosa va storto, cercate cosa, risolvetelo e poi tornate qui ed aggiungete la soluzione a questo articolo.)

+ +

Per assicurarsi che il processo di build sia veramente finito, lanciare Firefox e controllare che la propria estensione sia elencate selezionando Tools/Extensions. Se si usa Firefox come browser predefinto (e se no, perché?), potrebbe essere necessario chiudere la versione "regolare" di Frefox prima di eseguire quella modificata. Se questo accade, si può provare ad impostare la variabile d'ambiente MOZ_NO_REMOTE al valore "1" prima di eseguire la versione di Firefox di sviluppo. Si avràa bisogno inoltre di usare un profilo differente per questa versione:

+ +
firefox -Pdevelopment
+
+ +

Dove è sostituito dal nome del nuovo profilo creato. Questo permetterà di eseguire entrambe le versioni di Firefox simultaneamente, permettendo di risparmiare tempo durante il ciclo di build/test.

+ +

Chrome, dolce Chrome

+ +

Nota: il titolo originale e' "No Place Like Chrome", una parafrasi di "No Place Like Home", che non ha equivalenti validi in italiano ma che rassomiglia a "Casa dolce Casa" Yippee-ki-yay! Ora abbiamo una estensione che fa, be', assolutamente nulla. E' ora di fare qualcosa con questi fantastici componenti che sono stati implementati e registrati. Il modo più semplice per fare questo è scrivere un po' di codice JavaScript e XUL. A questo punto, sarebbe di aiuto avere un po' di esperienza nella scrittura di estensioni "regolari" (ad esempio, che non utilizzano componenti C++ personali). Se non si ha mai provato, il mio consiglio è di pensare ad una idea carina per qualcosa di semplice che avreste sempre voluto avere in Firefox e scriverla. Anche solo visualizzare un nuovo elemento di menu che apre una finestra di dialogo "Hello, World!" è pur sempre un grande esercizio di riscaldamento.

+ +

Assumiamo ora che sappiate scrivere estensioni in XUL/JavaScript, siete a conoscenza del fatto che molte delle parti importanti vanno a finire nella directory chrome/ della vostra estensione. Bene, il fatto che si stiano usando anche componenti C++ non cambia nulla. Per questo bisogna creare le solite directory content/, locale/ e skin/ in cui inserire i propri file chrome. Personalmente mi piace posizionare questi direttamente nella directory radice del modulo, ma suppongo non faccia alcuna differenza se si preferisce inserirli in delle sottodirectory chrome/ o altro ancora. Spazio alla libertà!

+ +

Una volta scritti i necessari file chrome (ad esempio un overlay che aggiunga una voce di menu per istanziare ed usare uno dei propri componenti), è necessario inserirli in un pacchetto come parte della propria estensione. Questo si fa utilizzando un Manifest JAR. Per il nostro semplice esempio di estensione, il file potrebbe somigliare a questo:

+ +
myextension.jar:
+%  content myextension %content/
+%  locale myextension en-US %locale/en-US/
+%  skin myextension classic/1.0 %skin/classic/
+%  overlay chrome://browser/content/browser.xul chrome://myextension/content/MyExtensionOverlay.xul
+	content/MyExtensionOverlay.js		(content/MyExtensionOverlay.js)
+	content/MyExtensionOverlay.xul		(content/MyExtensionOverlay.xul)
+	locale/en-US/MyExtension.dtd		(locale/en-US/MyExtension.dtd)
+	locale/en-US/MyExtension.properties	(locale/en-US/MyExtension.properties)
+	skin/classic/MyExtension.css		(skin/classic/MyExtension.css)
+
+ +

Questo codice va inserito in un file chiamato jar.mn nella directory radice della propria estensione, assicurandosi che i percorsi tra parentesi puntino ai file attuali (se interpretati in relazione con la directory radice). Deve inoltre essere fatta una piccola modifica al makefile nella stessa directory, aggiungendo la linea:

+ +
USE_EXTENSION_MANIFEST = 1
+
+ +

Questo indica al make di creare un singolo file manifest chiamato chrome.manifest invece di creare file manifest con strani nomi per ogni pacchetto.

+ +

Dopo aver lanciato ancora make, si dovrebbe veder apparire una nuova sottodirectory chrome nella propria estensione (/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions/myextension@mycompany.com/). Da notare che la directory chrome contiene un file JAR (ad esempio ZIP) con tutti i file chrome elencati in jar.mn cos'ì come una completa struttura delle directory alla strgua di quella presente nel file JAR. La struttura, comunque, è vuota. Perché? Non lo so. Non preoccupatevi di questo, i file contenuti nel JAR gli unici che vengono utilizzati.

+ +

Complicare il tutto

+ +

Se si sta sviluppando una estensione veramente complessa con molti componenti XPCOM, probabilmente si vorrà dividere il proprio codice in moduli più piccoli.

+ +
Estensioni un po' complicate
+ +

Per una estensione moderatamente complicata, probabilmente è sufficiente dividere il codice in un livello singolo di moduli. Assumiamo che abbiate un modulo base/ che definisce un insieme base di componenti XPCOM ed un modulo advanced/ che definisce alcuni chrome così come altri componenti che utilizzano quelli di base. La struttura completa delle directory somiglierà a questa:

+ + + +

Oltre a ciò, non cambia molto altro. I makefile in base/ e advanced/ dovrebbero essere più o meno simili al makefile originale nella directory radice, ricordando di cambiare la variabile DEPTH poiché questi sono stati spostati di un livello di directory rispetto alla radice di Mozilla.

+ +

Va inoltre rimossa la variabile DIST_FILES poiché il suo valore viene preso dal makefile di livello più alto. Ogni makefile che genera qualcosa dovrebbe definire la variabile XPI_NAME per assicurarsi che i file generati finiscano nella directory della propria estensione e non nella directory globale components/. Basta comunuque definire la variabile in ogni makefile per stare tranquilli. Si può usare lo stesso valore di MODULE sia in base/ che in advanced/ di modo che tutti i fileinclude vadano nella stessa directory, assicurandosi però di non usare lo stesso stesso valore XPIDL_MODULE nelle due directory public/, o una delle librerie di tipo componenti (ad es. file XPT) sovrascriverà l'altra e si scatenerà l'inferno.

+ +

Ogni modulo deve inoltre avere un valore differente per la variabile LIBRARY_NAME. Questo è il nome della libreria dinamica generata, per cui se devono essere richiamate le librerie "myBase" e "myAdvanced", useremo i nomi con estensione myBase.dll e myAdvanced.dll (almeno in Windows). Ognuno dei due moduli andrà ad avere un file C++ separato per la registrazione dei componenti. Per questo motivo ci saranno due file simili a myExtension.cpp visto nell'esempio orginale, diciamo Base.cpp e Advanced.cpp. Infine, ogni modulo avrà ovviamente il proprio jar.mn, anche se essi possono fare riferimento allo stesso nome di file e pacchetto JAR, se si vuole che tutti i file chrome siano organizzati in un singolo pacchetto/file JAR. L'unico file che resta immutato è install.rdf, che ancora esiste unicamente nella directory radice dell'estensione.

+ +

Il makefile di livello più alto sarà ora simile a questo:

+ +
DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= base advanced
+
+XPI_NAME               = myextension
+INSTALL_EXTENSION_ID   = myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+
+ +
Estensioni veramente complicate
+ +

Ad un certo momento, anche un singolo modulo potrebbe crescere al punto da dover essere diviso in sottomoduli. La differenza tra avere moduli separati ed avere un modulo singolo con sottomoduli separati è che i sottomoduli condividono lo stesso file per la registrazione dei componenti (il famoso file myExtension.cpp), e se compilato creano una unica libreria dinamica. La decisione di dividere un modulo in sotomoduli riguarda solo l'organizzazione del codice; non avrà ripercussioni sul prodotto finale.

+ +

Per dividere un modulo in sottomoduli, va prima creata una sottodirectory per ognuno. Dopodiché va creata una directory build/. Ogni sottomodulo sarà configurato per creare una libreria static, che la directory build riunirà per creare una unica libreria dinamica dei componenti. Confusi? Ecco un esempio, che mostra il ramo advanced/ della directory myextension/:

+ + + +

Come si vede, abbiamo diviso advanced/ in due sottomoduli: intricate/ e multifarious/, ed abbiamo aggiunto una sottodirectory build/. Abbiamo lasciato le directory chrome direttamente in advanced/, dato che non appartengono a nessun sottomodulo in particolare. QUesto vuol dire che il file jar.mn sarà nello stesso posto.

+ +

I makefile di intricate/ and multifarious/ somiglieranno molto al makefile originale di advanced/ anche se devono essere un po' manipolati. COme al solito, va aggiustato il valore della variabile DEPTH dato che i makefile sono ora più in profondità nella struttura delle directory. Andrebbe inoltre cambiato il valore di LIBRARY_NAME per indicare che si sta generando una libreria static per ogni sottomodulo. Per convenzione viene usato il suffisso "_s" a questo scopo . Chiamiamo quindi le librerie "myIntricate_s" e "myMultifarious_s". Infine, definiamo la variabile FORCE_STATIC_LIB, ottenendo un makefile il cui inizio è simile a questo:

+ +
DEPTH		= ../../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+LIBRARY_NAME = myIntricate_s
+FORCE_STATIC_LIB = 1
+
+XPI_NAME = myextension
+
+...altre cose qui...
+
+ +

Il makefile di build compone insieme tutte le librerie statiche generate dai sottomoduli e crea una libreria (dinamica)dei componenti:

+ +
DEPTH		= ../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME = myAdvanced
+
+XPI_NAME = myextension
+
+DEFINES += XPCOM_GLUE
+
+SHARED_LIBRARY_LIBS = \
+		$(DIST)/lib/$(LIB_PREFIX)myIntricate_s.$(LIB_SUFFIX) \
+		$(DIST)/lib/$(LIB_PREFIX)myMultifarious_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcomglue_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcom.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)nspr4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plds4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plc4.$(LIB_SUFFIX) \
+		$(NULL)
+
+REQUIRES	= \
+		xpcom \
+		string \
+		$(NULL)
+
+CPPSRCS		= \
+		Advanced.cpp \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+LOCAL_INCLUDES += \
+        -I$(srcdir)/../intricate/src \
+        -I$(srcdir)/../multifarious/src \
+        $(NULL)
+
+ +

Il makefile nella directory advanced/ dovrebbe elencare le directory intricate/, multifarious/ e build/ nel calore della sua variabile DIRS. CIs i deve assicurare che build/ sia elencato come ultimo, dato che non può essere creata la libreria di componenti fino a quando gli altri makefile non hanno terminato.

+ +

Altri argomenti

+ +

Aggiungere file di dati alle proprie estensioni

+ +

In alcuni casi, si potrebbe voler includere file aggiuntivi nella propria estensione che non appartengono alla sottodirectory chrome/. Alcuni esempi potrebbero essere file di database o schemas XML. A questo proposito è possibile aggiungere un passo all'interno del makefile, per copiare i file dall'albero sorgente alla directory di destinazione dell'estensione.

+ +
Copiare file di dati nella directory di destinazione
+ +

Diciamo che avete alcuni file di dati contenti informazioni statistiche che volete include nella vostra estensione e rendere disponibile ai vostri componenti. Avete inserito questi file, con estensione .TXT, in una sottodirectory stats/ nella directory sorgente dell'estensione. La seguente regola di makefile può essere usata per copiare tali file nella directory di destinazione finale dell'estensione:

+ +
libs::
+	if test ! -d $(FINAL_TARGET)/stats; then \
+		$(NSINSTALL) -D $(FINAL_TARGET)/stats; \
+	fi
+	$(INSTALL) $(srcdir)/*.txt $(FINAL_TARGET)/stats
+
+ +
Accedere ai file di dati tramite Componenti
+ +

Il trucco per accedere ai propri file di dati è immaginare dove si trova la home directory della propria estensione. Alcune voci sostengono che in un prossimo futuro, questo sarà possibile attraverso l'interfaccia nsIExtensionManager o qualcosa di simile. Nel frattempo, c'è un hack semplice ed affidabile che può essere usato per raggiungere lo scopo. Nell'implementazione di ogni compoente JavaScript XPCOM, è presente uno speciale simbolo __LOCATION__ (due caratteri di underscore all'inizio e alla fine del nome) che punta al file di implementazione del componente. Perciò si può scrivere un semplice componente che deduce la directory radice della propria estensione estrapolandola da lì.

+ +

Questo articolo spiega come creare un componente XPCOM in JavaScript. Si avrà bisogno di un file IDL per una interfaccia simile a questa:

+ +
interface myILocation : nsISupports
+{
+    readonly attribute nsIFile locationFile;
+};
+
+ +

Il file IDL va posizionato nella directory public/ del progetto o sottoprogetto. Nella directory src/, va inserito il file JavaScript che implementa il componente. L'implementazione del componente includerà i metodi per ottenere il percorso o il file per la home directory dell'estensione:

+ +
myLocation.prototype =
+{
+  QueryInterface: function(iid)
+  {
+    if (iid.equals(nsISupports))
+      return this;
+    if (iid.equals(myILocation))
+      return this;
+
+    Components.returnCode = Components.results.NS_ERROR_NO_INTERFACE;
+    return null;
+  },
+
+  get locationFile()
+  {
+     return __LOCATION__.parent.parent;
+  }
+}
+
+ +

Questo metodo assume che il componente risieda in una sottodirectory di quella dell'estensione (per convenzione, questa directory viene chiamata components/). La proprietà parent di __LOCATION__ ritorna components/, ed il suo valore parent è la home directory dell'estensione.

+ +

L'ultimo passo è la modifica del makefile della directory sorgente dove si ha inserito il proprio file JavaScript di modo che venga copiato nel luogo appropriato all'interno dell'estensione:

+ +
libs::
+	$(INSTALL) $(srcdir)/*.js $(FINAL_TARGET)/components
+
+ +

Ora è possibile istanziare il componente ed usare la proprietà locationFile per ottenere una interfaccia nsIFile che punti alla home directory dell'estensione.

+ +

Usare librerie di terze parti

+ +

Per estensioni più sofosticate, si potrebbe voler integrare librerie di terze parti che forniscono funzionalità specializzare per la connettività al database, processing di immagini, rete e simili. Se si vuole che la propria estensione funzioni su tutte le piattaforme Firefox, è necessario avere il codice sorgente della libreria in questione, quindi assumo che questo sia disponibile.

+ +

l'approccio migliore nell'ottica del ciclo di sviluppo è creare un makefile come quello di Mozilla per la libreria. Questa maniera funziona bene per librerie che hanno un processo di make lineare, senza necessità di configurazioni eccessive. Un buon esempio di questo è la libreria SQLite inclusa nell'albero di build di Mozilla in db/sqlite. Adattando il makefile in quetso modo, la libreria è creata come parte del processo standard di build di Mozilla, il che elimina eventuali altri passi di compilazione. Il difetto di questo procedimento è che il makefile va aggiornato ogni qualvolta viene rilasciata una nuova versione della libreria.

+ +

Per librerie che hanno un complesso procedimento di configurazione, usano un compilatore non standard o altre caratteristiche speciali. potrebbe non essere praticabile la creazione di un Makefile compatibile con Mozilla. In questo caso, raccomanderei di inserire l'intera distribuzione della libreria all'interno del progetto o del sottoprogetto che la usa. Per cui se la libreria acmelib viene usata all'interno del sottoprogetto multifarious/ visto nell'esempio sopra, dovrebbe essere inserita in una sottodirectory di quella del sottoprogetto (allo stesso livello di public/ e src/).

+ +

Ovviamente, questo significa che si dovrà compilare manualmente acmelib su tutte le piattaforme prima di lanciare il build di Mozilla. Ma alla fine ci si potrà riferire ai file include ed importare le librerie dal proprio componente usando percorsi dei path relativi.

+ +

Build per più piattaforme

+ +

TODO

+ +
+

Informazioni riguardo il documento originale

+ + +
diff --git a/files/it/creare_patch/index.html b/files/it/creare_patch/index.html new file mode 100644 index 0000000000..3498767037 --- /dev/null +++ b/files/it/creare_patch/index.html @@ -0,0 +1,37 @@ +--- +title: Creare patch +slug: Creare_patch +translation_of: Mercurial/Using_Mercurial +--- +

Dopo aver avuto accesso al codice, dopo aver apportato ad esso delle modifiche, una volta costruito e testato, può darsi che si desideri che queste modifiche vengano riviste e accettate. Per far ciò, occorre creare una lista dei file che sono stati modificati, che chiameremo + + patch + o + + diff file + .

+

Creare il diff di un singolo file == Per creare il diff di un singolo file locale rispetto al file attualmente nel repository, si utilizzi:

+
$ cvs diff -u8p Winning eleven 11 by Tony Montana
+
+

Questo comando crea un diff nel cosiddetto formato 'unificato' (opzione <tt>-u</tt>), con 8 righe di contesto. Il diff è inviato per default allo stdout. Per ridirigere l'output su un file, si utilizzi qualcosa come:

+
$ cvs diff -u8p Winning eleven 11 by Tony Montana >
+
+

Creare un diff su più file

+

Se, invece di utilizzare un normale file per NOMEFILE, si fornisce una directory, questa directory e tutte le sue sottodirectory verranno lette in modo ricorsivo. Per esempio

+
$ cvs diff -u8p . > FILE_DI_OUTPUT
+
+

compara tutti i file nella directory corrente e nelle sue subdirectory con tutte le versioni nel repository, e scrive le differenze combinate in un file chiamato FILE_DI_OUTPUT, utilizzando 8 righe di contesto.

+

Vi dovrebbe essere sufficiente contesto nella patch perchè venga compreso senza aprire il file sorgente. Le linee guida di default utilizzano 8 righe di contesto; se non sono sufficienti, verrà richiesto di rendere la patch comprensibile, si rimpiazzi 8 con un numero più elevato. Inoltre si noti che più contesto si include, più probabilità vi sono che il file venga incluso, se esso differisce pesantemente dal sorgente originale.

+

Includere i nuovi file in una patch

+

Per includere i nuovi file in una patch, si utilizzi l'opzione <tt>-N</tt>:

+
$ cvs diff -u8pN . > FILE_DI_OUTPUT
+
+

Un problema comune è che + + cvs diff' + non include i nuovi file su cui non è stato eseguito un cvs add, e questo comando richiede accesso al repository.

+

La soluzione è utilizzare la utility cvsdo (), che modifica <tt>CVS/Entries</tt> per far credere al cvs che il file sia stato aggiunto al repository:

+
$ cvsdo add NUOVOFILE
+$ cvs diff -u8pN NEWFILE > FILE_DI_OUTPUT
+
+

Si noti che questo trucco non funziona per le nuove directory; per queste, cvs add deve realmente modificare il repository immediatamente, il chè richiede un accesso in scrittura.

diff --git a/files/it/creare_plugin_mozsearch/index.html b/files/it/creare_plugin_mozsearch/index.html new file mode 100644 index 0000000000..fb3236733b --- /dev/null +++ b/files/it/creare_plugin_mozsearch/index.html @@ -0,0 +1,190 @@ +--- +title: Creare Plugin MozSearch +slug: Creare_Plugin_MozSearch +tags: + - Plugin_di_ricerca +translation_of: Mozilla/Creating_MozSearch_plugins +--- +

Firefox 2 supporta MozSearch, una versione semplificata del formato OpenSearch di A9 per creare i plugin di ricerca. Anche i plugin OpenSearch sono supportati; vedi il sito di OpenSearch per ulteriori dettagli.

+ +

Un plugin MozSearch è un file XML che descrive il motore di ricerca, il suo URL e i parametri che occorre passare a questo URL.

+ +
Nota: MozSearch è un formato specifico di Firefox; se si desidera scrivere un plugin che sia compatibile con altri browser, occorre utilizzare il sistema OpenSearch. Fortunatamente i due formati sono molto simili ed è facile passare da uno all'altro a seconda delle proprie necessità.
+ +

Il file di plugin

+ +

Il file XMl che descrive un motore di ricerca è abbastanza semplice e segue il template basilare sotto riportato. Le sezioni in corsivo devono essere personalizzate basandosi sui bisogni dello specifico plugin di ricerca che si sta scrivendo.

+ +
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
+<ShortName>nomeMotore</ShortName>
+<Description>descrizioneMotore</Description>
+<InputEncoding>codificaInput</InputEncoding>
+<Image width="16" height="16">data:image/x-icon;base64,immagine</image>
+<Url type="text/html" method="metodo" template="URLdiRicerca">
+  <Param name="nomeParametro1" value="valoreParametro1"/>
+  ...
+  <Param name="nomeParametroN" value="valoreParametroN"/>
+</Url>
+<Url type="application/x-suggestions+json" template="suggerimentoURL"/>
+<SearchForm>cercaDaURL</SearchForm>
+</SearchPlugin>
+
+ +
+
nomeMotore
+
Un nome in breve per il motore di ricerca.
+
+ +
+
descrizioneMotore
+
Una breve descrizione del motore di ricerca.
+
+ +
+
codificaInput
+
La codifica utilizzata per i dati in input.
+
+ +
+
immagine
+
Un'icona a 64 bit di 16x16 pixel che rappresenta il logo del motore di ricerca. Un tool utile per costruire i dati da immettere qui si trova al seguente URL: The data: URI kitchen.
+
+ +
+
URLdiRicerca
+
Descrive l'URL o gli URL da usare per la ricerca. L'attributo metodo indica se si debba utilizzare il metodo di ricerca GET o POST. L'attributo template indica l'URL di base per l'interrogazione del motore di ricerca.
+
+ +
+
E' possibile specificare due tipi di URL:
+
+ + + +
+
Per entrambi i tipi di URL è possibile utilizzare {searchTerms} per sostituire i termini di ricerca inseriti dall'utente nella barra di ricerca.
+
+ +
+
Per i suggerimenti sulla ricerca, l'URL del template specificato viene utilizzato per recuperare una lista di suggerimenti nel formato JavaScript Object Notation (JSON). Per ulteriori dettagli su come implementare il supporto ai suggerimenti di ricerca su un server, si veda Supportare i suggerimenti nei plugin di ricerca.
+
+ +

Image:SearchSuggestionSample.png

+ +
+
Parametri
+
I parametri che occorre passare insieme all'interrogazione, come coppie chiave/valore. Quando si specifica i valori, è possibile utilizzare {searchTerms} per inserire i termini di ricerca inseriti dall'utente nella barra di ricerca.
+
+ +
+
Form di ricerca
+
L'URL da richiedere per aprire la pagina di ricerca nel sito per il quale il plugin di ricerca è stato progettato. Questo fornisce un modo per Firefox per permettere all'utente di visitare il direttamente il sito.
+
+ +

Ricerca automatica dei plugin

+ +

Un sito web che offre un plugin di ricerca può pubblicizzarlo in modo che gli utenti di Firefox possano facilmente scaricarlo e installarlo.

+ +

Per supportare la ricerca automatica dei plugin, occorre semplicemente aggiungere una linea alla sezione <HEAD> della pagina web:

+ +
<link rel="search" type="application/opensearchdescription+xml" title="nomeRicerca" href="urlPlugin">
+
+ +

Gli elementi da sostituire sono spiegati di seguito:

+ +
+
nomeRicerca
+
Il nome della ricerca, come "Cerca in MDC" o "Cerca in Yahoo!".
+
+ +
+
urlPlugin
+
L'URL del plugin di ricerca in XML, dal quale il browser può scaricarlo.
+
+ +

Se il sito offre più plugin di ricerca, è possibile supportare la ricerca automatica per tutti quanti. Un esempio:

+ +
<link rel="search" type="application/opensearchdescription+xml" title="MioSito: cerca per autore" href="http://www.miosito.com/per_autore.xml">
+<link rel="search" type="application/opensearchdescription+xml" title="Miosito: cerca per titolo" href="http://www.miosito.com/per_titolo.xml">
+
+ +

In questo modo, il sito può offrire entrambi i plugin di ricerca (ricerca per titolo e ricerca per autore) come entità separate.

+ +

Esempio: cercare in Yahoo!

+ +

Il seguente XML è il plugin di ricerca per Firefox 2 per le ricerche attraverso Yahoo!:

+ +
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
+<ShortName>Yahoo</ShortName>
+<Description>Cerca in Yahoo</Description>
+<InputEncoding>UTF-8</InputEncoding>
+<SuggestionUrl>http://ff.search.yahoo.com/gossip?output=fxjson&command=</SuggestionUrl>
+<Image width="16" height="16">data:image/x-icon;base64,R0lGODlhEAAQAJECAP8AAAAAAP///wAAACH5BAEAAAIALAAAAAAQABAAAAIplI+py+0NogQuyBDEnEd2kHkfFWUamEzmpZSfmaIHPHrRguUm/fT+UwAAOw==</Image>
+<Url type="text/html" method="GET" template="http://search.yahoo.com/search">
+  <Param name="p" value="{searchTerms}"/>
+  <Param name="ei" value="UTF-8"/>
+  <Param name="fr" value="moz2"/>
+</Url>
+<SearchForm>http://search.yahoo.com/</SearchForm>
+</SearchPlugin>
+
+ +

Diciamo che l'utente sceglie di utilizzare Yahoo! come motore di ricerca: inserisce "mozilla" nella barra di ricerca e preme il tasto invio. Firefox utilizzerà la descrizione qui sopra per costruire il seguente URL:

+ +

http://search.yahoo.com/search?p=mozilla&ei=UTF-8&fr=moz2

+ +

Se l'utente clicca sull'icona nella barra di ricerca, o sceglie l'opzione "Cerca sul web" nel menu Strumenti quando la barra non è visibile, il browser lo porterà a http://search.yahoo.com/, il valore dell'elemento <SearchForm>.

+ +

Esempio: cercare in MDC

+ +

Questo plugin permette di cercare facilmente dei termini nel sito Mozilla Developer Center.

+ +
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
+<ShortName>MDC</ShortName>
+<Description>Cerca in Mozilla Developer Center</Description>
+<InputEncoding>UTF-8</InputEncoding>
+<Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAAK%2FINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz%2F%2Fz8DJQAggJiQOe%2Ffv2fv7Oz8rays%2FN%2BVkfG%2FiYnJfyD%2F1%2BrVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw%2F8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi%2FG%2BQKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo%2BMXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia%2BCuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq%2FvLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg%2FkdypqCg4H8lUIACnQ%2FSOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD%2BaDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg%3D%3D</Image>
+<Url type="text/html" method="GET" template="http://developer.mozilla.org/en/docs/Special:Search?search={searchTerms}"/>
+<SearchForm>http://developer.mozilla.org/en/docs/Special:Search</SearchForm>
+</SearchPlugin>
+
+ +

Si noti in questo caso che invece di utilizzare <Param> per definire i parametri del motore di ricerca, sono stati semplicemente incorporati dentro il modello di URL. Questo in effetti è il metodo preferibile quando si utilizza il metodo GET. <Param> dovrebbe essere utilizzato per il metodo POST.

+ +

Suggerimenti per la risoluzione dei problemi

+ +

Se c'è un errore nell'XML del plugin di ricerca, si dovrebbero incontrare degli errori mentre il plugin viene aggiunto in Firefox (Bon Echo) Alpha 3. Il messaggio d'errore però potrebbe non essere molto d'aiuto, perciò i seguenti suggerimenti potrebbero aiutare a risolvere il problema.

+ + + +

Inoltre, servizio di plugin di ricerca fornisce un meccanismo di log che potrebbe tornare utile agli sviluppatori di plugin. Si utilizziabout:config per impostare la preferenza 'browser.search.log' a true. Quando si aggiunge un plugin di ricerca, appariranno le informazioni loggate nella Console degli errori (Tools->Error Console).

+ +

OpenSearch

+ +

Firefox 2 supporta anche il formato OpenSearch di Amazon A9 per condividere i risultari delle ricerche. Se si scrive un plugin XML utilizzando le specifiche che si trovano in OpenSearch description syntax, può successivamente essere inserito nella directory searchengines.

+ +

Il formato OpenSearch Description è simile al formato Mozilla SearchPlugin. Le differenze principali sono l'elemento radice e il namespace XML:

+ +
<xml version="1.0"  encoding="UTF-8"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+...
+</OpenSearchDescription>
+
+ +

Materiale di riferimento

+ + + +

{{ languages( { "ca": "ca/Creaci\u00f3_de_connectors_MozSearch", "ja": "ja/Creating_MozSearch_plugins", "en": "en/Creating_MozSearch_plugins" } ) }}

diff --git a/files/it/creare_un_installer_per_windows_di_seamonkey/index.html b/files/it/creare_un_installer_per_windows_di_seamonkey/index.html new file mode 100644 index 0000000000..b1fc6c62bc --- /dev/null +++ b/files/it/creare_un_installer_per_windows_di_seamonkey/index.html @@ -0,0 +1,171 @@ +--- +title: Creare un installer per Windows di SeaMonkey +slug: Creare_un_installer_per_Windows_di_SeaMonkey +tags: + - Localizzazione +translation_of: Mozilla/Creating_a_localized_Windows_installer_of_SeaMonkey +--- +

Gli attrezzi del mestiere

+ +

Premessa: non tutti i programmi elencati sotto sono strettamente necessari. Alcuni semplicemente sono quelli che io uso perché mi ci trovo bene, mentre altri sono script che ho creato per velocizzare il lavoro. Potete in ogni caso scegliere il programma che vi piace di più per svolgere certe operazioni, come potete non sfruttare gli script e scrivere ogni volta i comandi a mano. La scelta è vostra!

+ + + +

Per comodità, posizionate il file mozip.exe presente nel "Pacchetto" nella cartella di Windows, in modo da poterlo usare attraverso il prompt dei comandi senza dover inserire ogni volta il suo percorso.

+ +

Prima di iniziare, un piccolo elenco di convenzioni usate nella guida:

+ + + +

Primi passi

+ +

Per iniziare, bisogna creare le cartelle che dovranno ospitare i file. Personalmente (e questa scelta si ripercuote sui file batch) creo la cartella C:\sm che dovrà contenere tre cartelle: \{{ mediawiki.external('nv') }}eng che conterrà i file in inglese della versione da tradurre; \{{ mediawiki.external('nv') }}ita che conterrà i file in italiano dell'ultima versione disponibile e \{{ mediawiki.external('nv') }} che conterrà i file in italiano della versione di cui vogliamo creare l'installer. Per creare quest'ultima cartella, inizialmente, bisognerà copiare la cartella con i file in inglese e rinominarla.

+ +

Per riempire la cartella in inglese con i file necessari, bisogna mettere l'installer in inglese nella cartella {{ mediawiki.external('nv') }}eng, aprire una console e digitare:

+ +
mozip -x [nv]eng\seamonkey-[nv].en-US.win32.installer.exe
+ +

Una volta estratti i file, è possibile cancellare l'installer.
+ Per scompattare l'installer italiano, è sufficiente mettere il file nella relativa cartella, fare clic col tasto destro e dalle opzioni di 7-zip selezionare Estrai qui.

+ +

Tradurre i file di testo

+ +

Iniziamo col tradurre i due file di testo presenti tra i file estratti: install.ini e config.ini

+ +

Il primo è la traduzione dell'interfaccia dell'installer e quindi, dato che per ora questo resta uguale nel tempo, al 99.99% non dovrete fare altro che copiare il vecchio file in italiano. Ad ogni modo, per andare sul sicuro, controllate che almeno il numero di righe corrisponda.

+ +

Il secondo file invece contiene la configurazione dell'installer per quella particolare versione di SeaMonkey, ed è un po' più delicato da tradurre. Aprite WinMerge e mettete a confronto il vecchio file in italiano e il nuovo file in inglese: il programma evidenzierà automaticamente tutte le righe diverse.
+ Non tutte le stringhe però andranno tradotte: dovrete concentrarvi solamente su quelle che riportano nella riga precedente la scritta "localize me". Noterete che alcune stringhe non sono state tradotte, nonostante sopra venga riportata la dicitura per localizzarle: non è una dimenticanza, ma se si traducono quelle stringhe l'installer non funzionerà. Oltre a queste, dovrete cambiare tutti i riferimenti di en-US e US rispettivamente in it-IT e IT; sicuramente saprete riconoscerli quando li vedrete. WinMerge vi viene in aiuto in questo compito: basta selezionare il testo in italiano in una delle semi-finestre ed incollarlo nell'altra, al posto del testo inglese.

+ +

ATTENZIONE: alla riga 191, che fa parte di quelle da tradurre, c'è l'indicazione del numero di versione esatto della build che state costruendo. Fate attenzione, nel copia-incolla, a non sovrascrivere il numero.

+ +

Dopo aver modificato correttamente i file di testo, possiamo passare ai vari componenti del programma, rappresentati dai vari file xpi. Per il lavoro che dobbiamo fare, questi file possono essere uniti in piccoli gruppi e per ogni gruppo andrà effettuata una serie di operazioni uguali per tutti. Perciò, invece di trattare ogni pacchetto singolarmente, descriverò le azioni da compiere per ogni gruppo.

+ +

Il file langenus.xpi

+ +

Prima di tutto bisogna scompattare il file: nel menu contestuale tra le opzioni di 7-zip selezionate Estrai in "{{ mediawiki.external('path') }}", che creerà una cartella di nome langenus.

+ +

Modificate l'install.js nella sezione indicata "Localize me" ed inserite i codici italiani it-IT dove richiesto. Potete utilizzare il file della vecchia versione italiana e WinMerge per vedere rapidamente cosa modificare.

+ +

Scorrere il file fino in fondo, dove vengono registrati i locale chrome del langpack: tipicamente nelle versioni in inglese i locale chrome di Inspector, della guida e di quant'altro l'installer contenga di opzionale, sono contenuti nei relativi pacchetti. Le traduzioni italiane invece sono contenute tutte nel jar principale, quindi dovremo aggiungere le registrazioni necessarie qui. Anche in questo caso, quasi sicuramente sarà sufficiente copiare le stringhe in più dal vecchio file italiano in quello nuovo ancora in inglese con WinMerge.
+ Completate quindi con la sostituzione dei file jar contenuti nella cartella bin/chrome (in questo caso i file en-*.jar vanno sostituiti con i gli equivalenti it-*.jar).

+ +

Al termine di tutto riportatevi nella cartella contenente l'install.js e selezionate detto file assieme alla cartella bin, quindi dal menu contestuale selezionate "Aggiungi all'archivio..." e nella finestra che vi appare selezionate Zip come formato dell'archivio e Nessuna come livello di compressione. Se volete velocizzare il lavoro, nel campo archivio inserite "../langitit.xpi" che provvederà a creare il file xpi in italiano direttamente nella cartella principale, altrimenti dovrete spostare il nuovo file a mano in \{{ mediawiki.external('nv') }}.

+ +
+

ATTENZIONE: quando si creano gli xpi e i jar contenuti nell'installer, il livello di compressione va assolutamente impostato su Nessuna, per due motivi:

+ +
    +
  1. per non rallentare l'esecuzione dell'installer prima, e l'avvio dell'applicazione installata dopo.
    2. +
  2. perché le dimensioni dell'installer saranno molto più ridotte se non sono stati compressi.
    3. +
+
+ +

Una volta fatto tutto, cancellate il file langenus.xpi e la relativa cartella dalla cartella principale.

+ +

Il file regus.xpi

+ +

Anche in questo caso, come in tutti quelli successivi, create la cartella relativa. Successivamente, modificate il file install.js nelle stringhe che si trovano sotto LOCALIZATION NOTE; anche in questo caso WinMerge vi sarà d'aiuto. Nella cartella bin/chrome sostituite US.jar con IT.jar preso dal langpack italiano. Aggiungete i searchplugins del langpack italiano in bin/searchplugins e sostituite i file in bin/defaults con gli equivalenti presi sempre dal langpack, rinominando la cartella US in IT. Tornate nella cartella che contiene bin ed install.js e create il file xpi chiamandolo regit.xpi. Ricordatevi poi di cancellare il file regus.xpi e la sua cartella.

+ +

Il file deflenus.xpi

+ +

Modificate il file install.js nelle stringhe che si trovano sotto LOCALIZATION NOTE e sostituite i file in bin/defaults con gli equivalenti presi dal langpack italiano. Tornate nella cartella padre che contiene bin ed install.js e create l'archivio xpi chiamandolo deflitit.xpi. Ancora, ricordatevi di cancellare il file deflenus e la cartella relativa.

+ +

Il primo gruppo di file

+ +

La procedura che spiegherò ora si applica ai file venkman, chatzilla, inspector, sroaming, reporter.

+ +

Come già detto in precedenza, mentre nel langpack inglese la traduzione dei componenti opzionali si trova nei pacchetti dei programmi stessi, nel caso della lingua italiana tutte le traduzioni si trovano nel jar principale. L'operazione da compiere ora è quindi quella di eliminare le traduzioni dai singoli pacchetti.

+ +

Nel file install.js dovete eliminare la registrazione del locale. Per fare questo basta commentare la riga relativa (aggiungendo // all'inizio) oppure cancellarla. Per esempio, nel pacchetto venkman:

+ +
// registerChrome(LOCALE | DELAYED_CHROME, getFolder("Chrome","venkman.jar"), "locale/en-US/venkman/");
+ +

Nella cartella bin/chrome invece bisogna aprire il file jar con 7-zip ed eliminare la cartella locale. Una volta fatto questo dovrete ricreare lo xpi.

+ +

ATTENZIONE: mentre prima si cambiavano i nomi ai file, ora il nome del file xpi prima e dopo le operazioni resta lo stesso. Quando perciò avete creato lo xpi e tornate nella cartella principale, ricordatevi di cancellare solamente la cartella relativa al file e non anche il file xpi stesso, altrimenti cancellerete il vostro lavoro. Questo ovviamente vale solamente se in 7-zip avete sfruttato il trucchetto di digitare "../pacchetto.xpi" come nome del file, e resta valido di qui fino alla fine.

+ +

Il secondo gruppo di file

+ +

La procedura che spiegherò ora si applica ai file browser, mail, xpcom, spellcheck, talkback e al file zip seamonkeyuninstall.

+ +

Questi file non vengono toccati dalla traduzione, perciò non c'è da modificare niente. Tuttavia, per diminuire le dimensioni finali dell'installer, andranno scompattati e poi risalvati, questa volta però senza compressione. Vi dovrete perciò limitare a scompattare il pacchetto in una cartella, selezionare tutti i file presenti, e ricreare il file xpi (o zip a seconda dei casi) senza compressione.

+ +

Il file gre-win32-installer.zip

+ +

Questo pacchetto contiene l'installer di GRE (Gecko Runtime Environment) e si comporta proprio come un installer a sé stante. Dopo aver creato la cartella di questo pacchetto, quindi, dovrete di nuovo lanciare il comando "mozip -x" per estrarne i file contenuti, dopodiché potete anche cancellare l'installer. A partire da SeaMonkey 1.0.2 l'installer italiano viene creato con la procedura descritta sotto, perciò per scompattare quello italiano per il confronto tra i file basterà usare il menu contestuale e selezionare l'opzione di estrazione di 7-zip.

+ +

Come per l'installer di SeaMonkey, dovete tradurre i due file install.ini e config.ini, per i quali valgono le stesse considerazioni dette all'inizio di questa guida. Allo stesso modo, dovrete scompattare tutti i file zip e xpi e ricompattarli senza compressione.

+ +

A questo punto, dobbiamo creare l'installer di GRE. Se volete fare in fretta e non darvi troppa pena vi basterà usare lo script grebuild.bat che ho creato, una volta modificati i percorsi delle cartelle per adattarli al vostro caso (i file bat si aprono con un semplice editor di testi). Ci sono solo pochi passaggi da fare a mano: copiare nella cartella i file app.tag e 7zSD.sfx, poi aprire il primo con un editor di testi e nel campo "Title" inserire "GRE".

+ +

Se invece siete masochisti e volete fare tutto a mano, qui di seguito spiego i passaggi da effettuare: per creare l'installer dovete prima di tutto riunire tutti i suoi file in un unico archivio. Aprite quindi una console, spostatevi nella cartella che contiene i file dell'installer di GRE e digitate:

+ +
[path]\7z a app.7z -t7z *.* -mx0
+ +

In questo modo si creerà il file app.7z che contiene tutti i file che erano presenti nella cartella, e che ora potete eliminare. A questo punto copiate nella cartella anche i file app.tag e 7zSD.sfx; editate il file app.tag come già descritto sopra, poi lanciate questo comando:

+ +
copy /b 7zSD.sfx+app.tag+app.7z gre-win32-installer.exe
+ +

Ora che avete creato nuovamente l'installer, cancellate tutti gli altri file presenti.

+ +

Qualunque strada abbiate scelto, a questo punto dovreste avere nella cartella solamente il file che contiene l'installer. Ora non vi resta che rimetterlo nel suo file zip come per tutti gli altri pacchetti e poi proseguire.

+ +

E ora, creiamo l'installer!

+ +

Una volta finito di impacchettare l'installer di GRE, abbiamo finito i file da modificare, e possiamo passare alla creazione dell'installer di SeaMonkey.
+ Anche in questo caso, potete decidere se usare il mio script o se eseguire tutto a mano. In entrambi i casi, la prima (e ultima per chi usa lo script) cosa da fare è mettere nella cartella C:\sm i file app.tag e 7zSD.sfx e modificare il primo inserendo nel campo Title la stringa "SeaMonkey {{ mediawiki.external('nv') }}".
+ A questo punto potete lanciare lo script smbuild e aspettare che venga creato l'installer (sempre dopo aver modificato i nomi delle cartelle), oppure aprire una console e digitare, dopo esservi spostati nella cartella \{{ mediawiki.external('nv') }}, il seguente comando:

+ +
[path]\7z a -t7z ..\app.7z *.* -mx -m0=BCJ2 -m1=LZMA:d24 -m2=LZMA:d19 -m3=LZMA:d19 -mb0:1 -mb0s1:2 -mb0s2:3
+ +

Una volta terminata la compressione, risalire nella cartella superiore e digitare:

+ +
copy /b 7zSD.sfx+app.tag+app.7z mozilla-[nv].it-IT.win32.installer.exe
+ +

et voilà, il vostro installer è pronto!

+ +

Tips, tricks & script

+ +

In questo paragrafo spiegherò le funzioni di tutti gli script che non ho citato finora, e tenterò di dare qualche consiglio dettato dall'esperienza.

+ + + +

Automatizzare le operazioni

+ +

La guida spiega tutti i passaggi da eseguire per creare un installer in italiano di SeaMonkey. Sebbene l'esecuzione di questi passaggi renda consapevoli di ciò che si sta facendo, lo svolgimento delle operazioni richede molto tempo.

+ +

Una volta capiti i passaggi necessari, è possibile utilizzare degli script per velocizzare il processo di creazione dell'installer. Gli script necessari possono essere scaricati dalla lista del materiale all'inizio di questa pagina. Per farli funzionare, basta configurare correttamente il file config.bat (maggiori informazioni sono contenute all'interno del pacchetto).
+ Gli script si basano su questa guida, e assumono che la cartella dove si lavora sia C:\sm e che la sotto-cartella degli script sia \tools.

+ +

Una volta lanciato, lo script si fermerà solamente per permettere all'utente di tradurre i file .ini e .js necessari, aprendoli con WinMerge. Per questi file, valgono le stesse considerazioni fatte sopra: alcuni vanno semplicemente copiati, per altri bisogna fare attenzione.

+ +

Ringraziamenti

+ +

Michele Dal Corso: per aver scritto la prima versione testuale della guida.

+ +

Giacomo Magnini: per aver scritto la prima guida per Mozilla Suite e per avermi aiutato a risolvere tutti i problemi che ho incontrato inizialmente durante la costruzione degli installer. Ah! Ovviamente anche per aver spulciato questa seconda guida alla ricerca di errori.

+ +

Francesco Lodolo: per aver controllato la prima guida di Giacomo, e di conseguenza indirettamente anche questa.

+ +

Fabio Baroni: per aver effettuato il controllo finale della guida di Francesco Lodolo.

+ +

Domenico Zanella: per aver creato gli script per l'automazione del processo di creazione dell'installer.

diff --git a/files/it/creare_un_microsommario/index.html b/files/it/creare_un_microsommario/index.html new file mode 100644 index 0000000000..4d4e37cc46 --- /dev/null +++ b/files/it/creare_un_microsommario/index.html @@ -0,0 +1,209 @@ +--- +title: Creare un Microsommario +slug: Creare_un_Microsommario +translation_of: Archive/Mozilla/Creating_a_microsummary +--- +

+ Un generatore di microsommari è un insieme di istruzioni per creare un microsommario a partire dal contenuto di un documento. Le pagine possono essere collegate ai generatori tramite <link rel="microsummary">, che va inserito nell'elemento <head>. I generatori possono anche essere scaricati in maniera indipendente e installati dagli utenti, se questi scrivono una lista di pagine alla quale i generatori devono essere associati.

+

+ In questo articolo creeremo un generatore di microsommario per la home page di SpreadFirefox che mostra il numero di download del browser con l'etichetta Fx downloads; per esempio: 174475447 Fx downloads.

+

+ Costruiremo poi il foglio stile XSLT che converte la pagina in un microsommario e impareremo a specificare che il generatore si applica proprio a quella pagina; infine impareremo a preparare il generatore per il download e l'installazione.

+

+ In ogni passo della creazione del foglio stile, ciò che viene aggiunto rispetto all'esempio precedente è in grassetto per facilitarne l'identificazione.

+

+ Iniziare

+

+ I generatori si presentano come documenti XML, la cui radice è l'elemento <generator> e il namespace è http://www.mozilla.org/microsummaries/0.1. Per iniziare a costruire il generatore, creiamo un nuovo file di testo vuoto, poi inseriamo la dichiarazione XML e l'elemento radice:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1">
+</generator>
+
+

+ Il nome

+

+ Ogni generatore dovrebbe essere dotato di attributi name, che forniscono descrizioni arbitrarie dei microsommari. I nomi dovrebbero essere abbastanza descrittivi da dare all'utente un'idea di quali informazioni vengono fornite dal microsommario. Siccome il nostro generatore creerà dei microsommari che mostrano il conteggio dei download di Firefox, lo chiameremo "Download di Firefox":

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+</generator>
+
+

+ Creare un foglio stile XSLT

+

+ I generatori devono includere un foglio stile XSLT (o trasformazione XSLT), che trasforma il contenuto della pagina in un microsommario. XSLT è un potente linguaggio per trasformare i documenti in rappresentazioni diverse delle stesse informazioni.

+

+ Aggiungiamo quindi il foglio stile includendolo in un elemento <template>:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+    </transform>
+  </template>
+</generator>
+
+

+ Si noti che, mentre i generatori di microsommari includono del codice XSLT arbitrario, compreso codice che produca un output formattato, Firefox attualmente visualizza soltanto una versione di puro testo dell'output XSLT.

+

+ Specificare il tipo di output

+

+ Siccome il foglio stile genera un sommario testuale, dovremmo indicarlo nell'elemento <output>:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+    </transform>
+  </template>
+</generator>
+
+

+ Utilizzare un semplice <template>

+

+ L'elaboratore XSLT trasforma i documenti comparando ogni elemento <template> presente nel foglio stile con un insieme di nodi del documento. Quando trova un attributo match, dell'elemento <template>, l'elaboratore esegue le trasformazioni specificate nel contenuto dell'elemento stesso.

+

+ Questo è un meccanismo potente, perchè permette di attraversare l'albero di un documento, generando ricorsivamente un output basato sui contenuti. Ma, per gli scopi di un microsommario per la pagina di Spread Firefox, necessitiamo di un solo <template> che corrisponde al nodo radice del documento e che viene processato una volta sola:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

+ Inserire il conteggio dei download

+

+ Per inserire il conteggio dei download nell'output del foglio stile, occorre aggiungere un elemento <value-of> al template il cui attributo select contiene un'espressione XPath che punta al nodo che contiene il numero da visualizzare.

+

+ XPath è un linguaggio che serve a identificare i nodi nei documenti HTML o XML. Contiene anche alcuni funzioni basilari per la manipolazione dei nodi e del loro contenuto. Il modo più semplice per ottenere una espressione XPath che punti al nodo desiderato è utilizzare l'estensione XPath Checker.

+

+ Quindi installiamo l'estensione e riavviamo Firefox quando l'installazione è completa. Andiamo quindi alla home page di Spread Firefox, troviamo il conteggio dei download (un numero grande nella colonna di destra), clicchiamo col tasto detro del mouse su tale informazione e selezioniamo View XPath nel menù a comparsa.

+

+ XPath Checker aprirà una nuova finestra. La nuova finestra contiene un campo XPath che contiene l'espressione XPath desiderata, che punta al numero di download: id('download-count').

+

+ Aggiungiamo un elemento <value-of> dentro <template>, con un attributo select che contiene detta espressione XPath:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

+ Inserire del testo

+

+ Per inserire l'etichetta Fx downloads nel microsommario, occorre aggiungere un elemento <text> in <template>, il cui contenuto sarà il testo che si desidera inserire.

+

+ Aggiungiamo quindi un elemento <text>, il cui contenuto è Fx downloads:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+        <text> download</text>
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

+ Si noti che lo spazio bianco tra i tag XSLT non viene incluso nell'output, diversamente da quanto accade in HTML, dove invece tutti gli spazi vengono riuniti in un singolo spazio, quindi facciamo attenzione a inserire uno spazio prima della frase "download" per separarla dal numero.

+

+ Con questo, abbiamo terminato di scrivere il foglio stile XSLT che converte la pagina principale di Spread Firefox in un microsommario.

+

+ Specificare a quale pagina di riferisce il generatore

+

+ Ora che abbiamo terminato il foglio stile, dobbiamo specificare a quale pagina si applica. Se fossimo i webmaster di Spread Firefox, sarebbe sufficiente inserire un riferimento al generatore nella pagina stessa aggiungendo un tag <link rel="microsummary"> nella sezione <head> del documento:

+
<head>
+  ...
+  <link rel="microsummary" href="path/to/our/generator.xml">
+</head>
+
+

+ Siccome però non siamo i webmaster di quel sito, possiamo specificare la pagina al quale si applica il generatore dentro al generatore stesso e poi renderlo disponibile per il download e l'installazione. Per specificare la pagina, utilizziamo un elemento <pages>, figlio di <generator>:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+        <text> download</text>
+      </template>
+    </transform>
+  </template>
+  <pages>
+  </pages>
+</generator>
+
+

+ Tale elemento può contenere una sequenza di tag <include> e <exclude> che specificano, rispettivamente, a quali pagine il generatore si applica e non si applica.

+

+ Per far sì che il generatore si applichi a una pagina, si può aggiungere un elemento <include>, il cui contenuto è un'espressione regolare che corrisponde alla pagina (o alle pagine). Per far sì che il generatore invece ignori una pagina, è necessario inserire un elemento <exclude>, il cui contenuto è anch'esso un'espressione regolare.

+

+ Per default i generatori non si applicano ad alcuna pagina, quindi è possibile elencare esplicitamente a quali pagine si applica e non è necessario escludere altre pagine, a meno che non siano state precedentemente incluse.

+

+ Aggiungiamo un elemento <include> che corrisponda alla home page di Spread Firefox:

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="Download di Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+        <text> download</text>
+      </template>
+    </transform>
+  </template>
+  <pages>
+    <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include>
+  </pages>
+</generator>
+
+

+ Rendere il generatore disponibile per il download

+

+ Ora che il nostro generatore si applica alla home page di Spread Firefox, l'unica cosa rimasta da fare è renderlo scaricabile. Per fare questo, dobbiamo caricarlo in rete e creare un link JavaScript in una qualche pagina che chiami il metodo di Firefox window.sidebar.addMicrosummaryGenerator() per scaricarlo e installarlo.

+

+ Per esempio, se carichiamo il generatore all'indirizzo http://people.mozilla.com/~myk/micro...-generator.xml e vogliamo che gli utenti possano installarlo da http://people.mozilla.com/~myk/micro...ial/index.html, possiamo aggiungere il seguente codice alla pagina index.html:

+
<a href="javascript:window.sidebar.addMicrosummaryGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">Installa il microsommario della pagina principale di Spread Firefox!</a>
+
+

+ Cliccando sul link, si genera un errore JavaScript sui browser che non supportano i microsommari, pertanto si può migliorarlo controllando se i microsommari sono supportati. Potremmo farlo con il codice seguente:

+
<script>
+  const warning = "Spiacente, ma è necessario un browser che supporti i microsommari, come Firefox 2.0";
+  function addGenerator(url) {
+    if (typeof window.sidebar == "object" &&
+        typeof window.sidebar.addMicrosummaryGenerator == "function")
+      window.sidebar.addMicrosummaryGenerator(url);
+    else
+     alert(warning);
+  }
+</script>
+<a href="javascript:addGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">Installa il microsommario della pagina principale di Spread Firefox!</a>
+
+

+  

+

+ Conclusione

+

+ Abbiamo creato un generatore di microsommari che, una volta installato, mostra il numero attuale di download di Firefox e seleziona il microsommario dal menu a discesa Summary nella finestra Add Bookmark.

+

+ Per ulteriori informazioni sui microsommari, si veda Microsummaries home page (EN).

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

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

+
    +
  • Author(s): Eric A. Meyer, Netscape Communications
    • +
  • Last Updated Date: Published 04 Mar 2002; Revised 30 Jan 2003
    • +
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
    • +
  • Note: This reprinted article was originally part of the DevEdge site.
    • +
+
diff --git a/files/it/dhtml/index.html b/files/it/dhtml/index.html new file mode 100644 index 0000000000..fbc1dbcbe4 --- /dev/null +++ b/files/it/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/dom/index.html b/files/it/dom/index.html new file mode 100644 index 0000000000..9c8e8851b1 --- /dev/null +++ b/files/it/dom/index.html @@ -0,0 +1,83 @@ +--- +title: DOM +slug: DOM +translation_of: Glossary/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 new file mode 100644 index 0000000000..d6566854ca --- /dev/null +++ b/files/it/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/domande_frequenti_sulle_estensioni/index.html b/files/it/domande_frequenti_sulle_estensioni/index.html new file mode 100644 index 0000000000..22b1b00dc4 --- /dev/null +++ b/files/it/domande_frequenti_sulle_estensioni/index.html @@ -0,0 +1,67 @@ +--- +title: Domande frequenti sulle Estensioni +slug: Domande_frequenti_sulle_Estensioni +tags: + - Estensioni + - Tutte_le_categorie +translation_of: Archive/Mozilla/Extension_Frequently_Asked_Questions +--- +

Questo è un breve insieme di risposte ai problemi più comuni che sorgono durante lo sviluppo delle estensioni. Le risposte sono scritte avendo in mente soprattutto Firefox, ma la molte, se non tutte, dovrebbero essere facilmente utilizzabili anche per SeaMonkey, Thunderbird o qualsiasi altra applicazione. +

Se sei in cerca di un posto dove venga insegnato come iniziare, prova la nostra guida, Sviluppare un'Estensione o il Tutorial di MozillaZine "Getting started"(EN). +

Accertati di aver impostato il tuo ambiente di sviluppo(EN). +

+

Effettuare il Debug

+

Dovresti aver organizzato l'ambiente di sviluppo(EN) prima di effettuare il debug alla tua estensione. +

Il debugger Javascript Venkman può essere utile nelle situazioni complesse, ricorda di disattivare l'opzione "Debug -> Escludi i file del browser" quando lavori sul codice dell'estensione. +

+

Come faccio a scoprire gli errori nel mio codice?

+

Dopo aver impostato la preferenza javascript.options.showInConsole a true, gli errori saranno riportati nella console JavaScript. Nota che, nonostante il nome, verranno riportati lì tutti i tipi di errore. +

+

Come faccio a visualizzare cosa sta facendo la mia estensione?

+

Puoi usare le funzioni alert() o dump() o nsIConsoleService. +

+

Perché il mio script non viene eseguito correttamente?

+

Se il tuo script non funziona come ti aspettavi, la prima cosa da fare è controllare la console Javascript (guarda sopra). +

Un errore comune è provare ad accedere al DOM di una finestra prima che questa sia completamente caricata. Questo accade se si mette il codice di inizializzazione al livello più alto dello script (cioè fuori da ogni funzione). La soluzione è utilizzare un evento load per ritardare il proprio codice finché la finestra non sia completamente caricata: +

+
function exampleBrowserStartup(event)
+{
+  // metti il tuo codice di startup qua
+}
+window.addEventListener("load", exampleBrowserStartup, false);
+
+

Non accede ad un documento di una pagina web

+

Per accedere al documento della pagina web corrente da un overlay di browser.xul, si deve utilizzare content.document, invece del semplice document che indica il documento della finestra stessa del browser. Guarda "Lavorare con le finestre nel codice chrome" per i dettagli. +

Inoltre, come opzione predefinita XPCNativeWrapper impedisce di accedere agli oggetti definiti da script nelle pagine web e di effettuare anche altre operazioni. +

+

Ricevo un errore di analisi XML, ma il file sembra corretto!

+

Una comune sorgente di errori di analisi (del testo rosso con una linea -------------^ sotto) è l'utilizzo di caratteri nello script, o l'attribuzione di un valore, che in XML hanno un particolare significato. Per esempio: +

+
<button oncommand="window.open('http://example.com/q?param1=value&param2=val2')"/>
+
+

o +

+
<script>function lesser(a,b) { return a < b ? a : b; }</script>
+
+

Il problema può essere risolto in uno dei seguenti modi: +

+
    +
  1. sostituire i caratteri con una rappresentazione che non confligga con XML (Es: "&" -> "&amp;", "<" -> "&lt;")
    2. +
  2. (nel caso sia un nodo di testo, come uno script) mettere dei tag CDATA intorno: +
    <script><![CDATA[
+   function lesser(a,b) {
+     return a < b ? a : b;
+   }
+ ]]></script>
    +
    3. +
  3. Inserire lo script in un file separato e includerlo usando: +
    <script type="application/x-javascript" src="our.js"/>
    +
+

Esempi di codice

+

Il modo più semplice per trovare quale codice sia necessario per fare qualcosa è cercare un'estensione (o una parte di Mozilla stesso) che esegua quell'azione e guardare il suo codice. (I file XPI e JAR usano il formato ZIP.) +

C'è anche della documentazione. Guarda la lista di articoli relativi alle estensioni su MDC e la pagina di esempi di codice su MozillaZine(EN). +

+

Dove posso ottenere più aiuto?

+

Per favore guarda Estensioni:Altre risorse e Estensioni:Comunità. +

Prima di chiedere aiuto, assicurati di aver impostato le preferenze di debug e controlla la console JavaScript per i messaggi correlati. Inoltre, non dimenticare di fare almeno una semplice ricerca prima di domandare. E leggi queste FAQ! +

{{ languages( { "de": "de/Erweiterungen_FAQ", "en": "en/Extension_Frequently_Asked_Questions", "es": "es/Preguntas_frecuentes_sobre_Extensiones", "fr": "fr/Foire_aux_questions_sur_les_extensions", "ja": "ja/Extension_Frequently_Asked_Questions", "pl": "pl/Cz\u0119sto_zadawane_pytania_dotycz\u0105ce_rozszerze\u0144" } ) }} diff --git a/files/it/e4x/index.html b/files/it/e4x/index.html new file mode 100644 index 0000000000..142b0bf375 --- /dev/null +++ b/files/it/e4x/index.html @@ -0,0 +1,24 @@ +--- +title: E4X +slug: E4X +tags: + - E4X +translation_of: Archive/Web/E4X +--- +

ECMAScript for XML (E4X) è un'estensione di JavaScript che aggiunge a quest'ultimo il supporto nativo a XML. Fornisce l'accesso al documento XML in una forma naturale per i programmatori ECMAScript. L'obiettivo è mettere a disposizione una sintassi alternativa e più semplice rispetto alle interfacce DOM per accedere ai documenti XML. +

E4X è standardizzato dalla ECMA International in ECMA-357 standard (attualmente è alla sua prima edizione, giugno 2004). +

E4X è implementato (almeno in parte in SpiderMonkey (il motore JavaScript di Gecko) e in Rhino. +

Nota: Nei browser basati su Gecko 1.8, come Firefox 1.5, E4X è già parzialmente abilitato per gli autori di pagine web. Per abilitarlo completamente, occorre impostare il tipo MIME nell'elemento <script> a "text/javascript;e4x=1" (con l'attributo type="text/javascript;e4x=1"). La differenza tra le due modalità è che senza il tipo MIME "e4x=1": +

+ +

Limiti e bug conosciuti

+ +

Risorse

+ +{{ languages( { "en": "en/E4X", "fr": "fr/E4X", "ja": "ja/E4X" } ) }} diff --git "a/files/it/estensioni/comunit\303\240/index.html" "b/files/it/estensioni/comunit\303\240/index.html" new file mode 100644 index 0000000000..755b6a74a4 --- /dev/null +++ "b/files/it/estensioni/comunit\303\240/index.html" @@ -0,0 +1,22 @@ +--- +title: Comunità +slug: Estensioni/Comunità +tags: + - Estensioni + - Tutte_le_categorie +translation_of: Extensions/Community +--- +

 

+

Liste di discussione, gruppi, forum e link a comunità relative allo sviluppo di estensioni possono essere aggiunte qua.

+ +

{{ languages( { "en": "en/Extensions/Community", "fr": "fr/Extensions/Communaut\u00e9", "ja": "ja/Extensions/Community", "pl": "pl/Rozszerzenia/Spo\u0142eczno\u015b\u0107" } ) }}

diff --git a/files/it/estensioni/index.html b/files/it/estensioni/index.html new file mode 100644 index 0000000000..c5c2381e32 --- /dev/null +++ b/files/it/estensioni/index.html @@ -0,0 +1,67 @@ +--- +title: Estensioni +slug: Estensioni +tags: + - Estensioni + - Tutte_le_categorie +translation_of: Mozilla/Add-ons +--- +

+

+
Sviluppare un'Estensione
+Una guida passo-passo su come sviluppare un'estensione per Firefox 1.5.
+
+Le Estensioni sono dei piccoli componenti aggiuntivi che apportano nuove funzionalità alle applicazioni di casa Mozilla come Firefox e Thunderbird. Possono aggiungere qualsiasi cosa, da un semplice bottone sulla barra degli strumenti ad una caratteristica completamente nuova. Permettono di personalizzare l'applicazione per soddisfare le esigenze personali di ogni singolo utente qualora necessario, ma anche di mantenere l'applicazione leggera e quindi facile da scaricare.
+ + + + +
+

Documentazione

+
Domande frequenti sulle Estensioni +
Domande e risposte frequenti circa lo sviluppo delle estensioni. +
+
Organizzare l'ambiente di sviluppo dell'Estensione +
Alcuni suggerimenti essenziali sull'organizzazione dell'ambiente per facilitare lo sviluppo di un'estensione. +
+
Impacchettare l'Estensione +
Come impacchettare la propria estensione di Firefox per il download e l'installazione. +
+
Creare Estensioni personalizzate per Firefox con il sistema di sviluppo di Mozilla +
Come organizzare l'ambiente di sviluppo per un'estensione che faccia uso di componenti binari. +
+
Adattare le applicazioni XUL a Firefox 1.5 +
Un elenco dei cambiamenti effettuati su Firefox 1.5 che possono interessare gli sviluppatori di applicazioni XUL. +
+
XPCNativeWrapper +
Limita l'accesso alle proprietà ed ai metodi degli oggetti che imballa, permettendo un accesso sicuro ai metodi dell'oggetto definiti dall'IDL. +
+

Guarda tutti... +

+		 +

Comunità

+
  • Gurda i forum su Mozilla... +
+

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

+ +

Tools

+ +

Guarda tutti... +

+ +
XUL, JavaScript, XPCOM, Temi, Plug-in, Sviluppare Mozilla +
+
+

Categories +

Interwiki Language Links +


+

{{ languages( { "en": "en/Extensions", "fr": "fr/Extensions", "es": "es/Extensiones", "pl": "pl/Rozszerzenia", "pt": "pt/Extens\u00f5es", "ja": "ja/Extensions" } ) }} diff --git a/files/it/firefox_1.5_per_sviluppatori/index.html b/files/it/firefox_1.5_per_sviluppatori/index.html new file mode 100644 index 0000000000..6c47af6552 --- /dev/null +++ b/files/it/firefox_1.5_per_sviluppatori/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/firefox_18_for_developers/index.html b/files/it/firefox_18_for_developers/index.html new file mode 100644 index 0000000000..41af59d3c9 --- /dev/null +++ b/files/it/firefox_18_for_developers/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/firefox_2.0_per_sviluppatori/index.html b/files/it/firefox_2.0_per_sviluppatori/index.html new file mode 100644 index 0000000000..4f8d46f2cf --- /dev/null +++ b/files/it/firefox_2.0_per_sviluppatori/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/games/index.html b/files/it/games/index.html new file mode 100644 index 0000000000..5a3c1d131c --- /dev/null +++ b/files/it/games/index.html @@ -0,0 +1,93 @@ +--- +title: Sviluppo di giochi +slug: Games +tags: + - App + - Giochi + - Giochi HTML5 + - Giochi JavaScript + - Sviluppo Giochi + - Web +translation_of: Games +--- +
{{GamesSidebar}}
+ +
+

I giochi sono una delle attività più popolari nel mondo dei computer. Nuove tecnologie sono in costante arrivo per rendere possibile lo sviluppo di giochi migliori e con più grinta, che funzionino in ogni web-browser conforme agli standard.

+
+ +
{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}
+ +
+
+

Sviluppa giochi per il web

+ +

Benvenuto al centro di sviluppo giochi MDN! In quest'area del sito forniamo risorse per gli sviluppatori web che vogliono sviluppare giochi. Nel menu principale a sinistra potrai trovare tanti tutorial utili e articoli - sentiti libero di esplorare.

+ +

Abbiamo anche incluso una sezione di referenze, così che tu possa trovare facilmente informazioni sulle più comuni API usate nello sviluppo di giochi.

+ +
+

Nota: Creare giochi sul web richiede la conoscenza di tecnologie come HTML, CSS, e JavaScript. La Learning Area è un buon posto dove iniziare come le basi.

+
+
+ +
+

Trasferisci giochi nativi sul web

+ +

Se sei uno sviluppatore nativo (per esempio scrivi giochi in C++), e sei interessato a portare i tuoi giochi sul web, dovrai imparare di più sul nostro tool Emscripten - questo è un compilatore LLVM a JavaScript, che prende il bytecode LLVM (p.e. generato con C/C++ tramite Clang oppure da un altro linguaggio) e lo compila in asm.js, che può girare sul Web.

+ +

Per iniziare, vedi:

+ + +
+
+ +
+
+

Esempi

+ +

Per una lista di esempi di giochi web, vedi la nostra pagina di esempi. Dai anche un'occhiata a openwebgames.com per ulteriori risorse utili ed esempi!

+
+
+ +

+ +

Vedi anche

+ +
+
+
+
Crea nuovi giochi
+
Un sito collaborativo che presenta un ampio numero di tutorial sullo sviluppo di web game liberi. Non particolarmente attivo di recente, ha comunque alcune risorse carine.
+
JS creativo 
+
Una collezione impressionante di tecnologie ed esperimenti JavaScript, non specifici per giochi, ma in ogni caso utili. Non particolarmente attivo di recente, ha comunque alcune risorse carine.
+
Modelli di programmazione per giochi
+
Un libro online scritto da Bob Nystrom, il quale discute i modelli di programma nel contesto dello sviluppo di giochi con l'intenzione di aiutare gli sviluppatori videoludici a produrre codici più effettivi ed efficienti.
+
Gamedev.js Weekly
+
Newsletter settimanale sullo sviluppo di giochi in HTML5, inviato ogni venerdì. Contiene gli ultimi articoli, tutorial, tool e risorse.
+
HTML5 Game Devs Forum
+
Forum per sviluppatori, creatori di framework e publishers. Fai domande, ricevi feedback, aiuta gli altri.
+
+
+ +
+
+
HTML5 Game Engine
+
Lista dei framework HTML5 per giochi più popolari con rating, caratteristiche ed anteprime.
+
JSBreakouts
+
Compara JavaScript Breakout ricerca in differenti frameworks per aiutarti a scegliere quello giusto per te.
+
Tuts+ Game Development
+
Tutorials e articoli sullo sviluppo di giochi in generale.
+
HTML5 Gamedev Starter
+
Starter per i nuovi sviluppatori di giochi, un'accurata lista di link vari e risorse utili nel web.
+
js13kGames
+
Una sfida di programmazione JavaScript per sviluppatori di giochi HTML5 con un limite di dimensione file pari a 13 kilobytes. Tutti i giochi inviati sono a disposizione in forma leggibile su GitHub.
+
Mozilla Hacks blog
+
Categoria giochi sul Blog Mozilla Hacks che contiene interessanti articoli correlati allo sviluppo di giochi.
+
+
+
diff --git a/files/it/games/publishing_games/index.html b/files/it/games/publishing_games/index.html new file mode 100644 index 0000000000..d24458f680 --- /dev/null +++ b/files/it/games/publishing_games/index.html @@ -0,0 +1,27 @@ +--- +title: Pubblicare un gioco +slug: Games/Publishing_games +tags: + - Distribuzione + - HTML5 + - JavaScript + - Monetizzazione + - Pubblicare + - Videgiochi +translation_of: Games/Publishing_games +--- +
{{GamesSidebar}}
+ +

I giochi in HTML5 hanno un grande vantaggio in termini di pubblicazione e distribuzione rispetto a quelli native, poiché si può trarre vantaggio da come il Web sia veramente multipiattaforma. Si è infatti liberi di distribuire, pubblicizzare e monetizzare il proprio gioco direttamente sul Web, invece che ritrovarsi con ogni versione del gioco venduta da una singola azienda solo nei suoi negozi. Questa serie di articoli passa in rassegna le varie opzioni che si hanno nella pubblicazione e distribuzione di un gioco, e modi in cui guadagnarci mentre si aspetta che diventi famoso.

+ +

Distribuzione del gioco

+ +

Bene, hai seguito uno tutorial o due e hai creato un gioco in HTM5, in questa pagina troverai tutto quelle che ti serve sapere su come distribuire il tuo gioco appena creato. Ad esempio puoi metterlo online per conto tuo, oppure affidarti a piattaforme apposite, alcune chiuse come Google Play o l'App Store iOS, altre in cui il gioco può essere caricato liberamente

+ +

Promozione del gioco

+ +

Sviluppare e finire un gioco non basta, bisogna anche far sapere al mondo che è divertente, che piacerà alla gente e che è in vendita. Ci sono molti modi di pubblicizzare un gioco e alcuni di questi sono gratis, quindi anche uno sviluppatore indie privo di budget può riuscire a far sapere a molte persone del proprio gioco. Promuovere un gioco rende più facile guadagnarci in futuro, è quindi importante farlo in modo efficace.

+ +

Monetizzare un gioco

+ +

Quando si spende tanto tempo nella produzione, pubblicazione e promozione di un gioco, è normale che si arrivi a pensare di volerci anche guadagnare qualcosa. Questa pagnina è fondamentale per chiunque voglia diventare uno sviluppatore indipendente in grado di supportarsi coi propri giochi, se hai intenzione di lanciarti seriamente in questa impresa, leggi di seguito per vedere quali sono le opzioni a tua disposizione. La tecnologia ormai è pronta, si tratta solo di scegliere il giusto approccio.

diff --git a/files/it/gecko/index.html b/files/it/gecko/index.html new file mode 100644 index 0000000000..66b64e12ab --- /dev/null +++ b/files/it/gecko/index.html @@ -0,0 +1,71 @@ +--- +title: Gecko +slug: Gecko +tags: + - Gecko +translation_of: Mozilla/Gecko +--- +
+

Gecko è il nome del motore di layout sviluppato dal Mozilla Project. Originariamente era chiamato NGLayout. La funzione di Gecko è quella di leggere contenuti web, come HTML, CSS, XUL, JavaScript e renderizzarli sullo schermo dell'utente oppure stamparli. Nelle applicazioni basate su XUL, Gecko è utilizzato anche per renderizzare le interfacce utente delle applicazioni.

+
+

Gecko è usato in molte applicazioni, ad esempio alcuni browser, come Firefox, Seamonkey ecc. (per una lista completa, fare riferimento all'Articolo di Wikipedia su Gecko.) I prodotti che usano la stessa versione di Gecko supportano gli stessi standard.

+ + + + + + + +
+

Documentazione

+
+
+ FAQ di Gecko
+
+ Domande frequenti su Gecko.
+
+ Riferimento al DOM di Gecko
+
+ Riferimento al DOM.
+
+ Riferimento agli eventi di Gecko
+
+ Riferimento agli eventi utilizzati all'interno di Gecko e delle applicazioni di Mozilla; per gli eventi DOM dello standard web, vedere Riferimento agli eventi DOM.
+
+ Versioni di Gecko e versioni delle applicazioni
+
+ Versioni di Gecko e le applicazioni in cui sono utilizzate.
+
+ Introduzione al Layout in Mozilla
+
+ Discussione tecnica sul layout.
+
+ Includere Mozilla
+
+ Utilizzare Gecko all'interno delle proprie applicazioni.
+
+ Set di caratteri supportati da Gecko
+
+ Lista dei set di caratteri supportati da Gecko.
+
+ Threading del parser HTML
+
+ Descrizione del multithreading nel parser HTML.
+
+ {{interwiki('wikimo', 'Gecko:Home_Page', 'Home Page di Gecko su MozillaWiki')}}
+
+ Quartier generale degli sviluppatori attivi. Tabelle di marcia e risorse più aggiornate.
+
+

Vedi tutti...

+ 		+

Comunità

+
    +
  • Vedi i Forum di Mozilla... {{DiscussionList("dev-tech-layout", "mozilla.dev.tech.layout")}}
    • +
+ +
+
+ Standard Web, XUL, Includere Mozilla, Sviluppare Mozilla
+
+
+

 

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

+ + + +

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/ajax/index.html b/files/it/glossary/ajax/index.html new file mode 100644 index 0000000000..f0228e49e6 --- /dev/null +++ b/files/it/glossary/ajax/index.html @@ -0,0 +1,29 @@ +--- +title: AJAX +slug: Glossary/AJAX +tags: + - AJAX + - CodingScripting + - Glossary + - Infrastructure + - 'l10n:priority' +translation_of: Glossary/AJAX +--- +

AJAX (Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}}) è una pratica di programmazione che combina {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, il {{glossary("DOM")}}, e l'{{glossary("oggetto")}} XMLHttpRequest per costruire pagine web complesse. AJAX permette di aggiornare singole parti di una pagina, invece di doverla ricaricare completamente. Inoltre consente di lavorare in maniera asincrona: ciò significa che il tuo codice continua ad essere eseguito anche durante l'aggiornamento di quella parte della pagina (al contrario di un'esecuzione sincrona, che blocca il tuo codice finchè l'aggiornamento non è stato completato)

+ +

Approfondimenti

+ +

Conoscenza generale

+ + + +

Informazioni tecniche

+ + diff --git a/files/it/glossary/array/index.html b/files/it/glossary/array/index.html new file mode 100644 index 0000000000..5d78e2ebfc --- /dev/null +++ b/files/it/glossary/array/index.html @@ -0,0 +1,28 @@ +--- +title: Array +slug: Glossary/array +translation_of: Glossary/array +--- +

Un array è una raccolta ordinata di dati (sia {{Glossary("primitive")}} che {{Glossary("object")}} a seconda del linguaggio). Gli array sono utilizzati per immagazzinare valori mutipli in una singola variabile. In comparazione con una variabile che invece può contenere  un solo valore. 

+ +

Ogni elemento in un array ha un numero collegato ad esso, chiamato indice numerico, che ne permette l'accesso. In JavaScript, gli array iniziano all'indice zero e possono essere manipolati con vari {{Glossary("Method", "methods")}}. 

+ +

Aspetto di un array in JavaScript:

+ +
var myArray = [1, 2, 3, 4];
+var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
+//Arrays in JavaScript can hold different types of data, as shown above.
+ +

Apprendi di più

+ +

Conoscenza generale

+ + + +

Riferimento tecnico

+ + diff --git a/files/it/glossary/block/css/index.html b/files/it/glossary/block/css/index.html new file mode 100644 index 0000000000..0b6828a5e4 --- /dev/null +++ b/files/it/glossary/block/css/index.html @@ -0,0 +1,16 @@ +--- +title: Blocco (CSS) +slug: Glossary/Block/CSS +translation_of: Glossary/Block/CSS +--- +

Un blocco in una pagina web è un {{glossary("HTML")}} {{glossary("element")}} che occupa una linea intera, quindi si troverà al di sotto dell'elemento che lo precede e sopra l'elemento successivo(comunemente detto block-level element).Per esempio, un elemento {{htmlelement("p")}} è di base un block-level element, invece un elemento {{htmlelement("a")}} è un inline element — infatti puoi inserire molti link uno dopo l'eltro nel tuo sorgente HTML e, visualizzando la pagina, loro si posizioneranno sulla stessa linea.

+ +

Usando la proprietà {{cssxref("display")}} puoi scegliere come mostrare l'elemento, inline, come un blocco o in altri modi. I blocchi sono anche soggetti agli effetti degli schemi di posizionamento e all'uso della proprietà {{cssxref("position")}}.

+ +

Per saperne di più

+ +

Conoscenza generale

+ + diff --git a/files/it/glossary/block/index.html b/files/it/glossary/block/index.html new file mode 100644 index 0000000000..8f17177e82 --- /dev/null +++ b/files/it/glossary/block/index.html @@ -0,0 +1,13 @@ +--- +title: Block +slug: Glossary/Block +tags: + - Disambiguation + - Glossary + - NeedsTranslation + - TopicStub +translation_of: Glossary/Block +--- +

The term block can have several meanings depending on the context. It may refer to:

+ +

{{GlossaryDisambiguation}}

diff --git a/files/it/glossary/control_flow/index.html b/files/it/glossary/control_flow/index.html new file mode 100644 index 0000000000..92485dd09c --- /dev/null +++ b/files/it/glossary/control_flow/index.html @@ -0,0 +1,50 @@ +--- +title: Controllo del flusso +slug: Glossary/Control_flow +tags: + - Codice Javascript + - Controllo di Flussi + - Glossário + - JavaScript +translation_of: Glossary/Control_flow +--- +

Il flusso di controllo è l'ordine in cui il computer esegue le istruzioni in uno script.

+ +

Il codice viene eseguito in ordine dalla prima riga del file all'ultima riga, a meno che il computer non attraversi le strutture (estremamente frequenti) che modificano il flusso di controllo, ad esempio condizionali e loop.

+ +

Ad esempio, immagina uno script utilizzato per convalidare i dati utente da un modulo di pagina web. 

+ +

Lo script invia i dati convalidati, ma se l'utente, ad esempio, lascia vuoto un campo obbligatorio, lo script chiede di riempirlo. Per fare ciò, lo script utilizza un {{Glossary("Conditional", "conditional")}} struttura o if...else, in modo che il codice venga eseguito a seconda che il modulo sia completo o meno:

+ +
if (field==empty) {
+    promptUser();
+} else {
+    submitForm();
+}
+
+ +

Uno script tipico in {{glossary("JavaScript")}} o {{glossary("PHP")}} (e simili) include molte strutture di controllo, inclusi i condizionali, {{Glossary("Loop", "loops")}} e {{Glossary("Function", "functions")}}. Parti di uno script possono anche essere impostate per essere eseguite quando {{Glossary("Event", "events")}} si verificano.

+ +

Ad esempio, l'estratto di cui sopra potrebbe trovarsi all'interno di una funzione che viene eseguita quando l'utente fa clic sul pulsante Invia per il modulo. La funzione potrebbe anche includere un ciclo, che scorre tutti i campi nel modulo, controllandoli uno a turno. Guardando indietro al codice nelle sezioni if e else, le righe promptUser e submitForm potrebbero anche essere chiamate ad altre funzioni nello script. Come potete vedere, le strutture di controllo possono dettare flussi di elaborazione complessi anche con poche righe di codice.

+ +

Flusso di controllo significa che quando leggi uno script, non solo devi leggere dall'inizio alla fine, ma anche esaminare la struttura del programma e il suo impatto sull'ordine di esecuzion.

+ +

Per saperne di più

+ +

Conoscenza generale

+ + + +

Riferimento tecnico

+ + + +

Impara al riguardo

+ + diff --git a/files/it/glossary/css/index.html b/files/it/glossary/css/index.html new file mode 100644 index 0000000000..f97042c554 --- /dev/null +++ b/files/it/glossary/css/index.html @@ -0,0 +1,49 @@ +--- +title: CSS +slug: Glossary/CSS +tags: + - CSS + - CodingScripting + - Glossary + - Web + - 'l10n:priority' +translation_of: Glossary/CSS +--- +

CSS (Cascading Style Sheets) è un linguaggio dichiarativo che controlla l'aspetto delle pagine web nel {{glossary("browser")}}. Il browser applica le dichiarazioni di stile CSS agli elementi selezionati per mostrarli correttamente. Una dichiarazione di stile contiene gli attributi e i loro valori, che determinano come una pagina web appare.

+ +

CSS è una delle tre tecnologie cardine del Web, insieme a {{Glossary("HTML")}}  e  {{Glossary("JavaScript")}}. Il CSS di solito viene usato per controllare l'aspetto degli {{Glossary("Element","elementi HTML")}}, ma può essere usato anche con altri linguaggi di markup, come {{Glossary("SVG")}} o {{Glossary("XML")}}.

+ +

Una regola CSS è un insieme di {{Glossary("CSS Property","proprietà")}} associate ad un {{Glossary("selettore")}}. Di seguito un esempio che mostra tutti i paragrafi HTML di colore giallo su sfondo nero:

+ +
/* Il selettore "p" indica che tutti i paragrafi nella pagina saranno interessati da questa regola */
+p {
+  /* L'attributo "color" definisce il colore del testo, in questo caso giallo. */
+  color: yellow;
+
+  /* L'attributo "background-color" definisce il colore dello sfondo, in questo caso nero. */
+  background-color: black
+}
+ +

"Cascading" si riferisce alle regole di priorità dei selettori ed è di fondamentale importanza, poichè un sito complesso può dichiarare migliaia di regole CSS.

+ +

Approfondimenti

+ +

Conoscenza generica

+ + + +

Riferimenti tecnici

+ + + +

Scopri di più sul CSS

+ + diff --git a/files/it/glossary/doctype/index.html b/files/it/glossary/doctype/index.html new file mode 100644 index 0000000000..6791600c7f --- /dev/null +++ b/files/it/glossary/doctype/index.html @@ -0,0 +1,24 @@ +--- +title: Doctype +slug: Glossary/Doctype +tags: + - DOCTYPE + - HTML +translation_of: Glossary/Doctype +--- +

In {{Glossary ("HTML")}}, il doctype è il preambolo "<! DOCTYPE html>" richiesto nella parte superiore di tutti i documenti. Il suo unico scopo è impedire al {{Glossary ("browser")}} di passare alla cosiddetta modalità "quirks mode" durante il rendering di un documento; cioè, il doctype "<! DOCTYPE html>" garantisce che il browser faccia il miglior tentativo di seguire le specifiche pertinenti, piuttosto che utilizzare una modalità di rendering diversa che è incompatibile con alcune specifiche.

+ +

Learn more

+ +

General Knowledge

+ + + +

Technical reference

+ + diff --git a/files/it/glossary/first-class_function/index.html b/files/it/glossary/first-class_function/index.html new file mode 100644 index 0000000000..02c413a1d0 --- /dev/null +++ b/files/it/glossary/first-class_function/index.html @@ -0,0 +1,20 @@ +--- +title: First-class Function +slug: Glossary/First-class_Function +translation_of: Glossary/First-class_Function +--- +

 

+ +

Un linguaggio di programmazione implementa le First-class functions se le funzioni di quest'ultimo vengono trattate come ogni altra variabile.

+ +

Per esempio, in un linguaggio che ne fa utilizzo, è possibile passare una funzione come parametro ad un'altra funzione, possono essere restituite da altre funzioni e possono essere assegnate ad una variabile.

+ +

Learn more

+ +

General knowledge

+ + + +

 

diff --git a/files/it/glossary/head/index.html b/files/it/glossary/head/index.html new file mode 100644 index 0000000000..01d27c78fa --- /dev/null +++ b/files/it/glossary/head/index.html @@ -0,0 +1,20 @@ +--- +title: Head +slug: Glossary/Head +tags: + - Glossary + - HTML + - head + - metadata +translation_of: Glossary/Head +--- +

L'Head è la parte di un documento {{glossary("HTML")}} che contiene i {{glossary("metadata")}} relativi al documento, come autore, descrizione, e collegameti a {{glossary("CSS")}} o file {{glossary("JavaScript")}} che possono essere applicati al documento HTML.

+ +

Ulteriorei risorse

+ +

HTML head

+ + diff --git a/files/it/glossary/header_di_risposta/index.html b/files/it/glossary/header_di_risposta/index.html new file mode 100644 index 0000000000..6363a8b84a --- /dev/null +++ b/files/it/glossary/header_di_risposta/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/hoisting/index.html b/files/it/glossary/hoisting/index.html new file mode 100644 index 0000000000..77186b6b2b --- /dev/null +++ b/files/it/glossary/hoisting/index.html @@ -0,0 +1,74 @@ +--- +title: Hoisting +slug: Glossary/Hoisting +tags: + - Glossário + - JavaScript +translation_of: Glossary/Hoisting +--- +

Hoisting (sollevare, issare in italiano) è un termine che non sentirai mai usare in nessuno testo normativo prima di ECMAScript® 2015 Language Specification. L'Hoisting è stato pensato come un modo generico di pensare a come funziona, in Javascript, il contesto di esecuzione (nello specifico le fasi di creazioni e di esecuzione). Il concetto può essere poco chiaro all'inizio.

+ +

Una definizione rigida di Hoisting potrebbe essere: "(durante la fase di compilazione)  le dichiarazioni delle variabili e delle funzioni sono fisicamente spostate in cima al codice", ma questo di fatto non è quello che succede. In realtà, le dichiarazioni delle variabili e delle funzioni sono messe in memoria durante la fase di compilazione, ma rimangono esattamente dove le hai scritte nel codice.

+ +

Learn more

+ +

Technical example

+ +

Uno dei vantaggi di mettere in memoria la dichiarazione delle funzioni, prima di eseguire qualunque segmento di codice, è che questo ti permette di usare una funzione prima di dichiararla. Per esempio:

+ +
function catName(name) {
+  console.log("My cat's name is " + name);
+}
+
+catName("Tigger");
+/*
+Il risultato del codice sopra è: "My cat's name is Tigger"
+*/
+
+ +

Il codice sopra è scritto come chiunque si aspetterebbe. Ora, vediamo cosa succede quando chiamiamo la funzione prima di scriverla:

+ +
catName("Chloe");
+
+function catName(name) {
+  console.log("My cat's name is " + name);
+}
+/*
+Il risultato del codice sopra è: "My cat's name is Chloe"
+*/
+
+ +

Anche se chiamiamo la funzione all'inizio del codice, prima che questa sia scritta, il codice continua a funzionare. Questo accade grazie al comportamento del "contesto di esecuzione" (execution context) di Javascript.

+ +

L'Hoisting funziona bene anche con altri tipi di dati (data types) e con le variabili. Le variabili possono essere inizializzate e usate prima di essere dichiarate. Ma non possono essere usate senza inizializzazione.

+ +

Technical example

+ +
num = 6;
+num + 7;
+var num;
+/* non restituisce errore perchè num è dichiarata*/
+
+
+ +

Javascript "solleva" (hoists) solo le dichiarazioni, non le inizializzazioni. Se utilizzi una variabile prima di dichiararla e inizializzarla, il suo valore sarà undefined. L'esempio qui sotto dimostra questo comportamento.

+ +
var x = 1; // Initialize x
+console.log(x + " " + y); // '1 undefined'
+var y = 2; // Initialize y
+
+
+// Il codice seguente si comporterà nella stessa maniera del precedente
+var x = 1; // Initialize x
+var y; // Declare y
+console.log(x + " " + y); // '1 undefined'
+y = 2; // Initialize y
+
+ +

Technical reference

+ + diff --git a/files/it/glossary/html/index.html b/files/it/glossary/html/index.html new file mode 100644 index 0000000000..04b4009ed5 --- /dev/null +++ b/files/it/glossary/html/index.html @@ -0,0 +1,50 @@ +--- +title: HTML +slug: Glossary/HTML +tags: + - CodingScripting + - Glossário + - HTML + - Script + - Story +translation_of: Glossary/HTML +--- +

HTML (HyperText Markup Language) è un linguaggio descrittivo che specifica la struttura delle pagine web.

+ +

Breve storia

+ +

Nel 1990, come parte della sua visione del {{glossary("World Wide Web","Web")}}, Tim Berners-Lee definisce il suo concetto di {{glossary("hypertext","hypertesto (hypertext)")}}, che successivamente ha formalizzato durante gli anni attraverso un markup basato principalmente su {{glossary("SGML")}}. L'{{glossary("IETF")}} inizia a specificare formalmente HTML nel 1993, e dopo diverse bozze rilascia ufficialmente la versione 2.0 nel 1995. Nel 1994 Berners-Lee fonda il {{glossary("W3C")}} per lo sviluppo Web. Nel 1996, il W3C si assume il lavoro riguardo HTML e pubblica la versione 3.2 un anno dopo. Successivamente, HTML 4.0 è stato rilasciato nel 1999 ed è diventato un {{glossary("ISO")}} standard nel 2000.

+ +

Al tempo, il W3C stava quasi per abbandonare l'HTML a favore di {{glossary("XHTML")}}, solleticando la fondazione nel 2004 di un gruppo indipendente chiamato {{glossary("WHATWG")}}. Grazie al WHATWG, il lavoro su {{glossary("HTML5")}} è continuato: le due organizzazioni hanno rilasciato la prima bozza nel 2008 e la versione finale nel 2014.

+ +

Concetto e sintassi

+ +

Un documento HTML è un documento in chiaro strutturato con degli {{glossary("element","elementi")}}. Gli elementi sono racchiusi fra dei {{Glossary("tag")}} di apertura e chiusura. Ogni tag inizia e finisce con delle parentesi angolari (<>). Esistono alcuni tag "vuoti" che non possono includere testo, ad esempio {{htmlelement("img")}}.

+ +

I tag in HTMl possono essere estesi con degli {{Glossary("attribute","attributi")}}, che forniscono informazioni aggiuntive che vanno a influenzare il modo in cui il browser interpreta tale elemento. Esempio:

+ +

Detail of the structure of an HTML element

+ +

Un file HTML è salvato con un estensione .htm o .html, solitamente servito a un {{Glossary("Server","Web server")}}, e visualizzato da qualsiasi {{Glossary("Browser","Web browser")}} (con diverse compatibilità).

+ +

Vedi altro

+ +

Conoscenza generale

+ + + +

Impara HTML

+ + + +

Riferimento tecnici

+ + diff --git a/files/it/glossary/html5/index.html b/files/it/glossary/html5/index.html new file mode 100644 index 0000000000..63a0630a67 --- /dev/null +++ b/files/it/glossary/html5/index.html @@ -0,0 +1,18 @@ +--- +title: HTML5 +slug: Glossary/HTML5 +tags: + - CodingScripting + - Glossário + - HTML + - HTML5 + - Script +translation_of: Glossary/HTML5 +--- +

L'ultimo rilascio stabile di {{Glossary("HTML")}}, HTML5, porta HTML da un semplice linguaggi di markup per strutturare un document a una completa piattaforma di sviluppo app. Tra le altre caratteristiche, HTML5 include nuovi elementi e nuove {{glossary("JavaScript")}} {{glossary("API","APIs")}} per migliorare l'accesso allo storage, ai multimedia e all'hardware.

+ +

Vedi altro

+ + diff --git a/files/it/glossary/http/index.html b/files/it/glossary/http/index.html new file mode 100644 index 0000000000..813d9a4f9e --- /dev/null +++ b/files/it/glossary/http/index.html @@ -0,0 +1,26 @@ +--- +title: HTTP +slug: Glossary/HTTP +tags: + - Beginner + - Glossary + - HTTP + - Infrastructure + - Web Performance + - 'l10n:priority' +translation_of: Glossary/HTTP +--- +

L’HyperText Transfer Protocol (Protocollo di Trasferimento Ipertestuale, HTTP) è il {{glossary("protocol", "protocollo")}} di rete fondamentale per il trasferimento di ipermedia (documenti multimediali che utilizzano hyperlink) sul {{glossary("World Wide Web","Web")}}. Solitamente ha luogo fra un browser e un server, in modo che l'utente possa fruire dei contenuti. La versione corrente di HTTP è {{glossary("HTTP_2", "HTTP/2")}}.

+ +

Il termine "http" fa parte di un {{glossary("URI")}} (come ad esempio in "http://example.com/") ed è chiamato "schema". Le risorse che utilizzano lo schema "http" sono solitamente trasferite per mezzo di una connessione non criptata che usa il protocollo HTTP. Lo schema "https" (come ad esempio in "https://developer.mozilla.org") indica che una risorsa è trasferita sempre tramite il protocollo HTTP, ma attraverso un canale sicuro chiamato {{glossary("TLS")}}.

+ +

L’HTTP è testuale (tutte le comunicazioni avvengono con testo in chiaro) e indipendente (nessuna comunicazione può conoscere o accedere a quelle precedenti). Questa proprietà è fondamentale per permettere agli utenti di navigare in Internet. Tuttavia, l’HTTP può essere usato come base in servizi web {{glossary("REST")}} per comunicare da server a server oppure per rendere più dinamici i siti web attraverso richieste {{glossary("AJAX")}}.

+ +
+

Approfondimenti

+ +
    +
  • HTTP su MDN
    • +
  • {{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}} su Wikipedia
    • +
+
diff --git a/files/it/glossary/index.html b/files/it/glossary/index.html new file mode 100644 index 0000000000..8e1c81312d --- /dev/null +++ b/files/it/glossary/index.html @@ -0,0 +1,45 @@ +--- +title: Glossary +slug: Glossary +tags: + - Beginner + - Glossary + - Index + - Landing + - NeedsTranslation + - TopicStub +translation_of: Glossary +--- +
{{LearnBox({"title":"Learn a new term:"})}}
+ +

Web technologies contain long lists of jargon and abbreviations that are used in documentation and coding. This glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web.

+ +

Glossary of Terms

+ +

{{GlossaryList({"split": "h3", "css": "multiColumnList"})}}

+ +

Contribute to the glossary

+ +

This glossary is a never ending work in progress. You can help improving it by writing new entries or by making the existing ones better. The easiest way to start is to hit the following link or to pick one of the suggested terms below.

+ +

Add a new entry to the glossary

+ +

{{GlossaryList({"terms":["at-rule", "ALPN", "Attack", "Byte-Order Mark", "client", "Character set", "cryptosystem", "debug", "digital signature", "execution", "flex-direction", "GLSL", "Interface", "Library", "Memory management", "routers", "Self-Executing Anonymous Function", "Stylesheet", "Vector image"], "filter": "notdefined", "css": "multiColumnList"})}}

+ +

If you want to know more on how to contribute to the glossary, check out the glossary documentation status page.

+ +

See also

+ + + + diff --git a/files/it/glossary/javascript/index.html b/files/it/glossary/javascript/index.html new file mode 100644 index 0000000000..b672c4d871 --- /dev/null +++ b/files/it/glossary/javascript/index.html @@ -0,0 +1,41 @@ +--- +title: JavaScript +slug: Glossary/JavaScript +translation_of: Glossary/JavaScript +--- +

JavaScript (JS) è un linguaggio di programmazione principalmente client-side per programmare dinamicamente pagine web, ma spesso anche {{Glossary("Server","server")}}-side, usando pacchetti come Node.js.

+ +

Non confondere JavaScript with the {{interwiki("wikipedia", "Java_(programming_language)", "linguaggio di programmazione Java")}}. Sia "Java" che "JavaScript" sono marchi commerciali o marchi registrati di Oracle negli Stati Uniti e in altri Paesi. Comunque sia, i due linguaggi di programmazione hanno una sintassi, una semantica e degli usi molto diversi.

+ +

Concepito come un linguaggio server-side da Brendan Eich (un allora impiegato della Netscape Corporation), JavaScript superò presto Netscape Navigator 2.0 nel Settembre 1995. JavaScript ottenne immediato successo e {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} introdusse il supporto a JavaScript sotto il nome JScript nell'Agosto del 1996.

+ +

Nel Novembre del 1996, Netscape iniziò a lavorare con ECMA International per fare di JavaScript uno standard industriale. Da allora, il JavaScript standardizzato è chiamato ECMAScript e indicato con ECMA-262, la cui ultima (ottava) edizione sarà disponibile nel Giugno del 2017.

+ +

JavaScript è principalemente usato nel browser, permettendo agli sviluppatori di manipolare il contenuto delle pagine web tramite {{Glossary("DOM")}}, manipolare dati con {{Glossary("AJAX")}} e {{Glossary("IndexedDB")}}, disegnare elementi grafici con vari {{Glossary("canvas")}}, interagire con il dispositivo che fa andare il browser tramite vari {{Glossary("API","API")}}, e cos via. JavaScript è uno dei linguaggi più usati al mondo, essendo la causa della recente creascita e del miglioramento di performance degli {{Glossary("API","API")}} presenti nei browser.

+ +

Recentemente, JavaScript è ritornato ai server con la nota piattaforma Node.js, il più popolare ambiente di sviluppo cross-platform JavaScript esterno al browser. Node.js permette di usare JavaScript come un linguaggio di script per automatizzare processi su un PC e costruire {{Glossary("HTTP")}} totalmente funzionante e server con {{Glossary("Web Sockets", "Web Socket")}}.

+ +

Scopri di più

+ +

Conoscenza generale

+ + + +

Impaare il JavaScript

+ + + +

Riferimenti tecnici

+ + diff --git a/files/it/glossary/node/dom/index.html b/files/it/glossary/node/dom/index.html new file mode 100644 index 0000000000..33c713a074 --- /dev/null +++ b/files/it/glossary/node/dom/index.html @@ -0,0 +1,14 @@ +--- +title: Node (DOM) +slug: Glossary/Node/DOM +translation_of: Glossary/Node/DOM +--- +

Nel contesto del {{Glossary("DOM")}}, un nodo è un singolo punto nell'albero dei nodi. Varie cose che sono nodi sono il documento stesso, elementi, testo e commenti.

+ +

Per saperne di più

+ +

Riferimento tecnico

+ + diff --git a/files/it/glossary/node/index.html b/files/it/glossary/node/index.html new file mode 100644 index 0000000000..49f2190f34 --- /dev/null +++ b/files/it/glossary/node/index.html @@ -0,0 +1,15 @@ +--- +title: Node +slug: Glossary/Node +tags: + - Disambiguation + - Glossary + - NeedsTranslation + - TopicStub +translation_of: Glossary/Node +--- +

The term node can have several meanings depending on the context. It may refer to:

+ +

{{GlossaryDisambiguation}}

+ +

Another use of the word is when talking about {{Glossary("Node.js")}}

diff --git a/files/it/glossary/nullish/index.html b/files/it/glossary/nullish/index.html new file mode 100644 index 0000000000..3d4ac992ed --- /dev/null +++ b/files/it/glossary/nullish/index.html @@ -0,0 +1,6 @@ +--- +title: Nullish value +slug: Glossary/Nullish +translation_of: Glossary/Nullish +--- +

In JavaScript, un valore nullo può essere {{JSxRef("null")}} o {{JSxRef("undefined")}}. I valori nulli sono sempre falsi.

diff --git a/files/it/glossary/primitive/index.html b/files/it/glossary/primitive/index.html new file mode 100644 index 0000000000..a254782313 --- /dev/null +++ b/files/it/glossary/primitive/index.html @@ -0,0 +1,32 @@ +--- +title: Primitive +slug: Glossary/Primitive +translation_of: Glossary/Primitive +--- +

Una primitiva (valore primitivo, tipo di dato primitivo) è un dato che non è un {{Glossary("object", "oggetto")}} e non ha {{glossary("method","metodi")}}. In {{Glossary("JavaScript")}}, cisono 6 tipi di dati primitivi: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("boolean")}}, {{Glossary("null")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}} (nuovo in {{Glossary("ECMAScript")}} 2015).

+ +

La maggior parte delle volte, un vaolre primitivo è rappresentato direttamente al livello più basso dell'implementazione del linguaggio.

+ +

Tutte le primitive sono immutabili (non possono essere cambiati).

+ +

Wrapper di oggetti primitivi in JavaScript

+ +

Ad eccezione di null e undefined, tutti i valori primitivi hanno oggetti equivalenti che avvolgono i valori primitivi:

+ + + +

Il methodo wrapper valueOf() ritorna il valore primitivo.

+ +

Per saperne di più

+ +

Conoscenza generale

+ + diff --git a/files/it/glossary/protocollo/index.html b/files/it/glossary/protocollo/index.html new file mode 100644 index 0000000000..d764b42322 --- /dev/null +++ b/files/it/glossary/protocollo/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/reflow/index.html b/files/it/glossary/reflow/index.html new file mode 100644 index 0000000000..9f62c24c8b --- /dev/null +++ b/files/it/glossary/reflow/index.html @@ -0,0 +1,12 @@ +--- +title: Reflow +slug: Glossary/Reflow +translation_of: Glossary/Reflow +--- +

Il Reflow avviene quando un {{glossary("browser")}} deve processare e ridesignare (posizionie geometrie) una pagina web o una sua parte, come dopo un aggiornamento dinamico della pagina in un sito interattivo.

+ +

Vedi anche

+ + diff --git a/files/it/glossary/rest/index.html b/files/it/glossary/rest/index.html new file mode 100644 index 0000000000..9c6a8f9100 --- /dev/null +++ b/files/it/glossary/rest/index.html @@ -0,0 +1,33 @@ +--- +title: REST +slug: Glossary/REST +tags: + - Architettura + - Funzionamento del web + - Glossário + - HTTP + - Principiante + - Rest +translation_of: Glossary/REST +--- +

Il Representational State Transfer (REST) si riferisce a un insieme di vincoli nell'architettura del software che permettono ai sistemi di essere efficienti, affidabili e scalabili. Un sistema è definito “RESTful” quando rispetta questi vincoli.

+ +

L'idea di base di REST è trasferire una risorsa, ad esempio un documento, insieme al suo stato e ai suoi collegamenti ipertestuali (hypertext) tramite operazioni standard e in formati ben definiti. Spesso le {{Glossary("API","API")}} o servizi differenti vengono chiamati RESTful quando modificano direttamente un documento, invece di attivare azioni altrove.

+ +

Dato che l’{{Glossary("HTTP")}}, il protocollo standard alla base del {{glossary("World Wide Web","Web")}}, trasferisce documenti e link ipertestuali, API e HTTP sono a volte definiti colloquialmente “RESTful API”, “RESTful service” o più semplicemente “REST service”, anche se non rispettano totalmente i vincoli REST. I principianti possono concepire una REST API come un servizio HTTP che può essere chiamato usando librerie e strumenti web.

+ +

Approfondimenti

+ +

Risorse di apprendimento

+ + + +

Conoscenze generali

+ + diff --git a/files/it/glossary/serialization/index.html b/files/it/glossary/serialization/index.html new file mode 100644 index 0000000000..f710d23439 --- /dev/null +++ b/files/it/glossary/serialization/index.html @@ -0,0 +1,22 @@ +--- +title: Serializzazione +slug: Glossary/Serialization +tags: + - Glossário + - JavaScript + - Serializzazione +translation_of: Glossary/Serialization +--- +

Il processo mediante il quale un oggetto o una struttura di dati viene tradotto in un formato adatto per il trasferimento su una rete, o archiviazione (ad esempio in un buffer di matrice o in un formato di file).

+ +

In {{Glossary("JavaScript")}}, ad esempio, puoi serializzare un oggetto su {{Glossary("JSON")}} {{Glossary("string")}} chiamando il {{Glossary("function")}} {{jsxref("JSON.stringify()")}}.

+ +

{{Glossary("CSS")}} sono serializzati chiamando la funzione {{domxref("CSSStyleDeclaration.getPropertyValue()")}}.

+ +

Per saperne di più

+ +

Conoscenza generale

+ + diff --git a/files/it/glossary/undefined/index.html b/files/it/glossary/undefined/index.html new file mode 100644 index 0000000000..dd33699e99 --- /dev/null +++ b/files/it/glossary/undefined/index.html @@ -0,0 +1,12 @@ +--- +title: undefined +slug: Glossary/undefined +translation_of: Glossary/undefined +--- +

Un valore {{Glossary("primitive", "primitivo")}} assegnato automaticamente alle variabili che sono appena state dichiarate o ai {{Glossary("Argument","parametri")}} delle funzioni per i quali non è stato passato nessun valore.

+ +

Di più

+ + diff --git a/files/it/glossary/world_wide_web/index.html b/files/it/glossary/world_wide_web/index.html new file mode 100644 index 0000000000..f3e7e4c64a --- /dev/null +++ b/files/it/glossary/world_wide_web/index.html @@ -0,0 +1,42 @@ +--- +title: World Wide Web +slug: Glossary/World_Wide_Web +tags: + - Glossário + - HTTP + - Infrastrutture + - WWW + - World Wide Web +translation_of: Glossary/World_Wide_Web +--- +

Il World Wide Web — comunemente indicato come WWW, W3, o il Web — è un sistema interconnesso di pagine pubbliche accessibili tramite l'{{Glossary("Internet")}}. Il Web non è la stessa cosa dell'Internet: il Web è una delle tante applicazioni costruite sulla cima dell'Internet.

+ +

Tim Berners-Lee propose l'architettura che divenne nota come World Wide Web. Lui ha creato il primo web {{Glossary("Server","server")}}, il primo web {{Glossary("Browser","browser")}}, e la prima pagina web sul suo computer al laboratorio di ricerca del CERN nel 1990. Nel 1991, sempre Tim Berners-Lee, ha annunciato la sua creazione sul newsgroup di alt.hypertext, segnando il momento in cui il Web è stato reso pubblico per la prima volta.

+ +

Il sistema che conosciamo al giorno d'oggi come "il Web" consiste in vari componenti fra cui:

+ + + +

Il collegamento o la connessione di risorse utilizzando gli {{Glossary("Hyperlink","hyperlink")}} è un concetto definito dal Web per facilitare la sua visione come una collezione di documenti connessi fra di loro.

+ +

Poco dopo aver inventato il Web, Tim Berners-Lee ha fondato il {{Glossary("W3C")}} (World Wide Web Consortium) per standardizzare e sviluppare il Web ulteriormente. Questo consorzio è costituito da gruppi interessati al Web, come sviluppatori di web browser, entità governative, ricercatori e universitari. La missione di tale consorzio consiste nell'educazione e nella sensibilizzazione riguardo lo sviluppo Web.

+ +

Vedi altro

+ +

Informazioni a riguardo

+ + + +

Conoscenza generale

+ + diff --git a/files/it/il_modulo_xml_extras/index.html b/files/it/il_modulo_xml_extras/index.html new file mode 100644 index 0000000000..3a36298935 --- /dev/null +++ b/files/it/il_modulo_xml_extras/index.html @@ -0,0 +1,116 @@ +--- +title: Il modulo XML Extras +slug: Il_modulo_XML_Extras +tags: + - Tutte_le_categorie + - XML +translation_of: Mozilla/Tech/XML_Extras +--- +

 

+

Il modulo XML Extras contiene diverse funzionalità che permettono agli sviluppatori di trattare un documento XML come un insieme di dati e non semplicemente come un documento di qualsiasi altro tipo. Il modulo è strutturato come componente incorporato e rende disponibili le sue caratteristiche sia tramite JavaScript, sia tramite C++/XPCOM. Il modulo è compilato per default su tutte le piattaforme ed è incluso ance dagli installer, in modo che sia disponibile anche con le nightly builds.

+

Stato delle funzionalità

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàStato
XMLSerializerDisponibile
XMLHttpRequestDisponibile
DOMParser (string and stream input source)Disponibile
Web Services con SOAP e WSDLDisponibile a partire da 1.4alpha. Spostato nel modulo Web Services a partire da 1.4beta.
XML Persistence 
FIXptr e XPointerDisponibile da 1.4alpha nel cuore di Mozilla. Spostato nel modulo XMLExtras a partire da 1.4beta.
+

Vedere anche:

+ +

QA and Testing

+

There are some online tests for mainly exercising the HTTP GET method via XMLHttpRequest.

+

Other test cases for each of the implemented components listed above exist in {{ Source("extensions/xmlextras/tests/") }}. More exhaustive test suites need to be created, however. If you'd like to help out with QA, you can do one of the following:

+ +

Documentation

+

Probably the best way to learn how to use these technologies is through examples. There are some in {{ Source("extensions/xmlextras/tests/") }}. If you follow that link to look at the examples you will need to look at page source for the HTML documents.

+

For XMLHttpRequest object you can mostly rely on the Microsoft XMLHttpRequest documentation, with some caveats: all functions and property names begin with a lower case letter and the object creation is different. Some properties are not implemented.

+

Thad Hoffman has written a document that shows how you can mimic XML Data Islands in Mozilla. Edmond Woychowsky has also written articles on XML Data Islands in Mozilla: "Make XML data islands work in Mozilla", "Build cross-browser XML paging code" and "Implement a flexible shopping cart with XML and ASP". The Mozilla Developer Center has several pages for XMLHttpRequest.

+

Below are some key differencies in "XML Extras" between Mozilla and Microsoft software:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DifferenceMicrosoftMozilla
Member namesCase insensitive?Begins with lower case letter
XMLHttpRequest Creationnew ActiveXObject("Msxml2.XMLHTTP")new XMLHttpRequest()
XMLHttpRequest.send("some string")okok starting with milestone 0.9.7 (actually nightly 2001-11-28). With older builds, passing strings to send() works only in chrome, see {{ Source("extensions/xmlextras/tests/post.html", "post.html") }} sample. The "workaround" is to use DOMParser object's parseFromString() method to create a document from string, and pass the temporary document into send().
XMLHttpRequest.open("aHost")ok<tt>file://</tt> documents can access <tt>http://</tt> documents but you need to enable UniversalBrowserRead privilege in your scripts - see the JavaScript Security: Signed Scripts document for more details. Normally your files should reside on a webserver so this shouldn't pose a problem (there you do not need that line either). Additionally, "foo.com:80" and "foo.com:313" are considered different hosts for security purposes. You cannot open a connection to a different host.
DOMParser Creationnot availablenew DOMParser()
XMLSerializer Creationnot availablenew XMLSerializer()
+

Minimal documentation for the components listed above can be found using Mozilla documentation generated by Doxygen. File new bugs for additional documentation contributions, either specifically aimed at JavaScript developers or to complete & clarify the JavaDoc-style comments in the IDL files.

+ +

Please see the XML Linking and Pointing section in XML in Mozilla document for FIXptr and XPointer documentation.

+

How can I help?

+ +

{{ languages( { "fr": "fr/XML_Extras" } ) }}

diff --git a/files/it/impacchettare_l'estensione/index.html b/files/it/impacchettare_l'estensione/index.html new file mode 100644 index 0000000000..4646e4365c --- /dev/null +++ b/files/it/impacchettare_l'estensione/index.html @@ -0,0 +1,29 @@ +--- +title: Impacchettare l'Estensione +slug: Impacchettare_l'Estensione +tags: + - Estensioni + - Toolkit API + - Tutte_le_categorie +translation_of: Archive/Add-ons/Extension_Packaging +--- +

Le estensioni sono una forma di pacchetti installabili che possono essere scaricati e installati dall'utente, o forniti pre-impacchettati insieme all'applicazione o ad un programma esterno. Le estensioni utilizzano una struttura della directory che può essere fornita di chrome, componenti, ed altri file per estendere le funzionalità di un programma XUL.

+

Ogni estensione deve essere fornita di un file install.rdf che contiene i metadati sull'estensione, come le informazioni sul suo ID univoco, sulla versione, sull'autore e sulla compatibilità.

+

Dopo che i file dell'estensione e install.rdf sono pronti, ci sono molti modi di preparare l'estensione per l'installazione: comprimere il contenuto della directory dell'estensione in un file XPI installabile dall'utente, decomprimere direttamente l'estensione nell'applicazione o nella cartella del profilo dell'utente, o registrarla nel registro di Windows.

+

Realizzare un XPI di un'estensione

+

Un file XPI (XPInstall) è semplicemente un file (ZIP) compresso che contiene i file dell'estensione, ed il file install.rdf nella root dell'archivio. Gli utenti possono scaricare i file XPI ed installarli sia da un sito web che da un file in locale, aprendo il file o trascinandolo nella finestra delle Estensioni.

+

Il tipo MIME riconosciuto da Firefox per i file XPI è application/x-xpinstall. Poichè molti server non sono normalmente configurati per restituire questi tipo MIME per l'estensione .xpi, sarà probablimente necessario configurare il proprio server. Nei server Apache HTTP, questa operazione può essere effettuata aggiungendo la seguente istruzione al file di configurazione o .htaccess:

+ +
AddType application/x-xpinstall .xpi
+
+ +

Installare i file dell'estensione direttamente

+

Se si conosce l'ubicazione dell'applicazione (se si sta installando l'estensione come parte dell'installer dell'applicazione, ad esempio) è possibile installare i file dell'estensione direttamente in <appdir>/extensions/<extensionID>. L'estensione sarà trovata automaticamente dal programma di gestione delle estensioni al successivo riavvio dell'applicazione.

+

Quando si usa questo metodo, bisogna verificare che i permessi del file system per le directory ed i file sia settati opportunamente. In caso contrario il programma di gestione delle estensioni potrebbe non funzionare correttamente con l'estensione, o l'estensione stessa potrebbe non funzionare a dovere.

+

Registrare l'ubicazione di un'estensione utilizzando il Registro di Windows

+

I programmi di installazione esterni (come Java runtime) potrebbero volere installare punti di integrazione dell'applicazione così come dell'estensione anche se l'applicazione non è ancora installata. Questo su Windows può essere fatto utilizzando il Registro.

+

XPI di estensioni contenenti più elementi

+

In alcuni casi un singolo file XPI potrebbe voler installare più estensioni/temi. Un tipo speciale di XPI di estensioni chiamata Pacchetto multi-elementi spiega come creare questo tipo di pacchetti. (è richiesto Firefox 1.5/XULRunner 1.8.)

+ +

Official References for Toolkit API

+
{{page("/it/docs/Toolkit_API/Official_References")}}
diff --git a/files/it/incorporare_mozilla/index.html b/files/it/incorporare_mozilla/index.html new file mode 100644 index 0000000000..886b462dc7 --- /dev/null +++ b/files/it/incorporare_mozilla/index.html @@ -0,0 +1,7 @@ +--- +title: Incorporare Mozilla +slug: Incorporare_Mozilla +translation_of: Mozilla/Gecko/Embedding_Mozilla +--- +
+ Gecko consente agli sviluppatori di terze parti di utilizzare la stessa tecnologia come si trova in Mozilla. Ciò significa che è possibile incorporare un browser web all'interno di una applicazione di terze parti, aprire canali e flussi attraverso la rete di back-end, attraverso il DOM, e così via. Si può anche costruire insieme nuove applicazioni che utilizzano Chrome.
diff --git a/files/it/indentazione_corretta_delle_liste/index.html b/files/it/indentazione_corretta_delle_liste/index.html new file mode 100644 index 0000000000..0825377b03 --- /dev/null +++ b/files/it/indentazione_corretta_delle_liste/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

+ +
    +
  • Author(s): Eric A. Meyer, Netscape Communications
    • +
  • Last Updated Date: Published 30 Aug 2002
    • +
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
    • +
  • Note: This reprinted article was originally part of the DevEdge site.
    • +
+
+ +

{{ 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 new file mode 100644 index 0000000000..7ccde7c991 --- /dev/null +++ b/files/it/installare_plugin_di_ricerca_dalle_pagine_web/index.html @@ -0,0 +1,33 @@ +--- +title: Installare plugin di ricerca dalle pagine web +slug: Installare_plugin_di_ricerca_dalle_pagine_web +tags: + - Plugin_di_ricerca +translation_of: Web/OpenSearch +--- +

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 new file mode 100644 index 0000000000..b277a2fc86 --- /dev/null +++ b/files/it/introduzione_a_svg_dentro_xhtml/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/le_colonne_nei_css3/index.html b/files/it/le_colonne_nei_css3/index.html new file mode 100644 index 0000000000..7b92b713a0 --- /dev/null +++ b/files/it/le_colonne_nei_css3/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/le_preferenze_utente_e_xforms/index.html b/files/it/le_preferenze_utente_e_xforms/index.html new file mode 100644 index 0000000000..3d5ada87de --- /dev/null +++ b/files/it/le_preferenze_utente_e_xforms/index.html @@ -0,0 +1,26 @@ +--- +title: Le preferenze utente e XForms +slug: Le_preferenze_utente_e_XForms +tags: + - Tutte_le_categorie + - XForms +translation_of: Archive/Web/XForms/User_preferences +--- +

Una descrizione delle preferenze utente di Firefox correlate a XForms. Per accedere a queste ed altre opzioni, digitare about:config nella barra degli indirizzi. +

+ + + + + +
Preferenza +Valore predefinito +Descrizione +
xforms.disablePopup +false +Abilita o disabilita i messaggi di errore di XForms +
xforms.enableExperimentalFeatures +false +Abilita o disabilita le funzionalità sperimentali. Allo stato attuale, l'unica funzionalità sperimentale è la SOAP Action di XForms 1.1. +
+{{ languages( { "fr": "fr/XForms/Pr\u00e9f\u00e9rences_utilisateur", "en": "en/XForms/User_preferences", "ja": "ja/XForms/User_preferences" } ) }} 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" new file mode 100644 index 0000000000..46a2b24c4d --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/accessibilit\303\240_dispositivi_mobili/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:

+ +
    +
  • Meccanismi di controllo: assicurati che i controlli di interfaccia utente, come per esempio i bottoni, siano accessibili sui touchscreen dei dispositivi mobili allo stesso modo in cui lo sono tramite mouse o tastiera su pc o laptop.
    • +
  • Input dell’utente: assicurati che i campi di input richiedano all’utente il minor sforzo possibile (per esempio, nei formulari fai in modo che l’utente debba scrivere il meno possibile).
    • +
  • Disegno responsivo: assicurati che il layout del tuo sito si adatti allo schermo dei dispositivi mobili, mantieni le dimensini delle immagini il più possibile ridotte, e pensa a come ottimizzare le immagini per gli schermi ad alta risouzione.  
    • +
+ +

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:

+ +

 

+ +
    +
  • Idoneità dei layout per dispositivi mobili. Un layout a colonne multiple, per esempio, solitamente non funzionerà molto bene in schermi di dimensioni ridotte. Inoltre potrebbe essere necessario incrementare le le dimensioni dei caratteri perchè siano leggibili. Tali problemi possono essere risolti creando un layout responsivo, facendo uso di tecnologie come  media queries, viewport, e flexbox.
    • +
  • Dimensioni delle immagini. In generale, i dispositivi con schermi di dimensioni ridotte non necessitano di immagini grandi come quelle che si usano per i monitor dei pc, e inoltre spesso navigano usando connessioni lente. È dunque opportuno fare in modo che la nostra applicazione usi immagini più piccole quando viene visualizzata su schermi di dimensioni ridotte. Per sapere come ottenere ciò, usa tecniche responsive per immagini.
    • +
  • Schermi ad alta risoluzione. Molti dispositivi mobili hanno schermi ad alta risoluzione, e per fare in modo che su tali schermi le immagini si visualizzino senza sfocature è necessario usare immagini ad alta risoluzione. Ancora una volta, puoi fare ricorso a tecniche responsive per immagini. Inoltre, puoi ricorrere a immagini vettoriali in SVG, un formato che ha un supporto molto ampio nei browser moderni. Gli SVG hanno un peso ridotto e mantengono invariata la qualità dell’immagine, a prescindere dalle dimensioni in cui vengono visualizzati. Vedi l'articolo in inglese Usare immagini vettoriali sul web per maggiori dettagli.
    • +
+ +

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:

+ +

 

+ +
    +
  • I tipi number, tel, e email quando selezionati fanno apparire una tastiera virtuale adatta all’inserimento di numeri o numeri di telefono.
    • +
  • I tipi time e date fanno apparire widget di tipo orologio o calendario per la selezione rapida di una ora o una data.
    • +
+ +

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

+ +
    +
  • Linee guida per lo sviluppo web mobile (in inglese) — Una lista di articoli in inglese presenti sul sito Smashing Magazine che illustrano differenti tecniche di disegno web per dispositivi mobili.
    • +
  • Fai funzionare il tuo sito sui dispositivi touch (in inglese) — Utile articolo in inglese sull’utilizzo degli eventi touch per il corretto funzionamento delle interazioni dell’utente con l’applicazione sui dispositivi mobili.
    • +
+ +
{{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" new file mode 100644 index 0000000000..8c0e97dab4 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/accessibilit\303\240_test_risoluzione_problemi/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/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" new file mode 100644 index 0000000000..52a5c138f8 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/cosa_\303\250_accessibilit\303\240/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/css_e_javascript_accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/index.html" new file mode 100644 index 0000000000..6f5e69fea4 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/css_e_javascript_accessibilit\303\240/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/accessibilit\303\240/html_accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/html_accessibilit\303\240/index.html" new file mode 100644 index 0000000000..26129068e4 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/html_accessibilit\303\240/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/accessibilit\303\240/index.html" "b/files/it/learn/accessibilit\303\240/index.html" new file mode 100644 index 0000000000..57dee47809 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/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/accessibilit\303\240/multimedia/index.html" "b/files/it/learn/accessibilit\303\240/multimedia/index.html" new file mode 100644 index 0000000000..f920e59050 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/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/accessibilit\303\240/wai-aria_basics/index.html" "b/files/it/learn/accessibilit\303\240/wai-aria_basics/index.html" new file mode 100644 index 0000000000..09891c8a11 --- /dev/null +++ "b/files/it/learn/accessibilit\303\240/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/come_contribuire/index.html b/files/it/learn/come_contribuire/index.html new file mode 100644 index 0000000000..bd3d90966a --- /dev/null +++ b/files/it/learn/come_contribuire/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/learn/common_questions/index.html b/files/it/learn/common_questions/index.html new file mode 100644 index 0000000000..966a03b29e --- /dev/null +++ b/files/it/learn/common_questions/index.html @@ -0,0 +1,139 @@ +--- +title: Common questions +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - NeedsTranslation + - TopicStub + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +
{{LearnSidebar}}
+ +

This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the HTML or CSS learning articles.) These articles are designed to work on their own.

+ +

How the Web works

+ +

This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.

+ +
+
+

How does the Internet work?

+
+
The Internet is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.
+
+

What is the difference between webpage, website, web server, and search engine?

+
+
In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!
+
+

What is a URL?

+
+
With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.
+
+

What is a domain name?

+
+
Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.
+
+

What is a web server?

+
+
The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.
+
+ +
+
In this article, we'll go over what hyperlinks are and why they matter.
+
+ +

Tools and setup

+ +

Questions related to the tools/software you can use to build websites.

+ +
+
+

How much does it cost to do something on the Web?

+
+
When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).
+
+

What software do I need to build a website?

+
+
In this article we explain which software components you need when you're editing, uploading, or viewing a website.
+
+

What text editors are available?

+
+
In this article we highlight some things to think about when choosing and installing a text editor for web development.
+
+

How do I set up a basic working environment?

+
+
When working on a web project, you'll want to test it locally before you show it to the world. Some types of code require a server to test, and in this article we'll show you how to set one up. We'll also cover how to put a scalable structure in place so that your files stay organized even when your project gets big.
+
+

What are browser developer tools?

+
+
Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.
+
+

How do you make sure your website works properly?

+
+
So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.
+
+

How do you set up a local testing server?

+
+
+
+

This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.

+
+
+
+

How do you upload files to a web server?

+
+
This article shows how to publish your site online with FTP tools — one fo the most common ways to get a website online so others can access it from their computers.
+
+

How do I use GitHub Pages?

+
+
This article provides a basic guide to publishing content using GitHub's gh-pages feature.
+
+

How do you host your website on Google App Engine?

+
+
Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.
+
+

What tools are available to debug and improve website performance?

+
+
This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.
+
+ +

Design and accessibility

+ +

This section lists questions related to aesthetics, page structure, accessibility techniques, etc.

+ +
+
+

How do I start to design my website?

+
+
This article covers the all-important first step of every project: define what you want to accomplish with it.
+
+

What do common web layouts contain?

+
+
When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.
+
+

What is accessibility?

+
+
This article introduces the basic concepts behind web accessibility.
+
+

How can we design for all types of users?

+
+
This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.
+
+

What HTML features promote accessibility?

+
+
This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.
+
+ +

HTML, CSS and JavaScript questions

+ +

For common solutions to HTML/CSS/JavaScript problems, try the following articles:

+ + diff --git a/files/it/learn/common_questions/thinking_before_coding/index.html b/files/it/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..c88abf5480 --- /dev/null +++ b/files/it/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,180 @@ +--- +title: How do I start to design my website? +slug: Learn/Common_questions/Thinking_before_coding +translation_of: Learn/Common_questions/Thinking_before_coding +--- +

Questo articolo tratta l'importantissimo primo passo di ogni progetto: definisci cosa vuoi realizzare con il tuo sito.

+ + + + + + + + + + + + +
Prerequisiti:Nessuno
Obbiettivo:Impara a definire obiettivi per orientare il tuo progetto web.
+ +

Sommario

+ +

Quando si inizia con un progetto Web, molte persone si concentrano sul lato tecnico. Ovviamente devi avere familiarità con la tecnica del tuo mestiere, ma ciò che conta davvero è ciò che vuoi realizzare. Sì, sembra ovvio, ma troppi progetti falliscono non per mancanza di know-how tecnico, ma per mancanza di obiettivi e visione.

+ +

Quindi, quando hai un'idea e vuoi trasformarla in un sito Web, ci sono alcune domande a cui dovresti rispondere prima di ogni altra cosa:

+ + + +

Tutto ciò si chiama ideazione del progetto ed è un primo passo necessario per raggiungere il tuo obiettivo, che tu sia un principiante o uno sviluppatore esperto.

+ +

Apprendimento attivo

+ +
+
Non è ancora disponibile un apprendimento attivo. Per favore, considera di contribuire.
+
+ +

Approfondimento

+ +

Un progetto non inizia mai con il lato tecnico. I musicisti non faranno mai musica a meno che non abbiano prima un'idea di ciò che vogliono suonare, e lo stesso vale per pittori, scrittori e sviluppatori web. La tecnica arriva seconda.
+
+ La tecnica è ovviamente critica. I musicisti devono padroneggiare il loro strumento. Ma i bravi musicisti non potranno mai produrre buona musica senza un'idea. Pertanto, prima di passare al lato tecnico, ad esempio codice e strumenti, è necessario fare un passo indietro e decidere in dettaglio cosa si desidera fare.
+
+ La discussione di un'ora con gli amici è un buon inizio, ma inadeguata. Devi sederti e strutturare le tue idee per avere una visione chiara di quale percorso devi prendere per trasformare le tue idee in realtà. Per fare questo, hai solo bisogno di carta e penna e del tempo per rispondere almeno alle seguenti domande.

+ +
+

Nota: ci sono innumerevoli modi per realizzare l'ideazione del progetto. Non possiamo metterli tutti qui (un intero libro non sarebbe abbastanza). Quello che presenteremo qui è un metodo semplice per gestire ciò che i professionisti chiamano Ideazione del progetto, Pianificazione del progetto e Gestione del progetto.

+
+ +

Cosa voglio esattamente realizzare?

+ +

Questa è la domanda più importante a cui rispondere, poiché guida tutto il resto. Elenca tutti gli obiettivi che desideri raggiungere. Può essere qualsiasi cosa: vendere beni per fare soldi, esprimere opinioni politiche, incontrare nuovi amici, fare concerti con i musicisti, collezionare foto di gatti o qualsiasi cosa tu voglia.

+ +

Supponi di essere un musicista. Potresti voler:

+ + + +

Una volta che hai un tale elenco, devi dare la priorità. Ordina gli obiettivi dal più importante al meno importante:

+ +
    +
  1. Trova una nuova ragazza / ragazzo.
    2. +
  2. Consenti alle persone di ascoltare la tua musica.
    3. +
  3. Parla della tua musica.
    4. +
  4. Incontra altri musicisti.
    5. +
  5. Vendi chicche.
    6. +
  6. Insegna la musica attraverso i video.
    7. +
  7. Pubblica foto dei tuoi gatti.
    8. +
+ +

Fare questo semplice esercizio — scrivere obiettivi e classificarli — ti aiuterà quando hai delle decisioni da prendere. (Devo implementare queste funzionalità, utilizzare questi servizi, creare questi design?)

+ +

Quindi ora che hai un elenco prioritario di obiettivi, passiamo alla domanda successiva.

+ +

In che modo un sito web potrebbe portarmi ai miei obiettivi?

+ +

Quindi hai un elenco di obiettivi e ritieni di aver bisogno di un sito Web per raggiungere tali obiettivi. Sei sicuro?

+ +

Diamo un'occhiata al nostro esempio. Abbiamo cinque obiettivi collegati alla musica, uno legato alla vita personale (trovare il tuo altro significativo) e le foto di gatti completamente indipendenti. È ragionevole creare un singolo sito Web per coprire tutti questi obiettivi? È addirittura necessario? Dopotutto, decine di servizi web esistenti potrebbero portarti ai tuoi obiettivi senza creare un nuovo sito web.

+ +

Trovare una ragazza / ragazzo è il primo caso in cui ha più senso usare le risorse esistenti piuttosto che costruire un sito completamente nuovo. Perché? Perché dedicheremo più tempo alla costruzione e alla manutenzione del sito Web piuttosto che alla ricerca di una ragazza / ragazzo. Poiché il nostro obiettivo è ciò che conta di più, dovremmo spendere le nostre energie per sfruttare gli strumenti esistenti anziché iniziare da zero. Ancora una volta, ci sono così tanti servizi web già disponibili per mostrare le foto che non vale la pena creare un nuovo sito solo per spargere la voce su quanto siano carini i nostri gatti.

+ +

Gli altri cinque obiettivi sono tutti collegati alla musica. Esistono, naturalmente, molti servizi Web in grado di gestire questi obiettivi, ma in questo caso ha senso creare un sito Web dedicato. Tale sito Web è il modo migliore per aggregare tutte le cose che vogliamo pubblicare in un unico posto (buono per gli obiettivi 3, 5 e 6) e promuovere interazione tra di noi e il pubblico (buono per gli obiettivi 2 e 4). In breve, poiché questi obiettivi ruotano tutti intorno allo stesso argomento, avere tutto in un unico posto ci aiuterà a raggiungere i nostri obiettivi e aiuterà i nostri follower a connettersi con noi.

+ +

In che modo un sito Web può aiutarmi a raggiungere i miei obiettivi? Rispondendo a ciò, troverai il modo migliore per raggiungere i tuoi obiettivi e salvarti da uno sforzo sprecato.

+ +

Cosa bisogna fare e in quale ordine per raggiungere i miei obiettivi?

+ +

Ora che sai cosa vuoi realizzare, è tempo di trasformare quegli obiettivi in passaggi attuabili. Come nota a margine, i tuoi obiettivi non sono necessariamente fissati nella pietra. Si evolvono nel tempo anche nel corso del progetto, soprattutto se si incontrano ostacoli imprevisti o si cambia idea.

+ +

Invece di fare una lunga spiegazione, torniamo al nostro esempio con questa tabella:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ObiettiviCose da fare
Consenti alle persone di ascoltare la tua musica +
    +
  1. Registra musica
    2. +
  2. Prepara alcuni file audio utilizzabili online (potresti farlo con i servizi web esistenti?) +
    3. +
  3. Consenti alle persone di accedere alla tua musica su alcune parti del tuo sito web
    4. +
+
Parla della tua musica +
    +
  1. Scrivi alcuni articoli per iniziare la discussione
    2. +
  2. Definisci l'aspetto degli articoli
    3. +
  3. Pubblica tali articoli sul sito Web (come fare?)
    4. +
+
Incontra altri musicisti +
    +
  1. Fornire modi in cui le persone possono contattarti (e-mail? Facebook? Telefono? Posta?) +
    2. +
  2. Definisci come le persone troveranno quei canali di contatto dal tuo sito web
    3. +
+
Vendi chicche +
    +
  1. Crea le chicche
    2. +
  2. Conserva le chicche
    3. +
  3. Trova un modo per gestire la spedizione
    4. +
  4. Trova un modo per gestire il pagamento
    5. +
  5. Crea un meccanismo sul tuo sito affinché le persone possano effettuare ordini
    6. +
+
Insegna musica attraverso i video +
    +
  1. Registra lezioni video
    2. +
  2. Prepara i file video visualizzabili online (Ancora, potresti farlo con i servizi web esistenti?) +
    3. +
  3. Consenti alle persone di accedere ai tuoi video su alcune parti del tuo sito web
    4. +
+
+ +

Due cose da notare. Innanzitutto, alcuni di questi articoli non sono correlati al web (ad esempio, registrare musica, scrivere articoli). Spesso queste attività offline sono ancora più importanti del lato web del progetto. Nelle vendite, ad esempio, è molto più importante e richiede molto tempo gestire la fornitura, il pagamento e la spedizione piuttosto che costruire un sito Web in cui le persone possono effettuare ordini.

+ +

In secondo luogo, la definizione di passaggi attuabili porta a nuove domande a cui dovrai rispondere. Di solito ci sono più domande di quanto pensassimo inizialmente. (Ad esempio, dovrei imparare a fare tutto questo da solo, chiedere a qualcuno di farlo per me o utilizzare servizi di terze parti?)

+ +

Conclusione

+ +

Come puoi vedere, la semplice idea "Voglio creare un sito Web" genera un lungo elenco di cose da fare, che si allunga solo quando ci pensi. Presto potrebbe sembrare travolgente, ma non fatevi prendere dal panico. Non è necessario rispondere a tutte le domande e non è necessario fare tutto sul proprio elenco. Ciò che conta è avere una visione di ciò che vuoi e come arrivarci. Una volta che hai quella visione chiara, devi decidere come e quando farlo. Suddividi i compiti più grandi in piccoli passaggi attuabili. E quei piccoli passi si sommeranno a grandi risultati.

+ +

Da questo articolo, dovresti ora essere in grado di fare un piano approssimativo per la creazione di un sito Web. Un prossimo passo potrebbe essere quello di leggere come funziona Internet.

diff --git a/files/it/learn/css/building_blocks/index.html b/files/it/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..ef61b8c18b --- /dev/null +++ b/files/it/learn/css/building_blocks/index.html @@ -0,0 +1,89 @@ +--- +title: La costruzione del CSS +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn + - Principiante + - building blocks +translation_of: Learn/CSS/Building_blocks +--- +
{{LearnSidebar}}
+ +

Questo modulo di apprendimento è il seguito di Primi passi con il CSS: dopo aver familiarizzato con il linguaggio e la sua sintassi e dopo aver acquisito una minima esperienza di utilizzo, è ora di andare più a fondo. In questo modulo verranno trattati: funzionamento a cascata ed ereditarietà, tutti i tipi di selettori disponibili, unità di misura, dimensioni, stilizzazione di sfondi e contorni, debug e molto altro.

+ +

Lo scopo del modulo è fornire gli strumenti per sviluppare CSS efficaci e le basi teoriche essenziali, prima di procedere verso discipline più specifiche come la stilizzazione del testo e il layout CSS.

+ +

Prerequisiti

+ +

Per affrontare questo modulo è necessario:

+ +
    +
  1. Familiarità con l'utilizzo di computer e navigazione passiva sul Web (ovvero consultare semplicemente i contenuti, senza manipolarli).
    2. +
  2. Un ambiente di lavoro base come specificato in Installazione di software fondamentali e le conoscenze necessarie a creare e gestire file, come specificato in Gestire i file.
    3. +
  3. Una minima familiarità con l'HTML, come trattato nel modulo Introduzione all'HTML.
    4. +
  4. Comprensione delle basi del CSS come trattato nel modulo Primi passi con il CSS.
    5. +
+ +
+

Nota: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo JSBin o Glitch.

+
+ +

Guide

+ +

Questo modulo contiene i seguenti articoli, che coprono le basi del linguaggio CSS. Lungo il percorso sono previsti vari esercizi per verificare la comprensione dell'argomento.

+ +
+
Cascade ed ereditarietà
+
L'obiettivo di questa lezione è sviluppare la comprensione di alcuni dei concetti fondamentali del CSS (il cascade, la specificità e l'ereditarietà) che regolano l'applicazione del CSS all'HTML e la risoluzione dei conflitti.
+
Selettori CSS
+
Esiste una grande varietà di selettori CSS, che permettono di selezionare con estrema precisione gli elementi da stilizzare. In questo articolo e nelle sue sotto-sezioni osservando come funzionano nel dettaglio le differenti tipologie. Le sotto-sezioni sono le seguenti: + +
+
Il modello a contenitori CSS
+
Ogni elemento CSS è racchiuso in un contenitore. Comprendere il funzionamento dei contenitori è fondamentale per creare layout con il CSS o allineare fra loro gli elementi. In questa lezione studieremo il modello a contenitori del CSS, una premessa necessaria per acquisire dimestichezza con il loro funzionamento e relativa terminologia prima di passare a configurazioni di layout più complesse.
+
Sfondi e contorni
+
In questa lezione accenneremo alle potenzialità creative del CSS mediante la stilizzazione di sfondi e contorni. Affronteremo numerose delle domande più frequenti sul CSS come aggiungere gradienti, immagini di sfondo e angoli arrotondati.
+
Gestire direzioni di testo differenti
+
Recentemente il CSS si è evoluto per supportare meglio differenti direzioni del contenuto, sia quella da destra verso sinistra che quella dall'alto verso il basso (come il giapponese). Queste differenti direzioni sono chiamate writing modes, cioè modalità di scrittura. Introduciamo l'argomento perché più avanti, quando inizieremo a lavorare con i layout, sarà utile capire le modalità di scrittura.
+
Overflow dei contenuti
+
In questa lezione vedremo un altro importante concetto nel CSS: l'overflow. L'overflow si verifica quando il contenuto è troppo per essere adeguatamente racchiuso in un contenitore. In questa guida impareremo di cosa si tratta e come gestirlo.
+
Valori e unità CSS
+
Ogni proprietà usata nel CSS ha un valore o un insieme di valori consentiti per quella proprietà. In questa lezione affronteremo i valori e le unità più diffusi.
+
Ridimensionare gli elementi nel CSS
+
Nelle precedenti lezioni abbiamo incontrato diversi metodi per ridimensionare elementi in una pagina web utilizzando il CSS. È importante essere in grado di calcolare la dimensione dei diversi elementi nel proprio concetto grafico. In questa lezione riassumeremo i vari metodi per definire la grandezza di un elemento tramite il CSS e alcuni termini riguardo le grandezze che potranno esserti d'aiuto in futuro.
+
Immagini, contenuti multimediali e moduli
+
In questa lezione vedremo come alcuni elementi speciali vengono gestiti nel CSS. Gli elementi di immagini, altri contenuti multimediali e moduli presentano leggere differenze in termini di possibilità di stilizzazione in contenitori regolari. Sapere cosa sia possibile e cosa no può evitare errori frustranti. In questa lezione evidenzieremo le conoscenze più importanti che ci serviranno.
+
Stili e tabelle
+
Stilizzare una tabella HTML non è il lavoro più entusiasmante al mondo, ma a volte tocca a farlo. Questo articolo fornisce una guida per rendere le tabelle HTML graficamente gradevoli, presentando anche tecniche di stilizzazione specifiche.
+
Fare il debug in CSS
+
Un problema comune nello sviluppo del CSS è quando il codice presenta comportamenti imprevisti. Questo articolo fornisce una traccia per compiere il debug di un problema con il CSS e mostra come impiegare i DevTools (gli strumenti per sviluppatore incorporati in tutti i browser moderni) per individuare le anomalie.
+
Organizzare il CSS
+
Quando si inizia a lavorare su fogli di stile e progetti sempre più corposi, ci si rende conto che mantenere un file CSS di grandi dimensioni può essere impegnativo. In questo articolo affronteremo velocemente alcune buone pratiche per scrivere un foglio CSS facilmente gestibile e altre soluzioni escogitate dai vari sviluppatori per semplificare la gestione del codice.
+
+ +

Valutazioni

+ +

Per chi desidera mettersi alla prova, le seguenti valutazioni sono realizzate appositamente per verificare la comprensione degli argomenti CSS affrontati nelle guide precedenti.

+ +
+
Comprensione delle basi di CSS
+
Questa valutazione verifica la comprensione della sintassi CSS di base, selettori, specificità, modelli di contenitori e altro.
+
Realizza una carta da lettere intestata
+
Per fare una buona prima impressione non c'è niente di meglio che scrivere una lettera su carta intestata ricercata. Per superare questa valutazione dovrai realizzare un modello di carta intestata online dalla grafica accattivante.
+
Un gran bel contenitore
+
In questa valutazione faremo pratica con la stilizzazione di sfondi e contorni per realizzare un contenitore che non passa inosservato.
+
+ +

Vedi anche

+ +
+
Effetti avanzati di stilizzazione
+
Questo articolo è una sorta di scatola dei trucchi: fornisce un'introduzione ad alcune interessanti funzionalità avanzate di stilizzazione come ombre, modalità di fusione e filtri.
+
diff --git a/files/it/learn/css/building_blocks/selettori/index.html b/files/it/learn/css/building_blocks/selettori/index.html new file mode 100644 index 0000000000..cf0f6662cf --- /dev/null +++ b/files/it/learn/css/building_blocks/selettori/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/styling_tables/index.html b/files/it/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..990188c01c --- /dev/null +++ b/files/it/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,294 @@ +--- +title: Stili e tabelle +slug: Learn/CSS/Building_blocks/Styling_tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
+ +

Applicare stili a tabelle HTML non è il lavoro più stimolante che esista, ma di tanto in tanto va fatto. Questo articolo vi guiderà nel compito di rendere gradevoli le tabelle HTML, usando gli attributi spiegati in articoli precedenti.

+ + + + + + + + + + + + +
Prerequisiti:Basi HTML (vedi Introduction to HTML), tabelle HTML (vedi il modulo tabelle HTML (TBD)), e un'idea di come funzioni un CSS (studia Introduction to CSS.)
Obiettivo:Uso efficace degli stili su tabelle HTML.
+ +

Una tipica tabella HTML

+ +

Iniziamo a vedere una tipica tabella HTML. Beh, diciamo tipica — gli esempi di tabella contengono scarpe, meteo, dipendenti; rendiamo le cose più interessanti usando le più famose band punk del Regno Unito. Il codice quindi sarà questo:

+ +
<table>
+  <caption>A summary of the UK's most famous punk bands</caption>
+  <thead>
+    <tr>
+      <th scope="col">Band</th>
+      <th scope="col">Year formed</th>
+      <th scope="col">No. of Albums</th>
+      <th scope="col">Most famous song</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Buzzcocks</th>
+      <td>1976</td>
+      <td>9</td>
+      <td>Ever fallen in love (with someone you shouldn't've)</td>
+    </tr>
+    <tr>
+      <th scope="row">The Clash</th>
+      <td>1976</td>
+      <td>6</td>
+      <td>London Calling</td>
+    </tr>
+
+     ... alcune righe rimosse per concisione
+
+    <tr>
+      <th scope="row">The Stranglers</th>
+      <td>1974</td>
+      <td>17</td>
+      <td>No More Heroes</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <th scope="row" colspan="2">Total albums</th>
+      <td colspan="2">77</td>
+    </tr>
+  </tfoot>
+</table>
+ +

La tabella è ben formata, è facile applicarle stili, è accessibile, grazie all'uso di attributi come {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, ecc. Però non ha un bell'aspetto quando vista su schermo (vedila su punk-bands-unstyled.html):

+ +

+ +

Ha un aspetto rozzo, poco leggibile e noioso. Dobbiamo usare un po' di CSS per rimediare.

+ +

Apprendere attivamente: Diamo stile alla tabella

+ +

In questa sezione di apprendimento attivo daremo stile insieme alla nostra tabella.

+ +
    +
  1. Per iniziare, fai una copia in locale del codice di esempio, scarica le immagini (noise e leopardskin), e e metti i tre files in una directory di lavoro sul tuo computer.
    2. +
  2. Quindi, crea un nuovo file e salvalo col nome style.css nella stessa directory degli altri file.
    3. +
  3. Collega il file CSS all'interno del codice HTML scrivendo questa riga di HTML all'interno della sezione {{htmlelement("head")}}: + 
    <link href="style.css" rel="stylesheet" type="text/css">
    +
    4. +
+ +

Spaziatura e layout

+ +

La prima cosa da fare è mettere ordine nella spaziatura/layout, visto che lo stile predefinito è davvero rozzo! Per ottenere questo risultato, mettiamo queste definizioni CSS al file style.css:

+ +
/* spaziatura */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}
+ +

Le definizioni più importanti da notare sono:

+ + + +

A uesto punto, la nostra tabella ha già un aspetto molto migliore:

+ +

+ +

Semplici concetti tipografici

+ +

Ora diamo una sistemata al contenuto.

+ +

Innanzi tutto, abbiamo trovato un font su Google Fonts intonato alle nostre band punk. Puoi andare a sceglierne uno diverso se vuoi; devi solo sostituire l'elemento {{htmlelement("link")}} e la {{cssxref("font-family")}} con quelli che Google Fonts ti fornirà.

+ +

Prima, inserisci il seguente elemento {{htmlelement("link")}} nella sezione head, prima dell'altro elemento <link>:

+ +
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+ +

Ora aggiungi in testa al tuo file style.css i seguenti attributi CSS:

+ +
/* tipografia */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}
+ +

Non c'è nulla di specifico per tabelle; in generale impostiamo lo stile dei caratteri per rendere tutto di più facile lettura:

+ + + +

The result looks a bit neater:

+ +

+ +

Grafica e colori

+ +

Now onto graphics and colors! Because the table is full of punk and attitude, we need to give it some bright imposing styling to suit. Don't worry, you don't have to make your tables this loud — you can opt for something more subtle and tasteful.

+ +

Start by adding the following CSS to your style.css file, again at the bottom:

+ +
thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+
+ +

Again, there's nothing specific to tables here, but it is worthwhile to note a few things.

+ +

We've added a {{cssxref("background-image")}} to the {{htmlelement("thead")}} and {{htmlelement("tfoot")}}, and changed the {{cssxref("color")}} of all the text inside the header and footer to white (and given it a {{cssxref("text-shadow")}}) so it is readable. You should always make sure your text contrasts well with your background, so it is readable.

+ +

We've also added a linear gradient to the {{htmlelement("th")}} and {{htmlelement("td")}} elements inside the header and footer for a nice bit of texture, as well as giving those elements a bright purple border. It is useful to have multiple nested elements available so you can layer styles on top of one another. Yes, we could have put both the background image and the linear gradient on the {{htmlelement("thead")}} and {{htmlelement("tfoot")}} elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients.

+ +

Zebra striping

+ +

We wanted to dedicate a separate section to showing you how to implement zebra stripes — alternating rows of color that make the different data rows in your table easier to parse and read. Add the following CSS to the bottom of your style.css file:

+ +
tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}
+ + + +

This color explosion results in the following look:

+ +

+ +

Now, this may be a bit over the top and not to your taste, but the point we are trying to make here is that tables don't have to be boring and academic.

+ +

Stile del titolo

+ +

There is one last thing to do with our table — style the caption. To do this, add the following to the bottom of your style.css file:

+ +
caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}
+ +

There is nothing remarkable here, except for the {{cssxref("caption-side")}} property, which has been given a value of bottom. This causes the caption to be positioned on the bottom of the table, which along with the other declarations gives us this final look (see it live at punk-bands-complete.html):

+ +

+ +

Apprendere attivamente: Uno stile per la tua tabella

+ +

At this point, we'd like you to take our example table HTML (or use some of your own!) and style it to make something considerably better designed and less garish than our table.

+ +

Trucchi per gli stili delle tabelle

+ +

Before moving on, we thought we'd provide you with a quick list of the most useful points illustrated above:

+ + + +

Sommario

+ +

With the dizzy exciting heights of styling tables now behind us, we need something else to occupy our time. Never fear — the next chapter provides a look at some advanced box effects, some of which have only landed in browsers very recently (such as blend modes and filters), and some of which are a bit more established (such as box shadows.)

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/css/css_layout/flexbox/index.html b/files/it/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..cc88b74d61 --- /dev/null +++ b/files/it/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,344 @@ +--- +title: Flexbox +slug: Learn/CSS/CSS_layout/Flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
+ +
Flexbox è un metodo di layout monodimensionale per disporre i componenti in righe oppure in colonne. Quando l'area che li contiene aumenta, i componenti si espandono per colmarne lo spazio, quando invece si restringe anche i componenti si restringono.
+Questo articolo comprende i concetti fondamentali.
+ +
+ + + + + + + + + + + + +
Prerequisiti:Le basi di HTML (leggi Introduzione a HTML) e nozioni sul funzionamento del CSS (leggi Introduzione a CSS.)
Obiettivo:Apprendere l'utilizzo di Flexbox per impostare il layout delle pagine web.
+ +

Perchè Flexbox?

+ +

Per molto tempo, le uniche tecniche affidabili per creare layout CSS compatibili con tutti i browser utilizzavano elementi float e posizionamento. Funzionavano a sufficienza, ma erano per alcuni aspetti limitati e frustranti.

+ +

Per esempio con quelle tecniche era difficile o del tutto impossibile definire in maniera flessibile e vantaggiosa le seguenti impostazioni:

+ + + +

Nelle sezioni seguenti apprenderemo come flexbox faciliti notevolmente questi compiti. Iniziamo!

+ +

Introduzione a un semplice esempio

+ +

Questo articolo presenta una serie di esercizi per aiutare a comprendere il funzionamento di flexbox. Per cominciare copiamo in locale il file di partenza flexbox0.html presente in github. Carichiamolo con un browser moderno, ad esempio Firefox o Chrome e facciamo attenzione al codice nell'editor. É possibile in alternativa visionarlo attraverso la versione live.

+ +

Image showing the starting point of Flexbox tutorial

+ +

Come vediamo la pagina è formata da un {{htmlelement("header")}} contenente il titolo principale, poi un elemento {{htmlelement("section")}} che contiene tre {{htmlelement("article")}}. Partiamo da questa situazione per creare un layout a tre colonne abbastanza comune.

+ +

Individuare gli elementi da impostare come box flessibili

+ +

Per cominciare occorre scegliere il gruppo di elementi che devono apparire come box flessibili; per farlo occorre impostare un valore particolare della proprietà {{cssxref("display")}} del loro elemento padre. In questo caso specifico desideriamo sistemare gli elementi {{htmlelement("article")}}, perciò agiamo sul loro contenitore {{htmlelement("section")}}:

+ +
section {
+  display: flex;
+}
+ +

Questa impostazione trasforma <section> in un contenitore flex e gli elementi figli in componenti flex. Questo è l'aspetto che otteniamo:

+ +

+ +

Proprio così: con questa semplice regola abbiamo già ottenuto tutto ciò che volevamo! Il layout diventa multicolonna e le colonne che lo formano sono della medesima larghezza e lunghezza. Tutto ciò avviene grazie ai componenti flex, cioè i figli del contenitore impostato come flex, che, grazie a valori predefiniti, risolvono automaticamente problemi tipici come questo.

+ +

Ripassiamo cosa è avvenuto: l'elemento il cui valore di  {{cssxref("display")}} è flex si comporta come un elemento blocco all'interno della pagina, ma i suoi figli vengono disposti come componenti flex. Nella prossima sezione capiremo meglio che cosa significa. Notiamo che in alternativa possiamo usare il valore inline-flex per display cosicché gli elementi figlio diventano comunque componenti flex, ma il contenitore si comporta come un elemento in linea.

+ +

Il modello flex

+ +

In qualità di componenti flex, gli elementi si dispongono lungo due assi:

+ +

flex_terms.png

+ + + +

Si tengano a mente queste definizioni durante le sezioni successive. In caso di confusione con i termini potete comunque tornare a rileggere questa sezione.

+ +

Colonne o righe?

+ +

Flexbox offre una proprietà chiamata flex-direction {{cssxref("flex-direction")}} che indica quale direzione deve seguire l'asse principale, ovvero come vengono disposti i contenuti flexbox;il valore predefinito è row, in modo che i contenuti si schierino in riga secondo il verso della lingua preimpostata dal browser, che per le quelle occidentali è da sinistra a destra.

+ +

Proviamo ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:

+ +
flex-direction: column;
+ +

Come vediamo i componenti tornano a schierarsi in colonna, come in un il flusso normale senza aggiungere CSS. Cancelliamo pure questa dichiarazione dall'esercizio, prima di continuare.

+ +
+

Nota: Potremmo anche invertire la disposizione dei componenti flex utilizzando i valori row-reverse o column-reverse. Sono da sperimentare!

+
+ +

Effettuare il Wrapping

+ +

Il problema che sorge nel layout quando la larghezza o l'altezza vengono esplicitate è che il gruppo dei contenuti flexbox potrebbe eccedere il limite del contenitore, guastando il layout. Diamo un'occhiata all'esempio flexbox-wrap0.html,di cui viene fornita la visione live. Per eseguire le procedure mostrate da questo punto in poi, salvate una copia del file in locale.

+ +

+ +

Come vediamo i contenuti figli eccedono effettivamente il limite del loro contenitore. Una possibile soluzione consiste nell'aggiungere la seguente dichiarazione alle regole di {{htmlelement("section")}}:

+ +
flex-wrap: wrap;
+ +

Proviamo anche ad aggiungere la seguente dichiarazione alle regole di {{htmlelement("article")}}:

+ +
flex: 200px;
+ +

Ricaricando possiamo notare il miglioramento che abbiamo ottenuto grazie queste modifiche.

+ +

Adesso possiamo notare che si sono formate un certo numero di righe, ovviamente tante quante ne servono per tutti i contenuti flexbox: quando un contenuto eccede i limiti, scala alla riga successiva. L'impostazione flex: 200px dichiarata per gli articoli significa che ognuno di essi occuperà almeno 200px; questa proprietà verrà discussa con maggior dettaglio più avanti nell'articolo. Notiamo anche che ciascuno degli ultimi contenuti che occupano l'ultima riga è molto più largo in modo da riempirla completamente.

+ +

Possiamo sperimentare ancora: innanzitutto assegnare alla proprietà {{cssxref("flex-direction")}} il valore row-reverse, così da ottenere un layout con numerose righe come il precedente in cui però i contenuti si schierano a partire dall'angolo opposto della finestra del browser e fluiscono in maniera inversa.

+ +

La forma contratta flex-flow

+ +

Occorre notare a questo punto che esiste una forma contratta, {{cssxref("flex-flow")}, per le proprietà {{cssxref("flex-direction")}} e {{cssxref("flex-wrap")}} — }. É possibile per esempio sostituire

+ +
flex-direction: row;
+flex-wrap: wrap;
+ +

con

+ +
flex-flow: row wrap;
+ +

Dimensionamento flessibile dei componenti flex

+ +

Ora torniamo al primo esempio per capire come determinare la proporzione che occupa ogni componente flex nello spazio rispetto ai componenti suoi pari. Riapriamo il file locale flexbox0.html, oppure, come punto di partenza, prendiamo il nuovo file flexbox1.html di cui viene fornita anche la versione live.

+ +

Cominciamo aggiungendo la seguente regola al termine del nostro CSS:

+ +
article {
+  flex: 1;
+}
+ +

Si indica in questo modo un valore proporzionale, privo di unità di misura, che determina lo spazio che occupa ogni componente flex rispetto agli altri. In questo caso tutti gli elementi {{htmlelement("article")}} hanno valore 1, il che significa, al netto di spaziature interne (padding) ed esterne (margin), che lo spazio verrà equamente ripartito tra tutti i componenti. Questo è un valore relativo a tutti i componenti flex del medesimo gruppo, perciò, se invece di 1 viene scritto un altro valore, 400000 ad esempio, otteniamo lo stesso risultato.

+ +

Di seguito scriviamo questa regola:

+ +
article:nth-of-type(3) {
+  flex: 2;
+}
+ +

Si noti, dopo aver ricaricando la pagina, che il terzo componente {{htmlelement("article")}} riempie il doppio dello spazio occupato da ciascuno degli altri due. Lo spazio totale è ora diviso in quattro, cioè una spaziatura per il primo elemento, una per il secondo e due per il terzo (1+1+2=4), quindi il primo e il secondo occupano un quarto (1/4) di spazio ciascuno mentre il terzo ne occupa due quarti (2/4) ovvero la metà.

+ +

Si può anche specificare una misura reale minima al di sotto del quale non è possibile andare. Correggiamo le regole degli articoli in questo modo:

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}
+ +

Con queste regole affermiamo fondamentalmente quanto segue: "Ogni componente flex occupa almeno 200px nello spazio a disposizione, mentre lo spazio che rimane viene occupato rispettando le unità proporzionali." Ricaricando la pagina possiamo notare la differenza nella ripartizione delle spaziature.

+ +

+ +

La potenza di flexbox risiede nella sua flessibilità ovvero nella responsività con cui gestisce il layout: se ridimensioniamo la finestra del browser oppure inseriamo un nuovo elemento {{htmlelement("article")}} il layout continuerà a funzionare bene.

+ +

flex: forma contratta al posto della forma estesa

+ +

La proprietà  {{cssxref("flex")}} rappresenta la forma contratta delle seguenti tre proprietà::

+ + + +

È consigliabile non utilizzare le forme estese della proprietà flex, a meno che non si possa fare altrimenti, come per esempio sostituire un valore stabilito in precedenza, perché costringono a scrivere una maggior quantità di codice che può risultare in qualche modo confusionario.

+ +

Allineamento orizzontale e verticale

+ +

Con flexbox è possibile allineare i componenti flex lungo l'asse principale (main axis) o lungo l'asse traverso (cross axis). Facciamo alcune prove con la nuova pagina di esempio, flex-align0.html di cui è presente anche la versione live , per mostrare come creare una bottoniera, o barra degli strumenti, semplice e flessibile.

+ +

+ +

Apriamo il codice in locale.

+ +

Aggiungiamo al termine del file CSS la regola seguente:

+ +
div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

+ +

Dopo aver ricaricato la pagina, i bottoni vengono ben centrati, sia orizzontalmente che verticalmente. Abbiamo ottenuto questo risultato operando con due nuove proprietà:

+ +

Attraverso {{cssxref("align-items")}} controlliamo l'allineamento rispetto all'asse traverso (cross axis).

+ + + +

É possibile sostituire l'impostazione data da align-items {{cssxref("align-items")}} , utilizzando la proprietà {{cssxref("align-self")}} di ogni singolo componente figlio. Ad esempio se proviamo ad aggiungere la seguente regola:

+ +
button:first-child {
+  align-self: flex-end;
+}
+ +

+ +

Dopo aver verificato l’effetto, possiamo cancellare questa regola per ritornare alla situazione precedente.

+ +

Attraverso {{cssxref("justify-content")}} controlliamo il tipo di schieramento dei componenti flex lungo l'asse principale (main axis).

+ + + +

É consigliabile sperimentare le proprietà con valori suddetti prima di continuare a leggere l'articolo.

+ +

Ordinare i componenti flex

+ +

Con flexbox è possibile cambiare l'ordine dei componenti senza intervenire manualmente nel sorgente HTML. Questa opportunità non esisteva con le metodologie di layout precedenti.

+ +

Proviamo ad aggiungere al CSS una nuova semplice regola:

+ +
button:first-child {
+  order: 1;
+}
+ +

Una volta ricaricato notiamo che il bottone con label "Sorriso" si è spostato al termine dell'asse principale. Vediamo in dettaglio cosa è successo:

+ + + +

Se impostiamo un valore negativo di order, il componente compare prima di quelli con valore 0. Proviamo ora ad applicare la regola impostando per esempio l'ordine del bottone "Imbarazzo":

+ +
button:last-child {
+  order: -1;
+}
+ +

Flex box annidati

+ +

Con flexbox possiamo creare layout piuttosto complessi; è del tutto lecito impostare un componente flex in modo che contenga a sua volta componenti annidati flex che vengono visualizzati come flex box. Diamo un'occhiata a complex-flexbox.html (see it live also).

+ +

+ +

La struttura HTML è abbastanza semplice, l'elemento {{htmlelement("section")}} contiene gli elementi figli {{htmlelement("article")}}. , il terzo di questi contiene tre {{htmlelement("div")}} :

+ +
section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button
+ +

Ora guardiamo il codice che ha creato il layout.

+ +

Innanzitutto, impostiamo i figli di {{htmlelement("section")}} affinché diventino flex box.

+ +
section {
+  display: flex;
+}
+ +

Quindi valorizziamo alcune proprietà flex all'interno degli stessi {{htmlelement("article")}}. Si noti in particolare la seconda regola, in cui si impone che il terzo elemento {{htmlelement("article")}} abbia a sua volta componenti innestati flex, i quali però devono essere incolonnati.

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+
+ +

Quindi, impostiamo per il primo <div> la proprietà flex a 1 100px; in modo che abbia un'altezza reale di almeno 100px; la proprietà successiva stabilisce che anche gli elementi figli, cioè i (the {{htmlelement("button")}}, divengano componenti flex; tali elementi si dispongono in riga e allineati a partire dal centro dello spazio disponibile mantenendo i margini alle estremità, proprio come l'esempio del bottone visto in precedenza.

+ +
article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Infine viene definita una regola per la dimensione dei bottoni., ma la parte più interessante è la proprietà flex che ha valore 1 auto; questa impostazione genera un comportamento peculiare che notiamo quando restringiamo la finestra del browser: i bottoni cercano di occupare il massimo dello spazio disponibile, si schierano uno accanto all'altro finché c'è spazio disponibile, e poi scalano alla riga seguente.

+ +
button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+ +

Compatibilità tra browser

+ +

Gran parte delle ultime versioni dei browser supportano flexbox, cioè Firefox, Chrome, Opera, Microsoft Edge, IE 11, le versioni recenti di Android/iOS ecc. Occorre tuttavia considerare anche la presenza delle versioni antiquate dei browser che non supportano flexbox oppure lo fanno solo parzialmente.

+ +

Il problema non incide granché quando ne studiamo e ne proviamo le funzionalità, tuttavia quando si cerca di utilizzare flexbox per creare un sito web reale dobbiamo controllare e assicurarci che l'esperienza utente sia comunque accettabile in quanti più browser possibile.

+ +

Applicare flexbox è un po' più complicato di altre funzionalità CSS. Se per esempio il browser non supporta l'ombreggiatura (drop shadow) è facile che l'usabilità del sito rimanga comunque valida, se invece manca il supporto a flexbox è probabile che il layout della pagina si disintegri rendendola inutilizzabile.

+ +

Le strategie per ovviare ai problemi di compatibilità tra browser vengono affrontate nel modulo Cross browser testing.

+ +

Metti alla prova le tue capacità!

+ +

Questo articolo è denso di informazioni, ma riesci a ricordare quelle più importanti?

+ +

Prima di continuare possiamo verificare la nostra comprensione alla pagina Test your skills: Flexbox.

+ +

Sommario

+ +

In conclusione dell'articolo sulle basi di flexbox speriamo di aver suscitato interesse e un buon punto di partenza nel nostro percorso di apprendimento. Nel prossimo articolo ci occupiamo di un altro importante aspetto del layout CSS: le Griglie CSS.

+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
+ +
+

In this module

+ + +
diff --git a/files/it/learn/css/css_layout/index.html b/files/it/learn/css/css_layout/index.html new file mode 100644 index 0000000000..31a85170fa --- /dev/null +++ b/files/it/learn/css/css_layout/index.html @@ -0,0 +1,78 @@ +--- +title: Layout CSS +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - Positioning + - alignment + - flexbox + - float + - table +translation_of: Learn/CSS/CSS_layout +--- +
{{LearnSidebar}}
+ +

A questo punto abbiamo già visto i fondamenti di CSS, come assegnare uno stile a un testo e come modificare lo stile e l'impostazione dei riquadri nei quali risiede il contenuto. Ora impareremo come posizionare i riquadri rispetto all'area di visualizzazione e l'uno rispetto all'altro. Abbiamo già appreso i prerequisiti necessari per approfondire il layout CSS, analizzare le diverse impostazioni di display, i moderni strumenti di layout quali flexbox, griglia CSS, posizionamento e alcune tecniche legacy che potrebbe comunque tornare utile conoscere.

+ +

Prerequisiti

+ +

Per affrontare questo modulo è necessario:

+ +
    +
  1. Avere una conoscenza di base dell'HTML, discusso nel modulo Introduzione all'HTML [Introduction to HTML].
    2. +
  2. Avere familiarità con i fondamenti di CSS, discussi in Introduzione al CSS [Introduction to CSS].
    3. +
  3. Comprendere come assegnare uno stile ai riquadri [Styling boxes].
    4. +
+ +
+

Nota: Per chi utilizza un computer/tablet/altro dispositivo che non permette di creare file in locale, è possibile riprodurre la maggior parte degli esempi di codice con un programma online tipo JSBin oppure Glitch.

+
+ +

Guide

+ +

I seguenti articoli insegnano a utilizzare gli strumenti fondamentali di layout e le tecniche disponibili nel linguaggio CSS. Alla fine delle lezioni è previsto un test di valutazione per verificare la propria comprensione dei metodi di layout applicandoli a una pagina web.

+ +
+
Introduzione ai layout CSS [Introduction to CSS layout]
+
Questo articolo riassume alcune delle caratteristiche dei layout CSS già incontrate nei moduli precedenti (ad esempio i diversi valori di {{cssxref("display")}}) e introduce diversi concetti che affronteremo in questo modulo.
+
Flusso normale [Normal flow]
+
Gli elementi di una pagina web si dispongono secondo un flusso normale, a meno che non facciamo qualcosa per cambiarlo. Questo articolo spiega le basi di un flusso normale come premessa per imparare a modificarlo.
+
Flexbox [Flexbox]
+
Flexbox [Flexbox] è un metodo di layout monodimensionale per disporre gli elementi in righe e colonne. Gli elementi si espandono per riempire lo spazio extra e si contraggono per adattarsi a uno spazio più ridotto. Questo articolo ne spiega i concetti fondamentali. Dopo aver studiato la guida potrai testare le tue competenze su flexbox [test your flexbox skills] per accertarti di averlo compreso prima di passare all'argomento successivo.
+
Griglie [Grids]
+
La Griglia layout CSS è un sistema bidimensionale di layout per il Web. Permette di disporre i contenuti in righe e colonne, inoltre offre diverse funzionalità per semplificare la costruzione di layout complessi. Questo articolo contiene tutte le informazioni necessarie per iniziare a costruire il layout della pagina, quindi mettere alla prova le proprie abilità sulla griglia [test your grid skills] prima di passare all'argomento successivo.
+
Elementi float [Floats]
+
Originariamente usata per inserire le immagini all'interno di blocchi di testo, la proprietà {{cssxref("float")}} è diventata uno dei più comuni strumenti per creare layout multicolonna nelle pagine web. Con la comparsa di Flexbox e Griglia è tornata alla sua finalità originale, come spiegato in questo articolo.
+
Posizionamento [Positioning]
+
Il posizionamento permette di isolare gli elementi dal normale flusso della pagina assegnando loro un comportamento diverso, ad esempio sovrapporsi uno sull'altro o mantenere sempre la stessa posizione all'interno dell'area di visualizzazione del browser. Questo articolo spiega i differenti valori di {{cssxref("position")}} e come utilizzarli.
+
Layout multicolonna [Multiple-column layout]
+
Le specifiche del layout multicolonna offrono un metodo per strutturare il contenuto in colonne come sulla pagina di un quotidiano. L'articolo spiega come sfruttare questa caratteristica.
+
Design reattivo [Responsive design]
+
Con la comparsa di dispositivi di varie dimensioni in grado di accedere al Web, è nato il concetto di web design reattivo (o RWD, dall'inglese Responsive Web Design): un insieme di procedure che permettono alle pagine web di modificare il proprio layout e aspetto per adattarsi a diverse larghezze, risoluzioni, ecc. Si tratta di un'idea che ha cambiato il modo di progettare il Web multi-dispositivo e questo articolo aiuta a capire le principali tecniche necessarie a padroneggiarlo.
+
Guida per principianti alle media query [Beginner's guide to media queries]
+
Le media query CSS danno modo di applicare i fogli di stile CSS solo quando il browser e le condizioni del dispositivo corrispondono alle regole specificate, ad esempio "l'area di visualizzazione è più larga di 480 pixel". Le media query sono un elemento fondamentale del web design reattivo, poiché non solo permettono di stabilire layout differenti a seconda della grandezza dell'area di visualizzazione, ma anche di rilevare altre condizioni dell'ambiente in cui un sito viene riprodotto, ad esempio se l'utente usa un touchscreen o un mouse. In questa lezione impareremo innanzitutto la sintassi usata nelle media query e poi le applicheremo in un esempio reale che mostra come trasformare un design semplice in reattivo.
+
I metodi di layout legacy [Legacy layout methods]
+
Una caratteristica molto comune dei layout CSS sono i sistemi di griglia. Prima della Griglia Layout CSS cercavamo di realizzare l'impaginazione utilizzando elementi float o altre caratteristiche del layout. Il layout veniva concepito come un numero dato di colonne immaginarie (ad esempio 4, 6 o 12) all'interno delle quali inserire i contenuti. In questo articolo vedremo come funzionano questi metodi ormai obsoleti per capirne l'impostazione in caso dovessimo lavorare su progetti più datati.
+
Supporto per i browser più datati [Supporting older browsers]
+
+

In questo modulo consigliamo di usare Flexbox e Griglia quali principali metodi di progettazione. Va però considerato che alcuni utenti potrebbero visualizzare il nostro sito con browser più datati o che, semplicemente, non supportano i metodi da noi scelti. Bisogna sempre tenerne conto nel Web: man mano che nuove funzionalità vengono messe a punto, ciascun browser si concentra sull'implementarne alcune, a scapito di altre. Questo articolo spiega come usare le moderne tecniche del Web senza escludere chi utilizza tecnologia più datata.

+
+
Valutazione sulla comprensione dei fondamenti di layout [Assessment: Fundamental layout comprehension]
+
Un test per valutare la comprensione dei diversi metodi di layout applicandoli a una vera pagina web.
+
+ +

Vedi anche

+ +
+
Esempi pratici di posizionamento [Practical positioning examples]
+
Questo articolo mostra come impostare alcuni esempi reali per illustrare le potenzialità del posizionamento.
+
diff --git a/files/it/learn/css/css_layout/introduction/index.html b/files/it/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..3a3238e551 --- /dev/null +++ b/files/it/learn/css/css_layout/introduction/index.html @@ -0,0 +1,711 @@ +--- +title: Introduzione al layout CSS +slug: Learn/CSS/CSS_layout/Introduction +translation_of: Learn/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
+ +

Questo articolo riassume alcune caratteristiche del CSS viste nei moduli precedenti, come ad esempio i diversi valori di {{cssxref("display")}}, e presenta alcuni concetti che verranno trattati nel corso di questo modulo.

+ + + + + + + + + + + + +
Prerequisiti:Le basi di HTML (leggi Introduzione a HTML) e nozioni sul funzionamento del CSS (leggi Introduzione a CSS [Introduction to CSS].)
Obiettivo:Offrire una panoramica sulle tecniche di CSS usate nei layout delle pagine web. Ogni tecnica viene approfondita negli articoli a seguire.
+ +

Le tecniche di CSS applicate al layout di pagina permettono di controllare il posizionamento degli elementi contenuti nella pagina web relativamente alla loro posizione predefinita nel flusso normale di layout, agli elementi contigui, al contenitore padre o all'area di visualizzazione/finestra principale. Le tecniche per il layout di pagina che approfondiremo in questo modulo sono:

+ + + +

Ogni tecnica ha i propri casi d'uso, vantaggi e svantaggi. Nessuna di esse è concepita per funzionare in isolamento. Una volta compreso per quale scopo è stato progettato ciascun metodo, risulterà facile scegliere lo strumento di layout più adatto alle diverse esigenze.

+ +

Flusso normale

+ +

Per flusso normale si intende il layout predefinito di una pagina HTML, ovvero come viene visualizzata senza interventi da parte nostra. Ecco un breve esempio di codice HTML:

+ +
<p>Amo il mio gatto.</p>
+
+<ul>
+  <li>Compra il cibo per gatti</li>
+  <li>Esercitati</li>
+  <li>Tira su di morale un amico</li>
+</ul>
+
+<p>Fine!</p>
+ +

Secondo le impostazioni predefinite, il browser visualizza il codice in questo modo:

+ +

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

+ +

Notiamo come l'HTML venga visualizzato nell'esatto ordine in cui appare nel codice sorgente, con gli elementi incolonnati uno sotto l'altro: primo paragrafo, elenco non ordinato, secondo paragrafo.

+ +

Gli elementi che compaiono uno sotto l'altro vengono definiti come elementi blocco, al contrario degli elementi in linea, che sono disposti uno accanto all'altro come le singole parole di un paragrafo.

+ +
+

Nota: La direzione in cui si dispongono i contenuti di elementi blocco viene definita direzione blocco. La direzione blocco è verticale in lingue come l'inglese, che hanno una modalità di scrittura orizzontale. Al contrario, è orizzontale in lingue come il giapponese, che hanno una modalità di scrittura verticale. La corrispondente direzione in linea segue la direzione percorsa dai contenuti lineari, ad esempio quelli di una frase scritta.

+
+ +

Nella maggior parte dei casi, il flusso normale è sufficiente a disporre gli elementi nella pagina come ci servono. Tuttavia, per ottenere layout più complessi, occorre modificare la disposizione predefinita grazie ad alcuni strumenti disponibili nel CSS. Partire da un codice HTML ben strutturato è importante, perché permette di ritoccare la disposizione predefinita degli elementi, invece di stravolgerla.

+ +

I metodi per influenzare la disposizione degli elementi con il CSS sono i seguenti:

+ + + +

La proprietà display

+ +

I modi principali per realizzare il layout di una pagina via CSS risiedono nei diversi valori della proprietà display. Questa proprietà permette di cambiare l'impostazione predefinita per la visualizzazione di un elemento. Nel flusso normale, tutti gli elementi hanno un valore display predefinito, che definisce il comportamento per cui sono stati progettati. Ad esempio, il fatto che i paragrafi di testo nelle lingue occidentali vengano visualizzati uno sotto l'altro è dovuto al loro stile predefinito display: block. Se all'interno di un paragrafo si inserisce un link in una porzione del testo, il link rimane allineato con il resto del testo invece di andare a capo poiché lo stile predefinito dell'elemento {{htmlelement("a")}} è display: inline.

+ +

Il tipo di visualizzazione predefinito può essere modificato. Ad esempio, l'impostazione predefinita dell'elemento {{htmlelement("li")}} è display: block. Ciò significa che le voci dell'elenco nel documento vengono visualizzate una sotto l'altra, secondo l'impostazione occidentale. Se il valore di display viene modificato in inline, gli elementi dell'elenco verranno visualizzati uno accanto all'altro, come le parole di una frase. La possibilità di modificare il valore di display per tutti gli elementi significa che è possibile mantenere il loro significato semantico definito nell'HTML, indipendentemente dal modo in cui verranno visualizzati. Abbiamo, in sostanza, la possibilità di cambiarne unicamente il comportamento.

+ +

Oltre alla possibilità di cambiare la presentazione dei componenti da block a inline e vice versa, si possono creare layout con metodi più complessi, iniziando proprio dall'impostazione del valore di display. Tuttavia, occorre solitamente abbinarlo ad altre proprietà per realizzare un layout complesso. I due valori principali quando parliamo di layout sono display: flex e display: grid.

+ +

Flexbox

+ +

Flexbox è l'abbreviazione di Modulo Flexible Box Layout, progettato per facilitare la creazione di layout monodimensionali degli elementi sia in riga che in colonna. Per utilizzare Flexbox, occorre impostare display: flex al padre degli elementi su cui si intende applicare il layout; tutti i figli diretti di tale elemento diventeranno componenti flex. Ecco un semplice esempio.

+ +

Il markup HTML sottostante presenta una classe wrapper associata a un elemento contenitore, nel quale sono presenti tre elementi {{htmlelement("div")}}. Secondo il loro valore predefinito, nel documento d'esempio che ha una direzione di scrittura occidentale, gli elementi dovrebbero essere visualizzati come elementi blocco, uno sotto l'altro.

+ +

Tuttavia, una volta specificato display: flex sul padre, i tre componenti figlio si dispongono in colonna. Questo accade perché essi ora sono componenti flex e assumono il medesimo valore iniziale che Flexbox attribuisce loro attraverso il contenitore padre. In questo caso vengono presentati in riga perché il valore iniziale di {{cssxref("flex-direction")}} impostato dal padre è row. Si allungano tutti fino a raggiungere l'altezza del componente più alto perché il valore iniziale della proprietà {{cssxref("align-items")}} viene impostato a stretch dal padre. Quindi i componenti si distendono fino a raggiungere l'altezza del contenitore flex, che in questo caso è definita dal più alto tra i suoi componenti. Tutti i componenti si schierano al principio del contenitore, lasciando spazio libero alla fine della riga.

+ +
+ + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Uno</div>
+  <div class="box2">Due</div>
+  <div class="box3">Tre</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_1', '300', '200') }}

+ +

Oltre alle suddette proprietà applicabili al contenitore flex, esistono anche proprietà che possono essere impostate sui componenti figlio. Tra le altre cose, queste proprietà possono cambiare il modo in cui i componenti si flettono, facendoli espandere o contrarre per adattarsi allo spazio disponibile.

+ +

È possibile, per esempio, aggiungere la proprietà {{cssxref("flex")}} a tutti i componenti figlio, con valore 1. Questo fa sì che tutti i componenti aumentino in dimensione sino a riempire il contenitore, invece di lasciare dello spazio vuoto alla fine. Se lo spazio aumenta, i componenti si allargano. Se lo spazio diminuisce, si contraggono. Inoltre, se viene aggiunto un nuovo elemento al markup, tutti i componenti diminuiscono la propria dimensione per far spazio al nuovo inserimento continuando a riempire la medesima area, qualsiasi essa sia.

+ +
+ + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Due</div>
+    <div class="box3">Tre</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_2', '300', '200') }}

+ +
+

Nota: Questa è solo una breve introduzione alle possibilità di Flexbox. Per approfondire l'argomento vai all'articolo Flexbox.

+
+ +

Griglia layout

+ +

Mentre Flexbox è stato progettato per il layout monodimensionale, la Griglia layout è stata progettata per essere bidimensionale, cioè per disporre gli elementi in righe e colonne.

+ +

Per passare alla modalità Griglia layout occorre innanzitutto impostare un valore di display specifico, display: grid. L'esempio seguente usa un markup simile a quello visto negli esempi di flex: presenta un contenitore e alcuni elementi figlio. Oltre a usare display: grid, definiamo anche una regola per righe e colonne nell'elemento padre utilizzando rispettivamente le proprietà {{cssxref("grid-template-rows")}} e {{cssxref("grid-template-columns")}}. Definiamo tre colonne di 1fr ciascuna e due righe di 100px. Non occorre specificare alcuna regola per gli elementi figlio, che verranno inseriti nelle celle create dalla nostra griglia in maniera automatica.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Due</div>
+    <div class="box3">Tre</div>
+    <div class="box4">Quattro</div>
+    <div class="box5">Cinque</div>
+    <div class="box6">Sei</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_1', '300', '330') }}

+ +

Una volta impostata la griglia, è possibile posizionarvi all'interno i componenti in maniera esplicita invece di affidarsi all'impostazione automatica come nell'esempio precedente. Nel secondo esempio qui sotto viene definita la stessa griglia, ma in questo caso definiamo delle regole anche per i componenti figlio. La linea iniziale e quella finale di ogni componente vengono impostate nelle proprietà {{cssxref("grid-column")}} e {{cssxref("grid-row")}}. Questo fa sì che i componenti seguano tracciati diversi.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Due</div>
+    <div class="box3">Tre</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_2', '300', '330') }}

+ +
+

Nota: Questi due esempi dimostrano solo una piccola parte delle potenzialità della Griglia layout; per scoprirne altre vedi l'articolo Griglia layout [Grid Layout].

+
+ +

La parte restante di questa guida tratta di altri metodi di strutturazione, meno rilevanti per l'impostazione del layout principale della pagina, ma utili per operazioni specifiche. Una volta compresa la funzione di ogni sezione, risulterà chiaro quale sia il metodo più adatto per strutturare ciascun componente del layout.

+ +

Elementi float

+ +

Configurando un elemento in float cambiamo il suo comportamento e quello degli elementi che gli succedono nel flusso normale. L'elemento viene spostato a sinistra o a destra e isolato dal flusso normale, il contenuto circostante scorre intorno a questo elemento.

+ +

La proprietà {{cssxref("float")}} ha quattro possibili valori:

+ + + +

Nel seguente esempio, un elemento <div> viene spostato a sinistra e il suo {{cssxref("margin")}} impostato a destra per creare uno spazio tra il testo e l'elemento. In questo modo, il corpo del testo fluisce intorno al box. Questo è tutto ciò che ci occorre conoscere nel web design moderno a proposito degli elementi float.

+ +
+ + +
<h1>Esempio semplice di float</h1>
+
+<div class="box">Float</div>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+
+ +
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+
+
+ +

{{ EmbedLiveSample('Float_1', '100%', 600) }}

+ +
+

Nota: Gli elementi float vengono spiegati in maniera esauriente nell'articolo sulle proprietà float e clear. Prima dell'esistenza di metodi come Flexbox e Griglia layout, gli elementi float venivano utilizzati anche come sistema per suddividere il layout in colonne. È tutt'ora possibile imbattersi in siti web che utilizzano questo sistema. Lo scopriremo nella lezione sui metodi di layout legacy.

+
+ +

Tecniche di posizionamento

+ +

Il posizionamento permette di spostare un elemento dalla posizione che assumerebbe nel flusso normale a una nuova posizione. Il posizionamento non è un indicato per creare il layout di un'intera pagina, ma piuttosto per gestire e ritoccare la posizione di un componente specifico.

+ +

Tuttavia, esistono tecniche utili per gestire alcuni modelli di layout basati sulla proprietà {{cssxref("position")}}. Comprendere la tecnica del posizionamento permette anche di capire cos'è il flusso normale e come estromettere un componente da esso.

+ +

I tipi di posizionamento che ci serve conoscere sono cinque:

+ + + +

Semplice esempio di posizionamento

+ +

Per familiarizzare con queste tecniche di layout, vediamo un paio di semplici esempi basati sullo stesso codice HTML:

+ +
<h1>Posizionamento</h1>
+
+<p>Elemento blocco essenziale.</p>
+<p class="positioned">Elemento blocco essenziale.</p>
+<p>Elemento blocco essenziale.</p>
+ +

Il seguente CSS mostra lo stile preimpostato dell'HTML:

+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+
+ +

L'output mostrato è il seguente:

+ +

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

+ +

Posizionamento relativo

+ +

Il posizionamento relativo permette di spostare un componente dalla posizione predefinita che occuperebbe nel flusso normale. Si potrebbe perciò realizzare lo spostamento di un'icona un po' più in basso per allinearla a un'etichetta testuale, aggiungendo la seguente istruzione:

+ +
.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}
+ +

In questo caso, il secondo paragrafo ha un attributo {{cssxref("position")}} di valore relative che non produce alcun effetto di per sé. Quindi, aggiungiamo le proprietà {{cssxref("top")}} e {{cssxref("left")}}, che spostano l'elemento associato in basso e a destra. Questo passaggio potrebbe sembrare controintuitivo, ma basta figurarselo come se l'elemento subisse una spinta da sinistra e dall'alto che ne provocasse lo spostamento a destra e in basso.

+ +

Aggiungendo questo codice, si ottiene il seguente risultato:

+ +
+ + +
.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Relative_1', '100%', 300) }}

+ +

Posizionamento assoluto

+ +

Il posizionamento assoluto serve a rimuovere un elemento dal flusso normale e riposizionarlo stabilendo l'offset dai margini di un blocco contenitore.

+ +

Riprendendo l'originale esempio senza posizionamento, implementiamo il posizionamento assoluto aggiungendo le seguenti regole CSS per:

+ +
.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+ +

In questo caso, assegniamo absolute alla proprietà {{cssxref("position")}} per il secondo paragrafo e manteniamo i valori attribuiti in precedenza alle proprietà {{cssxref("top")}} e {{cssxref("left")}}. Il codice però produce il risultato seguente.

+ +
+ + +
.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Absolute_1', '100%', 300) }}

+ +

La differenza si nota! L'elemento a cui viene assegnato il posizionamento è stato separato completamente dal resto del layout della pagina e allocato al di sopra di esso. Gli altri due paragrafi appaiono giustapposti e non influenzati dal primo, come se non esistesse affatto. Le proprietà {{cssxref("top")}} e {{cssxref("left")}} applicate all'elemento producono un effetto diverso a seconda del tipo di posizionamento, se assoluto oppure relativo. In questo caso, l'offset viene calcolato rispetto al lato superiore e sinistro della pagina. L'elemento padre che contiene l'elemento può essere modificato, come spiegato nella lezione dedicata al posizionamento.

+ +

Posizionamento fisso

+ +

Il posizionamento fisso estrae l'elemento a cui è applicato dal flusso del documento allo stesso modo del posizionamento assoluto. Tuttavia, gli offset vengono applicati in relazione all'area di visualizzazione, invece che in relazione al contenitore padre. Poiché il componente rimane fisso rispetto all'area di visualizzazione, siamo in grado di costruire componenti come un menu che rimane fisso mentre il resto della pagina scorre al livello sottostante.

+ +

Nel prossimo esempio, l'HTML è composto da tre paragrafi testuali (in modo da permetterci di far scorrere la pagina) e da un box a cui viene assegnata la regola position: fixed.

+ +
<h1>Posizionamento fisso</h1>
+
+<div class="positioned">Fisso</div>
+
+<p>Paragrafo 1.</p>
+<p>Paragrafo 2.</p>
+<p>Paragrafo 3.</p>
+
+ +
+ + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

+ +

Posizionamento adesivo

+ +

L'ultimo tipo di posizionamento a nostra disposizione è il posizionamento adesivo. Questo tipo unisce caratteristiche del tipo statico predefinito con quelle del tipo fisso. Un componente con regola position: sticky scorre come fosse nel flusso normale sino a quando non incontra i margini definiti dall'area di visualizzazione. In quel momento "aderisce", come se avesse mutato regola in position: fixed.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +
+

Nota: per saperne di più sul posizionamento, vedi l'articolo Posizionamento [Positioning].

+
+ +

Layout con tabelle

+ +

La tabelle HTML sono appropriate per rendere i dati tabulari. Tuttavia, molti anni fa, prima che i vari browser supportassero i più elementari CSS in maniera affidabile, gli sviluppatori web utilizzavano le tabelle anche per costruire l'intero layout della pagina, inserendo intestazioni, piè pagina, contenuti ecc. nelle righe e colonne della tabella. Questo approccio funzionava, ma presentava molti problemi: i layout basati su tabella non erano reattivi, generavano un markup molto pesante, creavano difficoltà nel processo di debug e a livello semantico (ad esempio, non venivano correttamente interpretati dagli screen reader).

+ +

Il modo in cui una tabella appare nella pagina web si deve a un'impostazione di proprietà CSS che ne definisce il layout. È possibile utilizzare queste proprietà anche per posizionare elementi diversi dalle tabelle. Talvolta, questo utilizzo viene definito come “tabelle CSS”.

+ +

Di seguito viene mostrato un esempio di questo uso. Tuttavia, i layout realizzati con tabelle CSS dovrebbero ormai essere considerati un metodo legacy, riservato a situazioni in cui occorre garantire la compatibilità con browser datati, che non supportano Flexbox e Griglia.

+ +

Diamo un'occhiata all'esempio. Innanzitutto vi sono alcuni semplici markup che generano il modulo HTML. Ogni elemento HTML ha un'etichetta, in più è presente un paragrafo contenente una didascalia. Tutti i campi di input accoppiati alle etichette vengono inseriti in {{htmlelement("div")}} al fine di produrre il layout.

+ +
<form>
+  <p>Prima di tutto, dichiara il tuo nome e la tua età.</p>
+  <div>
+    <label for="fname">Nome:</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Cognome:</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Età:</label>
+    <input type="text" id="age">
+  </div>
+</form>
+ +

Segue il CSS dell'esempio. Si tratta di un codice CSS piuttosto comune, fatta eccezione per l'impiego della proprietà {{cssxref("display")}}. Gli elementi {{htmlelement("form")}}, {{htmlelement("div")}}, {{htmlelement("label")}} e {{htmlelement("input")}} vengono rispettivamente impostati come una tabella, righe di tabella e celle di tabella. Operando fondamentalmente come il markup di una tabella in HTML, i campi input e le didascalie si allineano in maniera corretta. Rimane solo da regolare la dimensione, i margini ecc. per far apparire l'insieme più gradevole.

+ +

Si noti che il paragrafo contenete la didascalia è stato impostato con la regola display: table-caption, che determina un comportamento simile a {{htmlelement("caption")}} all'interno di una tabella. Inoltre, per motivi estetici, ha l'attributo caption-side: bottom;. In questo modo, la didascalia viene visualizzata sotto al modulo, anche se nel codice sorgente è posizionata prima degli elementi <input>.

+ +

Ciò consente una notevole flessibilità.

+ +
html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}
+ +

Otteniamo il seguente risultato:

+ +

{{ EmbedLiveSample('Table_layout', '100%', '170') }}

+ +

Si veda anche l'esempio dal vivo [TODO] e il codice sorgente [TODO IT source code]

+ +

You can also see this example live at css-tables-example.html (see the source code too.)

+ +

Layout multicolonna

+ +

Il modulo di layout multicolonna permette di strutturare il contenuto in colonne, in maniera simile al testo di un quotidiano cartaceo. Il layout a colonne non è una visualizzazione ottimale nei siti web, in quanto costringe chi legge a scorrere continuamente su e giù per la pagina. Tuttavia, in alcuni casi, suddividere il contenuto in colonne si rivela utile.

+ +

Il blocco si può trasformare in un contenitore multicolonna grazie alla proprietà {{cssxref("column-count")}}, che indica al browser il numero di colonne desiderate, oppure alla proprietà {{cssxref("column-width")}}, che specifica la larghezza delle colonne (il loro numero viene automaticamente calcolato in base alla larghezza totale del contenitore).

+ +

Nel seguente esempio, un elemento <div> con classe container contiene un blocco di codice HTML.

+ +
<div class="container">
+    <h1>Layout multi-colonna</h1>
+
+    <p>Paragrafo 1.</p>
+    <p>Paragrafo 2.</p>
+
+</div>
+
+ +

La proprietà column-width con valore 200 pixel viene applicata a questo contenitore, indicando al browser di disporre tante colonne larghe 200 pixel quante sono necessarie per riempirne la larghezza. Lo spazio rimanente viene suddiviso tra le colonne, come spaziatura tra una e l'altra.

+ +
+ + +
    .container {
+        column-width: 200px;
+    }
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

+ +

Sommario

+ +

Questo articolo è un breve compendio di tutte le tecniche che occorre conoscere per sviluppare un layout. Continua la lettura per approfondire ogni singolo aspetto di questa tecnologia!

+ +

{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/css/css_layout/normal_flow/index.html b/files/it/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..01e197ad76 --- /dev/null +++ b/files/it/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,108 @@ +--- +title: Flusso normale +slug: Learn/CSS/CSS_layout/Normal_Flow +tags: + - Beginner + - CSS + - Layout + - Learn + - float + - grid + - normal flow +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Questo articolo illustra il flusso normale ovvero il modo in cui si dispongono gli elementi che formano una pagina web in maniera spontanea, senza manipolazioni.

+ + + + + + + + + + + + +
Prerequisiti:Le basi di HTML (leggi Introduzione a HTML [Introduction to HTML]) e nozioni sul funzionamento del CSS (leggi Introduzione al CSS [Introduction to CSS].)
Obiettivo:Comprendere come i browser predispongono il layout delle pagine web prima di intervenire su di esso applicando le regole di stile CSS.
+ +

Come specificato nella lezione precedente, che introduceva al layout CSS, gli elementi di una pagina web si dispongono secondo il flusso normale, a meno che non vengano applicate alcune regole CSS che ne mutano il comportamento.
+ Come premesso, è possibile cambiare il comportamento degli elementi adattando la loro posizione all'interno del flusso oppure estrapolandoli da esso.
+ La maniera migliore per costruire una pagina web è iniziare impostando una struttura chiara e solida, adatta a essere visualizzata nel flusso normale.
+ In questo modo ci assicuriamo che il contenuto sia leggibile, anche quando l'utente usa un browser molto limitato oppure un dispositivo che, tramite screen reader, enuncia il contenuto della pagina.
+ Inoltre, poiché il flusso normale è stato progettato per rendere leggibile il documento, possiamo cominciare da questa impostazione per effettuare le modifiche in maniera armonica, senza forzature.

+ +

Prima di esplorare in maniera approfondita i vari metodi di layout, ripassiamo alcune nozioni apprese nei moduli precedenti sul flusso normale del documento.

+ +

Come si dispongono gli elementi con impostazione predefinita?

+ +

Prima di tutto, il riquadro di un determinato elemento varia a seconda del suo contenuto. Successivamente intervengono altri fattori quali la spaziatura interna, il bordo e il margine esterno, seguendo esattamente la logica del Box Model che abbiamo studiato in precedenza.

+ +

Come da impostazione predefinita, la larghezza del contenuto di un elemento di tipo blocco [block level element] copre il 100% della larghezza dell'elemento padre, mentre l'altezza dipende dall'altezza del suo contenuto. Invece, nel caso degli elementi in linea [Inline elements], sia la larghezza che l'altezza dipendono dal contenuto. Non è possibile imporre una larghezza o un'altezza degli elementi in linea, perché essi si posizionano come contenuti fluidi all'interno di un elemento blocco. Se vogliamo stabilire le sue dimensioni, occorre usare display:block per fare in modo che assuma le proprietà di un elemento blocco (oppure display: inline-block, che presenta caratteristiche di entrambi gli stili).

+ +

Il layout del flusso normale, lo abbiamo detto nell'introduzione al layout CSS, è il sistema impiegato dai browser per disporre gli elementi all'interno dell'area di visualizzazione. Come da impostazione predefinita, gli elementi di tipo blocco si dispongono secondo la direzione blocco, determinata dalla proprietà writing-mode dell'elemento padre (che assume valore iniziale horizontal-tb). Ciascun elemento occupa un'intera linea; inoltre è possibile inserire margini per separare i vari elementi. Nel caso di lingue come l'inglese, con la direzione di scrittura preimpostata da sinistra verso destra e dall’alto verso il basso, gli elementi blocco vengono disposti verticalmente dall'alto in basso.

+ +

Gli elementi in linea si comportano diversamente: non occupano una nuova linea ciascuno, bensì si susseguono lungo la medesima linea e si allineano ai contenuti testuali adiacenti sino a riempire l'intera larghezza dell'elemento padre di tipo blocco. Quando non vi è più spazio, gli elementi vanno fluidamente a capo per occupare la linea successiva.

+ +

Se due elementi adiacenti hanno margini contigui, il margine maggiore prevale su quello più esiguo che sparirà del tutto. Questo comportamento, già trattato negli articoli sui CCS di Mozilla, prende il nome di "margin collapsing" (compressione dei margini).

+ +

Il basilare esempio di seguito illustra il comportamento del flusso normale:

+ +
+
<h1>Flusso di base del documento</h1>
+
+<p>Io sono un tipico elemento blocco. L'elemento blocco che viene dopo di me, occupa la linea orizzontale successiva</p>
+
+<p>Da impostazione predefinita occupiamo il 100% della larghezza del nostro elemento padre, mentre l'altezza di ciascuno è determinata dal suo contenuto. Le nostre larghezza e altezza totali sono uguali a contenuto + margine interno + altezza/larghezza del bordo.</p>
+
+<p>Siamo separati dai margini. A causa del "margin collapse", tra uno e l'altro di noi rimane un solo margine, il maggiore, mentre il minore si comprime.</p>
+
+<p>Gli elementi in linea <span>come questo</span> e <span>quest’altro</span> si collocano entrambi sulla stessa linea e, spazio permettendo, sulla stessa linea dei nodi di testo adiacenti.
+Gli elementi in linea che eccedono la larghezza dell'elemento padre, <span> se possibile vanno a capo, continuando su una nuova linea, proprio come questo testo,</span>, altrimenti si spostano direttamente sulla linea successiva proprio come la seguente immagine: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Sommario

+ +

Ora che abbiamo compreso il flusso normale, cioè il meccanismo predefinito con cui un browser dispone gli elementi nella pagina, passiamo a studiare come cambiare l'impostazione predefinita di visualizzazione al fine di sviluppare il layout secondo la progettazione desiderata.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/css/index.html b/files/it/learn/css/index.html new file mode 100644 index 0000000000..9ffaa802c9 --- /dev/null +++ b/files/it/learn/css/index.html @@ -0,0 +1,65 @@ +--- +title: Impara a stilizzare HTML usando i CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +--- +
{{LearnSidebar}}
+ +
I fogli di stile a cascata - o {{glossary("CSS")}} - sono la seconda tecnologia che dovresti iniziare a imparare dopo l' {{glossary("HTML")}}. Mentre l'HTML è usato per definire la struttura e la semantica del tuo contenuto, i CSS vengono utilizzati per modellarlo e disporlo graficamente. Per esempio puoi utilizzare il CSS per modificare il colore e la dimensione di un testo, animare certi elementi della pagina, aggiungere margini e bordi e molte altre casistiche.
+ +
+ +
Percorso di apprendimento
+ +
Dovresti imparare prima i concetti base dell' HTML prima di cimentarti con i CSS. Ti consigliamo di leggere prima il modulo di introduzione Cominciare con l'HTML.
+ +
Con tale modulo potrai imparare:
+ +
+ + + +

Una volta che avrai compreso i fondamenti dell'HTML, ti consigliamo di imparare HTML e CSS contemporaneamente. Questo perchè l'HTML è molto più interessante e più divertente da imparare quando applichi anche i CSS, e non puoi imparare veramente i CSS senza conoscere l'HTML.

+ +

Prima di iniziare questi argomenti, dovresti avere una certa familiarità nell'uso dei computer e nella navigazione sul web. Dovresti avere un ambiente di lavoro di base impostato secondo i dettagli forniti in Installazione di software fondamentali, e sapere come creare e gestire file, come esposto in Gestire i file — entrambi fanno parte della nostra guida completa per principianti Primi passi con il web.

+ +

Ti raccomandiamo di completare con Primi passi con il web prima di continuare con questo argomento. Questo non è assolutamente indispensabile in quanto molti argomenti affrontati nell'articolo sulle basi del CSS sono anche affrontati nella nostra Introduzione ai CSS, anche se in dettaglio molto maggiore.

+ +

Moduli

+ +

Questo argomento contiene i seguenti moduli, suggeriti in ordine di lettura. Dovresti iniziare con il primo modulo.

+ +
+
Introduzione al CSS
+
Questo modulo ti introdurrà alle basi di come funzionano i CSS, inclusi selettori e proprietà, scrivere regole CSS, applicare CSS ad HTML, come specificare lunghezza, colore ed altri elementi in CSS, ereditarietà e cascata, basi del box model ed il debug di CSS.
+
Styling text
+
Guardiamo ai fondamenti di formattazione del testo, inclusa l'impostazione del carattere, grassetto e corsivo, la spaziatura di lettere e l'interlinea, ombreggiatura ed altre caratteristiche del testo. Concludiamo il modulo guardando a come applicare un carattere personalizzato alla tua pagina e stilizzando liste e collegamenti.
+
Styling boxes
+
Subito dopo diamo un occhio a come stilizzare i contenitori, uno dei passi fondamentali verso la creazione di una pagina web. In questo modulo riepiloghiamo il modello dei contenitori per poi affrontare il controllo della disposizione degli elementi impostando riempimento, bordi e margini, impostando colori di sfondo, immagini ed altre caratteristiche come ombre e filtri sui contenitori.
+
CSS layout
+
A questo punto abbiamo già esaminato i fondamenti dei CSS, come modellare il testo e come modellare e manipolare le caselle in cui si trovano i tuoi contenuti. Ora è il momento di vedere come posizionare le tue box nel posto giusto rispetto al viewport e tra di loro. Abbiamo coperto i prerequisiti necessari in modo che ora possiamo immergerci in profondità nel layout CSS, esaminando diverse impostazioni di visualizzazione, metodi di layout tradizionali che coinvolgono float e posizionamento e nuovi strumenti di layout fangled come flexbox.
+
+ +

Solving common CSS problems

+ + + +

Usare CSS per risolvere problemi comuni fornisce collegamenti a sezioni di contenuto che spiegano come utilizzare CSS per risolvere problemi molto comuni durante la creazione di una pagina web: Styling Box.

+ +

See also

+ +
+
CSS su MDN
+
Il punto d'ingresso principale per la documentazione CSS su MDN, dove troverai documentazione di riferimento dettagliata per tutte le funzionalità del linguaggio CSS. Vuoi conoscere tutti i valori che una proprietà può assumere? Questo è un buon posto dove andare.
+
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 new file mode 100644 index 0000000000..b6bdc7a6fa --- /dev/null +++ b/files/it/learn/css/styling_text/definire_stili_link/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/css/styling_text/index.html b/files/it/learn/css/styling_text/index.html new file mode 100644 index 0000000000..ce435ca33b --- /dev/null +++ b/files/it/learn/css/styling_text/index.html @@ -0,0 +1,57 @@ +--- +title: Styling text +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - NeedsTranslation + - Text + - TopicStub + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

+ +

Prerequisites

+ +

Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin, CodePen or Thimble.

+
+ +

Guides

+ +

This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.

+ +
+
Fundamental text and font styling
+
In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
+
Styling lists
+
Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.
+
Styling links
+
When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.
+
Web fonts
+
Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.
+
+ +

Assessments

+ +

The following assessments will test your understanding of the text styling techniques covered in the guides above.

+ +
+
Typesetting a community school homepage
+
In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.
+
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" new file mode 100644 index 0000000000..3d3bc69f60 --- /dev/null +++ "b/files/it/learn/getting_started_with_the_web/che_aspetto_avr\303\240_il_tuo_sito_web/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/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 new file mode 100644 index 0000000000..47fb54afda --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/come_funziona_il_web/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/css_basics/index.html b/files/it/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..b229d8f888 --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,267 @@ +--- +title: Basi di CSS +slug: Learn/Getting_started_with_the_web/CSS_basics +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

CSS (Cascading Style Sheets) è il codice usato per modellare lo stile delle pagine web. In questo capitolo, CSS Basics, viene spiegato di cosa si ha bisogno per iniziare. Risponderemo a domande come: come faccio a rendere il testo nero o rosso? Come faccio a far visualizzare il contenuto in un certo posto sullo schermo? Come faccio a decorare la pagina web con immagini di sfondo e colori?

+
+ +

Quindi, cosa sono i CSS in concreto?

+ +

Come l'HTML, anche il CSS non è un vero e proprio linguaggio di programmazione. Si tratta di un "linguaggio di stile", che consente cioé di applicare, selettivamente, uno stile agli elementi dei documenti HTML. Per esempio, per selezionare tutti gli elementi paragrafo di una pagina HTML e rendere rosso il testo che contengono, devi scrivere questo CSS:

+ +
p {
+  color: red;
+}
+ +

Facciamo una prova: incolliamo le tre righe di CSS nell'editor di testo, in un nuovo file e salviamolo come stile.css nella sottocartella styles.

+ +

Abbiamo ancora bisogno di collegare il CSS al documento HTML, altrimenti non influenzerà il modo in cui il browser visualizza il documento HTML. (Se non avete seguito il nostro progetto, leggete Dealing with files (Gestire i files) e HTML basics (Nozioni di base di HTML) per scoprire cosa è stato fatto fin qui.

+ +
    +
  1. Apriamo il file index.html e incolliamo la seguente riga nella sezione <head>, cioè tra i tag <head> e </head>. + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. Salviamo index.html e apriamolo nel browser. Si dovrebbe vedere qualcosa di simile a questo:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Se il testo dei paragrafi ora è rosso, congratulazioni! Hai appena scritto il tuo primo CSS funzionante.

+ +

Anatomia di un set di regole CSS

+ +

Diamo un'occhiata più approfondita al CSS precedente.

+ +

+ +

Tutta la struttura è chiamata "insieme di regole" (rule set), ma spesso anche solo "regola", per brevità. Nota anche i nomi delle singole parti:

+ +
+
Selettore
+
Il nome dell'elemento HTML all'inizio del set di regole. Seleziona l'elemento o gli elementi a cui applicare la regola (in questo caso, gli elementi p). Per applicare la regola di stile ad un elemento diverso basta cambiare il selettore.
+
Dichiarazione
+
Una sola regola/dichiarazione (color: red;) che definisce una delle proprietà dell'elemento.
+
Proprietà
+
Le proprietà di un dato elemento HTML che è possibile modificare; in questo caso il colore. Il colore è una delle proprietà degli elementi p. Nelle regole dei CSS si sceglie quali proprietà si desidera modificare.
+
Valore della proprietà
+
A destra della proprietà, separato dai due punti, si definisce il valore di quella proprietà, scegliendone uno tra i molti possibili (ci sono molti altri colori oltre al rosso).
+
+ +

Notate le altre parti importanti della sintassi:

+ + + +

Quindi, per modificare i valori di molte proprietà in una sola volta, è sufficiente scriverle separate da un punto e virgola; in questo modo:

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

Selezionare più elementi

+ +

È anche possibile selezionare più tipi di elementi e applicare a tutti un unico insieme di regole. Bisogna specificare più selettori separandoli con virgole. Per esempio:

+ +
p,li,h1 {
+  color: red;
+}
+ +

Differenti tipi di selettori

+ +

Ci sono molti diversi selettori. Fin qui, abbiamo guardato solo ai selettori elemento, che selezionano tutti gli elementi di un tipo; ma siamo in grado di effettuare selezioni più specifiche. Ecco alcuni dei più comuni tipi di selettore:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome del selettoreCosa selezionaEsempio
Element selector (a volte chiamato tag o type selector)Tutti gli elementi HTML del tipo specificatop
+ seleziona gli elementi <p>
ID selectorL'elemento della pagina con l'ID specificato (in una specifica pagina HTML è consentito un solo elemento con un certo ID).#my-id
+ Seleziona <p id="my-id"> or <a id="my-id">
Class selectorGli elementi della pagina della classe specificata (in una pagina la classe può essere richiamata più volte)..my-class
+ Selects <p class="my-class"> and <a class="my-class">
Attribute selectorGli elementi della pagina con l'attributo specificatoimg[src]
+ Seleziona <img src="myimage.png"> ma non <img>
Pseudo class selectorGli elementi specificati, ma solo quando sono nello stato specificato, ad esempio quando c'è su il mouse.a:hover
+ Seleziona <a>, ma solo quando il puntatore del mouse si trova sopra il link.
+ +

Ci sono molti altri selettori da conoscere e se ne può trovare un elenco più dettagliato nella nostra Selectors guide (guida ai selettori).

+ +

Caratteri e testo

+ +

Ora che abbiamo esplorato alcune nozioni di base dei CSS, possiamo aggiungere alcune regole e informazioni in più al nostro file stile.css per dare al nostro esempio un aspetto gradevole. Per cominciare, cerchiamo di migliorare l'aspetto dei caratteri e del testo.

+ +
    +
  1. Prima di tutto, andiamo a riprendere i Google Font che abbiamo memorizzato in un posto sicuro. Aggiungiamo il tag <link ...> da qualche parte nella <head> del documento index.html (ancora una volta, in qualsiasi punto tra i tag <head> e </head>. Sarà qualcosa di simile a questo: + + 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. Successivamente, eliminiamo la regola creata prima: è stato un buon esercizio, ma il testo rosso in realtà non è una bellezza.
    3. +
  3. Al suo posto mettiamo le righe seguenti, sostituendo la linea segnaposto con la vera "font-family" ottenuta da Google Font. (Font-family significa semplicemente "famiglia di caratteri" che si desidera utilizzare). Questa regola imposta un font di base e la dimensione del carattere per l'intera pagina (poiché <html> è l'elemento padre di tutta la pagina, essendo tutti gli altri elementi al suo interno, erediteranno tutti gli stessi font-size e font-family): + 
    html {
+  font-size: 10px; /* px significa 'pixels': la dimensione base del carattere è ora alta 10 pixels  */
+  font-family: segnaposto - questo dovrebbe essere il resto dell'output ottenuto da Google Fonts
+}
    + +
    +

    Nota: per spiegare cosa significa "px" è stato aggiunto un "commento". Tutto ciò che, in un documento CSS, sta tra i simboli /* e */ è un commento CSS che il browser ignora quando esegue il rendering del codice. In questo modo si possono scrivere utili annotazioni su cosa si sta facendo con quelle regole.

    +
    +
    4. +
  4. Ora impostiamo le dimensioni dei caratteri per gli elementi di testo contenuti all'interno del "corpo" del documento HTML  ({{htmlelement("h1")}}, {{htmlelement("li")}}, e {{htmlelement("p")}}). Inoltre, centriamo il testo dell'intestazione e regoliamo l'altezza delle linee e la spaziatura dei caratteri per rendere il contenuto un po' più leggibile: + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

È possibile regolare questi valori a piacimento per far apparire il progetto come si vuole, ma dovrebbe essere qualcosa del genere:

+ +

Immagine della pagina creata, un logo Mozilla e alcuni paragrafi. Impostato un tipo di carattere sans-serif, la dimensione dei caratteri, l'altezza delle linee, la spaziatura tra le lettere e l'intestazione della pagina è stata centrata.

+ +

Box, box, tutta una questione di box

+ +

Una cosa che noterete riguardo ai CSS è che sono in gran parte assimilabili a contenitori (boxes): se ne modificano le dimensioni, il colore, la posizione, ecc. La maggior parte degli elementi HTML della pagina può essere pensato come un contenitore impilato su un altro.

+ +

Immagine di una grande pila di casse impilate una sopra l'altra

+ +

Non a caso, la struttura dei CSS si basa principalmente sul "box model". Ciascuno dei blocchi (o contenitori), occupando spazio sulla pagina, ha proprietà come queste:

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

In questa sezione usiamo anche:

+ + + +

Adesso, aggiungiamo un po' di regole al documento CSS! Mettiamole in fondo alla pagina e sperimentiamo senza paura modificando i valori per vedere cosa si ottiene.

+ +

Cambiare il colore della pagina

+ +
html {
+  background-color: #00539F;
+}
+ +

Questa regola imposta il colore di sfondo per l'intera pagina. Modificate il codice relativo al colore con quello che avete scelto pianificando il sito. (planning your site).

+ +

Formattazione del <body>

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

Qui ci sono diverse dichiarazioni; vediamole una per una:

+ + + +

Posizionare e formattare il titolo principale della pagina

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

Potresti aver notato che c'è un orribile spazio in cima all'elemento body. Questo accade perché i browsers applicano alcune formattazioni di default all'elemento {{htmlelement("h1")}} (tra gli altri) anche quando non viene definita alcuna regola nel CSS. Ciò potrebbe sembrare una cattiva idea, ma si vuole che anche un documento non formattato abbia una minima leggibilità. Per eliminare quello spazio abbiamo scavalcato il comportamento del browser impostando  margin: 0;.

+ +

Poi abbiamo impostato il padding dei lati top e bottom del titolo a 20 pixels e assegnato al testo lo stesso colore dello sfondo dell'elemento <html>.

+ +

Una proprietà piuttosto interessante che abbiamo usato é text-shadow, che applica un'ombra al testo contenuto nell'elemento. I suoi 4 valori sono i seguenti:

+ + + +

Ancora, proviamo a sperimentare diversi valori per capire quali effetti possiamo ottenere.

+ +

Centrare l'immagine

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Infine, centriamo l'immagine per avere un miglior effetto. Possiamo usare il trucco dei margini (margin: 0 auto) come abbiamo già fatto per il body, ma abbiamo anche bisogno di qualcos'altro: l'elemento body è block level, ciò significa che prende spazio nella pagina e gli possono essere applicati parametri come i margini e il padding. Le immagini, al contrario, sono elementi inline, il che significa che non gli si potrebbe attribuire quei parametri; quindi per applicare all'immagine i margini dobbiamo stabilire che si comporti come i blocchi, usando la regola "display: block;".

+ +
+

Nota: non preoccuparti se per ora non capisci la regola display: block; e la distinzione tra elementi del block level e inline level. La imparerai studiando più in dettaglio i CSS. Puoi scoprire di più sui possibili valori display nella nostra pagina di riferimento (display reference page).

+
+ +

Conclusioni

+ +

Se hai seguito tutte le istruzioni in questo articolo dovresti aver ottenuto qualcosa che assomiglia a questo (puoi confrontare la nostra versione qui):

+ +

Il logo mozilla, centrato, titolo e paragrafi. Adesso ha un bello stile con uno sfondo blu per l'intera pagina e arancione per la fascia principale.

+ +

Se sei bloccato puoi sempre confrontare il tuo lavoro con il nostro su GitHUb (finished example code on Github).

+ +

Qui abbiamo solo scalfito la superfice dei CSS. Per scoprire di più vai a vedere CSS Learning topic.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_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 new file mode 100644 index 0000000000..d7c574320b --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/gestire_i_file/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/html_basics/index.html b/files/it/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..8ab4970c7c --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,217 @@ +--- +title: Basi di HTML +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - Corso + - Principianti +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

HTML (Hypertext Markup Language) è il codice usato per strutturare e visualizzare una pagina web e il suo contenuto. Per esempio, il contenuto potrebbe essere strutturato in una serie di paragrafi, un elenco oppure con immagini e tabelle di dati. Come suggerisce il titolo, questo articolo ti fornirà una comprensione di base dell'HTML e delle sue funzioni.

+
+ +

Ma cos'è veramente l'HTML?

+ +

HTML non è un linguaggio di programmazione; è un linguaggio basato sui markup, ed è utilizzato per indicare al browser come visualizzare le pagine web che vengono visitate. Può essere complicato o semplice a seconda di come i web designer ne utilizzano le funzionalità. HTML consiste in una serie di {{Glossary("element", "elementi")}}, che vengono usati per raggruppare o impacchettare parti differenti del contenuto, per farlo apparire o agire in uno specifico modo. L'uso dei {{Glossary("tag", "tags")}} può fare di una parola o di un'immagine un hyperlink, ossia un collegamento a qualcos'altro, oppure può rendere il testo in corsivo, il font più grande o più piccolo, eccetera. Per esempio, prendiamo la seguente linea del contenuto:

+ +
My cat is very grumpy
+ +

Se vogliamo che la linea venga visualizzata isolatamente, possiamo specificare che è un paragrafo, includendola all'interno di tags che identificano il paragrafo:

+ +
<p>My cat is very grumpy</p>
+ +

Anatomia di un elemento HTML

+ +

Analizziamo in maniera più approfondita l'elemento che identifica il paragrafo.

+ +


+

+ +

Le parti principali dell'elemento sono:

+ +
    +
  1. Il tag di apertura: è il nome dell'elemento (in questo caso, p), incluso tra il segno di minore e il segno di maggiore. Questo indica dove l'elemento inizia, o dove inizia ad avere effetto — in questo caso indica l'inizio del paragrafo.
    2. +
  2. Il tag di chiusura: ha lo stesso formato del tag di apertura ad eccezione della barra che deve precedere il nome dell'elemento. Indica dove termina l'elemento — in questo caso, la fine del paragrafo. Dimenticare di includere il tag di chiusura è uno degli errori più comuni tra i principianti e può portare a risultati imprevisti.
    3. +
  3. Il contenuto: Questo rappresenta il contenuto dell'elemento, che nel nostro caso è solo testo.
    4. +
  4. L'elemento: Il tag di apertura insieme al tag di chiusura ed al contenuto rappresentano l'elemento.
    5. +
+ +

Gli elementi possono anche avere attributi, come nell'esempio che segue:

+ +

+ +

Gli attributi contengono informazioni extra sull'elemento che non si desidera appaiano nel contenuto visualizzato. Nell'esempio, class è il nome dell'attributo, e editor-note è il valore dell'attributo. L'attributo class permette di associare un identificatore all'elemento che potrà essere usato in seguito per applicare all'elemento informazioni di stile e altre cose.

+ +

Un attributo dovrebbe sempre avere:

+ +
    +
  1. Uno spazio che lo separa dal nome dell'elemento (o dal precedente attributo, se l'elemento ha già uno o più attributi)
    2. +
  2. Il nome dell'attributo, seguito dal segno di uguale
    3. +
  3. Il valore dell'attributo incluso tra doppi apici.        
    4. +
+ +

Elementi annidati

+ +

E' possibile anche inserire elementi all'interno di altri elementi — questa modalità è chiamata nesting (annidamento). Se volessimo affermare che "The cat is very grumpy", potremmo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, che indica che la parola deve essere fortemente enfatizzata:

+ +
<p>My cat is <strong>very</strong> grumpy.</p>
+ +

Bisogna tuttavia assicurarsi che gli elementi siano opportunamente annidati: nell'esempio sopra abbiamo aperto il primo elemento {{htmlelement("p")}}, poi l'elemento {{htmlelement("strong")}}, perciò dobbiamo chiudere l'elemento {{htmlelement("strong")}} per primo, poi l'elemento {{htmlelement("p")}}. L'esempio che segue non è corretto:

+ +
<p>My cat is <strong>very grumpy.</p></strong>
+ +

Gli elementi devono essere aperti e chiusi correttamente in modo che sia chiaro come essi si trovino l'uno all'interno dell'altro. Se si sovrappongono come nell'esempio sopra, il browser web cercherà di interpretare al meglio quello che si sta cercando di dire, ma si potrebbero ottenere risultati inattesi. Quindi non va fatto!

+ +

Elementi vuoti

+ +

Alcuni elementi non hanno contenuto, e sono chiamati elementi vuoti. Prendiamo l'elemento {{htmlelement("img")}} che abbiamo nel nostro HTML:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

Contiene due attributi, ma non c'è il tag di chiusura </img> e non c'è un testo incluso. Questo perchè un elemento immagine non deve avere effetti su un testo. Il suo scopo è quello di aggiungere un'immagine alla pagina HTML nel punto in cui si trova.

+ +

Anatomia di un documento HTML

+ +

Include la struttura base dei singoli elementi HTML, che non sono tuttavia molto utili da soli. Ora vedremo come singoli elementi sono combinati per formare un'intera pagina HTML. Riguardiamo il codice che abbiamo inserito nel nostro esempio index.html (che abbiamo incontrato per la prima volta nell'articolo Dealing with files):

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="My test image">
+  </body>
+</html>
+ +

Abbiamo:

+ + + +

Immagini

+ +

Rivolgiamo ancora la nostra attenzione all'elemento {{htmlelement("img")}}:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

Come abbiamo detto prima, quest'elemento aggiunge un'immagine nella pagina, nella posizione in cui si trova. E' l'attributo src (source) che fa questo, contenendo il percorso del file immagine.

+ +

Abbiamo anche incluso l'attributo alt (alternative). In questo attributo viene specificato il testo descrittivo per quegli utenti che non possono visualizzare l'immagine, probabilmente per i seguenti motivi:

+ +
    +
  1. Sono ipovedenti. Gli utenti con disabilità visive significative spesso usano strumenti chiamati screen reader che leggono per loro il testo dell'elemento alt
    2. +
  2. Qualcosa è andato storto causando la mancata visualizzazione dell'immagine. Per esempio, se si prova a modificare deliberatamente il percorso all'interno dell'attributo src per renderlo errato. Salvando e ricaricando la pagina, si dovrebbe vedere qualcosa di simile a ciò che segue, al posto dell'immagine:
    3. +
+ +

+ +

Le parole chiave per il testo nell'alt sono "testo descrittivo". Il testo che viene scrito nell'alt dovrebbe fornire al lettore informazioni sufficienti per avere una buona idea di ciò che l'immagine rappresenta. In questo esempio, il testo attuale "My test image" non è per niente adatto. Un'alternativa decisamente migliore per il logo di Firefox potrebbe essere "Il logo di Firefox: una volpe fiammeggiante che circonda la Terra."

+ +

Prova subito a trovare un testo adatto per l'alt delle tua immagine.

+ +
+

Nota: Scopri di più sull'accessibilità al link MDN's Accessibility landing page.

+
+ +

Marcatura del testo

+ +

Questa sezione riguarda alcuni elementi HTML di base che vengono usati per la marcatura del testo.

+ +

Intestazioni

+ +

Gli elementi Intestazioni permettono di specificare che alcune parti del contenuto sono titoli — o sottotitoli. Allo stesso modo in cui un libro ha un titolo principale, titoli di capitoli e sottotitoli, così anche un documento HTML. HTML contiene sei livelli di intestazione, {{htmlelement("h1")}}–{{htmlelement("h6")}} sebbene in genere se ne usino da 3 a 4 al massimo:

+ +
<h1>My main title</h1>
+<h2>My top level heading</h2>
+<h3>My subheading</h3>
+<h4>My sub-subheading</h4>
+ +

Ora prova ad aggiungere un titolo adatto alla tua pagina HTML appena sopra l'elemento {{htmlelement("img")}}.

+ +

Paragrafi

+ +

Come spiegato sopra, gli elementi {{htmlelement("p")}} sono usati per contenere paragrafi di testo; verranno usati di frequente per contrassegnare contenuti di testo regolari:

+ +
<p>This is a single paragraph</p>
+ +

Aggiungi il tuo testo di esempio (dovresti averlo dall'articolo What should your website look like?) in uno o più paragrafi, direttamente sotto l'elemento {{htmlelement("img")}}.

+ +

Liste

+ +

Molti contenuti web sono elenchi, e l'HTML ha elementi speciali per gestirli. La marcatura di liste consiste sempre in almeno due elementi. I tipi più comuni di lista sono le liste ordinate e le liste non ordinate:

+ +
    +
  1. +

    Le liste non ordinate sono liste in cui l'ordine degli articoli non ha importanza, come in una lista della spesa. Queste sono racchiuse in un elemento {{htmlelement("ul")}}.

    +
    2. +
  2. Le liste ordinate sono liste dove l'ordine degli articoli ha importanza, come in una ricetta. Queste sono racchiuse in un elemento {{htmlelement("ol")}}.
    3. +
+ +

Ogni articolo all'interno delle liste è inserito all'interno di un elemento {{htmlelement("li")}} (list item).

+ +

Per esempio, se volessimo convertire una parte del seguente paragrafo in una lista:

+ +
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
+ +

Potremmo modificare la marcatura così:

+ +
<p>At Mozilla, we’re a global community of</p>
+
+<ul>
+  <li>technologists</li>
+  <li>thinkers</li>
+  <li>builders</li>
+</ul>
+
+<p>working together ... </p>
+ +

Prova ad aggiungere una lista ordinata e una non ordinata alla tua pagina di esempio.

+ +

I collegamenti

+ +

I link sono molto importanti — sono quelli che rendono il web una rete! Per aggiungere un collegamento, si deve usare un semplice elemento — {{htmlelement("a")}} — la "a" è l'abbreviazione di "anchor". Per convertire il testo del paragrafo in un link, seguire i seguenti passaggi:

+ +
    +
  1. Scegliere il testo. Noi abbiamo scelto "Mozilla Manifesto".
    2. +
  2. Includere il testo in un elemento {{htmlelement("a")}}, come segue: + 
    <a>Mozilla Manifesto</a>
    +
    3. +
  3. Dare all'elemento {{htmlelement("a")}} un attributo href, come segue: + 
    <a href="">Mozilla Manifesto</a>
    +
    4. +
  4. Compilare il valore di quest'attributo con l'indirizzo web a cui si desidera che il collegamento si colleghi: + 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    +
    5. +
+ +

Si potrebbero ottenere risultati imprevisti se si omettono https:// o http://, che sono chiamati protocollo, all'inizio dell'indirizzo web. Dopo aver impostato un link, fare click su di esso per assicurarsi che si colleghi dove desiderato.

+ +
+

href potrebbe apparire in un primo momento come una scelta piuttosto oscura per un nome di attributo. Se hai difficoltà a memorizzarlo, ricorda che sta per hypertext reference.

+
+ +

Ora puoi aggiungere un link alla tua pagina, se ancora non l'hai fatto.

+ +

Conclusione

+ +

Se hai seguito tutte le istruzioni di questo articolo, dovresti aver ottenuto una pagina che assomiglia a questa riportata sotto (può essere anche visualizzata da questo link view it here):
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

Se ti sei bloccato, puoi sempre confrontare il tuo lavoro con il codice di esempio finished example code che trovi su GitHub.

+ +

Qui, abbiamo solo graffiato la superficie dell'HTML. Per saperne di più, vai al seguente link HTML Learning topic.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/index.html b/files/it/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..a079b7905b --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/index.html @@ -0,0 +1,59 @@ +--- +title: Primi Passi con il Web +slug: Learn/Getting_started_with_the_web +tags: + - Beginner + - CSS + - Design + - Guide + - HTML + - Índice +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}} +
+
+ +
+

Primi passi con il Web è una breve introduzione alle tecniche dello sviluppo web. Inizieremo conoscendo e impostando gli strumenti necessari per disegnare una semplice pagina web e pubblicare il tuo codice.

+
+ +

La storia del tuo primo sito web

+ +

Creare un sito web professionale non è certo un lavoro breve, se ti approcci per la prima volta allo sviluppo web ti suggeriamo di partire imparando le basi. Non abbiamo la pretesa di creare un nuovo Facebook ma non è difficile pubblicare il tuo semplice sito online; inizieremo da qua.

+ +

Seguendo le istruzioni contenute nei successivi articoli vedrai la tua prima pagina web pubblicata. Iniziamo!

+ +

Installare il software fondamentale

+ +

Quando si tratta di strumenti per lo sviluppo web ci sono molti software utili. Se stai iniziando potresti essere confuso dalla quantità di editor, framework e strumenti per testing che ci sono. Nella sezione Installare il software fondamentale puoi trovare guide passo-passo su come installare tutti gli strumenti che ti serviranno per iniziare con lo sviluppo.

+ +

Che aspetto avrà il tuo sito web?

+ +

Prima di iniziare a disegnare il tuo sito è meglio pensare a come farlo. Quali informazioni intendi mostrare? Che fonts e che colori vuoi usare? Come sarà il tuo sito? Ti forniamo un semplice metodo da seguire per pianificare la struttura del sito e il suo contenuto.

+ +

Gestire i file

+ +

Un sito web contiene molti file con diversi tipi di contenuto: testuale, codice, css, multimediale e così via. Quando si tratta di costruire un sito è necessario assemblare questi documenti in una struttura concreta ed assicurarsi che questi file possano interfacciasi l'un l'altro. Gestire i file ti spiega come impostare una struttura per il tuo sito e illustra i problemi dei quali essere consapevoli.

+ +

Principi di HTML

+ +

Hypertext Markup Language (HTML) è il linguaggio utilizzato per strutturare il contenuto web e fornirgli forma e significato. Consente, per esempio, di crere paragrafi o elenchi puntati; permette inoltre di disporre le immagini all'interno della pagina, di inserire tabelle o altri contenuti. Principi di HTML mette a disposizione abbastanza informazioni per approcciarsi all'HTML.

+ +

Principi di CSS

+ +

Cascading Stylesheets (CSS) è il tipo di codice utilizzato per aggiungere lo stile al sito. Per esempio, preferisci che il testo sia rosso oppure nero? Dove dovrebbe essere posto il contenuto sullo schermo? Che immagini di sfondo o colori dovrebbero essere inseriti per decorare la tua pagina? Principi di CSS ti illustra le basi necessarie per iniziare.

+ +

Principi di JavaScript

+ +

JavaScript è il linguaggio di programmazione usato per aggiungere contenuto interattivo al tuo sito, come giochi, cose che accadono alla pressione di un pulsante o all'inserimento di informazioni in un form, effetti di stile dinamici, animazioni e molto altro. Principi di JavaScript fornisce un'idea di cosa sia possibile fare con questo interessante linguaggio e di come iniziare.

+ +

Pubblicare il tuo sito

+ +

Una volta completata la scrittura del codice e organizzati i file che compongono il tuo sito è ovvimente necessario porre il tutto online, così che le persone possano trovarlo ed apprezzarlo. Pubblicare il tuo sito descrive come compiere questo processo in modo facile e col minimo sforzo.

+ +

Come funziona il Web

+ +

Quando accedi al tuo sito preferito, accadono una serie di complicati processi in background, dei quali potresti non sapere nulla. Come funziona il web spiega quello che accade quando visualizzi una pagina sul tuo computer.

+ +

{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}

diff --git a/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..8f4871eb46 --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,54 @@ +--- +title: Installazione di software fondamentali +slug: Learn/Getting_started_with_the_web/Installing_basic_software +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

In questo articolo, ti mostriamo come eseguire l'installazione di tutti i software necessari per iniziare con lo sviluppo web.

+
+ +

Quali strumenti utilizzano i professionisti?

+ + + +

Di quali strumenti ho bisogno, in questo momento?

+ +

Sembra proprio una lista terrificante, fortunatamente puoi iniziare ad occuparti di web development senza sapere nulla di molto di ciò elencato. In questo articolo ti mostreremo quali sono gli strumenti indispensabili per incominciare — un editor di testo e qualche browser web moderno.

+ +

Installare un editor di testo

+ +

Probabilmente hai già un editor di testo di base nel tuo computer. Windows ha Notepad di default mentre macOS ha TextEdit. Le distro Linux variano; Ubuntu ha gedit di default.

+ +

Per il web development, puoi probabilmente avere di meglio che NotePad o TextEdit. Noi raccomandiamo di iniziare con Brackets, un editor gratuito che offre anteprime live e suggerimenti sul codice.

+ +

Installare browser web moderni

+ +

Per adesso, installeremo solamente un paio di browser web per desktop per testarci il nostro codice. Scegli più sotto il tuo sistema operativo e clicca sui relativi link per scaricare il file d'installazione per il tuo browser preferito:

+ + + +

Prima di andare avanti, dovresti installare almeno due di questi browser e assicurarti di averli pronti per il testing.

+ +

Installazione di un server Web locale

+ +

Alcuni esempi dovranno essere eseguiti da un server Web per funzionare correttamente. Per informazioni su come eseguire questa operazione, vedere Come si configura un server di prova locale? (How do you set up a local testing server? )

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git a/files/it/learn/getting_started_with_the_web/javascript_basics/index.html b/files/it/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..bb12f8680e --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,402 @@ +--- +title: Basi di JavaScript +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - JavaScript +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

JavaScript è un linguaggio di programmazione che aggiunge interattività al tuo sito internet (per esempio: giochi, risposte al premersi di un bottone o inserimento di dati in moduli, stili dinamici e animazioni). Questo articolo ti aiuterà a iniziare il tuo percorso in questo fantastico linguaggio dandoti un'idea di ciò che è possibile costruire (spoiler alert: molte, molte cose).

+
+ +

Cos'è JavaScript, davvero?

+ +

{{Glossary("JavaScript")}} ("JS" per i fan) è un {{Glossary("Dynamic programming language", "linguaggio dinamico di programmazione")}} che, quando applicato a un documento {{Glossary("HTML")}}, può dare interattività dinamica al sito web. Fu inventato da Brendan Eich, co fondatore del Mozilla project, Mozilla Foundation e Mozilla Corporation.

+ +

JavaScript è incredibilmente versatile. Puoi iniziare dal piccolo, con slider (carousel), gallerie di immagini, layout fluttuanti, risposte al premersi di un bottone. Con più esperienza sarai in grado di creare giochi, grafiche animate 2D e 3D, applicazioni con database e molto altro!

+ +

JavaScript è un linguaggio abbastanza compatto ma comunque flessibile. Gli Sviluppatori hanno scritto una grande varietà di plugins e snippets di codice da inserire sopra al linguaggio nativo che è il cuore di JavaScript, aprendo alle potenzialità e alle extra funzionalità del linguaggio, diminuendo gli sforzi. Queste includono:

+ + + +

Questo articolo vuole essere una leggera introduzione a JavaScript, non andremo a confoderti parlando dei dettagli e delle differenze tra il linguaggio nativo di JavaScript e tutte le varie librerie e framework che sono state costruite. Potrai imparare più in dettaglio nell'area di apprendimento JavaScript, oppure nel resto di MDN.

+ +

Sotto introdurremo alcuni aspetti del linguaggio nativo e potrai giocare anche con alcune delle API del browser. Divertiti!

+ +

"ciao mondo"

+ +

Quanto scritto sopra potrebbe sembrare eccitante, e dovrebbe — JavaScript è una delle tecnologie più vivaci e iniziando a usarlo, i tuoi siti si apriranno a nuove dimensioni di potere e creatività.

+ +

Ad ogni modo, JavaScript è un po' più complesso di HTML e CSS (che non sono propriamente linguaggi di programmazione, bensì di markup e di stile). Puoi iniziare con piccole cose come questa qui sotto. Iniziamo con l'aggiungere del JavaScript di base alla nostra pagina creando un esempio "ciao mondo" (lo standard negli esempi base di programmazione).

+ +
+

Importante: Se non hai seguito il resto del corso, scarica questo esempio e usalo come punto di inizio.

+
+ +
    +
  1. Per prima cosa andiamo dove abbiamo salvato il nostro sito di test e creiamo una nuova cartella 'scripts' (senza gli apici). Poi al suo interno creiamo un file e chiamiamolo main.js (questo file è uno script di JavaScript).
    2. +
  2. Poi, nel tuo file index.html inserisci questo elemento in una nuova riga prima del tag di chiusura </body>: + 
    <script src="scripts/main.js"></script>
    +
    3. +
  3. Praticamente stiamo facendo quello che avremmo fatto per un file di stile CSS con {{htmlelement("link")}} - applichiamo il JavaScript alla pagina così che possa avere effetto su questa (e così anche sul CSS e qualsiasi altra cosa sulla pagina).
    4. +
  4. Ora aggiungi questo snippet di codice al file main.js: + 
    var myHeading = document.querySelector('h1'); // Seleziono tutti i tag h1
+myHeading.textContent = 'Hello world!'; // Cambio il testo
    +
    5. +
  5. Assicurati che i file HTML e JavaScript siano salvato e carica index.html nel browser. Dovresti vedere qualcosa di simile:
    6. +
+ +
+

Note: Abbiamo inserito l'elemento script sul fondo della pagina HTML perchè l'HTML carica in ordine lettura, in maniera sincrona. Se il JavaScript venisse caricato prima e non in fondo alla pagina, potrebbe causare dei problemi in quanto sarebbe caricato prima dell'HTML su cui lo script lavorerebbe, ma non sempre è così. Di solito è buona pratica, anche per i tempi di caricamento, inserire il JavaScript a fine pagina HTML, ma ciò può cambiare a seconda delle necessità.

+
+ +

Cos'è successo?

+ +

Il testo nell'elemento h1 è stato cambiato in "Hellow world!" usando JavaScript. Lo hai fatto utilizzando una funzione chiamata {{domxref("Document.querySelector", "querySelector()")}} per prendere un riferimento del tuo elemento h1 e poi salvando l'elemento in una variabile chiamata myHeading. Questo è molto simile a quello che abbiamo fatto con i selettori CSS. Quando vogliamo fare qualcosa con un elemento, dobbiamo prima selezionarlo.

+ +

Dopo aver selezionato l'elemento e averlo inserito nella variabile myHeading, hai cambiato la proprietà {{domxref("Node.textContent", "textContent")}} , una proprietà che fa parte nativamente degli elementi HTML grazie alla DOM API, in "Hello world!".

+ +
+

Nota: Entrambe le funzionalità che hai usato fanno parte della Document Object Model (DOM) API, che ti permette di manipolare i documenti HTML.

+
+ +

Basi del linguaggio

+ +

Parliamo di alcune delle funzionalità principali del linguaggio JavaScript, per darti un'idea migliore di come tutto funziona. Inoltre, alcune di queste funzionalità sono comuni a tutti i linguaggi di programmazione. Se riuscirai a padroneggiare queste fondamenta, sarai sulla strada giusta per programmare più o meno tutto!

+ +
+

Importante: In questo articolo, prova a inserire il codice di esempio nella tua console di JavaScript per vedere cosa succede. Per maggiori dettagli sulle console di JavaScript vedi Scoprire i tool di sviluppo del browser

+
+ +

Variabili

+ +

{{Glossary("Variable", "Le Variabili")}} sono contenitori dove puoi immagazzinare o salvare dei valori. Puoi iniziare dichiarando una variabile con la parola chiave var, seguita da qualsiasi nome tu voglia (più o meno JavaScript Keywords and Preserved Words):

+ +
var myVariable; // ok
+var _myVariable; // ok
+var $myVariable; // ok
+var my_Variable; // ok
+var -myVariable; // error
+var delete; // error, preserved keyword
+myVariable; // error
+ +
+

Nota: Il punto e virgola indica la fine di un'istruzione; è solo necessario quando devi separare le varie istruzioni su una singola riga, ma è anche buona pratica. Ci sono altre regole per sapere quando usarli e quando non usarli - vedi Your Guide to Semicolons in JavaScript per maggiori dettagli.

+
+ +
+

Nota: Puoi chiamare una variabile più o meno con qualsiasi nome ma ci sono alcune regole o restrizioni da seguire (vedi questo articolo). Se non sei sicuro puoi controllarne la validità.

+
+ +
+

Nota: JavaScript è case sensitive quindi myVariable e myvariable sono due variabili diverse. Se riscontri dei problemi nel tuoi codice, controlla le lettere!

+
+ +

Dopo aver dichiarato la variabile, puoi dargli un valore:

+ +
myVariable = 'Bob';
+ +

Oppure puoi usare una scorciatoia e unire i passaggi:

+ +
var myVariable = 'Bob';
+ +

Puoi richiamare il valore della variabile chiamandola:

+ +
myVariable;
+ +

Dopo avergli assegnato un valore puoi anche cambiarlo:

+ +
var myVariable = 'Bob';
+myVariable = 'Steve';
+ +

Nota che queste variabili sono di tipi diversi:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableExplanationExample
{{Glossary("String")}}Per denotare che una variabile è una stringa, dovresti metterne il valore tra virgolette.var myVariable = 'Bob';
{{Glossary("Number")}}I numeri non hanno virgolette intorno a loro.var myVariable = 10;
{{Glossary("Boolean")}} +

Un valore Vero/Falso. Le parole true e false sono parole chiave in JS e non hanno bisogno di virgolette.

+ 		var myVariable = true;
{{Glossary("Array")}}Una struttura che ti permette di immagazzinare più valori su un singolo riferimento.var myVariable = [1,'Bob','Steve',10];
+ Riferisciti a ogni membro dell'array:
+ myVariable[0], myVariable[1], etc.
{{Glossary("Object")}}Tutto in JavaScript è un oggetto e può essere salvato in una variabile. Tienilo a mente mentre impari.var myVariable = document.querySelector('h1');
+ +

Quindi perchè abbiamo bisogno delle variabili? Le variabili sono necessarie per rendere le cose interessanti nella programmazione. Se i valori non potessero cambiare non potremmo fare niente di dinamico, come personalizzare un messaggio di benvenuto o cambiare l'immagine mostrata in una galleria d'immagini.

+ +

Commenti

+ +

Puoi commentare il tuo codice JavaScript come faresti con il CSS:

+ +
/*
+Qui dentro è un commento
+*/
+ +

Se il tuo commento non contiene più di una riga è a volte più semplice fare un commento inline:

+ +
// Questo è un commento inline
+
+ +

Operatori

+ +

Un {{Glossary("operatore")}} è un simbolo matematico che produce risultati basandosi su due valori (o variabili). Nella seguente tabella puoi vedere gli operatori più semplici seguiti da alcuni esempi di JavaScript che puoi provare nella tua console.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorExplanationSymbol(s)Example
addizione/concatenazioneUsato per fare la somma tra due numeri o incollare insieme due stringhe.+6 + 9;
+ "Hello " + "world!";
sottrazione,moltiplicazione,divisioneQueste fanno ciò che ci si aspetta.-, *, /9 - 3;
+ 8 * 2; // per moltiplicare in JS si usa l'asterisco
+ 9 / 3;
operatore di assegnazioneL'hai già visto. Serve per assegnare un valore a una variabile.=var myVariable = 'Bob';
operatore di identitàFa un test per vedere se due variabili sono uguali o meno e restituisce un valore booleano (true/false)===var myVariable = 3;
+ myVariable === 4; // false
negazione, non ugualeRestituisce l'opposto logico.!, !== +

L'espressione di base è true ma restituisce false perchè l'abbiamo negata:

+ +

var myVariable = 3;
+ !(myVariable === 3);

+ +

Qui testiamo che myVariable NON E' UGUALE a 3". Questo restituisce false perchè myVariable E' uguale a 3.

+ +

var myVariable = 3;
+ myVariable !== 3;

+
+ +

Ci sono molti altri operatori da esplorare, per ora va bene così. Vedi Espressioni e operatori per una lista completa.

+ +
+

Nota: Mischiare tipi di dati diversi può portare a strani comportamenti quando andiamo a affrontare calcoli quindi stai attento a riferirti alle variabili corretamente per avere il risultato che ti aspetti. Per esempio, "35" + "25" non darà il risultato sperato, questo perchè i numeri sono stati messi tra virgolette e sono diventati stringhe. In questo caso stiamo facendo una concatenazione di stringhe, non un'addizione, quindi il risultato sarà 3525. Togliendo le virgolette il risultato sarà quello che ci aspettavamo.

+
+ +

Condizionali

+ +

I Condizionali sono strutture di codice che ci permettono di testare delle espressioni che restituiscono valore vero o falso, facendo funzionare parti di codice a seconda del risultato. La forma più comune è chiamata if ... else. Quindi per esempio:

+ +
var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}
+ +

L'espressione dentro il condizionale if ( ... ) è il test — questo usa l'operatore di identità (come descritto sopra) per comparare la variabile iceCream con la stringa "chocolate" per vedere se sono uguali. Se la comparazione restituisce true, il primo blocco di codice viene eseguito, altrimenti (else) si passa al secondo blocco di codice.

+ +

Funzioni

+ +

{{Glossary("Function", "Le Funzioni")}} sono un modo di impacchettare funzionalità che pensi di riutilizzare. Quando hai bisogno di una procedura puoi chiamare una funzione con il suo nome invece di riscrivere lo stesso codice ogni volta. Avrai visto alcuni esempi di usi di funzione, per esempio:

+ +
    +
  1. + 
    var myVariable = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('hello!');
    +
    3. +
+ +

Queste funzioni, documents.querySelector e alert, sono già presenti nel browser da poter utilizzare quando vuoi.

+ +

Se vedi quaclosa che assomiglia a una variabile ma ha delle parentesi dopo il nome — ( ) — allora probabilmente è una funzione. Le Funzioni spesso prendono degli {{Glossary("Argument", "argomenti")}} — pezzi di dati che gli servono per fare il proprio lavoro. Questi dati vanno all'interno delle parentesi, separati da virgole.

+ +

Per esempio, la funzione alert() fa apparire un box dentro la finestra del browser, ma dobbiamo dargli una stringa come argomento per dire alla funzione cosa scrivere all'interno del pop-up.

+ +

La buona notizia è che puoi definire le tue funzioni — nel prossimo esempio scriviamo una semplice funzione che prende due numeri come argomenti e li moltiplica, restituendo il risultato:

+ +
function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}
+ +

Prova a eseguire la funzione sopra nella console con degli argomenti di test. Per esempio:

+ +
multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);
+ +
+

Nota: La parola chiave return dice al browser di restituire la variabile risultato per renderla utilizzabile al di fuori della funzione. Questo è necessario perchè le cose che vengono definite all'interno di una funzione sono disponibili solo alla funzione. Questo è chiamato {{Glossary("Scope", "scoping")}} (Leggi di più variable scoping.)

+
+ +

Eventi

+ +

La vera interattività di un sito dipende dagli eventi. Questi sono strutture di codice che ascoltano le varie cose che succedono nel browser, rispondendo con l'esecuzione di codice. Un esempio ovvio è l'evento click che è inizializzato dal browser quando si preme qualcosa con il mouse. Per dimostrarlo, inserisci il seguente codice nella console e poi premi ovunque sulla pagina corrente.

+ +
document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}
+ +

Ci sono molti modi per attaccare un evento a un elemento. Qui selezioniamo un elemento HTML, impostando la proprietà del suo gestore onclick  a una funzione anonima (i.e. senza nome), che contiene il codice che vogliamo eseguire quando l'elemento viene premuto.

+ +

Nota che

+ +
document.querySelector('html').onclick = function() {};
+ +

è uguale a

+ +
var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};
+ +

E' solo più corta come soluzione.

+ +

Diamo i superpoteri al nostro sito web di esempio

+ +

Adesso che abbiamo visto un po' le basi di JavaScript, aggiungiamo alcune funzionalità interessanti al nostro sito di esempio per vedere cos'è possibile fare con JavaScript.

+ +

Aggiungere un cambio immagine

+ +

In questa sezione, aggiungeremo un'ulteriore immagine al nostro sito utilizzando alcune funzionalità della DOM API, usando un po' di JavaScript per scambiare le immagini quando vengono premute.

+ +
    +
  1. Prima di tutto, trova un'altra immagine che vorresti usare per il tuo sito. Assicurati che sia della stessa grandezza della prima immagine o più o meno uguale (oppure, se conosci il CSS, applica alcune regole di stile).
    2. +
  2. Salva quest'immagine nella cartella images.
    3. +
  3. Rinomina quest'immagine a 'firefox2.png' (senza apici).
    4. +
  4. Val al tuo main.js file e inserisci il seguente JavaScript. (Se il tuo "hello world" è ancora lì, cancellalo.) + 
    var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}
    +
    5. +
  5. Salva tutti i file e carica index.html nel browser. Ora quando premi sull'immagine, dovrebbe scambiarsi con la seconda!
    6. +
+ +

Immagazzini un riferimento al tuo elemento immagine nella variabile myImage. Poi definisci il gestore della proprietà onclick della variabile myImage con una funzione anonima. Ora, tutte le volte che l'elemento immagine viene premuto:

+ +
    +
  1. Recuperi il valore dell'attributo src dell'immagine.
    2. +
  2. Usi un condizionale per sapere se il valore src è uguale alla destinazione dell'immagine originale: +
      +
    1. Se lo è, cambi la destinazione nell'attributo src con quella della seconda immagine, forzando l'altra immagine a essere caricata nell'elemento {{htmlelement("image")}}.
      2. +
    2. Se non lo è (quindi è già stata scambiata), il valore di src torna a essere quello della destinazione dell'immagine originale.
      3. +
    +
    3. +
+ +

Aggiungere un messaggio di benvenuto personalizzato

+ +

Aggiungiamo un altro po' di codice, cambiando il titolo della pagina in un messaggio personalizzato quando l'utente visita il sito web. Questo messaggio di benvenuto rimarrà in memoria qualora l'utente dovesse lasciare il sito per tornare in un momento successivo — lo salveremo usando la Web Storage API. Includeremo un'opzione per cambiare l'utente e quindi il messaggio di benvenuto in qualsiasi momento risulti necessario.

+ +
    +
  1. In index.html, aggiungiamo la seguente riga prima dell'elemento {{htmlelement("script")}}: + + 
    <button>Cambia utente</button>
    +
    2. +
  2. In main.js, inserisci il seguente codice alla fine del file, proprio come scritto —  questo prende i riferimenti di un nuovo bottone e dell'elemento h1, immagazzinandoli in delle variabili: + 
    var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');
    +
    3. +
  3. Inserisci questa funzione per personalizzare il messaggio di benvenuto — questo ancora non farà niente ma lo sistemeremo tra poco: + 
    function setUserName() {
+  var myName = prompt('Inserisci il tuo nome.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}
    + Questa funzione utilizza la funzione prompt() che fa apparire un piccolo box di dialogo, un po' come alert(). Questo prompt() però chiede all'utente di inserire dei dati, salvandoli in una variabile dopo che l'utente ha premuto OK. In questo caso chiediamo all'utente di inserire il proprio nome. Dopo chiamiamo un'API chiamata localStorage che ci permette di immagazzinare dati nel browser per poi recuperarli successivamente. Usiamo la funzione setItem() di localStorage per creare e immagazzinare un oggetto chiamato 'name', impostando il suo valore a quello della variabile myName che contiene il dato inserito dall'utente. Finalmente, impostiamo il textContent dell'elemento h1 a una stringa più il valore della variabile myName che contiene il nome dell'utente.
    4. +
  4. Poi aggiungiamo un blocco if ... else — possiamo chiamare questo codice di inizializzazione per strutturare la app al suo avvio: + 
    if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}
    + Questo blocco prima usa l'operatore di negazione logica, poi controlla se il dato name esiste nel localStorage. Se non esiste (primo blocco), fa partire la funzione setUserName(), altrimenti recuperiamo il nome dal localStorage con la funzione getItem() e impostiamo textContent dell'elemento h1 a una stringa più il valore della stringa restituita da getItem().
    5. +
  5. Inserisci il gestore dell'evento onclick dell'elemento button. Quando premuto, la funzione setUserName() viene eseguita. Questo permette all'utente di inserire un nuovo nome quando vogliono, premendo il bottone: + 
    myButton.onclick = function() {
+  setUserName();
+}
+
    +
    6. +
+ +

Ora quando visitiamo il sito per la prima volta, ti verrà richiesto il tuo username, poi ti sarà dato un messaggio personalizzato. Puoi cambiare il tuo nome quando vuoi premendo il bottone. Come bonus aggiunto, il nome è salvato in localStorage quindi rimane in memoria anche dopo la chiusura del browser mantenendo il messaggio personalizzato quando riaprirai il sito.

+ +

Conclusione

+ +

Se hai seguito tutte le istruzioni in questo articolo, dovresti avere una pagina così (puoi vedere la nostra versione qui):

+ +

+ +

Se ti blocchi, puoi comparare il tuo lavoro con il nostro esempio finito su Github.

+ +

Abbiamo appena iniziato con JavaScript. Se ti è piaciuto giocare e vorresti avanzare ancora di più, vai al nostro JavaScript learning topic.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

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 new file mode 100644 index 0000000000..933bd4245c --- /dev/null +++ b/files/it/learn/getting_started_with_the_web/pubbicare_sito/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/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html b/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/index.html new file mode 100644 index 0000000000..288fa8e1c2 --- /dev/null +++ b/files/it/learn/html/forms/come_costruire_custom_form_widgets_personalizzati/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/html/forms/form_validation/index.html b/files/it/learn/html/forms/form_validation/index.html new file mode 100644 index 0000000000..9557758529 --- /dev/null +++ b/files/it/learn/html/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/html/forms/index.html b/files/it/learn/html/forms/index.html new file mode 100644 index 0000000000..45c0d055dd --- /dev/null +++ b/files/it/learn/html/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/html/howto/author_fast-loading_html_pages/index.html b/files/it/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..ff1155be75 --- /dev/null +++ b/files/it/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,185 @@ +--- +title: Suggerimenti per l'authoring di pagine HTML in rapido caricamento +slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages +tags: + - Avanzate + - Guide + - HTML + - Performance + - Web + - siti web +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

Questi suggerimenti si basano su conoscenze e sperimentazioni comuni.

+ +

Una pagina Web ottimizzata non solo offre un sito più reattivo per i visitatori, ma riduce anche il carico sui server Web e sulla connessione Internet. Questo può essere cruciale per siti ad alto volume che hanno un picco nel traffico a causa di circostanze insolite come le ultime notizie.

+ +

Ottimizzare le prestazioni di caricamento della pagina non è solo per i contenuti che verranno visualizzati dai visitatori di dispositivi mobili o dial-up a banda stretta. È altrettanto importante per i contenuti a banda larga e può portare a notevoli miglioramenti anche per i tuoi visitatori con le connessioni più veloci.

+ +

Suggerimenti

+ +

Riduzione del peso di una pagina

+ +

Il peso della pagina è di gran lunga il fattore più importante nelle prestazioni del caricamento della pagina.

+ +

Riducendo il peso della pagina attraverso l'eliminazione di spazi bianchi e commenti non necessari, comunemente noti come minimizzazione, e spostando script inline e CSS in file esterni, è possibile migliorare le prestazioni di download con il minimo bisogno di altre modifiche nella struttura della pagina.

+ +

Strumenti come HTML Tidy possono automaticamente rimuovere gli spazi bianchi iniziali e le righe vuote aggiuntive da una sorgente HTML valida. Altri strumenti possono "comprimere" JavaScript riformattando l'origine o offuscando l'origine e sostituendo gli identificatori lunghi con versioni più brevi.

+ +

Riduci al minimo il numero di file

+ +

Riducendo il numero di file referenziati in una pagina web si riduce il numero di connessioni HTTP richieste per scaricare una pagina, riducendo quindi il tempo per l'invio di tali richieste e la ricezione delle loro risposte.

+ +

A seconda delle impostazioni della cache di un browser, può inviare una richiesta con l'intestazione If-Modified-Since per ogni file di riferimento, chiedendo se il file è stato modificato dall'ultima volta che è stato scaricato. Troppo tempo trascorso a interrogare l'ultima ora modificata dei file di riferimento può ritardare la visualizzazione iniziale della pagina Web, poiché il browser deve controllare l'ora di modifica per ciascuno di questi file, prima di eseguire il rendering della pagina.

+ +

Se si utilizzano molto le immagini di sfondo nel CSS, è possibile ridurre la quantità di ricerche HTTP necessarie combinando le immagini in una, nota come immagine sprite. Quindi applichi la stessa immagine ogni volta che ne hai bisogno per uno sfondo e regola le coordinate x / y in modo appropriato. Questa tecnica funziona meglio con elementi che avranno dimensioni limitate e non funzionerà per ogni uso di un'immagine di sfondo. Tuttavia, le minori richieste HTTP e la memorizzazione nella cache di immagini singole possono ridurre il tempo di caricamento della pagina.

+ +

Riduci le ricerche di dominio

+ +

Poiché ogni dominio separato costa tempo in una ricerca DNS, il tempo di caricamento della pagina aumenterà insieme al numero di domini separati che appaiono nei link CSS e JavaScript e image src (es).

+ +

Questo potrebbe non essere sempre pratico; tuttavia, dovresti sempre fare attenzione a utilizzare solo il numero minimo necessario di domini diversi nelle tue pagine.

+ +

Cache che riutilizzi i contenuti

+ +

Assicurati che ogni contenuto che può essere memorizzato nella cache, sia memorizzato nella cache e con i tempi di scadenza appropriati.

+ +

In particolare, prestare attenzione all'intestazione Last-Modified. Consente un'efficiente memorizzazione nella cache della pagina; tramite questa intestazione, le informazioni vengono trasmesse all'agente utente sul file che desidera caricare, ad esempio quando è stata modificata l'ultima volta. La maggior parte dei server Web aggiunge automaticamente l'intestazione Last-Modified alle pagine statiche (ad esempio .html, .css), in base alla data dell'ultima modifica memorizzata nel file system. Con le pagine dinamiche (ad esempio .php, .aspx), questo, ovviamente, non può essere eseguito e l'intestazione non viene inviata.

+ +

Quindi, in particolare per le pagine generate dinamicamente, una piccola ricerca su questo argomento è vantaggiosa. Può essere in qualche modo coinvolto, ma farà risparmiare parecchio nelle richieste di pagine su pagine che normalmente non potrebbero essere memorizzate nella cache.

+ +

Maggiori informazioni:

+ +
    +
  1. HTTP Conditional Get for RSS Hackers
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. HTTP ETag on Wikipedia
    4. +
  4. Caching in HTTP
    5. +
+ +

Ordina in modo ottimale i componenti della pagina

+ +

Scarica prima il contenuto della pagina, insieme a qualsiasi CSS o JavaScript che potrebbe essere richiesto per la sua visualizzazione iniziale, in modo che l'utente ottenga la risposta apparente più rapida durante il caricamento della pagina. Questo contenuto è tipicamente testo e può quindi trarre vantaggio dalla compressione del testo durante il trasporto, fornendo così una risposta ancora più rapida all'utente.

+ +

Qualsiasi funzionalità dinamica che richiede il completamento del caricamento della pagina prima di essere utilizzata, dovrebbe inizialmente essere disabilitata e quindi abilitata solo dopo il caricamento della pagina. Ciò causerà il caricamento del JavaScript dopo il contenuto della pagina, che migliorerà l'aspetto generale del caricamento della pagina.

+ +

Ridurre il numero di script in linea

+ +

Gli script in linea possono essere costosi per il caricamento della pagina, poiché il parser deve presupporre che uno script inline possa modificare la struttura della pagina mentre è in corso l'analisi. Ridurre l'uso degli script in linea in generale e ridurre l'uso di  document.write() per l'output del contenuto, in particolare, può migliorare il caricamento generale della pagina. Usa i moderni metodi AJAX per manipolare il contenuto della pagina per i browser moderni, piuttosto che per gli approcci più vecchi basati su document.write().

+ +

Usa CSS moderno e marcatura valida

+ +

L'uso del CSS moderno riduce la quantità di markup, può ridurre la necessità di immagini (spaziali), in termini di layout, e può molto spesso sostituire immagini di testo stilizzato - che "costano" molto più del testo equivalente e CSS .

+ +

L'utilizzo del markup valido presenta altri vantaggi. Innanzitutto, i browser non avranno bisogno di eseguire correzioni degli errori durante l'analisi dell'HTML (questo a parte il problema filosofico di consentire o meno la variazione del formato nell'input dell'utente, quindi programmaticamente "correggerlo" o normalizzarlo o se, invece, applicare un formato di input rigoroso e senza tolleranza).

+ +

Inoltre, il markup valido consente l'uso gratuito di altri strumenti che possono pre-elaborare le tue pagine web. Ad esempio, HTML Tidy può rimuovere spazi bianchi e tag finali opzionali; tuttavia, rifiuterà di funzionare su una pagina con gravi errori di markup.

+ +

Parte del contenuto

+ +

Le tabelle per i layout sono un metodo legacy che non dovrebbe essere più utilizzato. Dovrebbero invece essere utilizzati layout che utilizzano floats, positioning, flexbox, or griglie.

+ +

Le tabelle sono ancora considerate un markup valido, ma dovrebbero essere utilizzate per la visualizzazione di dati tabulari. Per aiutare il browser a rendere più veloce la tua pagina, dovresti evitare di annidare le tue tabelle.

+ +

Piuttosto che tabelle di nidificazione profonda come in:

+ +
<table>
+  <table>
+    <table>
+          ...
+    </table>
+  </table>
+</table>
+ +

usa tabelle o div non annidate come in

+ +
<table>...</table>
+<table>...</table>
+<table>...</table>
+
+ +

Guarda anche: CSS Flexible Box Layout e specifiche della CSS Grid Layout.

+ +

Minimizza e comprime risorse SVG

+ +

SVG prodotto dalla maggior parte delle applicazioni di disegno spesso contiene metadati non necessari che possono essere rimossi. Configura i tuoi server applica la compressione gzip per le risorse SVG.

+ +

Minimizza e comprimi le tue immagini

+ +

Immagini di grandi dimensioni fanno sì che la tua pagina impieghi più tempo per essere caricata. Prendi in considerazione la possibilità di comprimere le tue immagini prima di aggiungerle alla tua pagina. Strumenti online come Compress Jpeg, Tiny PNG e molti altri strumenti sono disponibili online. Puoi utilizzare strumenti offline come Photoshop e altri.

+ +

Specify sizes for images and tables

+ +

Se il browser è in grado di determinare immediatamente l'altezza e / o la larghezza delle immagini e delle tabelle, sarà in grado di visualizzare una pagina Web senza dover ridisporre il contenuto. Questo non solo accelera la visualizzazione della pagina ma impedisce fastidiose modifiche al layout di una pagina quando la pagina completa il caricamento. Per questo motivo, l'altezza e la larghezza dovrebbero essere specificate per le immagini, quando possibile.

+ +

Le tabelle dovrebbero usare il selettore CSS: combinazione di proprietà:

+ +
  table-layout: fixed;
+
+ +

e dovrebbe specificare le larghezze delle colonne usando gli elementi <col> e <colgroup>.

+ +

Scegli saggiamente i tuoi requisiti user-agent

+ +

Per ottenere i migliori miglioramenti nella progettazione della pagina, assicurarsi che siano richiesti requisiti ragionevoli per l'utente-agente per i progetti. Non richiedere che i tuoi contenuti appaiano pixel perfetti in tutti i browser, specialmente nei browser in versione down.

+ +

Idealmente, i requisiti minimi di base dovrebbero essere basati sulla considerazione dei browser moderni che supportano gli standard pertinenti. Questo può includere versioni recenti di Firefox, Internet Explorer, Google Chrome, Opera e Safari.

+ +

Si noti, tuttavia, che molti dei suggerimenti elencati in questo articolo sono tecniche di senso comune applicabili a qualsiasi agente utente e possono essere applicate a qualsiasi pagina Web, indipendentemente dai requisiti di supporto del browser.

+ +

Utilizzare async e defer, se possibile

+ +

Crea gli script JavaScript in modo tale che siano compatibili sia con async sia con il defer e usa async quando possibile, specialmente se hai più tag di script.
+ Con ciò, la pagina può interrompere il rendering mentre JavaScript è ancora in fase di caricamento. Altrimenti, il browser non renderà nulla che si trova dopo i tag di script che non hanno questi attributi.

+ +

Nota: sebbene questi attributi siano di grande aiuto per la prima volta in cui viene caricata una pagina, è necessario utilizzarli ma non fare affidamento sul fatto che funzionerà su tutti i browser. Se segui tutte le linee guida per creare un buon codice JavaScript, non è necessario modificare il codice.

+ +

Esempio di struttura della pagina

+ +

· HTML

+ +
+
· HEAD
+
+ +
+
+
+
· LINK ...
+ File CSS richiesti per l'aspetto della pagina. Riduci al minimo il numero di file per le prestazioni mantenendo CSS indipendenti in file separati per la manutenzione.
+
+
+
+ +
+
+
+
· SCRIPT ...File JavaScript per funzioni richieste durante il caricamento della pagina, ma non DHTML che può essere eseguito solo dopo il caricamento della pagina.
+
Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.
+
+
+
+ +
+
· BODY
+
· L'utente visualizza il contenuto della pagina in piccoli blocchi (tabelle / div) che possono essere visualizzati senza attendere il download della pagina intera.
+
+ +
+
+
+
· SCRIPT ...Qualsiasi script che verrà utilizzato per eseguire DHTML. Lo script DHTML in genere può essere eseguito solo dopo che la pagina è stata caricata completamente e tutti gli oggetti necessari sono stati inizializzati. Non è necessario caricare questi script prima del contenuto della pagina. Questo rallenta solo l'aspetto iniziale del caricamento della pagina.
+
Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.
+
Se vengono utilizzate immagini per gli effetti di rollover, è necessario precaricarle qui dopo che il contenuto della pagina è stato scaricato.
+
+
+
+ + + + diff --git a/files/it/learn/html/howto/index.html b/files/it/learn/html/howto/index.html new file mode 100644 index 0000000000..5343bdbaad --- /dev/null +++ b/files/it/learn/html/howto/index.html @@ -0,0 +1,155 @@ +--- +title: Use HTML to solve common problems +slug: Learn/HTML/Howto +tags: + - CodingScripting + - HTML + - NeedsTranslation + - TopicStub +translation_of: Learn/HTML/Howto +--- +
{{LearnSidebar}}
+ +

The following links point to solutions to common everyday problems you'll need to solve with HTML.

+ +
+
+

Basic structure

+ +

The most basic application of HTML is document structure. If you're new to HTML you should start with this.

+ + + +

Basic text-level semantics

+ +

HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.

+ + +
+ +
+ + +

One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:

+ + + +

Images & multimedia

+ + + +

Scripting & styling

+ +

HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.

+ + + +

Embedded content

+ + +
+
+ +

Uncommon or advanced problems

+ +

Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:

+ +
+
+

Forms

+ +

Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our full dedicated guide. Here is where you should start:

+ + + +

Tabular information

+ +

Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:

+ + + +

Data representation

+ + + +

Interactivity

+ + +
+ +
+

Advanced text semantics

+ + + +

Advanced images & multimedia

+ + + +

Internationalization

+ +

HTML is not monolingual. It provides tools to handle common internationalization issues.

+ + + +

Performance

+ + +
+
+ +

     

diff --git a/files/it/learn/html/howto/uso_attributi_data/index.html b/files/it/learn/html/howto/uso_attributi_data/index.html new file mode 100644 index 0000000000..f256a42aaf --- /dev/null +++ b/files/it/learn/html/howto/uso_attributi_data/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/index.html b/files/it/learn/html/index.html new file mode 100644 index 0000000000..c617173ffb --- /dev/null +++ b/files/it/learn/html/index.html @@ -0,0 +1,47 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Apprendimento + - Argomento + - Guida + - HTML + - Introduzione + - Principianti +translation_of: Learn/HTML +--- +
{{IncludeSubnav("/en-US/Learn")}}
+ +

{{Glossary('HTML')}} è la maggiore tecnologia del Web che definisce la struttura delle pagine web. Se stai cercando di costruire in sito web, dovresti conosce HTML.

+ +

Non è difficile apprendere le basi, ma HTML è anche un' ampia tecnologia con complesse caratteristiche, per questo  non esiste un percorso ben preciso di apprendimento. Suggeriamo di iniziare con il seguire pagine per apprenderne alcune tecniche e conoscenze. Muovetevi dalle basi alle tecniche più avanzate o soltanto attraverso le pagine che vi sembrano più interessanti per voi!

+ +
+
+

Le basi

+ +

inizia da qui se non hai alcuna familiarità con HTML:

+ +
+
Introduzione ad HTML
+
se vi siete mai chiesti cosa accade nel vostro Web browser, è da li che potete iniziare ad imparare.
+
Risolvere problemi comuni con HTML
+
questa serie di articoli è qui per aiutare coloro che usano HTML per risolvere dei problemi davvero molto comuni quando si crea una pagina web:Il rapporto con i titoli, aggiungere immagini o video, enfatizzare contenuti, iniziare ad usare i moduli (ossia i form), etc.
+
Scrivere un semplice pagina in HTML
+
in questo articolo puoi imparare a creare una semplice pagina web.
+
Cosa sono i tag in HTML e come usarli
+
Questo articolo copre l'HTML base.Trovi cosa sono i tag e come usarli.
+
+
+ +
+

Nel dettaglio

+ +

non appena presa più familiarità con HTML, qui puoi trovare informazioni più dettagliate da esplorare:

+ +
+
Riferimento HTML
+
Nella nostra guida di riferimento, potrai trovare dettagli su ogni singolo elemento ed attributo HTML.
+
+
+
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 new file mode 100644 index 0000000000..e5496dcb1a --- /dev/null +++ b/files/it/learn/html/introduction_to_html/fondamenti_di_testo_html/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/getting_started/index.html b/files/it/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..47a4006b6c --- /dev/null +++ b/files/it/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,649 @@ +--- +title: Cominciare conl'HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

In questo articolo trattiamo le basi dell'HTML, per farti cominciare. Definiamo gli elementi, gli attributi e tutti gli altri termini che puoi aver sentito e vediamo come si integrano nel linguaggio. Vediamo inoltre come sono strutturati un elemento HTML e una tipica pagina e spieghiamo altre importanti caratteristiche del linguaggio. Lungo il percorso, giocheremo con un po' di HTML per mantenere viva l'attenzione.

+ + + + + + + + + + + + +
Prerequisiti:Alfabetizzazione sull'uso del computer, basic software installed, e conoscenze di base di working with files.
Obbiettivo:Acquisire familiarità col linguaggio HTML e fare un po' di pratica nella scrittura di elementi HTML.
+ +

Cos'é l'HTML?

+ +

L'{{glossary("HTML")}} (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, usato per dire al browser come strutturare le pagine web. Può essere complicato o semplice, a seconda di come lo sviluppatore desidera che sia. Un file HTML è composto da una serie di {{glossary("Element", "elementi")}} usati per racchiudere o marcare parti di contenuto, così che venga mostrato in un certo modo.  I {{glossary("Tag", "tag")}} che racchiudono il contenuto, possono renderlo un collegamento a un altra pagina web, formattarlo in carattere italico e così via. Per esempio prendiamo la seguente linea di codice:

+ +
My cat is very grumpy
+ +

Se vogliamo che la linea sia isolata, possiamo specificare che è un paragrafo, racchiudendola con due tag  ({{htmlelement("p")}})

+ +
<p>My cat is very grumpy</p>
+ +

Anatomia di un elemento HTML

+ +

Esploriamo ulteriormente il nostro elemento.

+ +

+ +

Le parti sono:

+ +
    +
  1. Il tag di apertura: consiste nel nome dell'elemento (in questo caso, p), racchiuso tra parentesi angolari (minore e maggiore - < >); indica sia il punto dove inizia l'elemento e quando ha effetto — nel caso in esame indica l'inizio del paragrafo.
    2. +
  2. Il tag di chiusura: uguale al tag di apertura eccetto che per la presenza di uno slash prima del nome dell'elemento; indica dove finisce l'elemento. Dimenticarsi di mettere il tag di chiusura è un tipico errore e può portare a strani risultati.
    3. +
  3. Il contenuto: Ciò che sta fra i due tag; in questo caso è solo testo.
    4. +
  4. L'elemento: l'insieme del tag di apertura, tag di chiusura e contenuto è detto "elemento".
    5. +
+ +

Active learning: creare il primo elemento HTML

+ +

Modifica la linea sottostante nel campo Input racchiudendola fra i tag <em> e </em> (inserisci il tag {{htmlelement("em")}} all'inizio della riga per aprire l'elemento, e {{htmlelement("/em")}} al termine della riga per chiudere l'elemento), questo evidenzierà il contenuto con il carattere italico. Vedrai l'effetto dei cambiamenti nel campo Output.

+ +

Se fai un errore, puoi sempre usare il pulsante reset per ripristinare la situazione iniziale. Se sei bloccato, premi il pulsante Mostra soluzione per vedere la risposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 300) }}

+ +

Elementi annidati

+ +

Puoi inserire elementi dentro altri elementi: si dice annidare (nesting). Se vogliamo sottolineare che il nostro gatto è MOLTO scontroso (VERY grumpy) possiamo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, per enfatizzarla fortemente.

+ +
<p>My cat is <strong>very</strong> grumpy.</p>
+ +

Dovete assicurarvi che gli elementi siano annidati in modo appropriato: nell'esempio viene aperto prima l'elemento p e poi l'elemento strong, dobbiamo perciò chiudere prima l'elemento strong e poi l'elemento p. L'esempio seguente è sbagliato:

+ +
<p>My cat is <strong>very grumpy.</p></strong>
+ +

Gli elementi devono essere aperti e chiusi correttamente perché sia chiaro se sono all'interno o all'esterno uno dell'altro. Se si mescolano, come nell'esempio qui sopra, il browser cercherà di indovinare quali erano le tue intenzioni e potrebbe darti risultati inaspettati. Quindi presta attenzione.

+ +

Confronto tra elementi "blocco" e "in linea"

+ +

Ci sono due importanti categorie di elementi in HTML. Questi sono gli elementi di tipo blocco (block level) e elementi in linea (inline).

+ + + +

Prendete l'esempio seguente:

+ +
<em>first</em><em>second</em><em>third</em>
+
+<p>fourth</p><p>fifth</p><p>sixth</p>
+
+ +

{{htmlelement("em")}} è un elemento in linea, che viene mostrato nell'esempio sottostante, i tre elementi saranno mostrati sulla stessa linea senza nessuno spazio a separarli.

+ +

{{htmlelement("p")}} è un elemento blocco, quindi ogni elemento dichiarato con questo tag, apparirà su una nuova linea con spazi sopra e sotto (la spaziatura è dovuta alla formattazione di default (CSS styling) che il browser applica ai paragrafi).

+ +

{{ EmbedLiveSample('Confronto_tra_elementi_blocco_e_in_linea', 700, 200) }}

+ +
+

Nota: l'HTML5 ha ridefinito le categorie degli elementi: approfondisci in Categorie degli elementi di contenuto (en) queste nuove definizioni sono più accurate e meno ambigue di quelle definite precedentemente, ma più complicate da capire rispetto a "blocchi" e "in linea", perciò continueremo a usarle in questa spiegazione.

+
+ +
+

Nota: I termini "block" e "inline", come usati in questo argomento , non dovrebbero essere confusi con i tipi dei box CSS con lo stesso nome. Anche se correlati per default, cambiare la proprietà display nei CSS non cambia la categoria dell'elemento e non modifica quali elementi potrebberso essere contenuti e quali saranno contenuti. Uno dei motivi per cui HTLM5 a deprecato l'uso di questi termini, riguarda la possibilità che questi vengano confusi.

+
+ +
+

Nota: Nelle pagine di riferimento, troverai delle liste che includono gli elementi di Blocco e quelli In linea — controlla Elementi di tipo blocco  e Elementi in linea.

+
+ +

Elementi vuoti

+ +

Non tutti gli elementi seguono il modello: tag di apertura, contenuto, tag di chiusura. Alcuni elementi hanno un unico tag, che è abitualmente usato per includere qualcosa nel documento in quel punto. Per esempio l'elemento {{htmlelement("img")}} inserisce un'immagine nella posizione in cui viene scritto.

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

Questo fa apparire ciò che segue:

+ +

{{ EmbedLiveSample('Elementi_vuoti', 700, 300) }}

+ +
+

Note: Gli elementi vuoti sono a volte chiamati elementi void.

+
+ +

Attributi

+ +

Gli elementi possono avere "attributi" che appaiono così:

+ +

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

+ +

Gli attributi contengono informazioni extra, riguardanti l'elemento, che non appaiano nel contenuto visualizzato nella pagina. In questo caso, l'attributo class permette di assegnare uno o più nomi che potrà/anno poi  essere usato/i per puntare alle regole di stile per quell elemento o altro.

+ +

Un attributo deve avere:

+ +
    +
  1. uno spazio tra lui e il nome dell'elemento (o il precedente attributo, se l'elemento ha già uno o più attributi.)
    2. +
  2. il nome dell'attributo seguito dal segno di uguale
    3. +
  3. un valore racchiuso tra virgolette
    4. +
+ +

Active learning: aggiunta di attributi ad un elemento

+ +

Un altro esempio di elemento é {{htmlelement("a")}} — che sta per "anchor" e rende il contenuto dell'elemento un collegamento ipertestuale (hyperlink). Questo elemento può avere diversi attributi, come vediamo qui sotto:

+ + + +

Modifica la linea sottostante nel campo Input per farne un link al tuo sito preferito. Per prima cosa, aggiungi l'elemento {{htmlelement("a")}}. Poi specifica gli attributi href e title. Ed infine, specifica l'attributo target affinche il collegamento si aprà in un nuovo/a tab/finestra.Vedrai l'effetto dei cambiamenti nel campo Output mentre digiti.  Dovresti vedere un link che mostrerà il valore dell'attributo title quando il puntatore del mouse verrà posizionato sopra e aprirà la pagina definita dal valore dell'attributo href. Ricorda di lasciare uno spazio tra nome dell'elemento e attributi.

+ +

Se hai commesso un errore, puoi sempre tornare allo stato iniziale con il pulsante Reset. Se non riesci proprio a trovare la soluzione, premi il pulsante Mostra soluzione e vedrai la risposta.

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 300) }}

+ +

Attributi booleani

+ +

A volte potrai trovare degli attributi senza alcun valore — questo è consentito. Questo tipo di attributi, sono chiamati attributi booleani, e possono avere un unico valore, che solitamente è  uguale al nome dell'attributo stesso. Ad esempio, analizziamo l'attributo {{htmlattrxref("disabled","input")}} che può essere assegnato agli elementi input dei moduli (form) per disabilitarli (renderli grigi) e fare in modo che non possa essere introdotto alcun dato.

+ +
<input type="text" disabled="disabled">
+ +

Per brevità, è permesso scriverli come nell'esempio qui sotto (abbiamo incluso anche un campo non disabilitato per confronto, per darti un assaggio di cosa verrà).

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

Entrambi ti mostreranno il seguente output:

+ +

{{ EmbedLiveSample('Attributi_booleani', 700, 100) }}

+ +

Omettere le virgolette attorno al valore degli attributi

+ +

Quando navighi il world wild web, potrai trovare i più strani stili di mark up, inclusi i valori degli attributi senza virgolette: ciò è permesso in alcune circostanze, ma negli altri casi creerà problemi al tuo markup. Per esempio, se riprendiamo il precedente esempio del link, possiamo scriverne una versione base con solo l'attributo href, come qui:

+ +
<a href=https://www.mozilla.org/>favourite website</a>
+ +

Tuttavia, appena aggiungeremo l'attributo title, le cose smetteranno di funzionare

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>
+ +

A questo punto il browser, fraintenderà il tuo markup, interpretando l'attributo title come tre attributi distinti — un attributo title con valore "The" e due attributi booleani Mozilla e homepage. Non è ovviamente ciò che si intendeva e provocherà errori o comportamenti inaspettati, come nell'esempio live sottostante. Prova a posizionare il mouse sopra il link per vedere qual é il title.

+ +

{{ EmbedLiveSample('Omettere_le_virgolette_attorno_al_valore_degli_attributi', 700, 100) }}

+ +

Il nostro consiglio è di mettere sempre le virgolette — Si evitano questi problemi e si ottiene anche un codice più leggibile.

+ +

Virgolette singole o doppie?

+ +

In questo articolo noterai che sono state usate le doppie virgolette. Potrai tuttavia trovare le virgolette singole in qualche documento HTML. Si tratta esclusivamente di una questione di stile e sei libero di scegliere quelle che preferisci. Le due linee seguenti sono equivalenti.

+ +
<a href="http://www.example.com">A link to my example.</a>
+
+<a href='http://www.example.com'>A link to my example.</a>
+ +

Devi però assicurarti di non mescolarle. L'esempio seguente non funzionerà.

+ +
<a href="http://www.example.com'>A link to my example.</a>
+ +

Se hai usato un tipo di virgolette nel tuo HTML, puoi usare l'altro tipo nel valore dell'attributo senza nessun problema:

+ +
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+ +

Se vuoi annidare lo stesso tipo di virgolette, dovrai usare {{anch("Entity references: including special characters in HTML")}}.

+ +

Anatomia di un documento HTML

+ +

That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Adesso vedremo come gli elementi sono combinati per formare una intera pagina HTML.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

Qui abbiamo:

+ +
    +
  1. <!DOCTYPE html>: La doctype. Nella notte dei tempi, quando l'HTML era appena nato (about 1991/2), doctypeserano utilizzate per collegare set of rules che la pagina HTML doveva rispettare per essere considerata un buon documento HTML, il che significava determinare automaticamente gli errori e altre cose utili. In genere erano qualcosa tipo questo: + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + Tuttavia oggi, a nessuno interessa di loro e sono solo un residuo storico che deve essere incluso per far si che tutto  funzioni. <!DOCTYPE html> è la più corta stringa di caratteri che rappresenta una doctype valida; è tutto ciò che serve sapere.
    2. +
  2. <html></html>: The <html> element. Questo elemento racchiude tutta la pagina e vi si può riferire come "root", elemento radice.
    3. +
  3. <head></head>: The <head> element. Questo elemento serve da contenitore per tutta una serie di cose da includere nel documento HTML che non sono "contenuto" da far visualizzare ai visitatori della tua pagina. Sono incluse cose come le parole chiave e la descrizione della pagina, che vuoi appaia nei risultati dei motori di ricerca, dichiarazioni CSS per formattare il contenuto, dichiarazioni dei set di caratteri e altro. Imparerai di più riguardo a questo nel prossimo articolo della serie.
    4. +
  4. <meta charset="utf-8">: Questo elemento imposta il set di caratteri che il tuo documento dovrebbe usare a utf-8, che include la maggior parte dei caratteri di tutti gli alfabeti umani conosciuti. Sostanzialmente può trattare qualsiasi tipo di testo tu voglia introdurre. non c'è ragione per non usare questo set di caratteri e può evitare problemi in seguito.
    5. +
  5. <title></title>: Questo imposta il titolo della tua pagina, cioè il titolo che appare nella scheda del browser quando la pagina viene caricata e che viene usato per descrivere la pagina quando la salvi tra i preferiti (bookmark).
    6. +
  6. <body></body>: The <body> element. Questo elemento contiene tutto ciò che vuoi mostrare agli utenti del web che visitano la pagina, sia che si tratti di testo, sia di immagini o video, giochi, tracce audio o qualsiasi altra cosa.
    7. +
+ +

Active learning: Aggiungere alcune caratteristiche ad un documento HTML

+ +

If you want to experiment with writing some HTML on your local computer, you can: Se vuoi esercitarti a scrivere un po' di HTML sul tuo computer, puoi:

+ +
    +
  1. Copiare il codice HTML della pagina di eempio qui sopra
    2. +
  2. creare un nuovo file nel tuo editor di testo
    3. +
  3. incollare il codice nel tuo nuovo file
    4. +
  4. salvare il file col nome index.html
    5. +
+ +
+

Note: Trovi questo modello di base anche nel MDN Learning Area Github repo.

+
+ +

Adesso puoi aprire il file nel tuo browser e vedere come appare il codice, poi puoi modificare il codice e ricaricare la pagina per vedere i risultati. Inizialmente dovrebbe apparire più o meno così:

+ +

A simple HTML page that says This is my pageCosì, in questo esercizio, puoi modificare il codice localmente sul tuo computer come mostrato sopra, o puoi modificare l'esempio sotto (l'esempio modificabile rappresenta solo l'elemento <body>). Ci piacerebbe che tentassi di realizzare questi passi:

+ + + +

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 600) }}

+ +

Spazio bianco nell'HTML

+ +

Nei precedenti esempi potresti aver notato che molto spazio bianco (vuoto) è incluso nel listato del codice - ciò non è affatto necessario; i due seguenti estratti sono equivalenti:

+ +
<p>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</p>
+ +

Non importa quanti spazi usi (includendo sia il carattere spaziatura che le interruzioni di linea), il decodificatore (parser) HTML li riduce tutti ad un unico spazio quando restituisce la pagina. Quindi perché usare così tanti spazi? La risposta é per ottenere leggibilità; è molto più semplice capire cosa fa il tuo codice se lo hai formattato ordinatamente e non solo raggruppato insieme in un grande caos. Nel nostro HTML abbiamo fatto rientrare di due spazi, rispetto all'elemento contenitore, tutti gli elementi annidati. Dipende da te quale stile di formattazione usare (per esempio quanti spazi utilizzare per ogni livello di indentazione), ma devi usare qualche tipo di formattazione.

+ +

Elenco di riferimento delle entità: includere caratteri speciali nell'HTML

+ +

In HTML, i caratteri <, >,",' e & sono caratteri speciali. Sono anche parti della sintassi dell'HTML, quindi si pone il problema di come poterli includere nel proprio testo, per indicare ad esempio un "minore di", senza che venga interpretato dal parser come codice, cosa che alcuni browser potrebbero fare.

+ +

Dobbiamo usare speciali codici che rappresentano quei caratteri e che possono quindi essere usati in quelle circostanze. Ognuno di questi codici (character reference) inizia con un ampersand (&) e finisce con un punto e virgola (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Literal characterCharacter reference equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

Nell'esempio sotto, puoi vedere 2 paragrafi che parlano di tecnologie web:

+ +
<p>In HTML, you define a paragraph using the <p> element.</p>
+
+<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
+ +

Nel campo di output istantaneo sotto, puoi vedere che il primo paragrafo è sbagliato, perché il browser pensa che il secondo tag p (<p>) sia l'inizio di un nuovo paragrafo. Il secondo paragrafo funziona perché abbiamo sostituito le parentesi angolate con le entità (character references).

+ +

{{ EmbedLiveSample('Elenco_di_riferimento_delle_entità_includere_caratteri_speciali_nell\'HTML', 700, 200) }}

+ +
+

Note: Una tabella di riferimento di tutte le entità disponibili nel linguaggio HTML si trova su Wikipedia: List of XML and HTML character entity references.

+
+ +

Commenti HTML

+ +

In HTML, come in molti linguaggi di programmazione, c'è la possibilità di aggiungere dei "commenti" al codice, che sono ignorati dal browser e sono pertanto invisibili per gli utenti; il loro scopo è di includere nel documento spiegazioni sul funzionamento del codice, su cosa fanno le differenti parti di codice, ecc. Tutto ciò può essere molto utile se ritorni sul codice sei mesi dopo che ci avevi lavorato e non puoi ricordare cosa avevi fatto, o se passi a qualcun'altro il tuo codice perché ci lavori.

+ +

Per far si che una parte del contenuto del documento HTML sia un commento, devi includerlo tra speciali segni, che sono  <!-- and -->. Avrai per esempio:

+ +
<p>I'm not inside a comment</p>
+
+<!-- <p>I am!</p> -->
+ +

Come puoi vedere qui sotto, il primo paragrafo appare nell'output , mentre il secondo no.

+ +

{{ EmbedLiveSample('Commenti_HTML', 700, 100) }}

+ + + +

Hai raggiunto la fine dell'articolo; spero tu abbia gradito questo tour fra le più elementari regole dell'HTML. A questo punto dovresti capire come appare il linguaggio, come funziona ad un livello base e dovresti essere in grado di scrivere alcuni elementi ed attributi. Questo è il punto perfetto a cui essere adesso, perché nei seguenti articoli della serie rivedremo nei dettagli alcune delle cose già viste e introdurremo alcune nuove caratteristiche del linguaggio. Stay tuned! (Resta sintonizzato!)

+ +
+

Note: A questo punto, poiché inizi a saperne di più di  HTML, potresti anche voler iniziare ad esplorare i Cascading Style Sheets, o CSS, che é il linguaggio usato per dare stile e abbellire le pagine web (per esempio cambiare il colore dei font o alterare il layout della pagina). HTML e CSS sono fatti per operare insieme, come presto scoprirai.

+
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
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 new file mode 100644 index 0000000000..de092cd8b9 --- /dev/null +++ b/files/it/learn/html/introduction_to_html/i_metadata_nella_head_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/introduction_to_html/index.html b/files/it/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..459e8e1302 --- /dev/null +++ b/files/it/learn/html/introduction_to_html/index.html @@ -0,0 +1,67 @@ +--- +title: Introduzione a HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - CodingScripting + - HTML + - Introduction to HTML + - Landing + - Links + - NeedsTranslation + - Structure + - Text + - TopicStub + - head + - semantics +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

Al suo centro, {{glossary("HTML")}} è un linguaggio abbastanza semplice composto da elementi, che possono essere applicati a parti di testo per dare loro un significato diverso in un documento (è un paragrafo? E' un elenco puntato? E' parte di una tabella?). Struttura un documento in sezioni logiche (Ha un'intestazione? Ha tre colonne di contenuto? Ha un menù di navigazione?). Incorpora contenuto come immagini e video in una pagina. Questo modulo introdurrà i primi due dI questi argomenti introducendo i concetti fondamentali e sintassi di cui tu hai bisogno per comprendere l'HTML.

+ +

Prerequisiti

+ +

Prima di iniziare questa sezione non hai bisogno di nessuna nozione di HTML, ma dovresti avere una buona familiarità nell'uso dei computer e nell'uso del web passivo(per esempio guardare il contenuto o usarlo). Dovresti avere un normale ambiente di lavoro come spiegato nel dettaglio in Installare il software base e capire come creare e gestire file, come spiegato in Lavorare con i file — entrambi fanno parte della nostra guida per principianti Inizia con il web.

+ +
+

Note: Se stai lavorando su un computer/tablet o un altro device dove non hai la possibilità di creare dei file, potresti provare (almeno la maggior parte) degli esempi di codice in un programma online come JSBin o Thimble.

+
+ +

Guida

+ +

Questo modulo contiene i seguenti articoli, che ti guideranno nella teoria di base dell'HTML e ti daranno un'ampia opportunità per testare alcune abilità.

+ +
+
Iniziare con HTML
+
Copre le basi assolute dell'HTML, per iniziare: definiamo elementi, attributi e tutti gli altri termini importanti che potresti aver sentito e dove si adattano alla lingua. Mostriamo anche come è strutturato un elemento HTML, come è strutturata una tipica pagina HTML e spieghiamo altre importanti funzionalità linguistiche di base. Lungo la strada, avremo un gioco con HTML, per interessarti!
+
Cosa c'è nell'intestazione del documento? Metadati in HTML
+
La testa di un documento HTML è la parte che non viene visualizzata nel browser Web quando la pagina viene caricata. Contiene informazioni come la pagina {{htmlelement ("title")}}, i collegamenti a {{glossary ("CSS")}} (se vuoi dare uno stile al contenuto HTML con CSS), link a favicon personalizzate e metadati (che sono dati sull'HTML, come chi l'ha scritto, e parole chiave importanti che descrivono il documento).
+
Fondamenti del testo HTML
+
Uno dei principali lavori dell'HTML è dare significato al testo (conosciuto anche come semantica), in modo che il browser sappia come visualizzarlo correttamente. Questo articolo esamina come utilizzare l'HTML per suddividere un blocco di testo in una struttura di intestazioni e paragrafi, aggiungere enfasi / importanza alle parole, creare elenchi e altro.
+
Creare collegamenti ipertestuali
+
I collegamenti ipertestuali sono davvero importanti: sono ciò che rende il Web una rete. Questo articolo mostra la sintassi richiesta per effettuare un collegamento e tratta delle migliori prassi inerenti ai collegamenti.
+
Formattazione avanzata del testo
+
Ci sono molti altri elementi in HTML adibiti per la formattazione del testo che non troviamo nell'articolo fondamentali del testo HTML.Questi elementi sono meno conosciuti tuttavia risulta utile conoscerli. Qui imparerai come creare delle citazioni, elenchi puntati, codice del computer e altro relativo al testo come pedici e apici, informazioni di contatto e altro ancora.
+
Struttura del documento e del sito
+
Come per la definizione di parti individuale della tua pagina (come "un paragrafo" o "un'immagine", l'HTML è anche usato per definire aree del tuo sito (come "l'intestazione", "il menù di navigazione" o "la colonna di contenuto principale"). Questo articolo spiega come creare la struttura base di un sito e come trascriverla in codice HTML.
+
Correggere gli errori in HTML
+
Scrivere codice HTML è divertente ma se qualcosa andasse storto e tu non potessi lavorare per comprendere ciò che hai sbagliato, cosa faresti? Questo articolo ti introducerà alcuni utili strumenti che ti possono aiutare.
+
+ +

Valutazioni

+ +

I seguenti test valuteranno la tua comprensione delle basi del codice HTML spiegate nelle guide soprascritte.

+ +
+
Scrivere una lettera
+
Tutti noi dobbiamo imparare a scrivere una lettera prima o poi; e questo è anche un utile esempio per valutare le tue competenze di formattazione del testo. In questo test, infatti, ti verrà data una lettera da creare.
+
Strutturare una pagina di contenuti
+
Questo test valuterà le tue abilità sull'uso dell'HTML per strutturare una semplice pagina di contenuti, contenente un header, un footer, un menù di navigazione, contenuto principale e una sidebar.
+
+ +

Guarda anche

+ +
+
Alfabetizzazione web di base 1
+
Un corso eccellente della fondazione Mozilla che esplora e testa molte delle competenze introdotte nel modulo Introduzione all'HTML. La lettura, la scrittura e la partecipazione sul web vi diventeranno famigliari in questa sesta parte del modulo. Scoprirete su cosa il mondo del web è fondato attraverso produzione e collaborazione.
+
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 new file mode 100644 index 0000000000..3c15046cd4 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/contenuti_video_e_audio/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/multimedia_and_embedding/images_in_html/index.html b/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..5015ad5516 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,352 @@ +--- +title: Immagini in HTML +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+ +

All'inizio, il Web era fatto di solo testo ed era piuttosto noioso. Fortunatamente, non è passato molto prima che venisse aggiunta la possibilità di integrare immagini (e altri tipi di contenuto più interessanti) nelle pagine web. Ci sono altri tipi di contenuti multimediali da considerare, ma è logico cominciare con l'elemento {{htmlelement("img")}}, usato per introdurre una singola immagine. In questo articolo vedremo in profondità come usarlo, le nozioni fondamentali, come commentarlo con il titolo usando l'elemento {{htmlelement("figure")}} e come si collega alle immagini di background coi CSS.

+ + + + + + + + + + + + +
Prerequisiti:Alfabetizzazione di base sui computer, software basilare installato, conoscenze di base su gestione dei file, familiarità con i fondamenti di HTML (come trattati in Cominciare con l'HTML.)
Obbiettivi:Imparare ad introdurre semplici immagini in HTML, commentarle con i titoli e come collegarle alle immagini di background coi CSS.
+ +

Come facciamo a mettere un'immagine in una pagina web?

+ +

Per mettere una semplice immagine in una pagina web, usiamo l'elemento {{htmlelement("img")}}. Si tratta di un elemento vuoto (significa che non ha un contenuto testuale ne un tag di chiusura) che richiede un attributo per poter funzionare — src (pronounciato sarc, a volte chiamato col suo nome intero source). L'attributo src contiene un percorso (path) che punta all'immagine che si vuole mettere nella pagina, che può essere un URL relativo o assoluto; nello stesso modo in cui il valore dell'attributo href dell'elemento {{htmlelement("a")}} punta alla risorsa da linkare (si dovrebbe leggere A quick primer on URLs and paths per rinfrescarsi la memoria prima di continuare).

+ +

Quindi, per esempio, se l'immagine è chiamata dinosaur.jpg ed è collocata nella stessa directory della pagina HTML, la si può inserire così:

+ +
<img src="dinosaur.jpg">
+ +

Se l'immagine si trova in una sottodirectory images della directory in cui si trova la pagina HTML (che è la soluzione raccomandata da Google per scopi di indicizzazione e {{glossary("SEO")}}), allora si può fare così:

+ +
<img src="images/dinosaur.jpg">
+ +

E così via.

+ +
+

Nota: I motori di ricerca leggono anche il nome del file dell'immagine e ne tengono conto per la SEO — si dovrebbe perciò dare al file un nome descrittivo ("dinosaur.jpg" è meglio di "img835.png").

+
+ +

Si potrebbe inserire l'immagine usando l'URL assoluto, per esempio:

+ +
<img src="https://www.example.com/images/dinosaur.jpg">
+ +

Ma ciò è inutile, poiché fa fare al browser più lavoro, ricavando nuovamente l'indirizzo IP daccapo dal server DNS quando, quasi sempre, le immagini saranno salvate sullo stesso server web dell'HTML.

+ +
+

Attenzione: la maggior parte delle immagini è coperta da copyright. Non si deve mostrare un'immagine nel proprio sito, a meno che 1) si sia proprietari dell'immagine 2) si sia ricevuto esplicito permesso scritto dal proprietario dell'immagine, o 3) si abbia prova che l'immagine è di pubblico dominio. Le violazioni al copyright sono illegali ed immorali.

+ +

Inoltre, non si deve mai far puntare l'attributo src ad una immagine ospitata sul sito di qualcun altro senza avere il permesso: questo comportamento è chiamato "hotlinking" — nuovamente, rubare la larghezza di banda di qualcun altro è illegale e sbagliato (in più rallenta la tua pagina e non si ha il controllo sull'immagine, che potrebbe venir rimossa o sostituita con qualcosa di inappropriato).

+
+ +

Il codice riportato sopra dovrebbe dare il seguente risultato:

+ +

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

+ +
+

Nota: elementi come {{htmlelement("img")}} e {{htmlelement("video")}} sono a volte indicati come replaced elements (elementi sostituiti), perché il contenuto dell'elemento e la dimensione sono determinati da una risorsa esterna (file immagine o video) e non dal contenuto dell'elemento stesso.

+
+ +
+

Nota: si possono trovare gli esempi di questa sezione in running on Github (guarda anche il codice sorgente.)

+
+ +

Testo alternativo

+ +

Il prossimo atrtibuto che guarderemo è alt — il suo valore si suppone che sia una descrizione dell'immagine in forma di testo, che possa essere usata in situazioni nelle quali l'immagine non può essere vista o mostrata. Per esempio, il nostro codice potrebbe essere modificato così:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth">
+ +

Il modo più semplice per testare il funzionamento di questo attributo è di scrivere male il nome del file nell'attributo src (ad esempio dinosooor.jpg); in questo caso il browser non mostrerà l'immagine perché non la troverà e al suo posto mostrerà il testo alternativo.

+ +

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

+ +

Perciò, perché mai dovresti visualizzare o aver bisogno del testo alternativo? Può essere utile in numerose situazioni:

+ + + +

Cosa si dovrebbe scrivere, esattamente, come valore dell'attributo alt? DIpende dal motivo per cui l'immagine si trova li; in altre parole: cosa si perde se l'immagine non viene vista?

+ + + +

La chiave è consentire una esperienza proficua anche quando non si può fruire delle immagini, così che gli utenti non perdano alcun contenuto. Provate a disattivare le immagini nel browser e a vedere qual è il risultato; ci si renderà subito conto di quanto inutili siano degli alt text come "logo" o "il mio posto preferito" quando le immagini non sono visibili:

+ +
+

Nota: La WebAIM's Alternative text guide fornisce più dettagli e se si vogliono più informazioni è sicuramente una buona lettura.

+
+ +

Larghezza e altezza

+ +

Si possono usare gli attributi width e height per specificare la larghezza e l'altezza dell'immagine (si possono ricavare le misure in diversi modi: per esempio su un Mac si può usare la combinazione di tasti Cmd + I per ottenere le informazioni sull'immagine). Tornando all'esempio, si può fare così:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341">
+ +

In circostanze normali ciò non produce differenze nella visualizzazione, ma se l'immagine non dovesse essere visualizzata (per esempio si è appena aperta la pagina e l'immagine non è ancora stata visualizzata) si noterà che il browser riserva dello spazio per farvi apparire l'immagine:

+ +

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

+ +

È una buona cosa da fare — produce un più rapido e fluido caricamento della pagina.

+ +

Non si dovrebbe alterare la dimensione dell'immagine per mezzo degli attributi HTML — se si imposta una dimensione troppo grande si otterrà un'immagine sgranata, sfocata; se la si imposta più piccola vuol dire che si spreca banda per far scaricare un'immagine più grande di ciò di cui abbiamo bisogno. Se non si mantiene il corretto rapporto tra le dimensioni (aspect ratio) l'immagine risulterà distorta. Si dovrebbe usare un editor di immagini per ridimensionare l'immagine secondo le proprie necessità, prima di metterla su internet.

+ +
+

Nota: se si ha la necessità di alterare le dimensioni dell'immagine, lo si dovrebbe fare coi CSS piuttosto che con l'HTML.

+
+ +

Titoli delle immagini

+ +

Come per i link, si può aggiungere un attributo title per fornire ulteriori informazioni di supporto. Nell'esempio, possiamo fare così:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum">
+ +

Ciò produce un tooltip, proprio come accade per i "title" dei link.

+ +

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

+ +

I title delle immagini non sono essenziali per aggiungere qualcosa di significativo e spesso è meglio aggiungere queste informazioni di supporto nel testo principale dell'articolo, piuttosto che attaccarle all'immagine. Sono tuttavia utili in alcune circostanze; per esempio in una galleria di immagini, dove non si ha lo spazio per le didascalie.

+ +

Apprendimento attivo: inserire un'immagine

+ +

Ok, adesso è il tuo turno! In questa sezione active learning ci piacerebbe fare un semplice esercizio. Sei stato istruito su un fondamentale elemento {{htmlelement("img")}}; ci piacerebbe che inserissi l'immagine reperibile al seguente URL:

+ +

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

+ +

Si, prima abbiamo detto di non fare mai degli "hotlink" a immagini su altri server, ma questo è solo a scopo dimostrativo — ti assolveremo, per questa volta.

+ +

Ci piacerebbe anche che:

+ + + +

Se fai un errore, puoi sempre resettare con l'apposito bottone. Se sei proprio bloccato, premi il bottone Show solution .

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Aggiungere note alle immagini (con figures e figure captions)

+ +

Parlando di didascalie, ci sono molti modi per aggiungerle ad una immagine: per esempio non c'è niente ad impedirti di fare così:

+ +
<div class="figure">
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <p>A T-Rex on display in the Manchester University Museum.</p>
+</div>
+ +

Questo è ok — produce l'effetto voluto ed è facilmente modificabile con i CSS; ma c'è un problema — non c'è niente che colleghi semanticamente l'immagine alla sua didascalia e ciò può creare problemi agli screen readers; per esempio, quando hai 50 immagini e 50 didascalie, cosa collega una all'altra?

+ +

Una soluzione migliore è usare gli elementi dell'HTML5 {{htmlelement("figure")}} e {{htmlelement("figcaption")}} che sono appositamente stati creati per questa ragione: fornire un contenitore semantico per le immagini, che colleghi chiaramente ogni immagine con la sua didascalia; il nostro esempio può essere riscritto così:

+ +
<figure>
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
+</figure>
+ +

L'elemento {{htmlelement("figcaption")}} dice al browser e alle tecnologie per l'accessibilità (assistive technology) che la didascalia descrive il restante contenuto dell'elemento {{htmlelement("figure")}}.

+ +
+

Nota: dal punto di vista dell'accessibilità, le didascalie e l'{{htmlattrxref('alt','img')}} text hanno ruoli distinti. Le didascalie beneficiano anche coloro che possono vedere l'immagine, mentre il testo alternativo ({{htmlattrxref('alt','img')}} text) fornisce le stesse funzionalità di una immagine che però, manca. Perciò captions e alt text non dovrebbero dire la stessa cosa, perché quando l'immagine manca, appaiono entrambe. Provate a disattivare le immagini nel browser e a vedere l'effetto che fa.

+
+ +

Notate che una "figure" non deve necessariamente essere un'immagine — una figure è una unità indipendente di contenuto che:

+ + + +

Una figure potrebbe essere costituita da diverse immagini, un frammento di codice, audio o video, equazioni, una tabella o altro.

+ +

Active learning: creare una figure

+ +

In questa sezione di apprendimento attivo, ci piacerebbe che prendessi il codice della precedente sezione active learning e lo trasformassi in una figure:

+ + + +

Se fai un errore puoi resettare con l'apposito bottone; se sei proprio bloccato premi il pulsante Show solution.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

CSS e immagini di background

+ +

Puoi anche usare i CSS per inserire immagini nelle pagine web (e anche i JavaScript, ma questa è tutta un'altra storia). Le proprietà dei CSS {{cssxref("background-image")}} — e le altre proprietà background-* — sono usate per controllare il posizionamento delle immagini di sfondo (background). Per esempio, per mettere un'immagine di sfondo ad ogni paragrafo di una pagina, si può fare così:

+ +
p {
+  background-image: url("images/dinosaur.jpg");
+}
+ +

Le immagini risultanti sono presumibilmente più facili da posizionare e controllare delle immagini HTML, quindi perché complicarsi la vita con le immagini HTML? Come suggerito precedentemente, le immagini introdotte con i CSS hanno solo scopo decorativo — se vuoi aggiungere qualcosa di carino alla tua pagina per migliorare l'effetto visivo, va bene; ma queste immagini non hanno alcun significato semantico — non possonoavere alcun testo equivalente, sono invisibili per gli screen readers, etc. Per questo, servono le immagini HTML.

+ +

Quindi, se una immagine ha un contenuto significativo, si dovrebbe inserirla tramite l'HTML; se è puramente decorativa, lo si dovrebbe fare tramite i CSS.

+ +
+

Nota: imparerai molto di più riguardo a CSS background images nel nostro CSS topic.

+
+ +

Conclusioni

+ +

Per ora è tutto — abbiamo trattato le immagini e le didascalie nei dettagli. Nel prossimo articolo cambieremo marcia e vevremo come usare l'HTML per includere video e audio nelle pagine web.

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "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 new file mode 100644 index 0000000000..cc3dbd7892 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/immagini_reattive/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/index.html b/files/it/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..8e1f49dad8 --- /dev/null +++ b/files/it/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,71 @@ +--- +title: Multimedialità e incorporamento +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - NeedsTranslation + - SVG + - TopicStub + - Video + - iframes + - imagemaps + - responsive +translation_of: Learn/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

Finora, in questo corso abbiamo visto molto testo. Molto. Testo. Ma il Web sarebbe veramente noisoso con nient'altro che il testo, quindi cominciamo a vedere come rendere il Web animato, con contenuti più interessanti! Questo modulo esplora come usare l'HTML per inserire la multimedialità nelle tue pagine web, inclusi i differenti modi di aggiunta di immagini, e come incorporare video, audio e persino altre intere pagine web.

+ +

Prerequisiti

+ +

Prima di cominciare questo modulo, dovresti avere una ragionevole conoscenza delle basi dell'HTML, trattate in Introduzione all'HTML. Se non hai esaminato questo modulo (o qualcosa di simile), prima studialo, poi torna qui!

+ +
+

Nota: se stai lavorando su un computer/tablet/altro dispositivo dove non hai la possibilità di creare propri file, potresti provare (la maggior parte degli) esempi di codice in un programma di codifica online come JSBin o Thimble.

+
+ +

Guide

+ +

Questo modulo contiene i seguenti articoli, che ti porteranno attraverso tutti i fondamenti dell'incorporazione della multimedialità nelle pagine web.

+ +
+
Immagini nell'HTML
+
Ci sono altri tipi di multimedialità da considerare, ma è logico cominciare con l'umile elemento {{htmlelement("img")}}, usato per inserire una semplice immagine in una pagina web. In questo articolo vedremo come usarlo in profondità, a cominciare dalle basi, annotandolo con didascalie grazie all'elemento {{htmlelement("figure")}}, e come si relaziona con le immagini di sfondo CSS.
+
Contenuti video e audio
+
In seguito, vedremo come usare gli elemeti HTML5 {{htmlelement("video")}} e {{htmlelement("audio")}} per inserire video e audio nelle nostre pagine, a cominciare dalle basi, fornendo l'accesso a differenti formati di file per differenti browser, aggiungendo didascalie e sottotitoli, e come aggiungere le alternative per browser più vecchi.
+
Da <object> a <iframe> — altre tecnologie di integrazione
+
A questo punto ci piacerebbe fare qualche passo di lato, dando un'occhiata ad una coppia di elementi che ti permettono di integrare un'ampia varietà di tipi di contenuti nella tua pagina web: gli elementi {{htmlelement("iframe")}}, {{htmlelement("embed")}} e {{htmlelement("object")}}. Gli <iframe> servono ad integrare altre pagine web, e gli altri due ti permettono di integrare PDF, SVG e anche Flash — una tecnologia sulla via del disuso, ma che ancora vedi in maniera semi-regolare.
+
Aggiungere grafiche vettoriali al Web
+
Le grafiche vettoriali possono essere molto utili in certe situazioni. A differenza dei regolari formati come PNG/JPG, esse non si distorcono/pixellano quando aumenti lo zoom — possono rimanere armoniose quando scalate. Questo articolo introduce cosa sono le grafiche vettoriali e come includere il popolare formato {{glossary("SVG")}} nelle pagine web.
+
Immagini reattive
+
Con così tanti tipi di dispositivi differenti in grado ora di navigare il Web — dai telefoni mobili ai computer da scrivania — un concetto essenziale per padroneggiare il moderno mondo web è il disegno reattivo (responsive design). Questo si riferisce alla creazione di pagine web che possono automaticamente cambiare le loro caratteristiche per adattarsi a differenti dimensioni dello schermo, risoluzioni, ecc. Questo sarà visto più in dettaglio nel successivo modulo CSS, ma per il momento vedremo gli strumenti a disposizione dell'HTML per creare immagini reattive, incluso l'elemento {{htmlelement("picture")}}.
+
+ +

Valutazioni

+ +

Le seguenti valutazioni testeranno il tuo apprendimento delle basi dell'HTML viste nelle guide qui sopra.

+ +
+
Splash page di Mozilla
+
In questa valutazione, noi testeremo la tua conoscenza di alcune delle tecniche discusse negli articoli di questo modulo, portandoti ad aggiungere alcuni video e immagini alla stravagante splash page tutta riguardo Mozilla!
+
+ +

Vedi anche

+ +
+
Aggiungi una hitmap sulla parte superiore di una immagine
+
Le mappe di immagini forniscono un meccanismo per collegare differenti parti di una immagine a differenti posti (pensa ad una mappa, che ti rimanda ad ulteriori informazioni riguardo ciascun differente Paese quando gli clicchi sopra). Questa tecnica può qualche volta essere utile.
+
Letteratura base sul Web 2
+
+

Un eccellente corso della fondazione Mozilla, che esplora e testa alcune delle capacità trattate nel modulo Multimedialità e incorporamento. Immergiti più in profondità nelle nozioni fondamentali sulla composizione di pagine web, disegno per l'accessibilità, condivisione risorse, uso di media online e lavoro libero.

+
+
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 new file mode 100644 index 0000000000..9c3f5af2c4 --- /dev/null +++ b/files/it/learn/html/scrivi_una_semplice_pagina_in_html/index.html @@ -0,0 +1,276 @@ +--- +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 +--- +
+

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/html/tables/index.html b/files/it/learn/html/tables/index.html new file mode 100644 index 0000000000..af7fae7ac0 --- /dev/null +++ b/files/it/learn/html/tables/index.html @@ -0,0 +1,45 @@ +--- +title: HTML Tables +slug: Learn/HTML/Tables +tags: + - Article + - Beginner + - CodingScripting + - Guide + - HTML + - Landing + - Module + - NeedsTranslation + - Tables + - TopicStub +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.

+ +

Prerequisites

+ +

Before starting this module, you should already have covered the basics of HTML — see Introduction to HTML.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

+
+ +

Guides

+ +

This module contains the following articles:

+ +
+
HTML table basics
+
This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
+
HTML table advanced features and accessibility
+
In the second article in this module, we look at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
+
+ +

Assessments

+ +
+
Structuring planet data
+
In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.
+
diff --git a/files/it/learn/index.html b/files/it/learn/index.html new file mode 100644 index 0000000000..c301d38b81 --- /dev/null +++ b/files/it/learn/index.html @@ -0,0 +1,83 @@ +--- +title: Impara il web +slug: Learn +tags: + - Indice(2) + - Principiante + - Web + - imparare +translation_of: Learn +--- +
+

Vuoi creare tuoi siti web e tue applicazioni web? Sei nel posto giusto!

+
+ +

C'è molto da imparare sullo sviluppo e sul web design, ma non preoccuparti. Sia che tu abbia appena cominciato a programmare o che tu voglia diventare un programmatore professionista a tutti gli effetti, siamo qui per aiutarti.

+ +

Come cominciare

+ +

Vogliamo conoscerti meglio. In quale descrizione ti riconosci di più?

+ + + +
+

Nota: In futuro stiamo pensando di pubblicare più strumenti per facilitarti l'apprendimento, per esempio per programmatori professionisti che stanno cercando di imparare tecniche avanzate, sviluppatori che sono nuovi nel mondo del Web, o per persone che vogliono imparare tecniche di design.

+
+ +

{{LearnBox({"title":"Quick learning: Vocabulary"})}}

+ +

Imparare con altre persone

+ +

Se hai una domanda o stai ancora pensando cosa fare, Mozilla è una comunità globale di entusiasti del Web, inclusi mentori e insegnanti che sono lieti di aiutarti. Entra in contatto con loro attraverso WebMaker:

+ + + +

Condividi la conoscenza

+ +

Questa intera Area di Apprendimento è stata costruita attraverso i nostri collaboratori. Abbiamo bisogno di te nella nostra squadra, che tu sia un principiante, un insegnante un esperto sviluppatore web. Se sei interessato, dai un occhio a come puoi aiutare, e ti incoraggiamo di contattarci nella nostra mailing list o nel nostro IRC channel. :)

+ +

Sotto categorie

+ +
    +
  1. Introduzione al web
    2. +
  2. Impara il web
    3. +
  3. Domande frequenti
    4. +
  4. Learn technologies +
      +
    1. HTML
      2. +
    2. CSS
      3. +
    3. JavaScript
      4. +
    4. Python
      5. +
    +
    5. +
  5. Tutorial +
      +
    1. How to build a web site?
      2. +
    2. Information security basics
      3. +
    +
    6. +
  6. Learning resources
    7. +
  7. Getting help +
      +
    1. FAQ
      2. +
    2. Glossary
      3. +
    3. Ask your questions
      4. +
    4. Meet teachers and mentors
      5. +
    +
    8. +
  8. How to contribute
    9. +
diff --git a/files/it/learn/javascript/building_blocks/index.html b/files/it/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..9b7bed94d3 --- /dev/null +++ b/files/it/learn/javascript/building_blocks/index.html @@ -0,0 +1,59 @@ +--- +title: JavaScript building blocks +slug: Learn/JavaScript/Building_blocks +tags: + - Article + - Assessment + - Beginner + - CodingScripting + - Conditionals + - Functions + - Guide + - Introduction + - JavaScript + - Landing + - Loops + - Module + - NeedsTranslation + - TopicStub + - events + - 'l10n:priority' +translation_of: Learn/JavaScript/Building_blocks +--- +
{{LearnSidebar}}
+ +
In questo modulo, continueremo con la copertura di tutte le funzionalità fondamentali di Javascript, rivolgendo la nostra attenzione ai tipi di blocco più comuni come istruzioni condizionali, loop, funzioni ed eventi. Avrai già visto queste cose nel corso, ma solo di passaggio -- qui ne discuteremo esplicitamente.
+ +

Prerequisiti

+ +

Prima di iniziare questo modulo, dovresti avere un po' di familiarità con le basi di HTML e CSS, e dovresti anche aver lavorato nei moduli precedenti, JavaScript first steps.

+ +
+

Nota: Se stai lavorantdo su un computer/tablet/altri dispositivi dove non hai la possibilità di creare i tuoi file, potresti provare (la maggior parte) degli esempi di codice in un programma di coding online come JSBin opp Thimble.

+
+ +

Guide

+ +
+
Prendi decisioni nel tuo codice — conditionals
+
In ogni linguaggio di programmazione, il codice necessita di prendere decisioni ed eseguire azioni di conseguenza a seconda dei diversi input. Per esempio, in un gioco, se le vite del giocatore sono 0, allora la partita termina. In un'app meteo, se viene aperta al mattino, verrà mostrata una figura dell'alba e se è notte una relativa a stelle e luna. In questo articolo esploreremo come funzionano le strutture condizionali in JavaScript
+
Cicli di codice (loop)
+
A volte è necessario svolgere la stessa attività più di una volta di seguito. Ad esempi, guardando una lista di nomi. Nella programmazione i loop svolgono questo lavoro molto bene. Qui vedremo la struttura dei loop in JavaScript
+
Funzioni — blocchi di codice riusabile
+
Un altro concetto essenziale nel coding sono le funzioni. Le Funzioni ti consento di memorizzare un pezzo di codice che esegue una singola attività all'interno di un blocco definito e quindi richiamare il codice ogni volta che ne hai bisogno usando un singolo breve comando — invece di dover scrivere lo stesso codice più volte. In questo articolo esploreremo i concetti fondamentali dietro funzioni come la sistassi di base, come invocare e definire funzioni, ambito e parametri.
+
Costruisci la tua funzione
+
Con la maggior parte della teoria essenziale trattata in precedenza, questo articolo offre un'esperienza più pratica. Qui farai un po' di pratica con la creazione della tua funzione personalizzata. Lungo la strada, spiegheremo anche alcuni ulteriori dettagli utili su come gestire le funzioni.
+
Valori di ritorno delle funzioni
+
L'ultimo concetti essenziale che devi sapere sulle funzioni è il tipo di ritorno. Alcune funzioni non ritornano un valore utile dopo l'esecuzione, ma altre lo fanno. É importante capire quali sono i loro valori, come utilizzarli e come fare in modo che le tue funzioni personalizzate restituiscano valori utili
+
Introduzione agli eventi
+
Gli eventi sono azioni o occorrenze che si verificano nel sistema che si sta programmando, il sistema ti informa in modo che tu possa rispondere in qualche modo se lo desideri. Ad esempio se l'utente fa click su un pulsante in una pagina Web, è possibile che si desideri rispondere a tale azione visualizzando una casella di informazioni. In quest'ultimo articolo discuteremo alcuni concetti importanti relativi agli eventi e vedremo come funzionano nei browser.
+
+ +

Valutazioni

+ +

La seguente valutazione metterà alla prova la tua comprensione dei principi di base di JavaScript trattati nelle guide sopra.

+ +
+
Galleria di immagini (carousel)
+
Ora che abbiamo esaminati i blocchi fondamentali di JavaScript, testeremo la tua conoscenza dei loop, funzioni, condizioni ed eventi creando un oggetto abbastanza comune che vedrai su molti siti Web: una galleria di immagini basata su JavaScript.
+
diff --git a/files/it/learn/javascript/comefare/index.html b/files/it/learn/javascript/comefare/index.html new file mode 100644 index 0000000000..275eb0cf8d --- /dev/null +++ b/files/it/learn/javascript/comefare/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/first_steps/cosa_\303\250_andato_storto/index.html" "b/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" new file mode 100644 index 0000000000..1fa4343de8 --- /dev/null +++ "b/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/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

+ +
+
    +
  • There are many other types of errors that aren't listed here; we are compiling a reference that explains what they mean in detail — see the JavaScript error reference.
    • +
  • If you come across any errors in your code that you aren't sure how to fix after reading this article, you can get help! Ask on the Learning Area Discourse thread, or in the #mdn IRC channel on Mozilla IRC. Tell us what your error is, and we'll try to help you. A listing of your code would be useful as well.
    • +
+
+ +

{{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/index.html b/files/it/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..220f1f25c1 --- /dev/null +++ b/files/it/learn/javascript/first_steps/index.html @@ -0,0 +1,68 @@ +--- +title: JavaScript First Steps +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Article + - Assessment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Landing + - Module + - NeedsTranslation + - Numbers + - Operators + - TopicStub + - Variables + - 'l10n:priority' + - maths + - strings +translation_of: Learn/JavaScript/First_steps +--- +

{{LearnSidebar}}Nel nostro primo modulo JavaScript, per prima cosa, rispondiamo ad alcune domande fondamentali come "cosa è JavaScript?", "a che cosa assomiglia?", e "cosa può fare?", prima di guidarti nella tua prima esperienza pratica di scrittura JavaScript. Dopodiché, discuteremo dettagliatamente, alcuni elementi chiave, come variabili, stringhe, numeri ed array.

+ +

Prerequisiti

+ +

Prima di iniziare questo modulo, non hai bisogno di alcuna precedente conoscenza di JavaScript, ma dovresti avere familiarità con HTML e CSS. Si consiglia di utilizzare i seguenti moduli prima di iniziare su JavaScript:

+ + + +
+

Nota: Se stai lavorando su un computer/tablet/altro dispositivo dove non sei in grado di creare i tuoi files, potresti provare (la maggior parte) gli esempi di codice in un programma di codifica online come JSBin o Thimble.

+
+ +

Guide

+ +
+
Cosa è JavaScript?
+
Benvenuto nel corso JavaScript per principianti di MDN! In questo primo articolo vedremo JavaScript da un livello alto, rispondendo a domande come "cosa è JavaScript?" e "cosa sta facendo?", e assicurandoci che tu sia a tuo agio con lo scopo di JavaScript.
+
Un primo tuffo in JavaScript
+
Ora che hai imparato qualcosa sulla teoria di JavaScript, e cosa puoi fare con esso, stiamo per fornirti un corso accelerato sulle caratteristiche di base di JavaScript attraverso un tutorial totalmente pratico. Qui costruirai un semplice gioco "Indovina il numero", passo dopo passo.
+
Cosa è andato storto? Risoluzione dei problemi di JavaScript
+
Quando hai costruito il gioco "Indovina il numero" nel precedente articolo, potresti aver trovato che non funzionava. Nessuna paura - questo articolo mira a salvarti dallo strapparti i capelli su questi problemi fornendoti alcuni semplici consigli sul come trovare e correggere gli errori nei programmi JavaScript.
+
Memorizzare le informazioni ci cui hai bisogno - le Variabili
+
Dopo aver letto l'ultima coppia di articoli dovresti sapere cos'è JavaScript, cosa può fare per te, come usarlo con altre tecnologie web, e come le sue principali caratteristiche appaiono da un livello alto. In questo articolo andremo giù fino alle basi reali, guardando come lavorare con i blocchi di costruzione più semplici di JavaScript - Variabili.
+
Matemeatica di base in JavaScript - numeri e operatori
+
A questo punto del corso discuteremo matematica in JavaScript — come possiamo combinare operatori ed altre funzioni per manipolare con successo i numeri per fare i nostri bidding.
+
Handling text — strings in JavaScript
+
Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.
+
Useful string methods
+
Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.
+
Arrays
+
In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.
+
+ +

Assessments

+ +

The following assessment will test your understanding of the JavaScript basics covered in the guides above.

+ +
+
Silly story generator
+
In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!
+
diff --git a/files/it/learn/javascript/first_steps/variabili/index.html b/files/it/learn/javascript/first_steps/variabili/index.html new file mode 100644 index 0000000000..38da82e607 --- /dev/null +++ b/files/it/learn/javascript/first_steps/variabili/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/index.html b/files/it/learn/javascript/index.html new file mode 100644 index 0000000000..faa1dc8f1a --- /dev/null +++ b/files/it/learn/javascript/index.html @@ -0,0 +1,63 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - JavaScript + - Principiante + - ScrtturaCodice +translation_of: Learn/JavaScript +--- +
{{LearnSidebar}}
+ +

{{Glossary("JavaScript")}} è un linguaggio di programmazione che consente la creazione di oggetti complessi in pagine web.  Ogni volta che una pagina web fa più che visualizzare semplici informazioni statiche — visualizzando contenuti aggiornati su base temporale, mappe interattive, o animazioni grafiche 2D/3D, o scrolling video jukeboxes, ecc... ecc... — si può presumere che JavaScript sia coinvolto.

+ +

Percorso di apprendimento

+ +

JavaScript è sicuramente più difficile da imparare rispetto alle tecnologie ad esso correlate, come HTML and CSS. Prima di tentare di imparare JavaScript, si consiglia vivamente di familiarizzare innanzitutto con almeno queste due tecnologie, e forse anche con altre. Inizia a lavorare sui seguenti moduli:

+ + + +

Una pregressa esperienza con altri linguaggi di programmazione può essere senz'altro utile.

+ +

Dopo aver familiarizzato con i concetti base di JavaScript, dovresti essere in grado di imparare argomenti più complessi, per esempio:

+ + + +

Moduli

+ +

Questo tema contiene i seguenti moduli, in un ordine suggerito per lavorarci sopra.

+ +
+
Primi passi JavaScript
+
Nel nostro primo modulo JavaScript, rispondiamo dapprima a domande fondamentali come "cos'è JavaScript?", "come è fatto?" e "cosa può fare?", prima di proseguire guidandoti attraverso le prime esperienze di scrittura di codice JavaScript. In seguito, presentiamo in dettaglio alcune caratteristiche chiave di JavaScript, come variabili, stringhe, numeri e matrici (arrays).
+
Blocchi costruttivi JavaScript
+
In questo modulo continuiamo la nostra descrizione di tutte le principali caratteristiche chiave di JavaScript, rivolgendo la nostra attenzione ai tipi di blocco di codice comunemente incontrati come dichiarazioni condizionali, cicli, funzioni ed eventi. Hai già visto questi elementi nel corso, ma solo di passaggio - qui discuteremo tutto in modo esplicito.
+
Introduzione a oggetti JavaScript
+
In JavaScript, la maggior parte degli elementi sono oggetti, dalle funzionalità di base di JavaScript come stringhe e matrici alle API del browser create sulla base di JavaScript. È anche possibile creare dei propri oggetti per incapsulare funzioni e variabili correlate in pacchetti efficienti (packages). La natura orientata agli oggetti di JavaScript è importante che sia compresa se vuoi andare oltre con la tua conoscenza del linguaggio e scrivere codice più efficiente, quindi abbiamo creato questo modulo per aiutarti. Qui insegniamo la teoria degli oggetti e la sua sintassi in dettaglio, vediamo come puoi creare i tuoi oggetti e spieghiamo cosa sono i dati JSON e come lavorarci.
+
Web APIs lato Client
+
Quando si scrive JavaScript sul lato client per siti Web o applicazioni, non si andrà molto lontano prima di iniziare a utilizzare le API — interfacce per la manipolazione di diversi aspetti del browser e del sistema operativo su cui è in esecuzione il sito, o anche dati da altri siti Web o servizi. In questo modulo esploreremo quali sono le API e come utilizzare alcune delle API più comuni che incontrerai spesso nel tuo lavoro di sviluppatore.
+
+ +

Risolvere i problemi tipici di JavaScript

+ +

Usa JavaScript per risolvere i problemi tipici fornisce collegamenti a sezioni di contenuto che spiegano come usare JavaScript per risolvere problemi molto comuni durante la creazione di una pagina web.

+ +

Vedi anche

+ +
+
JavaScript su MDN
+
Il punto di ingresso principale per la documentazione base di JavaScript su MDN — qui è possibile trovare documenti di riferimento completi su tutti gli aspetti del linguaggio JavaScript e alcuni tutorial avanzati rivolti a esperti JavaScript.
+
Imparare JavaScript 
+
Un eccellente risorsa (in inglese) per aspiranti sviluppatori web — Imparare JavaScript in un ambiente interattivo, con lezioni brevi e test interattivi, guidati da valutazioni automatiche. le prime 40 lezioni sono gratuite, e il corso completo è disponibile con un piccolo pagamento una tantum. 
+
Basi di JavaScript su EXLskills
+
Impara JavaScript con il corso open-source gratuito di EXLskills che presenta tutto ciò che ti occorre per iniziare a costruire applicazioni in JS.
+
 Programmare matematica
+
Una eccellente serie di video tutorial per imparare la matematica che devi conoscere per essere un programmatore valido, di Keith Peters.
+
diff --git a/files/it/learn/javascript/oggetti/basics/index.html b/files/it/learn/javascript/oggetti/basics/index.html new file mode 100644 index 0000000000..539df5c2e0 --- /dev/null +++ b/files/it/learn/javascript/oggetti/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/oggetti/index.html b/files/it/learn/javascript/oggetti/index.html new file mode 100644 index 0000000000..5fa859db74 --- /dev/null +++ b/files/it/learn/javascript/oggetti/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/oggetti/json/index.html b/files/it/learn/javascript/oggetti/json/index.html new file mode 100644 index 0000000000..71cf166e15 --- /dev/null +++ b/files/it/learn/javascript/oggetti/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/riservatezza,_integrit\303\240_e_disponibilit\303\240/index.html" "b/files/it/learn/riservatezza,_integrit\303\240_e_disponibilit\303\240/index.html" new file mode 100644 index 0000000000..23b0a37a89 --- /dev/null +++ "b/files/it/learn/riservatezza,_integrit\303\240_e_disponibilit\303\240/index.html" @@ -0,0 +1,69 @@ +--- +title: 'Riservatezza, Integrità e Disponibilità' +slug: 'Learn/Riservatezza,_Integrità_e_Disponibilità' +tags: + - Iniziare + - Principiante + - Sicurezza + - Tutorial +translation_of: 'Archive/Security/Confidentiality,_Integrity,_and_Availability' +--- +
{{IncludeSubnav("/en-US/Learn")}}{{draft}}
+ +
+

Questo articolo discute gli obiettivi principali della sicurezza: riservatezza, integrità e disponibilità.

+
+ + + + + + + + + + + + +
Prerquisiti:Non sono rischiesti prerequisiti per questo articolo.
Obiettivo:Imparerai cosa sono riservatezza, integrità e disponibilità e come questi possono influire sui dati e il sistema.
+ +

Sommario

+ +

Il modello classico della sicurezza delle informazioni definisce tre obiettivi di sicurezza: il mantenimento della riservatezza, l'integrità, e la disponibiltà. Ciascun obiettivo tratta un differente aspetto del fornire protezione alle informazioni.

+ +

Apprendimento Attivo

+ +

Non sono ancora presenti attività di apprendimento attivo. Prendi in considerazione di contribuire, per favore.

+ +

Approfondimento

+ +

Riservatezza

+ +

Riservatezza significa proteggere le informazioni dagli accessi da parte di soggetti non autorizzati. In altre parole, solo chi è autorizzato a farlo può guadagnare l'accesso ai dati sensibili. Immagina i tuoi dati della banca. Soltanto tu dovresti poter accedervi e l'impiegato della banca che ti sta aiutando con una transazione e nessun altro. Un fallimento nel mantenimento della riservatezza significa che qualcuno che non dovrebbe avere l'accesso è riuscito ad ottenerlo, intenzionalmente o accidentalmente. Un fallimento di riservatezza di questo genere, comunemente conosciuto come breach o violazione, solitamente non è recuperabile. Una volta che il segreto viene svelato, non esiste alcun modo per celarlo di nuovo. Se i tuoi archivi bancari vengono postati su un sito pubblico, chiunque puù conoscere il tuo numero di conto, il tuo estratto conto, ecc... e queste informazioni non possono essere cancellate dalle loro menti, dai fogli, dai computer e qualunque altro posto. Quasi tutti i maggiori incidenti odierni di sicurezza riportati dai media implicano una importante perdita di riservatezza. 

+ +

Tirando le somme, una violazione della riservatezza significa che qualcuno guadagna l'accesso a delle informazioni a cui non dovrebbe averne.

+ +

Integrità

+ +

Integrità vuol dire garantire l'autenticità dell'informazione, che tale informazione non sia alterata e che la sorgente dell'informazione sia autentica. Immagina di avere un sito web e che venda alcuni prodotti su questo sito. Ora, immagina che dei malintenzionati possano fare acquisti sul tuo sito e malevolmente modifichino il prezzo dei tuoi prodotti, potendo in questo modo comprare qualnque cosa a qualunque prezzo scelgano. Questo sarebbe una mancanza di integrità, in quanto le tue informazioni, in questo caso il prezzo del prodotto, è stato modificato pur non avendo mai autorizzato tale modifica. Un altro esempio di fallimento di integrità è quando cerchi di connetteri ad un sito e un malintenzionato frapposto tra te e il sito reindirizzo il tuo traffico in un sito diverso. In questo caso, il sito a cui vieni indirizzato non è autentico.

+ +

Disponibiltà

+ +

Disponibilità significa che l'informazione è accessibile agli utenti autorizzati.

+ +

Prossimo Passo

+ + + +
+

Original Document Information

+ +
    +
  • Author(s): Karen Scarfone, Wayne Jansen, and Miles Tracy
    • +
  • Title: NIST Special Publication 800-123, Guide to General Server Security
    • +
  • Last Updated Date: July 2008
    • +
  • Copyright Information: This document is not subject to copyright.
    • +
+
diff --git a/files/it/learn/server-side/django/admin_site/index.html b/files/it/learn/server-side/django/admin_site/index.html new file mode 100644 index 0000000000..6cb1fac11a --- /dev/null +++ b/files/it/learn/server-side/django/admin_site/index.html @@ -0,0 +1,361 @@ +--- +title: 'Django Tutorial Part 4: Django admin site' +slug: Learn/Server-side/Django/Admin_site +tags: + - Articolo + - Codice + - Python + - Script + - Server + - Tutorial + - django + - django_admin + - imparare + - inizio + - nuovo +translation_of: Learn/Server-side/Django/Admin_site +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
+ +

Dopo aver creato i modelli per la nostra LocalLibrary, useremo il sito di Django Admin per aggiungere alcuni dati "reali" sui libri. Per prima cosa ti mostreremo come registrare i modelli con il sito di amministrazione, quindi ti mostreremo come accedere e creare alcuni dati. Alla fine dell'articolo mostreremo alcuni modi per migliorare ulteriormente la presentazione del sito di amministrazione.

+ + + + + + + + + + + + +
Prerequisiti:Prima completa: Django Tutorial Part 3: Using models.
Obbiettivi:Per capire i vantaggi e le limitazioni del sito di amministrazione Django, e usarlo per creare alcuni record per i nostri modelli.
+ +

Panoramica

+ +

L'applicazione di amministrazione Django può utilizzare i modelli per creare automaticamente un'area del sito che è possibile utilizzare per creare, visualizzare, aggiornare ed eliminare record. Questo può farti risparmiare molto tempo durante lo sviluppo, rendendo molto facile testare i tuoi modelli e capire se hai i dati giusti. L'applicazione di amministrazione può anche essere utile per la gestione dei dati in produzione, a seconda del tipo di sito Web. Il progetto Django lo consiglia solo per la gestione interna dei dati (vale a dire solo per gli amministratori o le persone interne alla tua organizzazione), poiché l'approccio model-centric non è necessariamente la migliore interfaccia possibile per tutti gli utenti e espone molti dettagli inutili sui modelli.

+ +

Tutta la configurazione richiesta per includere l'applicazione di amministrazione nel tuo sito Web è stata eseguita automaticamente quando hai creato il progetto skeleton (per informazioni sulle reali dipendenze necessarie, consulta Django docs). Di conseguenza, tutto ciò che devi fare per aggiungere i tuoi modelli all'applicazione admin è registrarli. Alla fine di questo articolo forniremo una breve dimostrazione di come è possibile configurare ulteriormente l'area di amministrazione per visualizzare meglio i dati del modello.

+ +

Dopo aver registrato i modelli, mostreremo come creare un nuovo "superutente", accedere al sito e creare alcuni libri, autori, istanze di libri e generi. Questi saranno utili per testare le viste e i modelli che inizieremo a creare nel prossimo tutorial.

+ +

Registrare i models 

+ +

Apri admin.py in catalog (/locallibrary/catalog/admin.py). Notare che essa già contiene l'istruzione django.contrib.admin:

+ +
from django.contrib import admin
+
+# Register your models here.
+
+ +

Registrare i modelli copiando il seguente testo nella parte inferiore del file. Questo codice importa semplicemente i modelli e quindi le chiamate admin.site.register Per registrarli.

+ +
from catalog.models import Author, Genre, Book, BookInstance
+
+admin.site.register(Book)
+admin.site.register(Author)
+admin.site.register(Genre)
+admin.site.register(BookInstance)
+
+ +
Note: Se hai accettato la sfida di creare un modello per rappresentare il linguaggio naturale di un libro, importalo e registralo anche tu (see the models tutorial article)!
+ +

Questo è il modo più semplice di registrare un modello o modelli con il sito. Il sito di amministrazione è altamente personalizzabile e parleremo di altri modi per registrare i tuoi modelli più in basso.

+ +

Creare un superuser

+ +

Per accedere al sito admin, abbiamo bisogno di un account utente con lo stato del personale abilitato. Per poter visualizzare e creare record, abbiamo anche bisogno che questo utente abbia i permessi per gestire tutti i nostri oggetti. Puoi creare un account "superutente" che abbia accesso completo al sito e tutte le autorizzazioni necessarie usando manage.py. Chiamare il seguente comando, nella stessa directory di manage.py, per creare il superutente. Ti verrà richiesto di inserire un nome utente, un indirizzo email e una password complessa.

+ +
python3 manage.py createsuperuser
+
+ +

Una volta che questo comando è stato completato, un nuovo superutente sarà stato aggiunto al database. Ora riavvia il server di sviluppo in modo da poter verificare l'accesso:

+ +
python3 manage.py runserver
+
+
+ +

Loggarsi come superuser e usare il sito

+ +

Per effettuare il login, utilizzare nell'URL /admin (esempio: http://127.0.0.1:8000/admin) e inserisci le tue nuove credenziali utente e password per superutente (verrai reindirizzato alla pagina di accesso e poi tornerai all'URL di / admin dopo aver inserito i tuoi dettagli). Questa parte del sito mostra tutti i nostri modelli, raggruppati per applicazione installata. È possibile fare clic sul nome di un modello per andare a una schermata in cui sono elencati tutti i record associati e è possibile fare ulteriori clic su tali record per modificarli. Puoi anche fare clic direttamente sul collegamento add accanto a ciascun modello per iniziare a creare un record di quel tipo.

+ +

Admin Site - Home page

+ +

Clicca sul link Add a destra di Books per creare un nuovo libro (verrà mostrata una finestra di dialogo come sotto). Nota come il titolo di ogni campo, il tipo di widget utilizzato, e l' help_text (se presente) matcha il valore che hai specificato nel modello. 

+ +

Immettere i valori per i campi. Puoi creare nuovi autori o generi premendo il pulsante + vicino ai rispettivi campi (o seleziona i valori esistenti dagli elenchi se li hai già creati). Quando hai finito puoi premere SAVE, Save and add another, o Save and continue editing per salvare il record.

+ +

Admin Site - Book Add

+ +
+

Note: A questo punto vorremmo che passassi un po 'di tempo ad aggiungere alcuni libri, autori e generi (ad es. Fantasy) alla tua applicazione. Assicurati che ogni autore e genere includa un paio di libri diversi (questo renderà le tue visualizzazioni di lista e di dettaglio più interessanti quando le implementeremo più avanti nella serie di articoli).

+
+ +

Al termine dell'aggiunta di libri, fai clic sul link Home nel segnalibro in alto per tornare alla pagina principale dell'amministratore. Quindi fare clic sul link Libri per visualizzare l'elenco corrente di libri (o su uno degli altri collegamenti per vedere altri elenchi di modelli). Ora che hai aggiunto alcuni libri, l'elenco potrebbe essere simile allo screenshot qui sotto. Viene visualizzato il titolo di ogni libro; questo è il valore restituito nel metodo __str __ () del modello Book che abbiamo specificato nell'ultimo articolo.

+ +

Admin Site - List of book objects

+ +

Da questa lista puoi cancellare libri selezionando la checkbox vicino al libro che non vuoi, e selezionando l'azione delete dalla lista di azioni Action, e premendo il pulsante Go. Puoi anche aggiungere nuovi libri, premendo ADD BOOK. 

+ +

Puoi editare un libro selezionando il suo nome dal link. La pagina di edit, mostrata sotto, è uguale a quella di aggiunta di un nuovo libro. Le differenze principali sono il titolo (Change book) e l'aggiunta di Delete, HISTORY e VIEW ON SITE (questo ultimo bottone appare perchè abbiamo definito il metodo get_absolute_url() nel modello).

+ +

Admin Site - Book Edit

+ +

Ora torna alla Home page (utilizzando il collegamento Home il percorso breadcrumb) e quindi visualizza gli elenchi Autore e Genere: dovresti averne già abbastanza creati da quando hai aggiunto i nuovi libri, ma sentiti libero di aggiungerne altri.

+ +

Ciò che sicuramente non avrai, sono delle Book Instances, perchè non vengono create da Books (invece possiamo creare un Book da una BookInstance — questo è il funzionamento del campo di tipo ForeignKey). Naviga indietro alla Home page e premi il bottone Add associato. Notare il campo id, largo ed univoco, che viene utilizzato per identificare una singola copia di un libro in una libreria.

+ +

Admin Site - BookInstance Add

+ +

Crea un numero di questi record per ciascuno dei tuoi libri. Imposta lo stato come Disponibile per almeno alcuni record e In prestito per gli altri. Se lo stato non è Disponibile, imposta anche una data di scadenza futura.

+ +

Questo è tutto! Ora hai imparato come configurare e utilizzare il sito di amministrazione. Hai anche creato record per Book, BookInstance, Genre e Author che saremo in grado di utilizzare una volta create le views e i modelli.

+ +

Configurazione avanzata

+ +

Django fa un buon lavoro nel creare un sito admin di base usando le informazioni dei modelli registrati:

+ + + +

Puoi rendere ancora più semplice da utilizzare l'interfaccia, ecco alcune delle cose che puoi fare:

+ + + +

In questa sezione esamineremo alcune modifiche che miglioreranno l'interfaccia per la nostra libreria locale, tra cui l'aggiunta di ulteriori informazioni agli elenchi di modelli di libri e autori e il miglioramento del layout delle loro viste di modifica. Non cambieremo la presentazione del modello Lingua e genere perché hanno solo un campo ciascuno, quindi non c'è alcun vantaggio reale nel farlo!

+ +

Per maggiori informazioni sulle customizzazioni possibili, consultare The Django Admin site (Django Docs).

+ +

Registrare una classe ModelAdmin

+ +

Per cambiare la visualizzazione dei modelli nell'interfaccia admin, dovremo definire una classe ModelAdmin e registrarla col modello.

+ +

Cominciamo col modello di Author. Apri admin.py nella applicazione catalog (/locallibrary/catalog/admin.py). Commentiamo la registrazione originaria (scrivendo prima della riga di codice un carattere) del modello Author:

+ +
# admin.site.register(Author)
+ +

Aggiungi una nuova registrazione AuthorAdmin.

+ +
# Define the admin class
+class AuthorAdmin(admin.ModelAdmin):
+    pass
+
+# Register the admin class with the associated model
+admin.site.register(Author, AuthorAdmin)
+
+ +

Aggiungiamo anche le classi ModelAdmin per Book, e BookInstance. Commentiamo anche qui le vecchie registrazioni:

+ +
# admin.site.register(Book)
+# admin.site.register(BookInstance)
+ +

Per registrare i nuovi modelli, per i propositi di questa dimostrazione, useremo il decoratore @register (che esegue la stessa azione della sintassi admin.site.register()):

+ +
# Register the Admin classes for Book using the decorator
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    pass
+
+# Register the Admin classes for BookInstance using the decorator
+@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    pass
+
+ +

Attualmente tutte le nostre classi di amministrazione sono vuote (vedi pass) cosi il comportamento di admin non e' cambiato! Ora possiamo estendere queste classi per definire i nostri specifici modelli di comportamento di admin.

+ +

Configurare le liste di visualizzazione

+ +

La LocalLibrary attualmente mostra una lista degli autori usando il nome oggetto generato da __str__(). Questo va bene quando hai solo pochi autori, ma una volta che ne hai molti potresti finire per avere dei duplicati. Per differenziarli, o solo perché vuoi mostrare informazioni più interessanti su ciascun autore, puoi utilizzare ad esempio list_display per aggiungere ulteriori campi alla visualizzazione. 

+ +

Sostituisci il tuo codice della classe AuthorAdmin con quello sotto. I campi da mostrare nella lista sono dichiaratiin una tupla nell'ordine desiderato, come mostrato sotto.

+ +
class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+
+ +

Naviga ora alla lista degli autori. I campi inseriti nella tupla ora dovrebbero essere mostrati:

+ +

Admin Site - Improved Author List

+ +

Per il nostro modello Book  mostreremo anche l'autore, author ed il genere, genre. author è un campo di tipo ForeignKey (uno-a-molti), quindi verrà rappresentato dal valore __str__() per il record associato. Rimpiazza la classe BookAdmin con la versione seguente.

+ +
class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+
+ +

Sfortunatamente non possiamo specificare direttamente il campo genre in list_display perchè è un campo di tipo ManyToManyField (Django impedisce questa operazione perché ci sarebbe traffico di "accesso" molto costosa al database nel farlo). Invece definiremo una funzione display_genre per prendere le informazioni sotto forma di stringa (la funzione che abbiamo chiamato sopra, la definiremo di seguito).

+ +
+

Note: Mostrare il genre potrebbe non essere una buona idea qui, a causa del "costo" dell'operazione del database. Ti stiamo mostrando come, perché chiamare le funzioni nei tuoi modelli può essere molto utile per altri motivi, ad esempio per aggiungere un link Elimina accanto a ogni elemento nell'elenco

+
+ +

Aggiungi il seguente codice nel tuo modello Book (models.py). Questa funzione crea una stringa contenente i primi tre valori del campo genre (se esistono) e creano una short_description che può essere utilizzata nel sito admin per questo metodo.

+ +
    def display_genre(self):
+        """Create a string for the Genre. This is required to display genre in Admin."""
+        return ', '.join(genre.name for genre in self.genre.all()[:3])
+
+    display_genre.short_description = 'Genre'
+
+ +

Dopo aver salvato il modello e aver aggiornato admin, apri il sito e vai alla lista di visualizzazione Books; ecco ciò che dovresti vedere:

+ +

Admin Site - Improved Book List

+ +

Il modello Genre (ed il modello Language, se ne hai definito uno) entrambi hanno un singolo campo, quindi non ha senso creare un modello aggiuntivo per mostrare campi aggiuntivi.

+ +
+

Note: potrebbe essere utile aggiornare il modello della lista di BookInstance per mostrare almeno anche lo status e la data di restituzione. L'abbiamo inserita come sfida alla fine di questo capitolo!

+
+ +

Aggiungere dei filtri alle liste

+ +

Una volta che hai un sacco di elementi in una lista, può essere utile poter filtrare quali oggetti sono visualizzati. Questo viene fatto elencando i campi nell'attributo list_filter. Rimpiazza la classe corrente BookInstanceAdmin con il codice di seguito.

+ +
class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+ +

La visualizzazione elenco includerà ora una casella filtro sulla destra. Nota come puoi scegliere le date e lo stato per filtrare i valori:

+ +

Admin Site - BookInstance List Filters

+ +

Organizzare il layout della visualizzazione dettaglio

+ +

Per impostazione predefinita, le viste di dettaglio dispongono tutti i campi verticalmente, nel loro ordine di dichiarazione nel modello. È possibile modificare l'ordine di dichiarazione, quali campi vengono visualizzati (o esclusi), se le sezioni vengono utilizzate per organizzare le informazioni, se i campi sono visualizzati orizzontalmente o verticalmente e anche quali widget di modifica vengono utilizzati nei moduli di amministrazione.

+ +
+

Note: I modelli LocalLibrary sono relativamente semplici, quindi non abbiamo un grosso bisogno di cambiare il layout; ne faremo comunque alcuni, solo a scopo dimostrativo.

+
+ +

Controllare quali campi sono visualizzati e come sono disposti

+ +

Aggiorna la tua classe AuthorAdmin class e aggiungi la riga di codice fields mostrata sotto in grassetto:

+ +
class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+    fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]
+
+ +

L'attributo fields elenca solo i campi che devono essere visualizzati nel modulo, in ordine. I campi vengono visualizzati verticalmente per impostazione predefinita, ma verranno visualizzati orizzontalmente se vengono ulteriormente raggruppati in una tupla (come mostrato nei campi "data" sopra).

+ +

Nel tuo sito web vai alla vista dettagli dell'autore - ora dovrebbe apparire come mostrato di seguito:

+ +

Admin Site - Improved Author Detail

+ +
+

Note: Puoi anche utilizzare l'attributo exclude per dichiarare una lista di attributi da escludere dal form (tutti gli altri attributi nel modello saranno mostrati). 

+
+ +

Organizzare la vista di dettaglio in sezioni

+ +

È possibile aggiungere "sezioni" per raggruppare le informazioni relative al modello all'interno del modulo dettagli, utilizzando l'attributo fieldsets.

+ +

Nel modello BookInstance abbiamo delle informazioni sul libro (esempio name, imprint, ed id) e sullo stato (status, due_back). Possiamo aggiungere queste informazioni in differenti sezioni aggiungendo il testo in grassetto alla classe BookInstanceAdmin.

+ +
@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+    fieldsets = (
+        (None, {
+            'fields': ('book', 'imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back')
+        }),
+    )
+ +

Ogni sezione avrà il suo titolo (o None, se non vuoi un titolo) e una tupla associata di campi in un dizionario - il formato è complicato da descrivere, ma abbastanza facile da capire se si guarda il frammento di codice immediatamente sopra.

+ +

Ora vai a una vista di istanza di un libro nel tuo sito web; il modulo dovrebbe apparire come mostrato di seguito:

+ +

Admin Site - Improved BookInstance Detail with sections

+ +

Modifica in linea dei record associati

+ +

A volte può essere sensato essere in grado di aggiungere record associati nello stesso momento. Ad esempio, può avere senso avere sia le informazioni del libro che le informazioni sulle copie specifiche che si hanno nella stessa pagina di dettaglio.

+ +

Puoi farlo dichiarando inlines, di tipo TabularInline (layout orizzontale) o StackedInline (layout verticale, come il modello di default). Puoi aggiungere l'informazione di BookInstance inline nel dettaglio di Book aggiungendo le linee di codice in grassetto vicino a BookAdmin:

+ +
class BooksInstanceInline(admin.TabularInline):
+    model = BookInstance
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+    inlines = [BooksInstanceInline]
+
+ +

Ora vai a una vista per un libro nel tuo sito web: in basso ora dovresti vedere le istanze di libro relative a questo libro (immediatamente sotto i campi di genere del libro):Admin Site - Book with Inlines

+ +

In questo caso, tutto ciò che abbiamo fatto è dichiarare la nostra classe in linea tabellare, che aggiunge solo tutti i campi dal modello in linea. È possibile specificare tutti i tipi di informazioni aggiuntive per il layout, inclusi i campi da visualizzare, il loro ordine, se sono di sola lettura o meno, ecc. (Vedere TabularInline per ulteriori informazioni). 

+ +
+

Note: Ci sono una serie di limitazioni importanti in questa funzionalità! Nello screenshot qui sopra abbiamo tre istanze di libri esistenti, seguite da tre segnaposti per le nuove istanze di libri (che sembrano molto simili!). Sarebbe meglio NON avere istanze di libri di riserva per impostazione predefinita e aggiungerle semplicemente con un link Add another Book instance, o listare le BookInstance come link non leggibili da qui. La prima opzione può essere eseguita impostando l'attributo extra su 0 nel modello BooksInstanceInline, provalo tu stesso

+
+ +

Prova tu

+ +

Abbiamo imparato molto in questa sezione, quindi ora è il momento di provare alcune cose.

+ +
    +
  1. Per la list view di BookInstance, aggiungi un codice che permetta di mostrare libro, status, data di restituzione, e l'id (invece del testo di default restituito da __str__()).
    2. +
  2. Aggiungi una lista inline di oggetti Book inella scheda di dettaglio di Author usando lo stesso approccio che abbiamo utilizzato per Book/BookInstance.
    3. +
+ + + +

Sommario

+ +

Questo è tutto! Ora hai imparato come configurare il sito di amministrazione sia nella sua forma più semplice che migliorata, come creare un superutente e come navigare nel sito di amministrazione e visualizzare, eliminare e aggiornare i record. Lungo la strada hai creato un sacco di libri, pubblicazioni, generi e autori che saremo in grado di elencare e visualizzare una volta creati i nostri modelli e le nostre view.

+ +

Ulteriori letture

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}

+ +

In this module

+ + diff --git a/files/it/learn/server-side/django/authentication/index.html b/files/it/learn/server-side/django/authentication/index.html new file mode 100644 index 0000000000..a0e06c7252 --- /dev/null +++ b/files/it/learn/server-side/django/authentication/index.html @@ -0,0 +1,700 @@ +--- +title: 'Django Tutorial Part 8: User authentication and permissions' +slug: Learn/Server-side/Django/Authentication +tags: + - Articolo + - Forms + - Python + - Server + - Tutorial + - autenticazione + - django + - form + - sessione + - sessioni +translation_of: Learn/Server-side/Django/Authentication +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}
+ +

In questo tutorial ti mostreremo come consentire agli utenti di accedere al tuo sito con i propri account e come controllare cosa possono fare e vedere in base al fatto che abbiano effettuato l'accesso e le relative autorizzazioni. Come parte di questa dimostrazione, estenderemo il sito Web LocalLibrary, aggiungendo pagine di accesso e disconnessione e pagine specifiche per utente e personale per la visualizzazione di libri presi in prestito.

+ + + + + + + + + + + + +
Prerequisiti:Completare tutti i precedenti argomentioltre che il capitolo Django Tutorial Part 7: Sessions framework.
Obiettivi:Per capire come impostare e utilizzare l'autenticazione utente e le autorizzazioni.
+ +

Panoramica

+ +

Django fornisce un sistema di autenticazioni e permessi, costruito sulla base del framework delle sessioni discusso nel precedente tutorial, che consente di verificare le credenziali dell'utente e definire le azioni che ogni utente può eseguire. Il framework include modelli integrati per utenti e gruppi (un modo generico di applicare le autorizzazioni a più di un utente alla volta), permessi / flag che indicano se un utente può eseguire un'attività, formee viste per l'accesso degli utenti e strumenti di visualizzazione per limitare il contenuto.

+ +
+

Note: Secondo Django il sistema di autenticazione mira ad essere molto generico, e quindi non fornisce alcune funzionalità fornite in altri sistemi di autenticazione web. Le soluzioni per alcuni problemi comuni sono disponibili come pacchetti di terze parti. Ad esempio, limitazione dei tentativi di accesso e autenticazione contro terze parti (ad esempio OAuth).

+
+ +

In questa esercitazione ti mostreremo come abilitare l'autenticazione utente nel sito Web LocalLibrary, creare le tue pagine di accesso e di disconnessione, aggiungere autorizzazioni ai tuoi modelli e controllare l'accesso alle pagine. Useremo l'autenticazione / le autorizzazioni per visualizzare elenchi di libri presi in prestito sia per gli utenti che per i bibliotecari.

+ +

Il sistema di autenticazione è molto flessibile e, se lo desideri, puoi creare da zero URL, forms, viste e templates, basta chiamare l'API fornita per accedere all'utente.

+ +

Tuttavia, in questo articolo, utilizzeremo le viste di autenticazione "immagazzinate" in Django e i moduli per le nostre pagine di accesso e di disconnessione. Avremo ancora bisogno di creare alcuni modelli, ma è abbastanza facile. Ti mostreremo anche come creare le autorizzazioni e controllare lo stato e le autorizzazioni di accesso sia nelle viste che nei modelli.

+ +

Abilitare l'autenticazione

+ +

L'autenticazione è stata abilitata automaticamente (nel tutorial 2), quindi non è necessario fare altro in questo punto.

+ +
+

Note: La configurazione necessaria è stata fatta per noi quando abbiamo creato l'app utilizzando il comando startproject di django-admin. Le tabelle del database per gli utenti e le autorizzazioni del modello sono state create quando abbiamo inizialmente chiamato python manage.py migrate.

+
+ +

La configurazione è visibile nelle sezioni INSTALLED_APPS e MIDDLEWARE del file di progetto (locallibrary / locallibrary / settings.py), come mostrato di seguito:

+ +
INSTALLED_APPS = [
+    ...
+    'django.contrib.auth',  #Core authentication framework and its default models.
+    'django.contrib.contenttypes',  #Django content type system (allows permissions to be associated with models).
+    ....
+
+MIDDLEWARE = [
+    ...
+    'django.contrib.sessions.middleware.SessionMiddleware',  #Manages sessions across requests
+    ...
+    'django.contrib.auth.middleware.AuthenticationMiddleware',  #Associates users with requests using sessions.
+    ....
+
+ +

Creazione di utenti e gruppi

+ +

Hai già creato il tuo primo utente quando abbiamo consultato il sito di amministrazione di Django nel tutorial 4 (questo era un superutente, creato con il comando python manage.py createsuperuser). Il nostro superutente è già autenticato e ha tutte le autorizzazioni, quindi avremo bisogno di creare un utente di prova per rappresentare un utente normale del sito. Useremo il sito di amministrazione per creare i nostri gruppi locali e gli accessi al sito Web, poiché è uno dei modi più rapidi per farlo.

+ +
+

Note: Puoi anche creare utenti a livello di programmazione, come mostrato di seguito. Dovresti farlo, ad esempio, se sviluppi un'interfaccia per consentire agli utenti di iscriversi da soli (non si dovrebbe consentire agli utenti di accedere al sito di amministrazione).

+ +
from django.contrib.auth.models import User
+
+# Create user and save to the database
+user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword')
+
+# Update fields and then save again
+user.first_name = 'John'
+user.last_name = 'Citizen'
+user.save()
+
+
+ +

Di seguito creeremo prima un gruppo e poi un utente. Anche se non abbiamo ancora nessuna autorizzazione da aggiungere per i membri della nostra biblioteca, se è necessario in seguito, sarà molto più facile aggiungerli una volta al gruppo rispetto a ciascun membro. Avviare il server di sviluppo e accedere al sito di amministrazione nel proprio browser Web locale (http:/127.0.0.1:8000/admin/). Accedi al sito usando le credenziali per il tuo account superuser. Il livello principale del sito di amministrazione mostra tutti i tuoi modelli, ordinati per "Applicazione Django". Dalla sezione Autenticazione e autorizzazione, è possibile fare clic sui collegamenti Utenti o Gruppi per visualizzare i record esistenti.

+ +

Admin site - add groups or users

+ +

Creiamo un nuovo gruppo per i membri della libreria.

+ +
    +
  1. Fare clic sul pulsante Aggiungi (accanto a Gruppo) per creare un nuovo gruppo; inserire il nome "Membri libreria" per il gruppo.Admin site - add group
    2. +
  2. Non abbiamo bisogno di permessi per il gruppo, quindi basta premere SALVA (verrai indirizzato a un elenco di gruppi).
    3. +
+ +

Ora creiamo un utente:

+ +
    +
  1. Torna alla home page del sito admin.
    2. +
  2. Fai clic sul pulsante Aggiungi accanto a Utenti per aprire la finestra di dialogo Aggiungi utente.Admin site - add user pt1
    3. +
  3. Immettere un nome utente e una password / conferma appropriati per l'utente del test
    4. +
  4. Premi SALVA.
    +
    + Il sito di amministrazione creerà il nuovo utente e ti condurrà immediatamente a una schermata Cambia utente in cui è possibile modificare il nome utente e aggiungere informazioni per i campi facoltativi del modello Utente. Questi campi includono il nome, il cognome, l'indirizzo e-mail e lo stato e le autorizzazioni dell'utente (deve essere impostato solo il flag Attivo). Più in basso è possibile specificare i gruppi e le autorizzazioni dell'utente e visualizzare date importanti relative all'utente (ad esempio la data di iscrizione e l'ultima data di accesso).Admin site - add user pt2
    5. +
  5. Nella sezione Gruppi, seleziona Gruppo di membri della biblioteca dall'elenco di Gruppi disponibili, quindi premi la freccia destra tra le caselle per spostarlo nella casella Gruppi scelti.Admin site - add user to group
    6. +
  6. Non abbiamo bisogno di fare altro qui, quindi seleziona di nuovo SALVA, per andare alla lista degli utenti.
    7. +
+ +

Questo è tutto! Ora hai un account "membro della libreria normale" che potrai utilizzare per il test (una volta implementate le pagine per consentire loro di accedere).

+ +
+

Note: Dovresti provare a creare un altro utente membro della libreria. Inoltre, crea un gruppo per i bibliotecari e aggiungi un utente anche a quello!

+
+ +

Impostazione delle viste di autenticazione

+ +

Django fornisce quasi tutto ciò che è necessario per creare pagine di autenticazione per gestire login, logout e gestione delle password "out of the box". Ciò include un mappatore di URL, viste e forms, ma non include i template - dobbiamo creare il nostro! In questa sezione, mostreremo come integrare il sistema predefinito nel sito Web di LocalLibrary e creare i modelli. Li inseriremo negli URL principali del progetto.

+ +
+

Note: Non è necessario utilizzare alcun codice, ma è probabile che lo si desideri perché rende le cose molto più semplici. Dovrai quasi certamente cambiare il codice di gestione del modulo se cambi il tuo modello utente (un argomento avanzato!), Ma anche così, sarai comunque in grado di utilizzare le funzioni di visualizzazione in stock.

+
+ +
+

Note: In questo caso, potremmo inserire ragionevolmente le pagine di autenticazione, inclusi gli URL e i modelli, all'interno della nostra applicazione di catalogo. Tuttavia, se avessimo più applicazioni sarebbe meglio separare questo comportamento di accesso condiviso e renderlo disponibile su tutto il sito, è quello che faremo qui!

+
+ +

URL del progetto

+ +

Aggiungi quanto segue alla fine del file urls.py del progetto (locallibrary / locallibrary / urls.py):

+ +
#Add Django site authentication urls (for login, logout, password management)
+urlpatterns += [
+    path('accounts/', include('django.contrib.auth.urls')),
+]
+
+ +

Vai a http://127.0.0.1:8000/accounts/ (nota la barra finale in avanti!) E Django mostrerà un errore dicendo che non è stato in grado di trovare questo URL e elenca tutti gli URL che ha provato. Da questo puoi vedere gli URL che funzioneranno, ad esempio:

+ +
+

Note: Usando il metodo precedente si aggiungono i seguenti URL con i nomi tra parentesi quadre, che possono essere utilizzati per invertire i mapping degli URL. Non è necessario implementare nient'altro: la mappatura degli URL di cui sopra esegue automaticamente la mappatura degli URL sottostanti.

+ +
accounts/ login/ [name='login']
+accounts/ logout/ [name='logout']
+accounts/ password_change/ [name='password_change']
+accounts/ password_change/done/ [name='password_change_done']
+accounts/ password_reset/ [name='password_reset']
+accounts/ password_reset/done/ [name='password_reset_done']
+accounts/ reset/<uidb64>/<token>/ [name='password_reset_confirm']
+accounts/ reset/done/ [name='password_reset_complete']
+
+ +

Ora prova a navigare verso l'URL di accesso (http://127.0.0.1:8000/accounts/login/). Ciò fallirà di nuovo, ma con un errore che ti dice che ci manca il modello richiesto (registration / login.html) sul percorso di ricerca del modello. Vedrai le seguenti righe elencate nella sezione gialla in alto:

+ +
Exception Type:    TemplateDoesNotExist
+Exception Value:    registration/login.html
+ +

Il passo successivo è creare una directory di registrazione sul percorso di ricerca e quindi aggiungere il file login.html.

+ +

Directory template

+ +

Gli URL (e le viste implicite) che abbiamo appena aggiunto si aspettano di trovare i loro template associati in una directory /registration/ da qualche parte nel percorso di ricerca dei template. Per questo sito, inseriremo le nostre pagine HTML nella cartella templates / registration /. Questa directory dovrebbe essere nella directory principale del progetto, cioè nella stessa directory delle cartelle del catalogo e della localibrary). Si prega di creare queste cartelle ora.

+ +
+

Note: La struttura delle cartelle dovrebbe essere:
+ locallibrary (Django project folder)
+    |_catalog
+    |_locallibrary
+    |_templates (new)
+                 |_registration

+
+ +

Per rendere queste directory visibili al caricatore di template (ovvero per inserire questa directory nel percorso di ricerca del modello), aprire le impostazioni del progetto (/locallibrary/locallibrary/settings.py) e aggiornare la riga 'DIRS' della sezione TEMPLATES come mostrato.

+ +
TEMPLATES = [
+    {
+        ...
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
+        'APP_DIRS': True,
+        ...
+
+ +

Login template

+ +
+

Importante: I modelli di autenticazione forniti in questo articolo sono una versione molto semplice / leggermente modificata dei modelli di login dimostrativi di Django. Potrebbe essere necessario personalizzarli per uso personale!

+
+ +

Crea un nuovo file HTML chiamato /locallibrary/templates/registration/login.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+
+{% if form.errors %}
+  <p>Your username and password didn't match. Please try again.</p>
+{% endif %}
+
+{% if next %}
+  {% if user.is_authenticated %}
+    <p>Your account doesn't have access to this page. To proceed,
+    please login with an account that has access.</p>
+  {% else %}
+    <p>Please login to see this page.</p>
+  {% endif %}
+{% endif %}
+
+<form method="post" action="{% url 'login' %}">
+{% csrf_token %}
+<table>
+
+<tr>
+  <td>\{{ form.username.label_tag }}</td>
+  <td>\{{ form.username }}</td>
+</tr>
+
+<tr>
+  <td>\{{ form.password.label_tag }}</td>
+  <td>\{{ form.password }}</td>
+</tr>
+</table>
+
+<input type="submit" value="login" />
+<input type="hidden" name="next" value="\{{ next }}" />
+</form>
+
+{# Assumes you setup the password_reset view in your URLconf #}
+<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
+
+{% endblock %}
+ +

Questo modello condivide alcune somiglianze con quelli che abbiamo visto prima: estende il nostro template di base e sovrascrive il blocco del contenuto. Il resto del codice è un codice di gestione della forma abbastanza standard, di cui parleremo in un successivo tutorial. Tutto quello che devi sapere per ora è che questo mostrerà un modulo in cui puoi inserire il tuo nome utente e password, e che se inserisci valori non validi ti verrà chiesto di inserire valori corretti quando la pagina si aggiorna.

+ +

Naviga indietro alla login page (http://127.0.0.1:8000/accounts/login/) una volta salvato il modello, dovresti vedere qualcosa del genere:

+ +

Library login page v1

+ +

Se si tenta di accedere con esito positivo l'utente verrà reindirizzato a un'altra pagina (per impostazione predefinita sarà questa http://127.0.0.1:8000/accounts/profile/). Il problema qui è che, per impostazione predefinita, Django si aspetta che dopo l'accesso si desideri essere indirizzati a una pagina del profilo, che può essere o non essere il caso. Poiché non hai ancora definito questa pagina, riceverai un altro errore!

+ +

Apri le impostazioni del progetto (/locallibrary/locallibrary/settings.py) e aggiungi il testo in basso alla fine. Ora quando accedi devi essere reindirizzato alla homepage del sito per impostazione predefinita.

+ +
# Redirect to home URL after login (Default redirects to /accounts/profile/)
+LOGIN_REDIRECT_URL = '/'
+
+ +

Logout template

+ +

Se navighi verso l'URL di disconnessione (http://127.0.0.1:8000/accounts/logout/), vedrai qualche comportamento strano: l'utente verrà disconnesso, ma sarai indirizzato pagina di logout dell'Amministratore. Non è quello che vuoi, se non altro perché il link di accesso su quella pagina ti porta alla schermata di accesso dell'amministratore (e questo è disponibile solo per gli utenti che hanno il permesso is_staff).

+ +

Crea e apri /locallibrary/templates/registration/logged_out.html. Copia il testo qui sotto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <p>Logged out!</p>
+  <a href="{% url 'login'%}">Click here to login again.</a>
+{% endblock %}
+ +

Questo modello è molto semplice. Visualizza semplicemente un messaggio che informa che sei stato disconnesso e fornisce un collegamento che puoi premere per tornare alla schermata di accesso. Se vai di nuovo all'URL di logout dovresti vedere questa pagina:

+ +

Library logout page v1

+ +

Password reset templates

+ +

Il sistema di reimpostazione della password predefinito utilizza la posta elettronica per inviare all'utente un link di ripristino. È necessario creare moduli per ottenere l'indirizzo e-mail dell'utente, inviare l'e-mail, consentire loro di immettere una nuova password e prendere nota del completamento dell'intero processo.

+ +

I seguenti modelli possono essere utilizzati come punto di partenza.

+ +

Password reset form

+ +

Questo è il modulo utilizzato per ottenere l'indirizzo e-mail dell'utente (per inviare l'e-mail di reimpostazione della password). Crea /locallibrary/templates/registration/password_reset_form.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <form action="" method="post">
+  {% csrf_token %}
+  {% if form.email.errors %}
+    \{{ form.email.errors }}
+  {% endif %}
+      <p>\{{ form.email }}</p>
+    <input type="submit" class="btn btn-default btn-lg" value="Reset password">
+  </form>
+{% endblock %}
+
+ +

Password reset eseguito

+ +

Questo modulo viene visualizzato dopo che il tuo indirizzo email è stato raccolto. Crea /locallibrary/templates/registration/password_reset_done.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <p>We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.</p>
+{% endblock %}
+
+ +

Password reset email

+ +

Questo modello fornisce il testo dell'email HTML contenente il link di ripristino che invieremo agli utenti. Crea /locallibrary/templates/registration/password_reset_email.html e dagli il seguente contenuto:

+ +
Someone asked for password reset for email \{{ email }}. Follow the link below:
+\{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
+
+ +

Password reset confirm

+ +

Questo modello fornisce il testo dell'email HTML contenente il link di ripristino che invieremo agli utenti. Crea /locallibrary/templates/registration/password_reset_email.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+    {% if validlink %}
+        <p>Please enter (and confirm) your new password.</p>
+        <form action="" method="post">
+        {% csrf_token %}
+            <table>
+                <tr>
+                    <td>\{{ form.new_password1.errors }}
+                        <label for="id_new_password1">New password:</label></td>
+                    <td>\{{ form.new_password1 }}</td>
+                </tr>
+                <tr>
+                    <td>\{{ form.new_password2.errors }}
+                        <label for="id_new_password2">Confirm password:</label></td>
+                    <td>\{{ form.new_password2 }}</td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><input type="submit" value="Change my password" /></td>
+                </tr>
+            </table>
+        </form>
+    {% else %}
+        <h1>Password reset failed</h1>
+        <p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p>
+    {% endif %}
+{% endblock %}
+
+ +

Password reset completato

+ +

Questo è l'ultimo modello di reimpostazione della password, che viene visualizzato per avvisarti quando la reimpostazione della password è riuscita. Crea /locallibrary/templates/registration/password_reset_complete.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>The password has been changed!</h1>
+  <p><a href="{% url 'login' %}">log in again?</a></p>
+{% endblock %}
+ +

Testare la nuova pagina di autenticazione

+ +

Ora che hai aggiunto la configurazione dell'URL e creato tutti questi modelli, le pagine di autenticazione ora dovrebbero funzionare!

+ +

Puoi testare le nuove pagine di autenticazione usando questi URL:

+ + + +

Sarai in grado di testare la funzionalità di reimpostazione della password dal link nella pagina di accesso. Tieni presente che Django invierà solo e-mail di ripristino a indirizzi (utenti) già memorizzati nel suo database!

+ +
+

Note: Il sistema di reimpostazione della password richiede che il tuo sito Web supporti la posta elettronica, che va oltre lo scopo di questo articolo, quindi questa parte non funzionerà ancora. Per consentire il test, inserisci la seguente riga alla fine del tuo file settings.py. Questo registra tutte le e-mail inviate alla console (in questo modo è possibile copiare il link per la reimpostazione della password dalla console).

+ +
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+
+ +

Vedi Servizi email (Django docs).

+
+ +

Test verso utenti autenticati

+ +

Questa sezione esamina cosa possiamo fare per controllare selettivamente il contenuto che l'utente vede in base al fatto che sia connesso o meno.

+ +

Testing nei templates

+ +

Puoi ottenere informazioni sull'utente attualmente connesso nei modelli con la variabile di modello \{{user}} (questo viene aggiunto al contesto del modello per impostazione predefinita quando imposti il progetto come abbiamo fatto nel nostro scheletro).

+ +

In genere testerai innanzitutto la variabile di modello \{{user.is_authenticated}} per determinare se l'utente è idoneo a vedere contenuti specifici. Per dimostrarlo, aggiorneremo la nostra barra laterale per visualizzare un collegamento "Accedi" se l'utente è disconnesso e un collegamento "Disconnetti" se sono connessi.

+ +

Apri il template (/locallibrary/catalog/templates/base_generic.html) e copia il seguente testo nel blocco della barra laterale, immediatamente prima del tag endblock.

+ +
  <ul class="sidebar-nav">
+
+    ...
+
+   {% if user.is_authenticated %}
+     <li>User: \{{ user.get_username }}</li>
+     <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
+   {% else %}
+     <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
+   {% endif %} 
+  </ul>
+ +

Come puoi vedere, utilizziamo i tag if-else-endif per visualizzare in modo condizionale il testo in base al fatto che \{{user.is_authenticated}} sia vero. Se l'utente è autenticato, sappiamo che abbiamo un utente valido, quindi chiamiamo \{{user.get_username}} per visualizzare il loro nome.

+ +

Creiamo gli URL di collegamento di accesso e di disconnessione utilizzando il tag URL e i nomi delle rispettive configurazioni di URL. Nota anche come abbiamo aggiunto ?next=\{{request.path}}. Ciò che fa è aggiungere un parametro URL next contenente l'indirizzo (URL) della pagina corrente, alla fine dell'URL collegato. Dopo che l'utente ha effettuato correttamente l'accesso / uscita, le viste useranno questo valore "next" per reindirizzare l'utente alla pagina in cui hanno prima fatto clic sul collegamento login / logout.

+ +
+

Note: Provalo! Se ti trovi nella home page e fai clic su Accedi / Esci nella barra laterale, dopo il completamento dell'operazione dovresti tornare alla stessa pagina.

+
+ +

Testing nelle views

+ +

Se si utilizzano le viste basate sulle funzioni, il modo più semplice per limitare l'accesso alle funzioni è applicare il decoratore login_required alla funzione di visualizzazione, come mostrato di seguito. Se l'utente ha effettuato l'accesso, il codice di visualizzazione verrà eseguito normalmente. Se l'utente non ha effettuato l'accesso, verrà reindirizzato all'URL di accesso definito nelle impostazioni del progetto (settings.LOGIN_URL), passando il percorso assoluto corrente come parametro successivo. Se l'utente riesce ad accedere, verrà riportato a questa pagina, ma questa volta autenticato.

+ +
from django.contrib.auth.decorators import login_required
+
+@login_required
+def my_view(request):
+    ...
+ +
+

Note: Puoi fare lo stesso genere di cose manualmente testando su request.user.is_authenticated, ma il decoratore è molto più conveniente!

+
+ +

Analogamente, il modo più semplice per limitare l'accesso agli utenti che hanno eseguito l'accesso nelle viste basate su classi è derivare da LoginRequiredMixin. Devi dichiarare questo mixin nella prima lista della superclasse, prima della classe della vista principale.

+ +
from django.contrib.auth.mixins import LoginRequiredMixin
+
+class MyView(LoginRequiredMixin, View):
+    ...
+ +

È inoltre possibile specificare un percorso alternativo per reindirizzare l'utente se non sono autenticati (login_url) e un nome parametro URL invece di "next" per inserire il percorso assoluto corrente (redirect_field_name).

+ +
class MyView(LoginRequiredMixin, View):
+    login_url = '/login/'
+    redirect_field_name = 'redirect_to'
+
+ +

Per informazioni ulteriori, consultare Django docs here.

+ +

Esempio — Elencare i libri correnti dello user

+ +

Ora che sappiamo come limitare una pagina a un particolare utente, creiamo una vista dei libri che l'utente corrente ha preso in prestito.

+ +

Sfortunatamente, non abbiamo ancora modo per gli utenti di prendere in prestito libri! Quindi, prima di poter creare l'elenco dei libri, estenderemo innanzitutto il modello BookInstance per supportare il concetto di prestito e utilizzare l'applicazione Django Admin per prestare diversi libri al nostro utente di test.

+ +

Models

+ +

Innanzitutto, dovremo rendere possibile agli utenti un prestito di BookInstance (abbiamo già uno stato e una data di scadenza, ma non abbiamo ancora alcuna associazione tra questo modello e un utente. creane uno usando un campo ForeignKey (uno-a-molti). Abbiamo anche bisogno di un meccanismo semplice per verificare se un libro in prestito è in ritardo.

+ +

Apri catalog/models.py, ed importa il modello User model da django.contrib.auth.models:

+ +
from django.contrib.auth.models import User
+
+ +

Successivamente, aggiungi il campo del mutuatario al modello BookInstance:

+ +
borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True)
+
+ +

Mentre siamo qui, aggiungiamo una property che possiamo chiamare dai nostri modelli per capire se una determinata istanza di un libro è in ritardo. Mentre potremmo calcolare questo nel modello stesso, usare una proprietà come mostrato di seguito sarà molto più efficiente.

+ +

Aggiungi questo da qualche parte vicino alla parte superiore del file:

+ +
from datetime import date
+ +

Ora aggiungi la seguente definizione di proprietà alla classe BookInstance:

+ +
@property
+def is_overdue(self):
+    if self.due_back and date.today() > self.due_back:
+        return True
+    return False
+ +
+

Note: Verifichiamo se due_back è vuoto prima di fare un confronto. Un campo vuoto forza Django a lanciare un errore invece di mostrare la pagina: i valori vuoti non sono confrontabili. Questo non è qualcosa che vorremmo far provare ai nostri utenti!

+
+ +

Ora che abbiamo aggiornato i nostri modelli, dovremo effettuare nuove migrazioni sul progetto e quindi applicare tali migrazioni:

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+
+ +

Admin

+ +

Ora apri il catalogo/admin.py e aggiungi il campo del mutuatario alla classe BookInstanceAdmin sia in list_display che in fielsets, come mostrato di seguito. Questo renderà il campo visibile nella sezione Amministrazione, permettendoci di assegnare un Utente a una BookInstance quando necessario.

+ +
@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_display = ('book', 'status', 'borrower', 'due_back', 'id')
+    list_filter = ('status', 'due_back')
+
+    fieldsets = (
+        (None, {
+            'fields': ('book','imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back','borrower')
+        }),
+    )
+ +

Prestiamo qualche libro

+ +

Ora che è possibile noleggiare libri a un utente specifico, vai a prestare un certo numero di record su BookInstance. Imposta il campo preso in prestito all'utente di test, imposta lo stato "In prestito" e imposta le scadenze sia nel futuro che nel passato.

+ +
+

Note: Non spiegheremo nuovamente il processo, poiché sai già come utilizzare il sito di amministrazione!

+
+ +

View dei prestiti

+ +

Ora aggiungeremo una vista per ottenere l'elenco di tutti i libri che sono stati prestati all'utente corrente. Useremo la stessa visualizzazione di elenco generica basata sulla classe che conosciamo, ma questa volta importeremo e deriverà da LoginRequiredMixin, in modo che solo un utente che ha effettuato l'accesso possa chiamare questa vista. Scegliamo anche di dichiarare un template_name, piuttosto che usare l'impostazione predefinita, perché potremmo finire per avere alcuni elenchi diversi di record di BookInstance, con visualizzazioni e modelli diversi.

+ +

Aggiungi quanto segue al catalog/views.py:

+ +
from django.contrib.auth.mixins import LoginRequiredMixin
+
+class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
+    """Generic class-based view listing books on loan to current user."""
+    model = BookInstance
+    template_name ='catalog/bookinstance_list_borrowed_user.html'
+    paginate_by = 10
+
+    def get_queryset(self):
+        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')
+ +

Per limitare la nostra query solo agli oggetti BookInstance per l'utente corrente, re-implementiamo get_queryset () come mostrato sopra. Si noti che "o" è il codice memorizzato per "in prestito" e ordiniamo per data di restituzione, in modo che gli elementi più vecchi vengano visualizzati per primi.

+ +

Conf. URL per libri in prestito

+ +

Ora apri /catalog/urls.py e aggiungi un path() che punta alla vista precedente (puoi semplicemente copiare il testo qui sotto alla fine del file).

+ +
urlpatterns += [
+    path('mybooks/', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'),
+]
+ +

Template per i libri in prestito

+ +

Ora, tutto ciò che dobbiamo fare per questa pagina è aggiungere un template. Per prima cosa, crea il file template /catalog/templates/catalog/bookinstance_list_borrowed_user.html e dagli il seguente contenuto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+    <h1>Borrowed books</h1>
+
+    {% if bookinstance_list %}
+    <ul>
+
+      {% for bookinst in bookinstance_list %}
+      <li class="{% if bookinst.is_overdue %}text-danger{% endif %}">
+        <a href="{% url 'book-detail' bookinst.book.pk %}">\{{bookinst.book.title}}</a> (\{{ bookinst.due_back }})
+      </li>
+      {% endfor %}
+    </ul>
+
+    {% else %}
+      <p>There are no books borrowed.</p>
+    {% endif %}
+{% endblock %}
+ +

Questo modello è molto simile a quelli che abbiamo creato precedentemente per gli oggetti Libro e Autore. L'unica cosa "nuova" qui è che controlliamo il metodo che abbiamo aggiunto nel modello (bookinst.is_overdue) e lo usiamo per cambiare il colore degli elementi scaduti.

+ +

Quando il server di sviluppo è in esecuzione, dovresti essere in grado di visualizzare l'elenco per un utente che ha effettuato l'accesso nel tuo browser all'indirizzo http://127.0.0.1:8000/catalog/mybooks/. Provalo con il tuo utente loggato e disconnesso (nel secondo caso, dovresti essere reindirizzato alla pagina di login).

+ +

Aggiungi l'elenco alla barra laterale

+ +

L'ultimo passo è aggiungere un link per questa nuova pagina nella barra laterale. Inseriremo questo nella stessa sezione in cui vengono visualizzate altre informazioni per l'utente che ha effettuato l'accesso. Aprire il modello di base (/locallibrary/catalog/templates/base_generic.html) e aggiungere la linea in grassetto alla barra laterale come mostrato.

+ +
 <ul class="sidebar-nav">
+   {% if user.is_authenticated %}
+   <li>User: \{{ user.get_username }}</li>
+   <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li>
+   <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
+   {% else %}
+   <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
+   {% endif %}
+ </ul>
+
+ +

Che cosa vedo?

+ +

Quando un utente ha effettuato l'accesso, vedrà il link I miei prestiti nella barra laterale e l'elenco dei libri visualizzati come segue (il primo libro non ha una data di scadenza, che è un bug che speriamo di risolvere in un tutorial successivo!).

+ +

Library - borrowed books by user

+ +

Permessi

+ +

Le autorizzazioni sono associate ai modelli e definiscono le operazioni che possono essere eseguite su un'istanza del modello da un utente che dispone dell'autorizzazione. Per impostazione predefinita, Django aggiunge automaticamente autorizzazioni di aggiunta, modifica ed eliminazione a tutti i modelli, che consentono agli utenti con le autorizzazioni di eseguire le azioni associate tramite il sito di amministrazione. È possibile definire le proprie autorizzazioni per i modelli e concederle ad utenti specifici. È inoltre possibile modificare le autorizzazioni associate a diverse istanze dello stesso modello.

+ +

I test sulle autorizzazioni nelle viste e nei modelli sono quindi molto simili per il test sullo stato di autenticazione (e infatti, il test per un'autorizzazione verifica anche l'autenticazione).

+ +

Models

+ +

Dfeinire permessi è un'azione svolta tramite la sezione "class Meta", utilizzando il campo permissions. È possibile specificare tutte le autorizzazioni necessarie in una tupla, ogni autorizzazione viene definita in una tupla nidificata contenente il nome di autorizzazione e il valore di visualizzazione delle autorizzazioni. Ad esempio, potremmo definire un'autorizzazione per consentire a un utente di contrassegnare che un libro è stato restituito come mostrato:

+ +
class BookInstance(models.Model):
+    ...
+    class Meta:
+        ...
+        permissions = (("can_mark_returned", "Set book as returned"),)
+ +

Potremmo quindi assegnare l'autorizzazione a un gruppo "Bibliotecario" nel sito di amministrazione. Apri il catalogo / models.py e aggiungi l'autorizzazione come mostrato sopra. Dovrai rieseguire le tue migrazioni (esegui python3 manage.py makemigrations e python3 manage.py migrate) per aggiornare il database.

+ +

Templates

+ +

I permessi correnti di un utente sono storati in una variabile \{{ perms }}. Puoi verificare se l'utente corrente ha un permesso particolare usando il nome specifico della variabile all'interno della "app" Django associata, ad es. \{{ perms.catalog.can_mark_returned }} sarà True se lo user ha i permessi, e False altrimenti. Tipicamente testiamo i permessi utilizzando il tag {% if %} come mostrato:

+ +
{% if perms.catalog.can_mark_returned %}
+    <!-- We can mark a BookInstance as returned. -->
+    <!-- Perhaps add code to link to a "book return" view here. -->
+{% endif %}
+
+ +

Views

+ +

Le autorizzazioni possono essere verificate nella funzione vista utilizzando il decoratore permission_required o in una visualizzazione basata su classi che utilizza PermissionRequiredMixin. Lo schema e il comportamento sono gli stessi dell'autenticazione di accesso, anche se, naturalmente, è possibile che sia necessario aggiungere multiple autorizzazioni.

+ +

Decoratore:

+ +
from django.contrib.auth.decorators import permission_required
+
+@permission_required('catalog.can_mark_returned')
+@permission_required('catalog.can_edit')
+def my_view(request):
+    ...
+ +

Views.

+ +
from django.contrib.auth.mixins import PermissionRequiredMixin
+
+class MyView(PermissionRequiredMixin, View):
+    permission_required = 'catalog.can_mark_returned'
+    # Or multiple permissions
+    permission_required = ('catalog.can_mark_returned', 'catalog.can_edit')
+    # Note that 'catalog.can_edit' is just an example
+    # the catalog application doesn't have such permission!
+ +

Esempio

+ +

Non aggiorneremo la LocalLibrary qui; forse nel prossimo tutorial!

+ +

Prova tu

+ +

In precedenza in questo articolo, vi abbiamo mostrato come creare una pagina per l'utente corrente che elenca i libri che hanno preso in prestito. La sfida ora è creare una pagina simile che sia visibile solo per i bibliotecari, che mostri tutti i libri presi in prestito e che includa il nome di ciascun mutuatario.

+ +

Dovresti essere in grado di seguire lo stesso schema dell'altra vista. La differenza principale è che dovrai limitare la visualizzazione solo ai bibliotecari. Puoi farlo a seconda che l'utente sia un membro del personale (decoratore di funzioni: staff_member_required, template variabile: user.is_staff) ma ti raccomandiamo invece di utilizzare il permesso can_mark_returned e PermissionRequiredMixin, come descritto sopra nella sezione precedente.

+ +
+

Importante: Ricordati di non utilizzare il superutente per i test basati sulle autorizzazioni (i controlli delle autorizzazioni restituiscono sempre true per i superutenti, anche se non è ancora stata definita un'autorizzazione!). Invece, crea un utente di libreria e aggiungi il permesso richiesto.

+
+ +

Quando hai finito, la tua pagina dovrebbe apparire come lo screenshot qui sotto.

+ +

All borrowed books, restricted to librarian

+ + + +

Sommario

+ +

Lavoro eccellente: ora hai creato un sito Web in cui i membri della biblioteca possono accedere e visualizzare il proprio contenuto e che i bibliotecari (con il permesso corretto) possono utilizzare per visualizzare tutti i libri in prestito ei loro mutuatari. Al momento stiamo ancora solo visualizzando i contenuti, ma gli stessi principi e tecniche sono utilizzati quando si desidera iniziare a modificare e aggiungere dati.

+ +

Nel nostro prossimo articolo, vedremo come è possibile utilizzare i moduli di Django per raccogliere input dell'utente e quindi iniziare a modificare alcuni dei nostri dati memorizzati.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}

+ +

 

+ +

In questo modulo

+ + + +

 

diff --git a/files/it/learn/server-side/django/development_environment/index.html b/files/it/learn/server-side/django/development_environment/index.html new file mode 100644 index 0000000000..75d6cd9ffb --- /dev/null +++ b/files/it/learn/server-side/django/development_environment/index.html @@ -0,0 +1,415 @@ +--- +title: Impostazione ambiente di sviluppo per Django +slug: Learn/Server-side/Django/development_environment +tags: + - Ambiente di sviluppo + - Intro + - Principiante + - Python + - django +translation_of: Learn/Server-side/Django/development_environment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
+ +

Ora che sai a cosa serve Django, ti mostreremo come creare e testare un ambiente di sviluppo per Django su Windows, Linux (Ubuntu), e macOS — qualsiasi sistema operativo, comune, tu stia usando, questo articolo ti darà tutto il necessario per iniziare a sviluppare applicazioni Django.

+ + + + + + + + + + + + +
Prerequisiti:Saper aprire un terminale / linea di comando. Saper installare un pacchetto software sul tuo sistema operativo.
Obiettivo:Avere un ambiente di sviluppo per Django (2.0) sul tuo computer.
+ +

Panoramica sull'ambiente di sviluppo per Django

+ +

Django rende molto semplice impostare il tuo computer per iniziare lo sviluppo di web application. Questa sezione spiega cosa avrai nel tuo ambiente di sviluppo, e fornirà una panoramica delle possibili impostazioni e configurazioni. Il resto dell'articolo spiega il metodo raccomandato per installare l'ambiente di sviluppo di Django su Ubuntu, macOS, e Windows, ed infine come testarlo.

+ +

Cosa è l'ambiente di sviluppo Django?

+ +

L'ambiente di sviluppo è un'installazione di Django sul tuo computer che puoi usare per sviluppare e testare applicazioni Django prima di metterle in ambiente di produzione.

+ +

Gli strumenti principali che Django fornisce sono una serie di script Python per creare e lavorare sui progetti Django, insieme ad un semplice webserver di sviluppo che puoi usare per testare localmente (ad es. sul tuo computer, non su un web server esterno) le applicazione web di Django usando un browser sul tuo computer.

+ +

Ci sono altri strumenti periferici, che formano l'ambiente di sviluppo, che non tratteremo qui. Questi includono cose come editor di testo o IDE per modificare il codice, e uno strumento per gestire il controllo di versione come Git per gestire in modo affidabile differenti versioni del tuo codice. Assumiamo che tu abbia già un editor di testo installato.

+ +

Quali sono le opzioni di setup di Django?

+ +

Django è estremamente flessibile in termni di come e dove può essere installato e configurato. Django può essere:

+ + + +

Ognuna di queste opzioni richiede configurazioni e setup leggermente diverse. La seguente sottosezione spiega alcune di queste possibilità. Per il resto dell'articolo mostreremo come impostare Django in un piccolo numero di sistemi operativi, e questo setup sarà assunto valido per tutto il modulo.

+ +
+

Nota: Altri possbili metodi di installazione sono descritti nella documentazione ufficiale di Django. Diamo i link al documento appropriato più avanti.

+
+ +

Quali sistemi operativi sono supportati?

+ +

Le applicazioni Django possono essere eseguite su quasi tutte le macchine che possono eseguire il linguaggio Python 3: Windows, macOS, Linux/Unix, Solaris, per nominarne alcuni. Quasi tutti i computer hanno le caratteristiche per eseguire Django durante lo sviluppo.

+ +

In questo articolo tratteremo dei casi Windows, macOS, e Linux/Unix.

+ +

Quale versione di Python dovrei usare?

+ +

Django esegue sopra Python, e può essere usato sia con Python 2 o Python 3 (o entrambi). Quando scegli una versione devi stare attento che:

+ + + + + +
+

Nota: Storicamente Python 2 era la scelta più realistica, perché poche delle librerie di terze parti erano disponibili per Python 3. Il trend corrente è che molti dei nuovi package su Python Package Index (PyPi) supportano entrambe le versioni di Python. Mentre esistono ancora moli package che sono disponibili esclusivamente per  Python 2, scegliere Python 3 è ora una scelta fattibile.

+
+ +

Ti raccomandiamo di usare l'ultima versione di Python 3 a meno che il sito non dipenda da librerie di terze parti disponibili solo per Python 2.

+ +

Questo articolo spiegherà come installare un ambiente per Python 3 (il setup equivalente per Python 2 dovrebbe essere molto simile).

+ +

Dove posso scaricare Django?

+ +

Ci sono tre posti dove scaricare Django:

+ + + +

Questo articolo mostra come installare Django da PyPi, in modo da avere l'ultima versione stabile.

+ +

Quale database?

+ +

Django supporta 4 database principali (PostgreSQL, MySQL, Oracle e SQLite), e ci sono librerie che forniscono vari livelli di supporto ai più popolari  database SQL e NOSQL. Ti raccomandiamo di scegliere lo stesso database in sviluppo e in produzione (nonostante Django astragga le differenze tra i database usando il suo Object-Relational Mapper (ORM), ci sono potenziali problemi che è bene evitare).

+ +

Per questo articolo (e molti altri di questo modulo) useremo SQLite,che memorizza i dati in un file. SQLite è da intendersi come un database leggero senza supporto per un alto livello di concorrenza. Tutta via è una scelta eccellente per applicazioni  che fanno principalmente sola lettura.

+ +
+

Nota: Django è configurato per usare SQLite di default quando fai partire il tuo progetto usando gli strumenti standard (django-admin).  E' una scelta ottima quando stai iniziando perchè non necessita di configurazioni. 

+
+ +

Installare da sistema o in un ambiente virtuale di Python?

+ +

Quando installi Python 3 sul tuo computer hai un singolo ambiente globale (inteso come insieme di pacchetti installati) per il tuo codice Python, che puoi gestire usando pip3. Puoi installare qualsiasi pacchetto Python tu voglia, ma puoi installarne solo una certa versione alla volta. Questo vuol dire che ogni cambiamento che fai in una applicazione Python potenzialmente può aver effetto sulle altre, e quindi puoi avere una sola versione di Django alla volta.

+ +

Sviluppatori Python/Django con un po di esperienza spesso decidono di eseguire le loro applicazioni in un ambiente Python virtuale. Questo permette a gli sviluppatori di avere diversi ambienti di Django in un singolo computer, permettendogli di creare nuovi siti web (usando l'ultima versione corrente di Django) mentre mantengono siti web che fanno affidamento a versioni più vecchie. Gli sviluppatori del team di Django raccomandano di usare questi ambienti virtuali!

+ +

Quando si sta iniziando l'approccio iniziale che usate non è importante. Sebbene l'installazione sia un po' più facile, abbiamo deciso di mostrarti come installare Django direttamente sul Python 3 di sistema.

+ +
+

Importante: Il resto dell'articolo mostra come impostare Django in un ambiente con Python 3, su Ubuntu Linux, Mac OS X, e Windows 10.

+
+ +

Installare Python 3

+ +

Per usare Django devi installare Python 3 sul tuo sistema operativo. Avrai bisogno anche di Python Package Index  — pip3 — che viene usato per gestire (installare, aggiornare, e rimuovere) package/librerie Python usate da Django altre tue applicazioni Python.

+ +

Questa sezione mostra brevemente come puoi controllare quali versioni sono presenti, e se necessario installare una nuova versione, per Ubuntu Linux 16.04, Mac OS X, e Windows 10.

+ +
+

Nota: In base alla tua piattaforma, potrebbe essere possibile installare Python/pip dal gestore di pacchetti del sistema operativo o tramite altri meccanismi. Per molte piattaforme puoi scaricare i file di installazione da https://www.python.org/downloads/ usando le istruzioni per il vostro sistema operativo.

+
+ +

Ubuntu 16.04

+ +

Ubuntu Linux include Python 3 di default. Puoi aver conferma di questo eseguendo il seguente comando nel terminale bash:

+ +
python3 -V
+ Python 3.5.2
+ +

Tuttavia il Python Package Index di cui hai bisogno per installare package Python 3 (incluso Django)  non è disponibile di default. Puoi installare pip3 dal terminale bash usando:

+ +
sudo apt-get install python3-pip
+
+ +

Mac OS X

+ +

Mac OS X "El Capitan" non include Python 3. Puoi averne conferma eseguendo il seguente comando nel terminale bash:

+ +
python3 -V
+ -bash: python3: command not found
+ +

Puoi installare facilmente Python 3 (inseme a pip3) da python.org:

+ +
    +
  1. Scarica l'installer: +
      +
    1. Vai su https://www.python.org/downloads/
      2. +
    2. Seleziona Download Python 3.5.2 (il minor del numero di versione esatto può essere differente).
      3. +
    +
    2. +
  2. Cercare il file usando Finder, fai doppio-click sul file. Segui le istruzioni dell'installazione.
    3. +
+ +

Per essere sicuro della corretta installazione di Python 3:

+ +
python3 -V
+ Python 3.5.20
+
+ +

Similmente puoi controllare che pip3 sia installato guardando i package disponibili:

+ +
pip3 list
+ +

Windows 10

+ +

Windows non include Python di default, ma puoi installarlo facilmente (insieme a pip3) da python.org:

+ +
    +
  1. Scarica l'installer: +
      +
    1. Vai su https://www.python.org/downloads/
      2. +
    2. Seleziona Download Python 3.5.2 (il minor del numero di versione esatto può essere differente).
      3. +
    +
    2. +
  2. Installa Python facendo double-click sul file scaricato e segui le istruzioni
    3. +
+ +

Puoi verificare che Python sia stato installato correttamente digitando sulla linea di comando:

+ +
py -3 -V
+ Python 3.5.2
+
+ +

L'installer di Windows contiene pip3 (Python package manager) di default. Puoi vedere la lista dei pacchetti installati usando:

+ +
pip3 list
+
+ +
+

Nota: L'installer dovrebbe essere impostato ovunque tu voglia, perché il comando di sopra funzioni. Se tuttavia dovessi ottenere un messaggio che Python non può essere trovato, potresti aver dimenticato di aggiungerlo al path di sistema. Puoi farlo eseguendo di nuovo l'installer, scegliendo "Modify" e selezionando "Add Pyhton to environment variables" nella seconda pagina.

+
+ +

Utilizzare Django all'interno di un ambiente virtuale Python

+ +

Le librerie che useremo per la creazione dei nostri ambienti virtuali sono virtualenvwrapper (Linux e macOS) e virtualenvwrapper-win (Windows), che a loro volta utilizzano entrambi il tool virtualenv. Gli strumenti wrapper creano un'interfaccia coerente per gestire interfacce su tutte le piattaforme.

+ +

Installare il software virtual environment

+ +

Setup del virtual environment su Ubuntu

+ +

Dopo l'installazione di Python e pip puoi installare virtualenvwrapper (che comprende virtualenv). La guida ufficiale di installazione si può trovare qui, oppure seguire le istruzioni sotto.

+ +

Installare il tool utilizzando pip3:

+ +
sudo pip3 install virtualenvwrapper
+
+ +

Poi aggiungi le seguenti linee alla fine del tuo file di startup della shell (questo è un file nascosto chiamato .bashrc nella tua directory home). Questo imposta la posizione in cui dovrebbero vivere i virtual environment, la posizione delle tue directory di sviluppo dei progetti e la posizione dello script installato con questo pacchetto:

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+
+ +
+

Nota: Le variabili VIRTUALENVWRAPPER_PYTHON e VIRTUALENVWRAPPER_VIRTUALENV_ARGS puntano alla posizione di installazione normale per Python3, e source /usr/local/bin/virtualenvwrapper.sh punta alla posizione normale dello script virtualenvwrapper.sh. Se il virtualenv non funziona quando lo si testa, una cosa da controllare è che Python e lo script siano nella posizione attesa (e quindi modificare il file di startup adeguatamente).
+
+ Puoi trovare le posizioni corrette per il tuo sistema utilizzando i comandi which virtualenvwrapper.sh e which python3.

+
+ +

Poi ricarica il file di startup eseguendo il seguente comando nel terminale:

+ +
source ~/.bashrc
+ +

A questo punto si dovrebbe vedere un blocco di script che viene eseguito come mostrato sotto:

+ +
virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
+ +

Ora puoi creare un nuovo ambiente virtuale con il comando mkvirtualenv.

+ +

Setup di un ambiente virtuale su macOS

+ +

Impostare un virtualenvwrapper su macOS è quasi esattamente la stessa cosa che su Ubuntu (ancora una volta, si possono seguire le istruzioni o della guida official installation oppure quelle qui sotto.

+ +

Installare virtualenvwrapper (e costruire virtualenv) utilizzando pip come mostrato.

+ +
sudo pip3 install virtualenvwrapper
+ +

Poi aggiungi le seguenti linee alla fine del file di startup della shell.

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+ +
+

Nota: la variabile VIRTUALENVWRAPPER_PYTHON punta alla normale posizione di installazione per Python3, e source /usr/local/bin/virtualenvwrapper.sh punta alla normale posizione dello script virtualenvwrapper.sh. Se il virtualenv non funziona quando lo si testa, una cosa da controllare è che Python e lo script siano nella posizione attesa (e poi modificare il file di startup adeguatamente).

+ +

Per esempio, un test di installazione su macOS avrà le seguenti linee necessarie nel file di startup:

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh
+ +

Puoi trovare le posizioni corrette per il tuo sistema utilizzando i comandi which virtualenvwrapper.sh e which python3.

+
+ +

Queste sono le stesse linee come per Ubuntu, ma il file di startup è il file nascosto chiamato (diversamente) .bash_profile nella tua cartella home.

+ +
+

Nota: Se non riesci a trovare .bash_profile per modificarlo nel finder, puoi anche aprirlo nel terminale utilizzando nano.

+ +

I comandi saranno simili a questi:

+ +
cd ~  # Navigate to my home directory
+ls -la #List the content of the directory. YOu should see .bash_profile
+nano .bash_profile # Open the file in the nano text editor, within the terminal
+# Scroll to the end of the file, and copy in the lines above
+# Use Ctrl+X to exit nano, Choose Y to save the file.
+
+
+ +

Poi ricarica il file di startup facendo la seguente chiamata nel terminale:

+ +
source ~/.bash_profile
+ +

A questo punto, si dovrebbero vedere una serie di script che vengono eseguiti (gli stessi script dell'installazione in Ubuntu). Ora dovresti essere in grado di creare un nuovo virtual environment con il comando mkvirtualenv.

+ +

Setup del virtual environment Windows 10

+ +

Installare virtualenvwrapper-win è anche più semplice di settare virtualenvwrapper perché non hai bisogno di configurare dove i tool memorizzano l'informazione dei virtual environment (c'è un valore di dafault). Tutto ciò che devi fare è eseguire il seguente comando nel prompt dei comandi:

+ +
pip3 install virtualenvwrapper-win
+ +

Ora sei in grado di creare un nuovo virtual environment con il comando mkvirtualenv.

+ +

Creazione di un virtual environment

+ +

Una volta installato virtualenvwrapper o virtualenvwrapper-win allora lavorare con virtual environment è molto simile su tutte le piattaforme.

+ +

Ora puoi creare un nuovo virtual environment col comando mkvirtualenv . Quando questo comando viene eseguito vedrai l'ambiente che viene settato (ciò che vedrai è leggermente specifico della piattaforma). Quando il comando viene completato il nuovo ambiente virtuale sarà attivo — potrai vederlo perché l'inizio del prompt sarà il nome dell'environment tra parentesi (sotto mostriamo questo per Ubuntu, ma la linea finale è simile anche per Windows e macOS).

+ +
$ mkvirtualenv my_django_environment
+
+Running virtualenv with interpreter /usr/bin/python3
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
+(my_django_environment) ubuntu@ubuntu:~$
+
+ +

Ora che sei dentro il virtual environment puoi installare Django e iniziare a sviluppare.

+ +
+

Nota: Da ora in questo articolo (e in effetti nel modulo) considerare che ogni comando venga eseguito in un virtual environment Python come quello che abbiamo settato sopra.

+
+ +

Utilizzare un Ambiente Virtuale

+ +

Ci sono solo pochi altri comandi utili che dovresti conoscere (ce ne sono molti nella documentazione del tool, ma questi sono quelli che userai regolarmente):

+ + + +

Installare Django

+ +

Una volta che hai installato Python 3 e pip3, e creato un virtual environment, puoi usare pip3 per installare Django.

+ +
pip3 install django
+
+ +

Puoi testare se Django è installato eseguendo il seguente comando (questo verifica che Python riesca a trovare il modulo Django):

+ +
# Linux/Mac OS X
+python3 -m django --version
+ 1.10.10
+
+# Windows
+py -3 -m django --version
+ 1.10.10
+
+ +
+

Nota: Su Windows puoi eseguire script Python 3 usando il comando py -3, mentre su Linux/Mac OSX, il comando è python3.

+
+ +
+

Importante: Il resto di questo modulo usa, per invocare Python 3  il comando Linux  (python3) . Se stai lavorando su Windows usa: py -3

+
+ +

Testare la tua installazione

+ +

Il test sopra funziona, ma non è molto divertente. Un test più interessante è creare lo scheletro di un progetto e vederlo funzionare. Per farlo, andate tramite linea di comando/terminale dove volete memorizzare le applicazioni Django. Create una cartella per il sito di test ed entrateci.

+ +
mkdir django_test
+cd django_test
+
+ +

Ora si può creare lo scheletro di un nuovo sito chiamata "mytestsite" utilizzando il tool django-admin come mostrato. Dopo la creazione del sito potete esplorare la cartella creata, e troverete lo script principale per la gestione dei progetti, chiamato manage.py.

+ +
django-admin startproject mytestsite
+cd mytestsite
+ +

Possiamo avviare il server web di sviluppo dalla cartella usando manage.py e il comando runserver.

+ +
$ python3 manage.py runserver 
+Performing system checks...
+
+System check identified no issues (0 silenced).
+
+You have 13 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
+Run 'python manage.py migrate' to apply them.
+
+September 19, 2016 - 23:31:14
+Django version 1.10.1, using settings 'mysite.settings'
+Starting development server at http://127.0.0.1:8000/
+Quit the server with CONTROL-C.
+
+ +
+

Nota: Il comando sopra mostra il comando per Linux/macOS. Per ora potete ignorare il messaggio di avviso "13 unapplied migration(s)"!

+
+ +

Una volta che il server è in esecuzione potete vedere il sito usando il web browser e andando sul URL: http://127.0.0.1:8000/. Dovreste vedere un sito simile a questo:

+ +

Django Skeleton App Homepage - Django 2.0

+ + + +

Sommario

+ +

Ora avete un ambiente di sviluppo Django funzionante sul vostro computer.

+ +

Nella sezione di test avete visto brevemente come creare un sito web Django usando django-admin startproject, e come avviarlo sul browser usando il web server di sviluppo (python3 manage.py runserver). Nel prossimo articolo costruiremo una applicazione web semplice, ma completa.

+ +

Vedete anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}

diff --git a/files/it/learn/server-side/django/forms/index.html b/files/it/learn/server-side/django/forms/index.html new file mode 100644 index 0000000000..80c0970f16 --- /dev/null +++ b/files/it/learn/server-side/django/forms/index.html @@ -0,0 +1,678 @@ +--- +title: 'Django Tutorial Part 9: Working with forms' +slug: Learn/Server-side/Django/Forms +translation_of: Learn/Server-side/Django/Forms +--- +
 {{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}
+ +

In questo tutorial ti mostreremo come lavorare con i form HTML in Django e, in particolare, il modo più semplice per scrivere moduli per creare, aggiornare ed eliminare istanze di modelli. Come parte di questa dimostrazione, estenderemo il sito Web LocalLibrary in modo che i bibliotecari possano rinnovare libri e creare, aggiornare ed eliminare autori utilizzando i nostri moduli (anziché utilizzare l'applicazione di amministrazione).

+ + + + + + + + + + + + +
Prerequisiti:Completare il precedente tutorial, compreso: Django Tutorial Part 8: User authentication and permissions.
Obiettivi:Comprendere come scrivere form per ottenere informazioni dagli utenti e aggiornare il database. Per capire come le generiche viste di modifica dei form basate sulla classe possono semplificare enormemente la creazione di form per lavorare con un singolo modello.
+ +

Panoramica

+ +

Un HTML Form, o modulo, è un gruppo di uno o più campi/widget su una pagina Web, che può essere utilizzato per raccogliere informazioni dagli utenti per l'invio a un server. I moduli sono un meccanismo flessibile per la raccolta dell'input dell'utente perché ci sono widget adatti per inserire molti tipi diversi di dati, tra cui caselle di testo, caselle di controllo, pulsanti di opzione, selettori di date, ecc. I moduli sono anche un modo relativamente sicuro di condividere i dati con il server, poiché ci consentono di inviare i dati nelle richieste POST con la protezione dalle falsificazioni delle richieste cross-site.

+ +

Anche se finora non abbiamo creato alcun modulo in questo tutorial, li abbiamo già incontrati nel sito di Django Admin. Ad esempio, lo screenshot seguente mostra un modulo per la modifica di uno dei nostri modelli Book, composto da un certo numero di elenchi di selezione e editor di testo.

+ +

Admin Site - Book Add

+ +

Lavorare con i moduli Web può essere complicato! Gli sviluppatori devono scrivere HTML per il modulo, convalidare e bonificare correttamente i dati immessi sul server (e possibilmente anche nel browser), ripubblicare il modulo con messaggi di errore per informare gli utenti di eventuali campi non validi, gestire i dati quando sono stati inviati correttamente e infine rispondere all'utente in qualche modo per indicare il successo. Django Forms prende molto del lavoro da tutti questi passaggi, fornendo un framework che consente di definire i form e i loro campi a livello di codice, e quindi utilizzare questi oggetti per generare il codice HTML del modulo e gestire gran parte della convalida e dell'interazione dell'utente.

+ +

In questo tutorial, ti mostreremo alcuni dei modi in cui puoi creare e lavorare con i moduli e, in particolare, in che modo le viste generiche del modulo di modifica possono ridurre in modo significativo la quantità di lavoro necessario per creare moduli da manipolare i tuoi modelli Lungo la strada, estenderemo la nostra applicazione LocalLibrary aggiungendo un modulo per consentire ai bibliotecari di rinnovare i libri della biblioteca e creeremo pagine per creare, modificare ed eliminare libri e autori (riproducendo una versione di base del modulo mostrato sopra per la modifica libri).

+ +

HTML Forms

+ +

Prima, una breve panoramica degli HTML Forms. Consideriamo un semplice form, con un singolo campo di testo per inserire il nome di alcuni "team" e la relativa etichetta associata:

+ +

Simple name field example in HTML form

+ +

Un form HTML è definito in un insieme di elementi dentro dei tag <form>...</form>, contenenti almeno un elemento input di type="submit".

+ +
<form action="/team_name_url/" method="post">
+    <label for="team_name">Enter name: </label>
+    <input id="team_name" type="text" name="name_field" value="Default name for team.">
+    <input type="submit" value="OK">
+</form>
+ +

Mentre qui abbiamo solo un campo di testo per inserire il nome del team, un modulo può avere qualsiasi numero di altri elementi di input e le loro etichette associate. L'attributo type del campo definisce quale tipo di widget verrà visualizzato. Il nome e l'ID del campo vengono utilizzati per identificare il campo in JavaScript / CSS / HTML, mentre il value definisce il valore iniziale per il campo quando viene visualizzato per la prima volta. L'etichetta del team corrispondente viene specificata utilizzando il tag label (vedere "Immettere il nome" sopra), con un campo for che contiene il valore id dell'input associato.

+ +

L'input  submit  verrà visualizzato come un pulsante (predefinito) che può essere premuto dall'utente per caricare i dati in tutti gli altri elementi di input nel modulo sul server (in questo caso, solo il team_name). Gli attributi del form definiscono il metodo HTTP utilizzato perinviare i dati e la destinazione dei dati sul server (action):

+ + + +

Il ruolo del server è innanzitutto quello di rendere lo stato del form iniziale - contenente campi vuoti o prepopolati con valori iniziali. Dopo che l'utente ha premuto il pulsante di invio, il server riceverà i dati del modulo con i valori del browser Web e dovrà convalidare le informazioni. Se il modulo contiene dati non validi, il server dovrebbe visualizzare nuovamente il modulo, questa volta con i dati immessi dall'utente nei campi e nei messaggi "validi" per descrivere il problema per i campi non validi. Una volta che il server riceve una richiesta con tutti i dati del modulo validi, può eseguire un'azione appropriata (ad esempio, salvare i dati, restituire il risultato di una ricerca, caricare un file, ecc.) E quindi avvisare l'utente.

+ +

Come potete immaginare, la creazione dell'HTML, la convalida dei dati restituiti, la ri-visualizzazione dei dati inseriti con i rapporti di errore se necessario e l'esecuzione dell'operazione desiderata su dati validi possono richiedere un notevole sforzo per "avere ragione". Django rende tutto molto più semplice, eliminando parte del pesante codice ripetitivo.

+ +

Processo di Django di gestione dei form

+ +

La gestione dei form di Django utilizza tutte le stesse tecniche apprese in precedenti tutorial (per la visualizzazione di informazioni sui nostri models): la vista riceve una richiesta, esegue tutte le azioni richieste inclusa la lettura dei dati dai modelli, quindi genera e restituisce una pagina HTML ( da un modello, in cui passiamo un contesto contenente i dati da visualizzare). Ciò che rende le cose più complicate è che il server deve anche essere in grado di elaborare i dati forniti dall'utente e visualizzare nuovamente la pagina in caso di errori.

+ +

Di seguito viene mostrato un diagramma di flusso del processo di gestione delle richieste di modulo da parte di Django, a partire da una richiesta per una pagina contenente un form (mostrato in verde).

+ +

Updated form handling process doc.

+ +

Basandosi sul diagramma sopra, le cose che principalmente svolge Django nella gestione dei form sono:

+ +
    +
  1. Mostra il modulo predefinito la prima volta che viene richiesto dall'utente.
    2. +
+ + + +
    +
  1. Riceve i dati da una richiesta di invio e li associa al modulo. +
      +
    • Collegare i dati al modulo significa che i dati inseriti dall'utente e gli eventuali errori sono disponibili quando è necessario visualizzare nuovamente il modulo.
      • +
    +
    2. +
  2. Pulisce e valida i dati. +
      +
    • La pulizia dei dati esegue la disinfezione dell'input (ad esempio rimuovendo i caratteri non validi che potrebbero essere utilizzati per inviare contenuto dannoso al server) e li converte in tipi coerenti di Python.
      • +
    • La convalida verifica che i valori siano appropriati per il campo (ad es. Sono nel giusto intervallo di date, non sono troppo corti o troppo lunghi, ecc.)
      • +
    +
    3. +
  3. Se i dati non sono validi, visualizza nuovamente il modulo, questa volta con tutti i valori e i messaggi di errore compilati dall'utente per i campi del problema.
    4. +
  4. Se tutti i dati sono validi, eseguire le azioni richieste (ad esempio, salvare i dati, inviare e-mail, restituire il risultato di una ricerca, caricare un file, ecc.)
    5. +
  5. Una volta completate tutte le azioni, reindirizza l'utente a un'altra pagina.
    6. +
+ +

Django fornisce una serie di strumenti e approcci per aiutarti con le attività sopra descritte. La più fondamentale è la classe Form, che semplifica sia la generazione di moduli HTML che la pulizia / convalida dei dati. Nella prossima sezione, descriviamo come le form funzionano usando l'esempio pratico di una pagina per consentire ai bibliotecari di rinnovare i libri.

+ +
+

Note: Capire come si usa Form ti sarà d'aiuto quando discuteremo le classi di form più "di alto livello" di Django.

+
+ +

Modulo di rinnovo del libro utilizzando una Form e funzione vista

+ +

Successivamente, aggiungeremo una pagina per consentire ai bibliotecari di rinnovare i libri presi in prestito. Per fare ciò creeremo un modulo che consenta agli utenti di inserire un valore di data. Daremo il campo con un valore iniziale di 3 settimane rispetto alla data corrente (il normale periodo di prestito) e aggiungiamo alcune convalide per garantire che il bibliotecario non possa inserire una data nel passato o una data troppo lontana nel futuro. Quando è stata inserita una data valida, la scriveremo nel campo BookInstance.due_back del record corrente. L'esempio utilizzerà una vista basata sulle funzioni e una classe Form.

+ +

Le seguenti sezioni spiegano come funzionano le form le modifiche da apportare al nostro progetto LocalLibrary in corso.

+ +

Form

+ +

La classe Form è il cuore del sistema di gestione delle form di Django. Specifica i campi nel modulo, il loro layout, i widget di visualizzazione, le etichette, i valori iniziali, i valori validi e (una volta convalidati) i messaggi di errore associati ai campi non validi. La classe fornisce anche i metodi per eseguire il rendering stesso nei modelli utilizzando formati predefiniti (tabelle, elenchi, ecc.) O per ottenere il valore di qualsiasi elemento (abilitando il rendering manuale a grana fine).

+ +

Dichiarare un Form

+ +

La sintassi della dichiarazione per una form è molto simile a quella per la dichiarazione di un modello e condivide gli stessi tipi di campo (e alcuni parametri simili). Questo ha senso perché in entrambi i casi dobbiamo garantire che ogni campo gestisca i giusti tipi di dati, sia vincolato a dati validi e abbia una descrizione per la visualizzazione / documentazione. I dati del modulo sono memorizzati nel file forms.py dell'applicazione, all'interno della directory dell'applicazione. Crea e apri il file locallibrary / catalog / forms.py. Per creare un modulo, importiamo la libreria dei moduli, deriviamo dalla classe Form e dichiariamo i campi del modulo. Di seguito è riportata una classe di modulo molto semplice per il modulo di rinnovo del libro della biblioteca: aggiungi questo al nuovo file:

+ +
from django import forms
+
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+ +

Form fields

+ +

In questo caso abbiamo un campo singolo DateField per inserire la data di rinnovo che renderizzerà in HTML con un valore vuoto, l'etichetta di default "Data di rinnovo:", e qualche utile testo di utilizzo: "Inserire una data tra ora e 4 settimane (predefinito 3 settimane)." Dato che nessuno degli altri argomenti opzionali è specificato, il campo accetterà le date usando il input_formats: YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), e sarà visualizzato con il widget standard widget: DateInput.

+ +

Esistono molti altri tipi di campi form, che in gran parte riconoscerete dalla loro somiglianza con le classi di campo del modello equivalente: BooleanField, CharField, ChoiceField, TypedChoiceField, DateField, DateTimeField, DecimalField, DurationField, EmailField, FileField, FilePathField, FloatField, ImageField, IntegerField, GenericIPAddressField, MultipleChoiceField, TypedMultipleChoiceField, NullBooleanField, RegexField, SlugField, TimeField, URLField, UUIDField, ComboField, MultiValueField, SplitDateTimeField, ModelMultipleChoiceField, ModelChoiceField.

+ +

Gli argomenti comuni alla maggior parte dei campi sono elencati di seguito (questi hanno valori predefiniti sensibili):

+ + + +

Validazione

+ +

Django offre numerosi posti dove puoi convalidare i tuoi dati. Il modo più semplice per convalidare un singolo campo è sovrascrivere il metodo clean_ <nomecampo> () per il campo che si desidera controllare. Quindi, ad esempio, possiamo effettuare una convalida richiedendo che i valori di renewal_date inseriti siano compresi tra ora e le 4 settimane future implementando clean_renewal_date () come mostrato di seguito.

+ +

Aggiorniamo il file forms.py:

+ +
import datetime
+
+from django import forms
+from django.core.exceptions import ValidationError
+from django.utils.translation import ugettext_lazy as _
+
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+    def clean_renewal_date(self):
+        data = self.cleaned_data['renewal_date']
+
+        # Check if a date is not in the past.
+        if data < datetime.date.today():
+            raise ValidationError(_('Invalid date - renewal in past'))
+
+        # Check if a date is in the allowed range (+4 weeks from today).
+        if data > datetime.date.today() + datetime.timedelta(weeks=4):
+            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+        # Remember to always return the cleaned data.
+        return data
+ +

Ci sono due cose importanti da notare. Il primo è che otteniamo i nostri dati usando self.cleaned_data ['renewal_date'] e che restituiamo questi dati indipendentemente dal fatto che vengano modificati alla fine della funzione. Questo passaggio ci porta i dati "puliti" e disinfettati da input potenzialmente non sicuri utilizzando i validatori predefiniti e convertiti nel tipo standard corretto per i dati (in questo caso un oggetto datetime.datetime di Python).

+ +

La seconda è che se un valore è al di fuori di quelli ammessi solleviamo un errore di validazione ValidationError, specificando il testo di errore che vogliamo mostrare nel forme se un errore di validazione si è verificato. L'esempio sopra inoltre incapsula il testo in una funzione di traduzione di Django (vedi Django's translation functions) ugettext_lazy() (importata come _()), che è una good practice in caso tu voglia tradurre il sito successivamente.

+ +
+

Note: Esistono molti metodi per validare i form, consultare Form and field validation (Django docs). Per esempio, in alcuni casi in cui si hanno diversi campi che dipendono uno dall'altro si può sovrascrivere la funzione Form.clean() e nuovamente sollevare una ValidationError.

+
+ +

Questo è tutto ciò di cui abbiamo bisogno per il form in questo esempio!

+ +

Configurazione URL

+ +

Prima di creare la nostra vista, aggiungiamo una configurazione URL per la pagina dei rinnovi. Copia la seguente configurazione nella parte inferiore di locallibrary / catalog / urls.py.

+ +
urlpatterns += [
+    path('book/<uuid:pk>/renew/', views.renew_book_librarian, name='renew-book-librarian'),
+]
+ +

La configurazione URL reindirizzerà tutti gli URL con formato /catalog/book/<bookinstance id>/renew/ alla funzione renew_book_librarian() in views.py, e manderà l'id della BookInstance come parametro con nome pk. Il pattern matcha solamente se pk è un dato uuid correttamente formattato.

+ +
+

Note: Possiamo nominare qualsiasi cosa ci piaccia dai nostri dati di URL acquisiti anzichè "pk" , perché abbiamo il controllo completo sulla funzione di visualizzazione (non stiamo usando una classe di vista di dettaglio generica che si aspetta parametri con un certo nome). Tuttavia, pk abbreviazione di "chiave primaria", è una convenzione ragionevole da usare!

+
+ +

Vista

+ +

Come discusso in Django form handling process, la vista deve eseguire il rendering del modulo predefinito quando viene chiamato per la prima volta e quindi eseguire nuovamente il rendering con messaggi di errore se i dati non sono validi oppure elaborare i dati e reindirizzare a una nuova pagina se i dati sono validi. Per poter eseguire queste diverse azioni, la vista deve essere in grado di sapere se è stata richiamata per la prima volta per il rendering del modulo predefinito o un tempo successivo per convalidare i dati.

+ +

Per i form che usano una POST per mandare infromazioni al server, il pattern più comune è fare in modo che sia la view ad eseguire i test verso la richiesta di POST (if request.method == 'POST':) identificare le richieste di convalida del modulo e GET (utilizzando un'altra condizione) per identificare la richiesta iniziale di creazione del modulo. Se si desidera inviare i dati utilizzando una richiesta GET, un approccio tipico per identificare se questa è la prima o successiva chiamata alla vista è leggere i dati del modulo (ad esempio, per leggere un valore nascosto nel modulo).

+ +

Il processo di rinnovo del libro verrà scritto nel nostro database, quindi, per convenzione, utilizziamo l'approccio di richiesta POST. Il frammento di codice seguente mostra il modello (molto standard) per questo tipo di visualizzazione delle funzioni.

+ +
import datetime
+
+from django.shortcuts import render, get_object_or_404
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+
+from catalog.forms import RenewBookForm
+
+def renew_book_librarian(request, pk):
+    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # Se è una richiesta di tipo POST allora processa i dati della Form
+    if request.method == 'POST':
+
+        # Crea un'istanza della form e la popola con i dati della richiesta (binding):
+        form = RenewBookForm(request.POST)
+
+        # Controlla se la form è valida:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_instance.due_back = form.cleaned_data['renewal_date']
+            book_instance.save()
+
+            # reindirizza ad un nuovo URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # Se la richiesta è GET o un altro metodo crea il form di default
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)
+ +

Innanzitutto, importiamo il nostro form (RenewBookForm) e una serie di altri oggetti / metodi utili utilizzati nel corpo della funzione di visualizzazione:

+ + + +

Nella vista, per prima cosa utilizziamo l'argomento pk in get_object_or_404 () per ottenere l'attuale BookInstance (se questo non esiste, la vista verrà immediatamente chiusa e la pagina mostrerà un errore "non trovato"). Se questa non è una richiesta POST (gestita dalla clausola else), creiamo il form predefinito che passa un valore iniziale per il campo renewal_date (come mostrato in grassetto sotto, questo è 3 settimane dalla data corrente). 

+ +
    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # Se la richiesta è GET o un altro metodo crea il form di default
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)
+ +

Dopo aver creato il modulo, chiamiamo render() per creare la pagina HTML, specificando il modello e un contesto che contiene il nostro form. In questo caso, il contesto contiene anche il nostro BookInstance, che utilizzeremo nel modello per fornire informazioni sul libro che stiamo rinnovando.

+ +

Tuttavia, se si tratta di una richiesta POST, allora creiamo il nostro oggetto form e lo popoliamo con i dati della richiesta. Questo processo è chiamato "binding" e ci consente di convalidare il form. Controlliamo quindi se il form è valido, eseguiamo tutto il codice di convalida su tutti i campi, compreso il codice generico per verificare che il nostro campo data sia effettivamente una data valida e la funzione clean_renewal_date() del nostro from specifico per verificare se la data è nella giusta fascia.

+ +
    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_instance.due_back = form.cleaned_data['renewal_date']
+            book_instance.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)
+ +

Se il form non è valido, viene richiamata nuovamente la funzione render(), ma questa volta il form viene passato al contesto con dei messaggi di errore. 

+ +

Se il form è valido, allora possiamo iniziare ad utilizzare i dati, accedendovi tramite l'attributo form.cleaned_data (ad es. data = form.cleaned_data['renewal_date']). Qui salviamo semplicemente i dati nel valore due_back dell'oggetto BookInstance associato.

+ +
+

Importante: Anche se è possibile accedere ai dati del form direttamente tramite la richiesta, per esempio utilizzando request.POST['renewal_date'] o request.GET['renewal_date'] se invece stiamo utilizzando una richiesta GET, Ciò NON è raccomandabile. I dati ripuliti, sanificati, e validati, vengono convertiti in tipi adatti a Python.

+
+ +

Il passo finale nella manipolazione dei formè la direzione verso un'altra pagina, generalmente una "success" page. In questo caso utilizziamo HttpResponseRedirect e reverse() per ridirezionare alla vista nominata "all-borrowed' (creata come "challenge" in Django Tutorial Part 8: User authentication and permissions). Se non l'hai creata, ridireziona alla home page con URL '/').

+ +

Questo è tutto ciò che ci serviva per il per la manipolazione dei form, ma dobbiamo ancora restringere gli accessi dei bibliotecari. Probabilmente dovremmo creare un nuovo permesso sull'oggetto BookInstance ("can_renew"), ma, per mantenere le cose più semplici, useremo solo il decoratore di funzione @permission_required con il nostro permesso esistente can_mark_returned.

+ +

La vista finale è quindi come di seguito. Copiare questo in fondo a locallibrary/catalog/views.py.

+ +
import datetime
+
+from django.contrib.auth.decorators import permission_required
+from django.shortcuts import get_object_or_404
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+
+from catalog.forms import RenewBookForm
+
+@permission_required('catalog.can_mark_returned')
+def renew_book_librarian(request, pk):
+    """View function for renewing a specific BookInstance by librarian."""
+    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_instance.due_back = form.cleaned_data['renewal_date']
+            book_instance.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # If this is a GET (or any other method) create the default form.
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'form': form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)
+
+ +

Il template

+ +

Creiamo il template referenziato nella view (/catalog/templates/catalog/book_renew_librarian.html) e copiamo il codice sotto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Renew: \{{ book_instance.book.title }}</h1>
+  <p>Borrower: \{{ book_instance.borrower }}</p>
+  <p{% if book_instance.is_overdue %} class="text-danger"{% endif %}>Due date: \{{ book_instance.due_back }}</p>
+
+  <form action="" method="post">
+    {% csrf_token %}
+    <table>
+    \{{ form.as_table }}
+    </table>
+    <input type="submit" value="Submit">
+  </form>
+{% endblock %}
+ +

La maggior parte di questo sarà completamente familiare dai tutorial precedenti. Estendiamo il modello di base e quindi ridefiniamo il blocco del contenuto. Siamo in grado di fare riferimento a \{{book_instance}} (e alle sue variabili) perché è stato passato all'oggetto contesto nella funzione render (), e le possiamo usare per elencare il titolo del libro, il mutuatario e la data di scadenza originale.

+ +

Il codice del form è relativamente semplice. Per prima cosa dichiariamo i tag del form, specificando dove deve essere inviato il form (action) e il metodo per inviare i dati (in questo caso un "POST HTTP") - se si richiama la panoramica dei moduli HTML nella parte superiore della pagina, un'azione vuota come mostrato, significa che i dati del modulo saranno postati all'URL attuale della pagina (che è ciò che vogliamo!). All'interno dei tag, definiamo l'input di invio, che un utente può premere per inviare i dati. Il {% csrf_token%} aggiunto appena dentro i tag del modulo fa parte della protezione dalle contraffazioni di Django.

+ +
+

Note: Aggiungi il {% csrf_token%} a ogni modello Django che crei che utilizza POST per inviare i dati. Ciò ridurrà la possibilità che le form vengano corrotte da utenti malintenzionati

+
+ +

Tutto ciò che rimane è la variabile di template \{{form}}, che abbiamo passato al template nel dizionario di contesto. Forse non sorprendentemente, se usato come mostrato, fornisce il rendering predefinito di tutti i campi del modulo, incluse le loro etichette, i widget e il testo della guida: il rendering è come mostrato di seguito:

+ +
<tr>
+  <th><label for="id_renewal_date">Renewal date:</label></th>
+  <td>
+    <input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required>
+    <br>
+    <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
+  </td>
+</tr>
+
+ +
+

Note: Forse non è ovvio perché abbiamo solo un campo, ma, per impostazione predefinita, ogni campo è definito nella propria riga della tabella. Questo stesso rendering viene fornito se si fa riferimento alla variabile del template \{{form.as_table}}.

+
+ +

Se dovessi inserire una data non valida, avresti anche un elenco degli errori visualizzati nella pagina (mostrati in grassetto sotto).

+ +
<tr>
+  <th><label for="id_renewal_date">Renewal date:</label></th>
+    <td>
+      <ul class="errorlist">
+        <li>Invalid date - renewal in past</li>
+      </ul>
+      <input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required>
+      <br>
+      <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
+    </td>
+</tr>
+ +

Altri modi di usare le variabili template

+ +

Utilizzando\{{ form.as_table }} come mostrato sopra, ogni campo viene renderizzato come riga di una tabella. Puoi anche renderizzare ogni campo come elemento di una lista (usando \{{ form.as_ul }} ) o come un paragrafo (\{{ form.as_p }}).

+ +

È anche possibile avere il controllo completo sul rendering di ogni parte del form, indicizzando le sue proprietà mediante la notazione dei punti. Ad esempio, possiamo accedere a un numero di elementi separati per il nostro campo renewal_date:

+ + + +

Per ulteriori esempi su come eseguire il rendering manuale dei form nei modelli e ciclare dinamicamente sui campi del modello, vedere Working with forms > Rendering fields manually (Django docs).

+ +

Testare la pagina

+ +

Se hai accettato la sfida proposta in Django Tutorial Part 8: User authentication and permissions dovresti avere una lista di libri in prestito nella libreria, che saranno visibili solamente allo staff. Possiamo aggiungere un link alla nostra pagina di rinnovo per ogni elemento utilizzando il codice template sotto.

+ +
{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a>  {% endif %}
+ +
+

Note: Remember that your test login will need to have the permission "catalog.can_mark_returned" in order to access the renew book page (perhaps use your superuser account).

+
+ +

In alternativa, puoi costruire manualmente un URL di prova come questo: http://127.0.0.1:8000/catalog/book/<bookinstance_id>/renew/ (è possibile ottenere un id valido per le librerie navigando a una pagina dei dettagli del libro nella libreria, e copiare il campo id).

+ +

Come appare?

+ +

Se hai successo, il form di default sarà così:

+ +

+ +

The form with an invalid value entered will look like this:

+ +

+ +

The list of all books with renew links will look like this:

+ +

+ +

ModelForms

+ +

La creazione di una classe Form utilizzando l'approccio descritto sopra è molto flessibile, consente infatti di creare qualsiasi tipo di pagina di form che ti piace e associarla a qualsiasi modello o modello. Tuttavia, se hai solo bisogno di un modulo per mappare i campi di un singolo modello, il tuo modello definirà già la maggior parte delle informazioni necessarie nel tuo modulo: campi, etichette, testo della guida, ecc. Invece di ricreare le definizioni del modello nel tuo forma, è più facile usare la classe helper ModelForm per creare il modulo dal tuo modello. Questo ModelForm può quindi essere utilizzato all'interno delle visualizzazioni esattamente nello stesso modo di un modulo ordinario.

+ +

Un modello di base ModelForm contenente gli stessi campi del nostro RenewBookForm è mostrato sotto. Tutto ciò che devi fare è aggiungere una classe class Meta con il modello associato (BookInstance) e un elenco dei campi del modello da includere nel modulo (è possibile includere tutti i campi utilizzando fields = '__all__', oppure è possibile utilizzare exclude (anziché i campi) per specificare i campi da non includere nel modello).

+ +
from django.forms import ModelForm
+
+from catalog.models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+    class Meta:
+        model = BookInstance
+        fields = ['due_back']
+
+ +
+

Note: Questo potrebbe non sembrare tutto molto più semplice del semplice utilizzo di un modulo (e non è in questo caso, perché abbiamo solo un campo). Tuttavia, se hai molti campi, puoi ridurre la quantità di codice in modo abbastanza significativo!

+
+ +

Il resto delle informazioni proviene dalle definizioni del campo del modello (ad esempio etichette, widget, testo della guida, messaggi di errore). Se questi non sono corretti, possiamo sostituirli nella nostra classe Meta, specificando un dizionario contenente il campo da modificare e il suo nuovo valore. Ad esempio, in questo modulo potremmo volere un'etichetta per il nostro campo di "Data di rinnovo" (piuttosto che l'impostazione predefinita in base al nome del campo: "Due Back"), e vogliamo anche che il nostro testo di aiuto sia specifico per questo caso d'uso. La Meta sotto mostra come sovrascrivere questi campi, e puoi impostare allo stesso modo widget e messaggi_errore se i valori predefiniti non sono sufficienti.

+ +
class Meta:
+    model = BookInstance
+    fields = ['due_back']
+    labels = {'due_back': _('New renewal date')}
+    help_texts = {'due_back': _('Enter a date between now and 4 weeks (default 3).')} 
+
+ +

Per aggiungere la convalida è possibile utilizzare lo stesso approccio di un modulo normale: si definisce una funzione denominata clean_field_name () e si generano eccezioni ValidationError per valori non validi. L'unica differenza rispetto alla nostra forma originale è che il campo del modello è denominato due_back e non "renewal_date". Questa modifica è necessaria poiché il campo corrispondente in BookInstance è chiamato due_back.

+ +
from django.forms import ModelForm
+
+from catalog.models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+    def clean_due_back(self):
+       data = self.cleaned_data['due_back']
+
+       # Controlla se la data non è passata.
+       if data < datetime.date.today():
+           raise ValidationError(_('Invalid date - renewal in past'))
+
+       # Controlla se una data è nell'intervallo consentito (+4 settimane da oggi).
+       if data > datetime.date.today() + datetime.timedelta(weeks=4):
+           raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+       # Ricorda di restituire sempre la data pulita.
+       return data
+
+    class Meta:
+        model = BookInstance
+        fields = ['due_back']
+        labels = {'due_back': _('Renewal date')}
+        help_texts = {'due_back': _('Enter a date between now and 4 weeks (default 3).')}
+
+ +

La classe RenewBookModelForm adesso funziona come la nostra originale RenewBookForm. Puoi importarla e usarla ovunque attualmente usi  RenewBookForm a condizione che si aggiorni anche il nome della variabile corrispondente da  renewal_date a due_back come nella dichiarazione della seconda Form: RenewBookModelForm(initial={'due_back': proposed_renewal_date}.

+ +

Generic editing views

+ +

The form handling algorithm we used in our function view example above represents an extremely common pattern in form editing views. Django abstracts much of this "boilerplate" for you, by creating generic editing views for creating, editing, and deleting views based on models. Not only do these handle the "view" behavior, but they automatically create the form class (a ModelForm) for you from the model.

+ +
+

Note: In addition to the editing views described here, there is also a FormView class, which lies somewhere between our function view and the other generic views in terms of "flexibility" vs "coding effort". Using FormView, you still need to create your Form, but you don't have to implement all of the standard form-handling patterns. Instead, you just have to provide an implementation of the function that will be called once the submitted is known to be valid.

+
+ +

In this section we're going to use generic editing views to create pages to add functionality to create, edit, and delete Author records from our library — effectively providing a basic reimplementation of parts of the Admin site (this could be useful if you need to offer admin functionality in a more flexible way that can be provided by the admin site).

+ +

Views

+ +

Open the views file (locallibrary/catalog/views.py) and append the following code block to the bottom of it:

+ +
from django.views.generic.edit import CreateView, UpdateView, DeleteView
+from django.urls import reverse_lazy
+
+from catalog.models import Author
+
+class AuthorCreate(CreateView):
+    model = Author
+    fields = '__all__'
+    initial = {'date_of_death': '05/01/2018'}
+
+class AuthorUpdate(UpdateView):
+    model = Author
+    fields = ['first_name', 'last_name', 'date_of_birth', 'date_of_death']
+
+class AuthorDelete(DeleteView):
+    model = Author
+    success_url = reverse_lazy('authors')
+ +

As you can see, to create, update, or delete the views you need to derive from CreateView, UpdateView, and DeleteView (respectively) and then define the associated model.

+ +

For the "create" and "update" cases you also need to specify the fields to display in the form (using the same syntax as for ModelForm). In this case, we show both the syntax to display "all" fields and how you can list them individually. You can also specify initial values for each of the fields using a dictionary of field_name/value pairs (here we arbitrarily set the date of death for demonstration purposes — you might want to remove that!). By default, these views will redirect on success to a page displaying the newly created/edited model item, which in our case will be the author detail view we created in a previous tutorial. You can specify an alternative redirect location by explicitly declaring parameter success_url (as done for the AuthorDelete class).

+ +

The AuthorDelete class doesn't need to display any of the fields, so these don't need to be specified. You do however need to specify the success_url, because there is no obvious default value for Django to use. In this case, we use the reverse_lazy() function to redirect to our author list after an author has been deleted — reverse_lazy() is a lazily executed version of reverse(), used here because we're providing a URL to a class-based view attribute.

+ +

Templates

+ +

The "create" and "update" views use the same template by default, which will be named after your model: model_name_form.html (you can change the suffix to something other than _form using the template_name_suffix field in your view, e.g. template_name_suffix = '_other_suffix')

+ +

Create the template file locallibrary/catalog/templates/catalog/author_form.html and copy in the text below.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <form action="" method="post">
+    {% csrf_token %}
+    <table>
+    \{{ form.as_table }}
+    </table>
+    <input type="submit" value="Submit">
+  </form>
+{% endblock %}
+ +

This is similar to our previous forms and renders the fields using a table. Note also how again we declare the {% csrf_token %} to ensure that our forms are resistant to CSRF attacks.

+ +

The "delete" view expects to find a template named with the format model_name_confirm_delete.html (again, you can change the suffix using template_name_suffix in your view). Create the template file locallibrary/catalog/templates/catalog/author_confirm_delete.html and copy in the text below.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+
+<h1>Delete Author</h1>
+
+<p>Are you sure you want to delete the author: \{{ author }}?</p>
+
+<form action="" method="POST">
+  {% csrf_token %}
+  <input type="submit" value="Yes, delete.">
+</form>
+
+{% endblock %}
+
+ +

URL configurations

+ +

Open your URL configuration file (locallibrary/catalog/urls.py) and add the following configuration to the bottom of the file:

+ +
urlpatterns += [
+    path('author/create/', views.AuthorCreate.as_view(), name='author_create'),
+    path('author/<int:pk>/update/', views.AuthorUpdate.as_view(), name='author_update'),
+    path('author/<int:pk>/delete/', views.AuthorDelete.as_view(), name='author_delete'),
+]
+ +

There is nothing particularly new here! You can see that the views are classes, and must hence be called via .as_view(), and you should be able to recognize the URL patterns in each case. We must use pk as the name for our captured primary key value, as this is the parameter name expected by the view classes.

+ +

The author create, update, and delete pages are now ready to test (we won't bother hooking them into the site sidebar in this case, although you can do so if you wish).

+ +
+

Note: Observant users will have noticed that we didn't do anything to prevent unauthorized users from accessing the pages! We leave that as an exercise for you (hint: you could use the PermissionRequiredMixin and either create a new permission or reuse our can_mark_returned permission).

+
+ +

Testing the page

+ +

First, log in to the site with an account that has whatever permissions you decided are needed to access the author editing pages.

+ +

Then navigate to the author create page: http://127.0.0.1:8000/catalog/author/create/, which should look like the screenshot below.

+ +

Form Example: Create Author

+ +

Enter values for the fields and then press Submit to save the author record. You should now be taken to a detail view for your new author, with a URL of something like http://127.0.0.1:8000/catalog/author/10.

+ +

You can test editing records by appending /update/ to the end of the detail view URL (e.g. http://127.0.0.1:8000/catalog/author/10/update/) — we don't show a screenshot, because it looks just like the "create" page!

+ +

Finally, we can delete the page by appending delete to the end of the author detail-view URL (e.g. http://127.0.0.1:8000/catalog/author/10/delete/). Django should display the delete page shown below. Press Yes, delete. to remove the record and be taken to the list of all authors.

+ +

+ + + +

Challenge yourself

+ +

Create some forms to create, edit, and delete Book records. You can use exactly the same structure as for Authors. If your book_form.html template is just a copy-renamed version of the author_form.html template, then the new "create book" page will look like the screenshot below:

+ +

+ + + +

Summary

+ +

Creating and handling forms can be a complicated process! Django makes it much easier by providing programmatic mechanisms to declare, render, and validate forms. Furthermore, Django provides generic form editing views that can do almost all the work to define pages that can create, edit, and delete records associated with a single model instance.

+ +

There is a lot more that can be done with forms (check out our See also list below), but you should now understand how to add basic forms and form-handling code to your own websites.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}

+ + + +

In this module

+ + diff --git a/files/it/learn/server-side/django/generic_views/index.html b/files/it/learn/server-side/django/generic_views/index.html new file mode 100644 index 0000000000..a59f2046f1 --- /dev/null +++ b/files/it/learn/server-side/django/generic_views/index.html @@ -0,0 +1,626 @@ +--- +title: 'Django Tutorial Part 6: Generic list and detail views' +slug: Learn/Server-side/Django/Generic_views +tags: + - Template + - Tutorial + - View + - django + - django view + - imparare + - inizio + - template django + - views + - viste django +translation_of: Learn/Server-side/Django/Generic_views +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
+ +

Questo tutorial estenderà il nostro sito LocalLibrary, aggiungendo pagine di elenco e pagine di dettaglio per libri e autori. Qui apprenderemo le viste generiche basate su classi e mostreremo come possono ridurre la quantità di codice che devi scrivere per casi di uso comune. Passeremo inoltre alla gestione degli URL in maggiore dettaglio, mostrando come eseguire la corrispondenza di base dei pattern.

+ + + + + + + + + + + + +
Prerequisiti:Completare tutti i tutorial precedenti, incluso Django Tutorial Part 5: Creating our home page.
Obiettivi:Comprendere dove e come utilizzare viste generiche basate su classi e come estrarre modelli dagli URL e passare le informazioni alle viste.
+ +

Panoramica

+ +

In questo tutorial completeremo la prima versione del sito Web LocalLibrary aggiungendo pagine di elenco e dettagli per libri e autori (o per essere più precisi, ti mostreremo come implementare le pagine del libro e ti guideremo nella creazione dellle pagine dell'autore in modo che possa farle tu stesso!)

+ +

Il processo è simile alla creazione della pagina indice, che abbiamo mostrato nel precedente tutorial. Dovremo comunque creare mappe URL, viste e template. La differenza principale è che per le pagine di dettaglio avremo la sfida aggiuntiva di estrarre le informazioni dai pattern nell'URL e passarle alla view. Per queste pagine, mostreremo un tipo di view completamente diverso: view di elenco e view di dettaglio generiche e basate su classi. Queste possono ridurre in modo significativo la quantità di codice necessario per la view, semplificandone la scrittura e la manutenzione.

+ +

La parte finale del tutorial mostrerà come impaginare i dati quando si utilizzano view generiche di elenco basate su classi.

+ +

Pagina lista di libri

+ +

Nella pagina dell'elenco dei libri verrà visualizzato un elenco di tutti i record di libri disponibili nella biblioteca, a cui è possibile accedere utilizzando l'URL: catalog/books/. La pagina mostrerà un titolo e un autore per ogni record, con il titolo che è un collegamento ipertestuale alla relativa pagina dei dettagli del libro. La pagina avrà la stessa struttura e la stessa navigazione di tutte le altre pagine del sito e, pertanto, possiamo estendere il template di base (base_generic.html).

+ +

URL mapping

+ +

Apri /catalog/urls.py e copia la riga in grassetto sotto. Come per la pagina index, la funzione path() definisce un pattern da matchare con l' URL ('books/'), una funzione di view che verrà richiamata se l' URL matcha (views.BookListView.as_view()), e un nome per questa particolare mappatura.

+ +
urlpatterns = [
+    path('', views.index, name='index'),
+    path('books/', views.BookListView.as_view(), name='books'),
+]
+ +

Come discusso nel precedente tutorial, l'URL deve avere già matchato /catalog, quindi la view sarà richiamata per l'URL: /catalog/books/.

+ +

La funzione view ha un formato diverso rispetto a prima - questo perché questa vista verrà effettivamente implementata come una classe. Noi erediteremo da una funzione di visualizzazione generica esistente che già fa la maggior parte di ciò che vogliamo, invece di scriverla noi stessi daccapo.

+ +

Per le view class-based di Django, si accede a una funzione view appropriata chiamando il metodo di classe as_view(). Questo fa tutto il lavoro necessario per creare un'istanza della classe e assicurarsi che i giusti metodi handler vengano chiamati per le richieste HTTP in arrivo.

+ +

Viste (class-based)

+ +

Potremmo facilmente scrivere la view dell'elenco dei libri come una funzione regolare (proprio come la nostra precedente vista indice), che interrogherebbe il database cercando tutti i libri e quindi chiamerebbe render() per passare l'elenco a un template specificato. Invece, utilizzeremo una view elenco generica basata su classi (ListView) — una classe che eredita da una vista esistente. Poiché la vista generica implementa già la maggior parte delle funzionalità di cui abbiamo bisogno e segue la best practice di Django, saremo in grado di creare una vista elenco più robusta con meno codice, meno ripetizioni e, in definitiva, meno manutenzione.

+ +

Apri catalog/views.py, e copia il seguente codice nel file:

+ +
from django.views import generic
+
+class BookListView(generic.ListView):
+    model = Book
+ +

Ecco fatto! la list view generica effettuerà una query al database per prendere tutti i record per lo specifico model (Book) poi effettuerà un render tramite il template in /locallibrary/catalog/templates/catalog/book_list.html che creeremo sotto. Dentro al template puoi accedere alla lista dei libri con la variabile object_list OR book_list (cioè, genericamente "the_model_name_list").

+ +
+

Nota: Questo percorso scomodo per la posizione del template non è un errore di stampa: le view generiche cercano i template in /application_name/the_model_name_list.html (catalog/book_list.html in questo caso) dentro l'applicazione /application_name/templates/ nella directory (/catalog/templates/).

+
+ +

È possibile aggiungere attributi per modificare il comportamento predefinito sopra. Ad esempio, è possibile specificare un altro file template se è necessario disporre di più viste che utilizzano questo stesso model oppure si potrebbe voler utilizzare un dievrso nome di variabile di template se book_list non è intuitivo per il proprio specifico caso d'uso del template. Probabilmente la variante più utile è quella di modificare/filtrare il sottoinsieme di risultati che vengono restituiti, quindi, invece di elencare tutti i libri, potresti elencare i primi 5 libri letti da altri utenti.

+ +
class BookListView(generic.ListView):
+    model = Book
+    context_object_name = 'my_book_list'   # your own name for the list as a template variable
+    queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+    template_name = 'books/my_arbitrary_template_name_list.html'  # Specify your own template name/location
+ +

Override dei metodi nelle viste class-based

+ +

Anche se non è necessario farlo qui, puoi anche sovrascrivere alcuni dei metodi di classe.

+ +

Possiamo, per esempio, sovrascrivere get_queryset() per modificare la lista di record restituiti. Questa metodologia è molto più flessibile rispetto all'attributo queryset come abbiamo fatto nel precedente frammento di codice (sebbene in questo caso non ci sia alcun beneficio reale):

+ +
class BookListView(generic.ListView):
+    model = Book
+
+    def get_queryset(self):
+        return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+
+ +

Possiamo anche sovrascrivere get_context_data() per passare altre variabili addizionali di context al template (es. la lista di libri è passata per default). Il frammento sotto mostra come aggiungere una variabile "some_data" al context (sarà quindi disponibile come variabile del template).

+ +
class BookListView(generic.ListView):
+    model = Book
+
+    def get_context_data(self, **kwargs):
+        # Call the base implementation first to get the context
+        context = super(BookListView, self).get_context_data(**kwargs)
+        # Create any data and add it to the context
+        context['some_data'] = 'This is just some data'
+        return context
+ +

Quando si esegue questa operazione è importante seguire lo schema usato sopra:

+ + + +
+

Nota: Leggi Built-in class-based generic views (Django docs) per vedere molti altri esempi di cosa puoi fare.

+
+ +

Creare List View template

+ +

Crea il file HTML /locallibrary/catalog/templates/catalog/book_list.html e copia il testo sotto. Come discusso sopra, questo è il file predefinito per un template previsto dalla vista elenco generica basata su classi (per un modello denominato Book in un'applicazione denominata catalog)

+ +

I template per le view generiche sono come qualsiasi altro template (anche se ovviamente il contesto/informazioni passate al template possono differire). Come con il nostro template di index, estendiamo il nostro template di base nella prima riga e poi sostituiamo il blocco denominato content.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Book List</h1>
+  {% if book_list %}
+  <ul>
+    {% for book in book_list %}
+      <li>
+        <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+      </li>
+    {% endfor %}
+  </ul>
+  {% else %}
+    <p>There are no books in the library.</p>
+  {% endif %} 
+{% endblock %}
+ +

La view passa il contesto (elenco di libri) di default con object_list e book_list come alias; in ogni caso funzionerà.

+ +

Esecuzione condizionale

+ +

Usiamo i tag template if, else, ed endif per controllare se la book_list è stata definita e non è vuota. Se book_list è vuota, allora la clausola else mostra un testo alternativo in cui spiega che non sono presenti record da elencare. Se book_list non è vuota, allora iteriamo sulla lista di libri.

+ +
{% if book_list %}
+  <!-- code here to list the books -->
+{% else %}
+  <p>There are no books in the library.</p>
+{% endif %}
+
+ +

La condizione sopra fa il test su un'unica condizione, ma si possono effettuare ulteriori test e gestire ulteriori casi, per testare condizioni addizionali si può usare ad esempio il tag elif (es. {% elif var2 %}). Per maggiori informazioni sugli operatori condizionali consultare: if, ifequal/ifnotequal, ifchanged in Built-in template tags and filters (Django Docs).

+ +

Cicli for

+ +

Il template utilizza i tag for endfor per ciclare la lista di libri, come sotto. Ogni iterazione popola la variabile di template book con le informazioni per l'elemento corrente della lista.

+ +
{% for book in book_list %}
+  <li> <!-- code here get information from each book item --> </li>
+{% endfor %}
+
+ +

Anche se non usato qui, all'interno del loop Django creerà anche altre variabili che puoi usare per tracciare l'iterazione. Ad esempio, è possibile testare la variabile forloop.last per eseguire l'elaborazione condizionale l'ultima volta che viene eseguito il ciclo.

+ +

Accedere alle variabili

+ +

Il codice all'interno del ciclo crea un item di elenco per ogni libro che mostra sia il titolo (come collegamento alla vista dei dettagli ancora da creare) sia l'autore.

+ +
<a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+
+ +

Accediamo ai campi del record del libro associato utilizzando la "notazione dot" (es. book.title e book.author), dove il testo che segue book è il nome del campo (come definito nel model).

+ +

Possiamo anche chiamare delle functions nel model da dentro il nostro template — in questo caso Book.get_absolute_url() per ottenere un URL che è possibile utilizzare per visualizzare il record di dettaglio associato. Questo funziona a condizione che la funzione non abbia argomenti (non c'è modo di passare argomenti!)

+ +
+

Nota: Dobbiamo stare attenti agli "effetti collaterali" quando chiamiamo le funzioni nei model. Qui visualizziamo solo un URL, ma una funzione può fare praticamente qualsiasi cosa: non vogliamo rischiare di cancellare il nostro database (per esempio) semplicemente mostrando il nostro template!

+
+ +

Update del template di base

+ +

Apri il template di base (/locallibrary/catalog/templates/base_generic.html) ed inserisci {% url 'books' %} dentro il link Url per All books, come sotto. Questo abiliterà il link in tutte le pagine (possiamo metterlo in pratica con successo ora che abbiamo creato il mapper URL "libri").

+ +
<li><a href="{% url 'index' %}">Home</a></li>
+<li><a href="{% url 'books' %}">All books</a></li>
+<li><a href="">All authors</a></li>
+ +

Come viene mostrato?

+ +

Non sarà ancora possibile creare l'elenco dei libri, perché manca ancora una dipendenza: la mappa degli URL per le pagine dei dettagli del libro, necessaria per creare collegamenti ipertestuali a singoli libri. Mostreremo entrambe le viste elenco e dettaglio dopo la prossima sezione.

+ +

Pagina di dettaglio dei libri

+ +

La pagina dei dettagli del libro mostrerà le informazioni su un libro specifico, accessibile tramite l'URL catalog/book/<id> (dove <id> è la chiave primaria per il libro). Oltre ai campi nel model Book (autore, sommario, ISBN, lingua e genere), elencheremo anche i dettagli delle copie disponibili (BookInstances) compreso lo stato, la data di ritorno prevista, l'edizione e l'id. Ciò consentirà ai nostri lettori non solo di conoscere il libro, ma anche di confermare se/quando è disponibile.

+ +

URL mapping

+ +

Apri /catalog/urls.py e aggiungi l'URL mapper 'book-detail' mostrato in grassetto qui sotto. Questa funzione path() definisce un pattern, una vista di dettaglio generica basata sulla classe e un nome.

+ +
urlpatterns = [
+    path('', views.index, name='index'),
+    path('books/', views.BookListView.as_view(), name='books'),
+    path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),
+]
+ +

Per il path dei dettagli del libro, il pattern URL utilizza una sintassi speciale per catturare l'ID specifico del libro che vogliamo vedere. La sintassi è molto semplice: le parentesi angolari definiscono la parte dell'URL da catturare, racchiudendo il nome della variabile che la vista può utilizzare per accedere ai dati acquisiti. Per esempio, <something> , catturerà il pattern marcato, e passerà il valore alla view come variabile con nome "something". Puoi anche far precedere al nome della variabile una specifica di conversione che definisce il tipo di dato (int, str, slug, uuid, path).

+ +

In questo caso usiamo '<int:pk>' per acquisire l'id del libro, che deve essere una stringa appositamente formattata e passarla alla vista come parametro chiamato pk (abbreviazione di primary key). Questo è l'ID che viene utilizzato per archiviare il libro in modo univoco nel database, come definito nel Modello Book.

+ +
+

Nota: Come discusso precedentemente, il nostro URL matchato in realtà è catalog/book/<digits> (ma perchè siamo nell'applicazione catalog /catalog/ è sottinteso).

+
+ +
+

Importante: La vista di dettaglio generica basata sulla classe prevede di passare un parametro denominato pk. Se stai scrivendo la tua vista funzione puoi usare qualsiasi nome di parametro che ti piace, o addirittura passare le informazioni in un argomento senza nome.

+
+ +

Manuale di nozioni avanzate su path matching ed espressioni regolari

+ +
+

Nota: Non avrai bisogno di questa sezione per completare il tutorial! Lo forniamo perché conoscere questa opzione rischia di essere utile nel tuo futuro incentrato su Django.

+
+ +

Il pattern matching fornito da path() è semplice ed utile per il caso (molto diffuso) in cui vuoi solo catturare ogni stringa od intero. Se è necessario un filtro più raffinato (ad esempio, per filtrare solo le stringhe con un determinato numero di caratteri), è possibile utilizzare il metodo re_path().

+ +

Questo metodo funziona esattamente come path() eccetto per il fatto che permette di specificare un pattern utilizzando una Regex. Vedi: Regular expression. Per esempio, avremmo potuto specificare il path precedente con:

+ +
re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),
+
+ +

Le espressioni regolari sono uno strumento di mappatura dei pattern incredibilmente potente. Sono, francamente, abbastanza non intuitive e spaventose per i principianti. Di seguito è riportato un primer molto breve!

+ +

La prima cosa da sapere è che di solito le espressioni regolari dovrebbero essere dichiarate usando la sintassi "raw string" letterale (cioè, sono incluse come mostrato: r'<testo della regex>').

+ +

Le parti principali della sintassi che devi conoscere per dichiarare i match del pattern sono:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SymbolMeaning
^Matcha l'inizio del testo
$Matcha la fine del testo
\dMatcha un numero (0, 1, 2, ... 9)
\wMatcha una parola word character, es. ogni maiuscola- o minuscola- dell'alfabeto, numero o underscore (_)
+Matcha uno o più caratteri precedenti. Ad esempio, per matchare una o più cifre useresti \d+. Per abbinare uno o più caratteri "a", potresti usare a+
*Abbina zero o più del carattere precedente. Ad esempio, per abbinare niente o una parola che potresti usare \w*
( )Cattura la parte del pattern all'interno delle parentesi. Tutti i valori acquisiti verranno passati alla vista come parametri senza nome (se vengono catturati più pattern, i parametri associati verranno forniti nell'ordine in cui sono state dichiarate le acquisizioni)
(?P<name>...)Cattura il pattern (indicato da ...) come una variabile con nome (in questo caso "name"). I valori catturati sono passati alla view con il nome specificato. La tua view deve dichiarare un argomento con lo stesso nome!
[  ]Abbina uno dei caratteri del set. Per esempio, [abc] matcherà con 'a' o 'b' o 'c'. [-\w] restituirà un match con il carattere '-' o con ogni parola.
+ +

La maggioranza degli altri caratteri può essere presa letteralmente!

+ +

Consideriamo alcuni esempi di pattern realistici:

+ + + + + + + + + + + + + + + + + + + + + + +
PatternDescription
r'^book/(?P<pk>\d+)$' +

Matcha una stringa che ha book/ all'inizio della linea (^book/), dopo ha una o più cifre (\d+), e quindi termina (senza caratteri non numerici prima dell'indicatore di fine riga).

+ +

Cattura anche tutte le cifre (?P<pk>\d+) e le passa alla vista in un parametro chiamato 'pk'. I valori catturati vengono sempre passati come una stringa!

+ +

Ad esempio, book/1234 invierà una variabile pk = '1234' alla view.

+
r'^book/(\d+)$'Questo corrisponde agli stessi URL del caso precedente. Le informazioni acquisite verranno inviate come argomento senza nome alla vista.
r'^book/(?P<stub>[-\w]+)$' +

Matcha una stringa che ha book/ all'inizio della linea (^book/), quindi ha uno o più caratteri che sono o un carattere '-' o una parola ([-\w]+), e si conclude. Cattura anche questo set di caratteri e li passa alla vista in un parametro chiamato 'stub'.

+ +

Questo è uno schema abbastanza tipico per uno "stub". Gli stub sono chiavi primarie basate sull'uso di URL per i dati. È possibile utilizzare uno stub se si desidera che l'URL del libro sia più informativo. Per esempio /catalog/book/the-secret-garden anzichè /catalog/book/33.

+
+ +

È possibile acquisire più pattern nello stesso match e quindi codificare molte informazioni diverse in un URL.

+ +
+

Nota: Come sfida, considera come potresti codificare un URL per elencare tutti i libri pubblicati in un particolare anno, mese, giorno e RE che potrebbero essere utilizzati per abbinarlo.

+
+ +

Passare opzioni addizionali nelle tue mappe URL

+ +

Una caratteristica che non abbiamo usato qui, ma che potresti trovare di valore, è che puoi dichiarare e passare alla view opzioni aggiuntive. Le opzioni sono dichiarate come dizionario che si passa come terzo argomento non assegnato (senza nome) alla funzione path(). Questo approccio può essere utile se si desidera utilizzare la stessa view per più risorse e passare i dati per configurarne il comportamento in ciascun caso (di seguito forniamo un template diverso in ciascun caso).

+ +
path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
+path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
+
+ +
+

Nota: Entrambe le opzioni extra e i pattern nominati catturati vengono passati alla view come argomenti con nome. Se si utilizza lo stesso nome sia per un pattern catturato che per un'opzione extra, solo il valore del pattern catturato verrà inviato alla vista (il valore specificato nell'opzione aggiuntiva verrà scartato).

+
+ +

View (class-based)

+ +

Apri catalog/views.py, e copia il seguente codice alla fine del file:

+ +
class BookDetailView(generic.DetailView):
+    model = Book
+ +

Fatto! Tutto ciò che ti serve fare ora è creare un template chiamato /locallibrary/catalog/templates/catalog/book_detail.html, e la view passerà al database l'informazione per lo specifico record di tipo Book estratto dall'URL mapper. All'interno del modello è possibile accedere all'elenco di libri con la variabile template denominata object OR book (cioè genericamente "the_model_name").

+ +

Se necessario, è possibile modificare il template utilizzato e il nome dell'oggetto contesto utilizzato per fare riferimento al libro nel template. È inoltre possibile sovrascrivere i metodi per aggiungere ulteriori informazioni al contesto, ad esempio.

+ +

Cosa succede se il record non esiste?

+ +

Se un record richiesto non esiste, la vista generica basata sulla classe genererà un'eccezione Http404 automaticamente: in produzione, verrà automaticamente visualizzata una pagina appropriata "risorsa non trovata", che è possibile personalizzare se lo si desidera. Solo per darti un'idea di come funziona, il frammento di codice seguente mostra come implementare la vista basata su classi come una funzione se non si stesse utilizzando la vista di dettaglio generica basata sulla classe.

+ +
def book_detail_view(request, primary_key):
+    try:
+        book = Book.objects.get(pk=primary_key)
+    except Book.DoesNotExist:
+        raise Http404('Book does not exist')
+
+    return render(request, 'catalog/book_detail.html', context={'book': book})
+
+ +

La vista prima cerca di ottenere il record del libro specifico dal modello. Se questo fallisce, la vista dovrebbe sollevare un'eccezione Http404 per indicare che il libro è "non trovato". Il passo finale è quindi, come al solito, chiamare render () con il nome del modello e i dati del libro nel parametro di contesto (come dizionario).

+ +

In alternativa, possiamo usare la funzione get_object_or_404() come scorciatoia per sollevare un'eccezione Http404 se il record non viene trovato.

+ +
from django.shortcuts import get_object_or_404
+
+def book_detail_view(request, primary_key):
+    book = get_object_or_404(Book, pk=primary_key)
+    return render(request, 'catalog/book_detail.html', context={'book': book})
+ +

Creare il template per la vista dettaglio

+ +

Crea il file HTML /locallibrary/catalog/templates/catalog/book_detail.html ed inserisci il seguente contenuto. come discusso precedentmente, questo nome file di default per il template è quello atteso dalla generica class-based detail view (per un modello di nome Book in una applicazione di nome catalog).

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Title: \{{ book.title }}</h1>
+
+  <p><strong>Author:</strong> <a href="">\{{ book.author }}</a></p> <!-- author detail link not yet defined -->
+  <p><strong>Summary:</strong> \{{ book.summary }}</p>
+  <p><strong>ISBN:</strong> \{{ book.isbn }}</p>
+  <p><strong>Language:</strong> \{{ book.language }}</p>
+  <p><strong>Genre:</strong> {% for genre in book.genre.all %} \{{ genre }}{% if not forloop.last %}, {% endif %}{% endfor %}</p>
+
+  <div style="margin-left:20px;margin-top:20px">
+    <h4>Copies</h4>
+
+    {% for copy in book.bookinstance_set.all %}
+      <hr>
+      <p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}">\{{ copy.get_status_display }}</p>
+      {% if copy.status != 'a' %}
+        <p><strong>Due to be returned:</strong> \{{copy.due_back}}</p>
+      {% endif %}
+      <p><strong>Imprint:</strong> \{{copy.imprint}}</p>
+      <p class="text-muted"><strong>Id:</strong> \{{copy.id}}</p>
+    {% endfor %}
+  </div>
+{% endblock %}
+ + + +
+

Il link dell'autore nel template sopra ha un URL vuoto perché non abbiamo ancora creato una pagina dei dettagli dell'autore. Una volta che esisterà, dovresti aggiornare l'URL in questo modo:

+ +
<a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
+
+
+ +

Anche se un po 'più grande, quasi tutto in questo template è stato descritto in precedenza:

+ + + +

Prima non abbiamo visto la funzione interessante book.bookinstance_set.all(). Questo metodo viene auto-magicamente creato da Django per restituire un set di record BookInstance  associati con un particolare Book.

+ +
{% for copy in book.bookinstance_set.all %}
+  <!-- code to iterate across each copy/instance of a book -->
+{% endfor %}
+ +

Questo metodo è necessario perchè hai dichiarato una ForeignKey (uno-a-molti) solamente da una parte della relazione. Poichè non hai fatto nulla per dichiarare la relazione negli altri ("molti") modelli, non ci sono alcun campo da cui prendere il set di record associati. Per superare questo problema, Django costruisce un appropriata funzione di nome "reverse lookup" (ricerca inversa) che puoi usare. Il nome della funzione viene costruito con le lettere minuscole del modello in cui la ForeignKey è stata dichiarata, seguita da _set (ovvero la funzione creata in Book è bookinstance_set()).

+ +
+

Nota: Qui usiamo all() per ottenere tutti i record (di default). Anche se puoi usare il metodo filter() per ricevere un sottoinsieme di record nel tuo codice, non puoi farlo direttamente nei template perchè non puoi specificare argomenti nelle funzioni.

+ +

Fai attenzione anche a non definire un ordine (sulla tua vista class-based o model), altrimenti vedrai anche degli errori dal server di sviluppo come questo:

+ +
[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
+/foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <QuerySet [<Author: Ortiz, David>, <Author: H. McRaven, William>, <Author: Leigh, Melinda>]>
+  allow_empty_first_page=allow_empty_first_page, **kwargs)
+
+ +

Ciò si verifica perché paginator object si aspetta di vedere alcuni ORDER BY eseguiti sul database sottostante. Senza di esso, non può essere sicuro che i record siano restituiti effettivamente nell'ordine corretto! 

+ +

In questo tutorial non abbiamo ancora visto Pagination (ancora, ma presto), ma poichè non puoi utilizzare sort_by() e passare un parametro, (stessa cosa con filter()) dovrai scegliere tra tre strade:

+ +
    +
  1. Aggiungere un ordering dentro una dichiarazione class Meta nel tuo modello.
    2. +
  2. Aggiungere un attibuto queryset  nella tua view custom class-based, specificando un order_by().
    3. +
  3. Aggiungere un metodo get_queryset alla tua view  custom class-based e specificando un order_by().
    4. +
+ +

Se decidi di usare una classe Meta per il model Author (probabilmente non così flessibile come personalizzare la vista basata sulla classe, ma abbastanza facile), ti ritroverai con qualcosa di simile a questo

+ +
class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return f'{self.last_name}, {self.first_name}'
+
+    class Meta:
+        ordering = ['last_name']
+ +

Ovviamente, il campo non necessita di essere un last_name: può essere qualunque altro.

+ +

E per ultimo, ma non meno importante, dovresti ordinare un attributo/colonna che abbia effettivamente un indice (unico o meno) sul tuo database per evitare problemi di prestazioni. Ovviamente, questo non sarà necessario qui, con così pochi libri (e utenti!), ma è qualcosa da tenere a mente per i progetti futuri.

+
+ +

Come viene visualizzato?

+ +

A questo punto, avremmo dovuto creare tutto il necessario per visualizzare sia l'elenco dei libri sia le pagine di dettaglio dei libri. Lancia il comando (python3 manage.py runserver) ed apri sul tuo browser http://127.0.0.1:8000/.

+ +
+

Warning: Non fare ancora clic su nessun link di autore o di dettaglio dell'autore: creerai quelli nella sfida!

+
+ +

Click su All books per vedere la lista di tutti i libri. 

+ +

Book List Page

+ +

Quindi fai clic su un link a uno dei tuoi libri. Se tutto è impostato correttamente, dovresti vedere qualcosa come il seguente screenshot.

+ +

Book Detail Page

+ +

Impaginazione

+ +

Se hai appena qualche record, la nostra pagina di elenco dei libri sembrerà a posto. Tuttavia, inserendo decine o centinaia di record la pagina impiegherà più tempo a caricarsi (e avrà troppi contenuti per navigare in modo ragionevole). La soluzione a questo problema è di aggiungere l'impaginazione alle visualizzazioni della lista, riducendo il numero di elementi visualizzati su ciascuna pagina.

+ +

Django ha un eccellente supporto per l'impaginazione built-in. Ancora meglio, questo è incorporato nelle view lista generiche basate su classe, quindi non devi fare molto per abilitarlo!

+ +

Views

+ +

Apri catalog/views.py, ed aggiungi la riga di codice paginate_by mostrata sotto.

+ +
class BookListView(generic.ListView):
+    model = Book
+    paginate_by = 10
+ +

Con questa aggiunta, non appena si hanno più di 10 record, la vista inizierà a impaginare i dati che invia al modello. Si accede alle diverse pagine usando i parametri GET - per accedere alla pagina 2 si utilizzerà l'URL: /catalog/books/?page=2.

+ +

Templates

+ +

Ora che i dati sono impaginati, è necessario aggiungere il supporto al template per scorrere il set di risultati. Poiché potremmo volerlo fare in tutte le view elenco, lo faremo in un modo che possa essere aggiunto al template base.

+ +

Apri /locallibrary/catalog/templates/base_generic.html e copiaci dentro il seguente blocco di paginazione (evidenziato in grassetto qui in basso) sotto il nostro block content. Il codice controlla innanzitutto se l'impaginazione è abilitata nella pagina corrente. In tal caso, aggiunge i collegamenti successivo e precedente se appropriato (e il numero di pagina corrente).

+ +
{% block content %}{% endblock %}
+
+{% block pagination %}
+  {% if is_paginated %}
+    <div class="pagination">
+      <span class="page-links">
+        {% if page_obj.has_previous %}
+          <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a>
+        {% endif %}
+        <span class="page-current">
+          <p>Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.</p>
+        </span>
+        {% if page_obj.has_next %}
+          <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a>
+        {% endif %}
+      </span>
+    </div>
+  {% endif %}
+{% endblock %}
+ +

Il page_obj è un oggetto Paginator che esisterà se la paginazione viene utilizzata nella pagina corrente. Ti permette di ottenere tutte le informazioni sulla pagina corrente, le pagine precedenti, quante pagine ci sono, ecc.

+ +

Usiamo \{{ request.path }} per ottenere l'URL della pagina corrente per la creazione dei collegamenti di paginazione. Questo è utile perché è indipendente dall'oggetto che stiamo impaginando.

+ +

Ecco fatto!

+ +

Come viene visualizzato?

+ +

Lo screenshot qui sotto mostra l'aspetto della paginazione: se non hai inserito più di 10 titoli nel tuo database, puoi testarlo più facilmente abbassando il numero specificato in paginate_by.

+ +

I link di impaginazione sono visualizzati in basso, con i link successivo / precedente visualizzati a seconda della pagina in cui ti trovi.

+ +

Book List Page - paginated

+ +

Sfida te stesso

+ +

La sfida in questo articolo è di creare le view di dettaglio e le view di elenco dell'autore richieste per completare il progetto. Questi dovrebbero essere resi disponibili ai seguenti URL:

+ + + +

Il codice richiesto per i mappatori di URL e le viste dovrebbe essere praticamente identico all'elenco di libri e alle viste di dettaglio che abbiamo creato sopra. I modelli saranno diversi ma condivideranno un comportamento simile.

+ +
+

Note:

+ +
    +
  • Una volta creato il mapper URL per la pagina di elenco dell'autore, sarà necessario aggiornare il collegamento Tutti gli autori nel modello di base. Segui lo stesso processo che abbiamo fatto quando abbiamo aggiornato il link Tutti i libri.
    • +
  • Una volta creato il mapper URL per la pagina dei dettagli dell'autore, è necessario aggiornare anche il template della vista dettagliata dei libri (/locallibrary/catalog/templates/catalog/book_detail.html) in modo che il link dell'autore punti alla nuova pagina dei dettagli dell'autore (anziché essere un URL vuoto). La linea cambierà per aggiungere il tag template mostrato in grassetto sotto. + 
    <p><strong>Author:</strong> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a></p>
+
    +
    • +
+
+ +

Quando hai finito, le tue pagine dovrebbero apparire come gli screenshot qui sotto.

+ +

Author List Page

+ + + +

Author Detail Page

+ + + +

Sommario

+ +

Congratulazioni, la nostra funzionalità di libreria di base è ora completa!

+ +

In questo articolo, abbiamo imparato come utilizzare la lista generica basata sulla classe e le viste di dettaglio e li abbiamo usati per creare pagine per visualizzare i nostri libri e autori. Lungo la strada abbiamo imparato a conoscere la corrispondenza dei modelli con le espressioni regolari e come puoi passare i dati dagli URL alle tue visualizzazioni. Abbiamo anche imparato qualche altro trucco per l'utilizzo dei modelli. Infine, abbiamo mostrato come impaginare le visualizzazioni degli elenchi in modo che le nostre liste siano gestibili anche quando abbiamo molti record.

+ +

Nei nostri prossimi articoli, estenderemo questa libreria per supportare gli account utente, dimostrando in tal modo l'autenticazione dell'utente, permissons, sessioni e moduli.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/server-side/django/home_page/index.html b/files/it/learn/server-side/django/home_page/index.html new file mode 100644 index 0000000000..42c8d69eee --- /dev/null +++ b/files/it/learn/server-side/django/home_page/index.html @@ -0,0 +1,419 @@ +--- +title: 'Django Tutorial Parte 5: Creare una Home page' +slug: Learn/Server-side/Django/Home_page +tags: + - Articolo + - Codice + - Script + - Tutorial + - django + - imparare + - lezioni + - server-side + - template django + - viste django +translation_of: Learn/Server-side/Django/Home_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
+ +

Ora siamo pronti per aggiungere il codice che mostra la nostra prima pagina completa: una home page per il sito web LocalLibrary. La home page mostrerà il numero di record che abbiamo per ogni tipo di modello e fornirà i link di navigazione della barra laterale alle nostre altre pagine. Lungo la strada acquisiremo esperienza pratica nella scrittura di mappe e viste URL di base, nel leggere record dal database e utilizzare i templates.

+ + + + + + + + + + + + +
Prerequisiti:Leggere Django Introduction e Django Tutorial Part 4: Django admin site.
Obiettivi:Impara a creare semplici mappe url e viste (in cui nessun dato è codificato nell'URL), ottienere dati dai modelli e creare modelli.
+ +

Panoramica

+ +

Dopo aver definito i nostri modelli e creato alcuni record della biblioteca iniziale con cui lavorare, è tempo di scrivere il codice che presenta tali informazioni agli utenti. La prima cosa che dobbiamo fare è determinare quali informazioni vogliamo visualizzare nelle nostre pagine e definire gli URL da utilizzare per restituire tali risorse. Quindi creeremo un URL mapper, visualizzazioni e templates per visualizzare le pagine.

+ +

Il diagramma seguente descrive il flusso di dati principale e i componenti richiesti durante la gestione delle richieste e delle risposte HTTP. Siccome abbiamo già implementato il modello, i componenti principali che creeremo sono:

+ + + +

+ +

Come vedrai nella prossima sezione, abbiamo 5 pagine da visualizzare, che sono troppe informazioni da documentare in un singolo articolo. Pertanto, questo articolo si concentrerà su come implementare la home page e tratteremo le altre pagine in un articolo successivo. Questo dovrebbe darti una buona comprensione end-to-end di come funzionano in pratica i mappatori, le viste e i modelli.

+ +

Definizione degli URL delle risorse

+ +

Siccome questa LocalLibrary è essenzialmente di sola lettura per gli utenti finali, abbiamo solo bisogno di fornire una pagina di destinazione per il sito (una home page) e pagine che visualizzano elenchi e viste di dettaglio per libri e autori.

+ +

Gli URL di cui avremo bisogno per le nostre pagine sono:

+ + + +

I primi tre URL restituiranno la pagina di indice, l'elenco di libri e l'elenco di autori. Questi URL non codificano alcuna informazione aggiuntiva e le query che prelevano i dati dal database saranno sempre le stesse. Tuttavia, i risultati restituiti dalle query dipendono dal contenuto del database.

+ +

Al contrario, gli ultimi due URL mostreranno informazioni dettagliate su uno specifico libro o autore. Questi URL codificano l'identità dell'oggetto da visualizzare (rappresentato da <id>. Il mapper URL estrarrà le informazioni codificate e le passerà alla view e la view determinerà dinamicamente quali informazioni ottenere dal database. Codificando le informazioni nell'URL useremo un singolo set di una mappatura url, una view e un template per gestire tutti i libri (o gli autori).

+ +
+

Nota: Con Django, puoi costruire i tuoi URL come richiesto, puoi codificare le informazioni nel corpo dell'URL come mostrato sopra, o includere i parametri GET nell'URL, per esempio /book/?id=6. Qualunque approccio tu usi, gli URL dovrebbero essere mantenuti puliti, logici e leggibili, come raccomandato dagli standard W3C.

+ +

La documentazione di Django consiglia di codificare le informazioni nel corpo dell'URL per ottenere una migliore progettazione dell'URL

+
+ +

Come accennato nella panoramica, il resto di questo articolo descrive come costruire la pagina indice.

+ +

Creare la pagina index

+ +

La prima pagina che creeremo è la pagina indice (catalogo/). La pagina indice includerà alcuni HTML statici, insieme ai "conteggi" generati di diversi record nel database. Per fare questo, creeremo una mappatura URL, una view e un template.

+ +
+

Nota: Vale la pena prestare molta attenzione in questa sezione. La maggior parte delle informazioni si applica anche alle altre pagine che creeremo.

+
+ +

Mappatura dell'URL

+ +

Quando abbiamo creato lo scheletro del website, abbiamo aggiornato il file locallibrary/urls.py per garantire che ogni volta che un URL che inizia con catalog/ viene ricevuto, il modulo URLConf in catalog.urls elaborerà la sottostringa rimanente.

+ +

Il seguente codice da locallibrary/urls.py include il modulo catalog.urls:

+ +
urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+
+ +
+

Nota: Ogni volta che Django incontra la funzione di importazione django.urls.include(), divide la stringa URL al carattere finale designato e invia la sottostringa rimanente al modulo URLconf incluso per un'ulteriore elaborazione.

+
+ +

Abbiamo anche creato un placeholder file per il modulo URLConf, chiamato /catalog/urls.py. Aggiungi il seguente codice a quel file:

+ +
urlpatterns = [
+    path('', views.index, name='index'),
+]
+ +

la funzione path()definisce:

+ + + +

La funzione path() specifica anche un parametro name, che è un identificatore univoco per questa particolare mappatura degli URL. È possibile utilizzare il name per "invertire" il mapper, ovvero creare dinamicamente un URL che punta alla risorsa che il programma di mappatura è progettato per gestire. Ad esempio, possiamo usare il parametro name per collegarci alla nostra home page da qualsiasi altra pagina aggiungendo il seguente link in un template:

+ +
<a href="{% url 'index' %}">Home</a>.
+ +
+

Nota: Potremmo anche mettere un link statico  <a href="/catalog/">Home</a>), ma se in futuro cambiassimo il pattern della home page, per esempio, in/catalog/index) i templates non si collegheranno più correttamente. L'utilizzo di una mappatura URL invertita è molto più flessibile e robusto.

+
+ +

View (function-based)

+ +

Una vista è una funzione che elabora una richiesta HTTP, recupera i dati richiesti dal database, esegue il rendering dei dati in una pagina HTML utilizzando un template HTML e quindi restituisce l'HTML generato in una risposta HTTP per far visualizzare la pagina all'utente. La vista dell'indice segue questo modello — raccoglie informazioni sul numero di Book, BookInstance, BookInstance disponibili, e Author presenti nel database, e passa tali informazioni a un template per la visualizzazione.

+ +

Apri catalog/views.py e nota che il file già importa la funzione di shortcut render() per generare un file HTML usando un template e i dati: 

+ +
from django.shortcuts import render
+
+# Create your views here.
+
+ +

Incolla le seguenti righe nella parte inferiore del file:

+ +
from catalog.models import Book, Author, BookInstance, Genre
+
+def index(request):
+    """View function for home page of site."""
+
+    # Generate counts of some of the main objects
+    num_books = Book.objects.all().count()
+    num_instances = BookInstance.objects.all().count()
+
+    # Available books (status = 'a')
+    num_instances_available = BookInstance.objects.filter(status__exact='a').count()
+
+    # The 'all()' is implied by default.
+    num_authors = Author.objects.count()
+
+    context = {
+        'num_books': num_books,
+        'num_instances': num_instances,
+        'num_instances_available': num_instances_available,
+        'num_authors': num_authors,
+    }
+
+    # Render the HTML template index.html with the data in the context variable
+    return render(request, 'index.html', context=context)
+ +

La prima riga importa le classi di modello che useremo per accedere ai dati in tutte le nostre views.

+ +

La prima parte della funzione view recupera il numero di record usando l'attributo objects.all() sulle classi del model. Inoltre prende una lista di oggetti BookInstance che hanno il valore 'a' (Available) nel campo status. Trovi ulteriori informazioni sull'accesso ai dati di modello nel precedente tutorial Django Tutorial Part 3: Using models > Searching for records.

+ +

Alla fine della funzione view, chiamiamo la funzione render() per creare una pagina HTML e restituire la pagina come risposta. Questa funzione scorciatoia include una serie di altre funzioni per semplificare un caso d'uso molto comune. La funzione render() accetta i seguenti parametri:

+ + + +

Approfondiremo context e templates nella prossima sezione. Iniziamo a creare il nostro modello in modo che possiamo effettivamente mostrare qualcosa all'utente!

+ +

Template

+ +

Un template è un file di testo che definisce la struttura o il layout di un file (come una pagina HTML), utilizzando placeholder per rappresentare contenuto effettivo.

+ +

Django cercherà automaticamente i template in una directory chiamata 'templates' nella tua applicazione. Ad esempio, nella view index che abbiamo appena aggiunto, la funzione render() si aspetterà di trovare il file index.html in /locallibrary/catalog/templates/ e solleverà un errore se il file non è presente. Puoi eseguire un controlo salvando i cambiamenti precedenti ed accedendo a 127.0.0.1:8000 col tuo browser - verrà mostrato un messaggio di errore abbastanza intuitivo: "TemplateDoesNotExist at /catalog/", ed altri dettagli.

+ +
+

Nota: Sulla base del file delle impostazioni del progetto, Django cercherà i template in un numero di punti, cercando di default nelle applicazioni installate. Puoi trovare ulteriori informazioni su come Django trova i template e su quali formati di modello supporta sulla sezione Templates della documentazione Django.

+
+ +

Estendere i templates

+ +

Il template dell'index richiederà un markup HTML standard per la head e il body, insieme alle sezioni di navigazione per collegarsi alle altre pagine del sito che non abbiamo ancora creato e alle sezioni che visualizzano il testo introduttivo e i dati del libro.

+ +

Gran parte della struttura HTML e di navigazione sarà la stessa in ogni pagina del nostro sito. Invece di duplicare il codice su ogni pagina, puoi usare il linguaggio di template di Django per dichiarare un template di base, e quindi estenderlo per sostituire solo i bit che sono diversi per ogni pagina specifica.

+ +

Il seguente frammento di codice è un modello di base di esempio da un file base_generic.html. L'esempio include HTML comune con sezioni per un titolo, una barra laterale e il contenuto principale contrassegnati con i tag di template chiamati block e endblock, mostrati in grassetto. È possibile lasciare i blocchi vuoti o includere il contenuto predefinito da utilizzare durante il rendering delle pagine derivate dal template.

+ +
+

Nota: I tag Template sono funzioni che è possibile utilizzare in un Template per scorrere gli elenchi, eseguire operazioni condizionali in base al valore di una variabile e così via. Oltre ai tag del template, la sintassi del template consente di fare riferimento alle variabili passate nel template dalla view e utilizzare i template filter per formattare le variabili (ad esempio, per convertire una stringa in lettere minuscole).

+
+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% block title %}<title>Local Library</title>{% endblock %}
+</head>
+<body>
+  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
+  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
+</body>
+</html>
+
+ +

Quando definiamo un template per una particolare vista, per prima cosa specifichiamo il template di base usando il tag extends  — vedere il codice di esempio sotto. Quindi dichiariamo quali sezioni del template vogliamo sostituire (se ce ne sono), usando le sezioni block/endblock come nel template di base. 

+ +

Ad esempio, il frammento di codice qui sotto mostra come usare il template tag extends ed effettuare un override del block content. L'HTML generato includerà il codice e la struttura definiti nel template di base, incluso il contenuto di default che hai definito nel blocco title, ma il nuovo blocco content al posto di quello di default.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Local Library Home</h1>
+  <p>Welcome to LocalLibrary, a website developed by <em>Mozilla Developer Network</em>!</p>
+{% endblock %}
+ +

Template di base di LocalLibrary

+ +

Utilizzeremo il seguente snippet di codice come modello di base per il sito Web di LocalLibrary. Come puoi vedere, contiene del codice HTML e definisce i blocchi per title, sidebar e content. Abbiamo un titolo di default e una barra laterale predefinita con collegamenti agli elenchi di tutti i libri e gli autori, entrambi racchiusi in blocchi per essere facilmente modificati in futuro.

+ +
+

Nota: Presentiamo anche due ulteriori tag di template: url e load static. Questi tag verranno spiegati nelle seguenti sezioni.

+
+ +

Crea un nuovo file base_generic.html in /locallibrary/catalog/templates/ e copia il codice sotto nel file:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% block title %}<title>Local Library</title>{% endblock %}
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  <!-- Add additional CSS in static file -->
+  {% load static %}
+  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
+</head>
+<body>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-sm-2">
+      {% block sidebar %}
+        <ul class="sidebar-nav">
+          <li><a href="{% url 'index' %}">Home</a></li>
+          <li><a href="">All books</a></li>
+          <li><a href="">All authors</a></li>
+        </ul>
+     {% endblock %}
+      </div>
+      <div class="col-sm-10 ">{% block content %}{% endblock %}</div>
+    </div>
+  </div>
+</body>
+</html>
+ +

Il template include CSS da Bootstrap per migliorare il layout e la presentazione della pagina HTML. Usare di Bootstrap (o di un altro framework web sul lato client) è un modo rapido per creare una pagina attraente che si mostra bene su diverse dimensioni dello schermo.

+ +

Il template di base fa anche riferimento a un file css locale (styles.css) che fornisce uno styling aggiuntivo. Crea un file styles.css in /locallibrary/catalog/static/css/ e incolla il seguente codice nel file:

+ +
.sidebar-nav {
+    margin-top: 20px;
+    padding: 0;
+    list-style: none;
+}
+ +

Il template di index

+ +

Crea un nuovo file HTML index.html in /locallibrary/catalog/templates/ and paste the following code in the file. Questo codice estende il nostro template di base sulla prima riga, quindi sostituisce il blocco di content predefinito per il modello. 

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Local Library Home</h1>
+  <p>Welcome to LocalLibrary, a website developed by <em>Mozilla Developer Network</em>!</p>
+  <h2>Dynamic content</h2>
+  <p>The library has the following record counts:</p>
+  <ul>
+    <li><strong>Books:</strong> \{{ num_books }}</li>
+    <li><strong>Copies:</strong> \{{ num_instances }}</li>
+    <li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
+    <li><strong>Authors:</strong> \{{ num_authors }}</li>
+  </ul>
+{% endblock %}
+ +

Nella sezione Dynamic content dichiariamo i placeholders (variabili del template) per le informazioni dalla view che vogliamo includere. Le variabili sono racchiuse tra doppie parentesi graffe (handlebars), come mostrato in grassetto nel codice di esempio. 

+ +
+

Nota: È possibile riconoscere facilmente variabili di template e tag di template (funzioni) - le variabili sono racchiuse tra doppie parentesi (\{{ num_books }}), e i tag sono racchiusi tra parentesi graffe singole con segni di percentuale ({% extends "base_generic.html" %}).

+
+ +

La cosa importante da notare qui è che le variabili sono nominate con le keys che passiamo nel dizionario context nella funzione render() della nostra view (vedi esempio sotto). Le variabili saranno sostituite con i loro valori associati quando il modello è renderizzato. 

+ +
context = {
+    'num_books': num_books,
+    'num_instances': num_instances,
+    'num_instances_available': num_instances_available,
+    'num_authors': num_authors,
+}
+
+return render(request, 'index.html', context=context)
+ +

Referenziare file statici nei templates

+ +

È probabile che il tuo progetto utilizzi risorse statiche, inclusi JavaScript, CSS e immagini. Perché la posizione di questi file potrebbe non essere nota (o potrebbe cambiare) Django ti consente di specificare la posizione nei tuoi template rispetto alle impostazioni globali di STATIC_URL. Lo scheletro del website imposta il valore di STATIC_URL predefinito a '/static/', ma potresti scegliere di ospitarli su una rete di distribuzione dei contenuti o altrove.

+ +

All'interno del template chiami prima il tag di template load che specifica "statico" per aggiungere la libreria modello, come mostrato nell'esempio di codice seguente. È quindi possibile utilizzare il tag del template static e specificare l'URL relativo al file richiesto.

+ +
<!-- Add additional CSS in static file -->
+{% load static %}
+<link rel="stylesheet" href="{% static 'css/styles.css' %}">
+ +

Puoi anche aggiungere una immagine allo stesso modo, per esempio:

+ +
{% load static %}
+<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="UML diagram" style="width:555px;height:540px;">
+
+ +
+

Nota: Gli esempi sopra specificano dove si trovano i file, ma Django non li serve di default. Abbiamo configurato il web server di sviluppo per servire i file modificando il mapper URL globale (/locallibrary/locallibrary/urls.py) quando abbiamo creato lo scheletro del website, ma è comunque necessario abilitare il file serving in produzione. Lo vedremo più tardi.

+
+ +

Per maggiori informazioni sul lavoro con file statici vedere utilizzare static files.

+ +

Collegarsi agli URLs

+ +

Il template di base sottostante presenta il tag di template URL.

+ +
<li><a href="{% url 'index' %}">Home</a></li>
+
+ +

Questo tag accetta il nome di una funzione path() chiamata in urls.py e i valori per qualsiasi argomento che la vista associata riceverà da quella funzione e restituisce un URL che è possibile utilizzare per collegarsi alla risorsa.

+ +

Configurare dove trovare i templates

+ +

Devi indicare a Django dove cercare i tuoi template nella cartella dei template. Per fare ciò, aggiungi la directory templates all'oggetto TEMPLATES modificando il file settings.py come mostrato in grassetto nel seguente esempio di codice:

+ +
TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [
+            os.path.join(BASE_DIR, 'templates'),
+        ],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+ +

Come viene renderizzato?

+ +

A questo punto abbiamo creato tutte le risorse necessarie per visualizzare la pagina indice. Esegui il serve (python3 manage.py runserver) e apri http://127.0.0.1:8000/ nel browser. Se tutto è configurato correttamente, il tuo sito dovrebbe apparire come il seguente screenshot.

+ +

Index page for LocalLibrary website

+ +
+

Nota: I link All books e All authors non funzioneranno ancora perché i path, le view e i template per tali pagine non sono definiti. Abbiamo solo inserito i segnaposto per quei link nel template base_generic.html.

+
+ +

Prova tu

+ +

Ecco un paio di attività per testare la tua familiarità con le query al model, le view e i template.

+ +
    +
  1. Il base template di LocalLibrary include un blocco title. Effettua un override nell' index template e crea un nuovo titolo per la pagina. + +
    +

    Consiglio: La sezione Extending templates mostra come creare blocchi ed estendere blocchi in altri template.

    +
    +
    2. +
  2. Modifica la view per generare conteggi per i genres e books che contengono una parola particolare (maiuscole e minuscole) e passano i risultati a context. Lo realizzi in un modo simile alla creazione e all'utilizzo di num_books e num_instances_available. Dopo fai un update dell' index template per includere le variabili.
    3. +
+ + + +

Sommario

+ +

Abbiamo appena creato la home page del nostro sito: una pagina HTML che visualizza un numero di record dal database e collegamenti ad altre pagine ancora da creare. Lungo il percorso abbiamo appreso informazioni fondamentali sui mappatori url, le viste, l'interrogazione del database con i modelli, il passaggio di informazioni a un modello da una vista e la creazione e l'estensione di modelli. Nel prossimo articolo svilupperemo questa conoscenza per creare le restanti quattro pagine del nostro sito web.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/server-side/django/index.html b/files/it/learn/server-side/django/index.html new file mode 100644 index 0000000000..63e9b5ec39 --- /dev/null +++ b/files/it/learn/server-side/django/index.html @@ -0,0 +1,70 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - CodingScripting + - Intro + - Learn + - Principiante + - Python + - Server-side programming + - TopicStub + - django +translation_of: Learn/Server-side/Django +--- +
{{LearnSidebar}}
+Django è un server-side web framework Python estremamente popolare. Il modulo mostra perché Django è uno dei server web framework più usati, come impostare l'ambiente di sviluppo e come iniziare ad usarlo per creare le tue web application.
+ +
+ +

Prerequisiti

+ +

Per iniziare non hai bisogno di nessuna conoscenza di Django. Hai bisogno di capire cosa sono la programmazione web lato server e i framework web, leggendo il modulo Server-side website programming first steps.

+ +

E'  raccomandata una conoscenza generale dei concetti di programmazione e di Python, ma non è essenziale per capire i concetti fondamentali.

+ +
+

Nota: Python è uno dei linguaggi di programmazione più semplici da leggere e capire per i principianti. Detto questo, se vuoi capire meglio questo modulo su Internet puoi trovare numerosi  libri gratuiti e tutorial ( nuovi programmatori potrebbero voler leggere la pagina Python for Non Programmers su python.org wiki).

+
+ +

Guide

+ +
+
Introduzione a Django
+
In questo primo articolo su Django risponderemo alla domanda "Cosa è Django?" e daremo una panoramica su cosa rende questo framework web speciale. Sottolineeremo le caratteristiche principali, inclusa qualche funzionalità avanzata di cui non abbiamo il tempo per parlarne in dettaglio in questo modulo. Mostreremo anche alcuni blocchi principali che compongono una applicazione Django, questo per dare una idea di cosa può fare prima ancora che tu possa configurarlo e iniziare a giocarci.
+
 Configurare un ambiente di sviluppo per Django
+
Ora che sai cosa è Django, mostreremo come configurare e testare un ambiente di sviluppo di Django su Windows, Linux (Ubuntu), e Mac OS X — o qualunque sistema operativo comune tu stia usando, questo articolo ti darà quello che ti server per iniziare lo sviluppo di applicazioni Django.
+
Django Tutorial: Il sito  "Local Library"
+
Primo articolo nella serie di tutorial pratici che spiega cosa imparerai, e fornirà una panoramica del sito web, di esempio, "local library"  su cui lavoreremo e che evolverà nei seguenti articoli.
+
Django Tutorial Parte 2: Creare lo scheletro di un sito web
+
Questo articolo mostra come puoi creare lo scheletro del progetto che potrai continuare a popolare con impostazioni specifiche, url, modelli, view e  template.
+
Django Tutorial Parte 3: Usare i modelli
+
Questo articolo mostra come definire i modelli per il sito LocalLibrary  — i modelli rappresentano le strutture dati usate per memorizzare i dati dell'applicazione, e permette a Django di salvare i dati in un database. Spiega cosa è un modello, come si dichiara e alcuni dei tipi di dati principali. Inoltre mostra brevemente alcuni dei modi principali con cui accedere il modello dei dati.
+
Django Tutorial Parte 4: Django admin site
+
Ora che abbiamo creato i modelli per il LocalLibrary website, useremo il sito Django Admin per aggiungere qualche "real" book data. Prima ti mostreremo come registrare i modelli con il sito admin, quindi ti mostreremo come effettuare il login e creare qualche dato. Infine mostriamo qualcuno dei modi con cui puoi migliorare la presentazione del sito admin.
+
Django Tutorial Parte 5: Creare la nostra home page
+
Ora siamo pronti ad aggiungere il codice per visualizzare la nostra prima pagina intera, una home page per il sito LocalLibrary che mostra quanti record abbiamo di ogni tipo di modello e fornisce collegamenti di navigazione della barra laterale alle altre nostre pagine. Lungo la strada acquisiremo esperienza pratica nella scrittura di URL maps e views, ottenendo dei record dal database e usando i templates.
+
Django Tutorial Parte 6: Generic list and detail views
+
Questo tutorial estende il nostro sito LocalLibrary, aggiungendo pagine con liste e dettagli dei libri e degli autori. Qui impareremo le generic class-based views, e mostreremo come possono ridurre l'ammontare di codice da scrivere per i casi d'uso comuni. Vedremo anche la gestione degli URL in modo più approfondito, mostrando come effettuare un pattern matching di base.
+
Django Tutorial Parte 7: Sessions framework
+
Questo tutorial estende il nostro sito LocalLibrary, aggiungendo un contatore delle visite basatoi sulle sessioni nella home page. Questo è un esempio relativamente semplice, ma mostra come è possibile utilizzare il session framework per fornire comportamenti persistenti agli utenti anonimi nei propri siti.
+
Django Tutorial Parte 8: Autenticazione utenti e permessi
+
In questo tutorial ti mostreremo come consentire agli utenti di accedere al tuo sito con i loro account e come controllare cosa possono fare e vedere in base al fatto che siano o meno connessi e in base alle loro permissions. Come parte di questa dimostrazione estenderemo il sito LocalLibrary, aggiungendo pagine di accesso e logout e pagine specifiche dell'utente e del personale per la visualizzazione di libri presi in prestito.
+
Django Tutorial Part 9: Lavorare con i forms
+
In questo tutorial ti mostreremo come lavorare con i Forms HTML in Django, e in particolare il modo più semplice per scrivere forms per creare, aggiornare ed eliminare le istanze del model. Come parte di questa dimostrazione estenderemo il sito LocalLibrary in modo che i bibliotecari possano rinnovare i libri e creare, aggiornare ed eliminare gli autori utilizzando i nostri forms (anziché utilizzare l'applicazione di admin).
+
Django Tutorial Part 10: Testing a Django web application
+
As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate unit testing of your website using Django's test framework.
+
Django Tutorial Part 11: Deploying Django to production
+
Now you've created (and tested) an awesome LocalLibrary website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.
+
Django web application security
+
Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article Web security — this article provides a practical demonstration of how Django's in-built protections handle such threats.
+
+ +

Assessments

+ +

The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.

+ +
+
DIY Django mini blog
+
In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.
+
diff --git a/files/it/learn/server-side/django/introduzione/index.html b/files/it/learn/server-side/django/introduzione/index.html new file mode 100644 index 0000000000..4eb36683eb --- /dev/null +++ b/files/it/learn/server-side/django/introduzione/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:

+ +
    +
  • I moduli Python sono "librerie" di funzioni, memorizzate in file separati, che potremmo voler utilizzare nel nostro codice. Qui importiamo solo l'oggetto HttpResponse dal modulo django.http in modo da poterlo usare nella nostra view: from django.http import HttpResponse . Ci sono altri modi per importare alcuni o tutti gli oggetti da un modulo.
    • +
  • Le funzioni sono dichiarate usando la parola chiave def come mostrato sopra, con i parametri denominati elencati tra parentesi dopo il nome della funzione; la riga finisce con i due punti. Si noti come le righe successive sono tutte indentate. L'indentazione è importante, in quanto specifica che le linee di codice sono all'interno di quel particolare blocco (l'indentazione obbligatoria è una caratteristica chiave di Python, ed è uno dei motivi per cui il codice Python è così facile da leggere).
    • +
+
+ + + +

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:

+ +
    +
  • +

    Python supporta la "programmazione orientata agli oggetti" (object-oriented programming - OOP ndt), uno stile di programmazione in cui organizziamo il nostro codice in oggetti, che includono dati e funzioni correlate per operare su quei dati. Gli oggetti possono anche ereditare/estendere/derivare da altri oggetti, permettendo di condividere il comportamento comune tra oggetti correlati. In Python usiamo la parola chiava class per definire un "prototipo" (blueprint - ntd) di un oggetto. Possiamo creare più istanze specifiche del tipo di oggetto in base al modello nella classe.

    + +

    Così, per esempio, qui abbiamo una classe Team, che deriva dalla classe Model. Questo significa che è un modello, e che conterrà tutti i metodi di un modello, ma possiamo anche dargli caratteristiche specializzate proprie. Nel nostro modello definiamo i campi di cui il nostro database avrà bisogno per memorizzare i nostri dati, dando loro nomi specifici. Django utilizza queste definizioni, compresi i nomi dei campi, per creare il database sottostante.

    +
    • +
+
+ +

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/models/index.html b/files/it/learn/server-side/django/models/index.html new file mode 100644 index 0000000000..ec3554f577 --- /dev/null +++ b/files/it/learn/server-side/django/models/index.html @@ -0,0 +1,466 @@ +--- +title: 'Django Tutorial Part 3: Using models' +slug: Learn/Server-side/Django/Models +tags: + - Articolo + - Dati + - Model + - Server + - Tutorial + - data + - django + - imparare + - lezione + - modello + - nuovo +translation_of: Learn/Server-side/Django/Models +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}
+ +

Questo articolo mostra come definire dei modelli per il sito della LocalLibrary. Spiega cos'è un modello, come viene dichiarato e alcuni dei principali tipi di campo. Mostra anche brevemente alcuni dei principali modi in cui è possibile accedere ai dati del modello.

+ + + + + + + + + + + + +
Prerequisiti:Django Tutorial Part 2: Creating a skeleton website.
Obbiettivi:Essere in grado di progettare e creare i propri modelli, scegliendo i campi in modo appropriato.
+ +

Panoramica

+ +

Le applicazioni web Django accedono e gestiscono i dati tramite oggetti Python denominati modelli. I modelli definiscono la struttura dei dati memorizzati, inclusi i tipi di campo e possibilmente anche la loro dimensione massima,valori predefiniti, opzioni dell'elenco di selezione, testo di aiuto per la documentazione, testo della label per i moduli, ecc. La definizione del modello è indipendente dal database sottostante: è possibile sceglierne uno tra i diversi come parte delle impostazioni del progetto. Una volta scelto il database che si desidera utilizzare, non è necessario interrogarlo direttamente, basta scrivere la struttura del modello e altro codice, e Django gestirà tutto il lavoro sporco di comunicazione con il database.

+ +

Questo tutorial mostra come definire e accedere ai modelli per l'esempio del LocalLibrary website.

+ +

Progettare i model per la LocalLibrary

+ +

Prima di saltare e iniziare a codificare i modelli, vale la pena dedicare alcuni minuti a pensare a quali dati dobbiamo memorizzare e alle relazioni tra i diversi oggetti.

+ +

Sappiamo che abbiamo bisogno di memorizzare informazioni sui libri (titolo, sommario, autore, lingua scritta, categoria, ISBN) e che potremmo avere più copie disponibili (con ID unico globale, stato di disponibilità, ecc.). Potremmo aver bisogno di memorizzare più informazioni sugli autori oltre al loro nome e potrebbero esserci più autori con nomi uguali o simili. Vogliamo essere in grado di ordinare le informazioni in base al titolo del libro, autore, lingua scritta e categoria.

+ +

Quando si progettano i modelli, è logico disporre di modelli separati per ogni "oggetto" (un gruppo di informazioni correlate). In questo caso gli oggetti ovvi sono i libri, le istanze di libri e gli autori

+ +

Potresti anche voler utilizzare i modelli per rappresentare delle opzioni per un elenco di selezione (ad esempio, come un elenco a discesa), piuttosto che codificare le scelte nel sito stesso - questo è consigliato quando tutte le opzioni non sono note in anticipo o potrebbero essere modificate. I candidati ovvi per i modelli in questo caso includono il genere di libro (ad esempio Fantascienza, Poesia francese, ecc.) e la lingua (Inglese, Francese, Giapponese).

+ +

Una volta che abbiamo deciso i nostri modelli e i nostri campi, dobbiamo pensare alle relazioni. Django ti permette di definire relazioni che sono uno a uno (OneToOneField), uno a molti (ForeignKey) e molti a molti (ManyToManyField).Con questo in mente, lo schema di associazione UML qui sotto mostra i modelli che definiremo in questo caso (come schede).

+ +

LocalLibrary Model UML

+ +

Come sopra, abbiamo creato modelli per book (i dettagli generici del libro), per book instance (lo stato di specifiche copie fisiche del libro disponibile nel sistema) e author. Abbiamo anche deciso di avere un modello per il genere (genre), in modo che i valori possano essere creati/selezionati attraverso l'interfaccia di amministrazione. Abbiamo deciso di non avere un modello per BookInstance:status - abbiamo codificato i valori (LOAN_STATUS) perché non ci aspettiamo che questi cambino. All'interno di ciascuna casella è possibile visualizzare il nome del model, i nomi dei campi e i tipi, nonché i metodi e i relativi tipi di ritorno.

+ +

Il diagramma mostra anche le relazioni tra i modelli, incluse le loro molteplicità. Le molteplicità sono i numeri sul diagramma che mostrano i numeri (massimo e minimo) di ciascun modello che può essere presente nella relazione. Ad esempio, la linea di collegamento tra le caselle mostra che Book e un Genre sono correlati. I numeri vicino al modello Genre mostrano che un Book deve avere uno o più Genres (quanti ne vuoi), mentre i numeri all'altro capo della riga accanto al model Book mostrano che un Genre può avere zero o molti Books associati.

+ +
+

Nota: La prossima sezione fornisce un manuale di base che spiega come vengono definiti e utilizzati i models. Mentre lo leggi, considera come costruiremo ciascuno dei modelli nel diagramma sopra.

+
+ +

Fondamenti del modello

+ +

Questa sezione fornisce una breve panoramica di come viene definito un model e alcuni dei campi e argomenti di campo più importanti.

+ +

Definizione del modello

+ +

I model vengono generalmente definiti nel file models.py di una applicazione. Sono implementati come sottoclassi di django.db.models.Model, e possono includere campi, metodi e metadati. Il frammento di codice seguente mostra un modello "tipico", denominato MyModelName:

+ +
from django.db import models
+
+class MyModelName(models.Model):
+    """A typical class defining a model, derived from the Model class."""
+
+    # Fields
+    my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
+    ...
+
+    # Metadata
+    class Meta:
+        ordering = ['-my_field_name']
+
+    # Methods
+    def get_absolute_url(self):
+        """Returns the url to access a particular instance of MyModelName."""
+        return reverse('model-detail-view', args=[str(self.id)])
+
+    def __str__(self):
+        """String for representing the MyModelName object (in Admin site etc.)."""
+        return self.my_field_name
+ +

Nelle sezioni seguenti esploreremo in dettaglio ciascuna funzionalità all'interno del modello:

+ +

Campi

+ +

Un modello può avere un numero arbitrario di campi, di qualsiasi tipo - ognuno rappresenta una colonna di dati che vogliamo memorizzare in una delle nostre tabelle del database. Ogni record di database (riga) consisterà in uno di ciascun valore di quei campi. Osserviamo l'esempio seguente:

+ +
my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
+ +

Il nostro esempio precedente ha un singolo campo chiamato my_field_name, di tipo models.CharField — che significa che questo campo conterrà stringhe di caratteri alfanumerici. I tipi di campo vengono assegnati utilizzando classi specifiche, che determinano il tipo di record utilizzato per memorizzare i dati nel database, insieme ai criteri di convalida da utilizzare quando i valori vengono ricevuti da un form HTML (vale a dire ciò che costituisce un valore valido). I tipi di campo possono anche prendere argomenti che specificano ulteriormente come il campo è memorizzato o può essere utilizzato. In questo caso stiamo dando al nostro campo due argomenti:

+ + + +

Il nome del campo viene utilizzato per fare riferimento ad esso in query e templates. I campi hanno anche un'etichetta, che è specificata come argomento (verbose_name) o dedotto variando in maiuscola la prima lettera del nome della variabile del campo e sostituendo qualsiasi underscore con uno spazio (ad esempio my_field_name avrebbe una etichetta di default My field name).

+ +

L'ordine in cui i campi sono dichiarati influenzerà il loro ordine predefinito se un modello viene reso in un modulo (ad esempio nel sito di amministrazione), tuttavia questo ordine può essere sovrascritto.

+ +
Argomenti comuni nei campi
+ +

I seguenti argomenti comuni possono essere utilizzati per dichiarare molti dei diversi tipi di campo:

+ + + +

Ci sono molte altre opzioni — consultare full list of field options here.

+ +
Tipi di campo più comuni
+ +

Il seguente elenco descrive alcuni dei tipi di campi più comunemente usati.

+ + + +

Esistono molti altri tipi di campi, compresi i campi per diversi tipi di numeri (interi grandi, interi piccoli, float), booleani, URL, slug, ID univoci e altre informazioni "temporali" (durata, tempo, ecc.) . È possibile visualizzare la full list here.

+ +

Metadata

+ +

Puoi dichiarare metadata per il tuo Modello utilizzando class Meta, come mostrato sotto.

+ +
class Meta:
+    ordering = ['-my_field_name']
+
+ +

Una delle funzionalità più utili di questi metadati consiste nel controllare l'ordinamento predefinito dei record restituiti quando si esegue una query sul tipo di modello. A tale scopo, specificare l'ordine di corrispondenza in un elenco di nomi di campi sull'attributo ordering come sopra. L'ordine dipende dal tipo di campo (i campi dei caratteri sono ordinati alfabeticamente, mentre i campi delle date sono ordinati in ordine cronologico). Come mostrato sopra, puoi anteporre il nome del campo al simbolo meno (-) per invertire l'ordine.

+ +

Per esempio, se scegliamo un sort dei libri come nell'esempio per default:

+ +
ordering = ['title', '-pubdate']
+ +

i libri saranno ordinati alfabeticamente per titolo, dalla A alla Z e quindi per data di pubblicazione all'interno di ciascun titolo, dal più recente al più vecchio. Un altro attributo comune è verbose_name, un nome dettagliato per la classe in forma singolare e plurale:

+ +
verbose_name = 'BetterName'
+ +

Altri attributi utili consentono di creare e applicare nuove "autorizzazioni di accesso" per il modello (le autorizzazioni predefinite vengono applicate automaticamente), consentire l'ordinamento in base a un altro campo o dichiarare che la classe è "astratta" (una classe base per cui non è possibile creare record, e sarà invece derivato da creare altri modelli). Molte altre opzioni di metadati controllano quale database deve essere utilizzato per il modello e come vengono archiviati i dati (questi sono davvero utili solo se è necessario associare un modello a un database esistente).

+ +

La lista completa di opzioni per i metadati: Model metadata options (Django docs).

+ +

Metodi

+ +

Un modello può avere metodi.

+ +

In ogni caso, in ogni modello è necessario definire il metodo standard della classe Python __str__() per restituire una stringa leggibile dall'uomo per ciascun oggetto. Questa stringa viene utilizzata per rappresentare singoli record nel sito di amministrazione (e in qualsiasi altro punto è necessario fare riferimento a un'istanza del modello). Spesso questo restituirà un titolo o un campo nome dal modello.

+ +
def __str__(self):
+    return self.field_name
+ +

Un altro metodo comune da includere nei modelli Django è get_absolute_url (), che restituisce un URL per la visualizzazione di record di modelli individuali sul sito Web (se si definisce questo metodo, Django aggiungerà automaticamente un pulsante "Visualizza sul sito" alle schermate di modifica dei record del modello in il sito di amministrazione). Di seguito viene mostrato un tipico pattern per get_absolute_url ().

+ +
def get_absolute_url(self):
+    """Returns the url to access a particular instance of the model."""
+    return reverse('model-detail-view', args=[str(self.id)])
+
+ +
+

Nota: Supponendo che utilizzerai URLs come /myapplication/mymodelname/2 per visualizzare record individuali per il tuo modello (dove "2" è l'id per un particolare record), dovrai creare un mapper URL per passare la risposta e l'id a una "model detail view" (vista di dettaglio del modello) (che farà il lavoro richiesto per mostrare il record). la funzione reverse() sopra effettua un "reverse" del tuo url mapper (nel caso sopra nominato 'model-detail-view') per creare un URL nel formato corretto.

+ +

Ovviamente per fare questo lavoro devi ancora scrivere la mappatura degli URL, la vista e il template!

+
+ +

Puoi anche definire altri metodi che ti piacciono e chiamarli dal tuo codice o template (a condizione che non prendano alcun parametro).

+ +

Gestone del modello

+ +

Una volta definite le classi model, è possibile utilizzarle per creare, aggiornare o eliminare record e per eseguire query per ottenere tutti i record o particolari sottoinsiemi di record. Ti mostreremo come farlo nel tutorial quando definiremo le nostre views, ma ecco un breve sommario.

+ +

Creare e modificare record

+ +

Per creare un record puoi definire una istanza del modello e poi richiamare save().

+ +
# Create a new record using the model's constructor.
+record = MyModelName(my_field_name="Instance #1")
+
+# Save the object into the database.
+record.save()
+
+ +
+

Note: Se non hai dichiarato alcun campo come primary_key, al nuovo record ne verrà assegnato uno automaticamente, con nome del campo id. È possibile interrogare questo campo dopo aver salvato il record precedente, esso dovrebbe avere il valore 1.

+
+ +

È possibile accedere ai campi in questo nuovo record e modificarne i valori utilizzando la sintassi dot (.) e per memorizzare nel database i valori modificati devi chiamare save().

+ +
# Access model field values using Python attributes.
+print(record.id) # should return 1 for the first record.
+print(record.my_field_name) # should print 'Instance #1'
+
+# Change record by modifying the fields, then calling save().
+record.my_field_name = "New Instance Name"
+record.save()
+ +

Ricercare record

+ +

È possibile cercare i record che soddisfano determinati criteri utilizzando l'attributo objects del model (fornito dalla classe base).

+ +
+

Nota: Spiegare come cercare i record usando il modello "astratto" nei nomi dei campi può generare un po 'di confusione. Nella discussione seguente faremo riferimento a un modello Book con campi title e genre, in cui genre è anche lui un modello con un singolo campo name.

+
+ +

Possiamo ottenere tutti i record per un modello come un QuerySet, utilizzando objects.all().  Il QuerySet è un oggetto iterabile, ovvero contiene un numero di oggetti che è possibile scorrere/iterare/ciclare.

+ +
all_books = Book.objects.all()
+
+ +

Il metodo filter() di Django ci consente di filtrare il QuerySet restituito per matchare un campo di testo o numerico specificato a un particolare criterio. Ad esempio, per filtrare i libri che contengono "wild" nel titolo e poi contarli, potremmo fare quanto segue.

+ +
wild_books = Book.objects.filter(title__contains='wild')
+number_wild_books = wild_books.count()
+
+ +

I campi da matchare e il tipo di corrispondenza sono definiti nel nome del parametro del filtro, utilizzando il formato: field_name__match_type (notare il doppio underscore tra title e contains sopra). In alto stiamo filtrando title con una corrispondenza case-sensitive. Esistono molti altri tipi di corrispondenze: icontains (case-insensitive), iexact (corrispondenza esatta case-insensitive), exact (corrispondenza esatta case-sensitive) e in, gt (grater than), startswith, ecc. Consultare la lista completa qui.

+ +

In alcuni casi sarà necessario filtrare su un campo che definisce una relazione uno-a-molti con un altro modello (per esempio una ForeignKey). In questo caso è possibile "indicizzare" i campi all'interno del modello correlato con un doppio underscore aggiuntivo. Quindi, ad esempio, per filtrare i libri con uno specifico pattern genre, dovrai indicizzare al name attraverso il campo genre, come mostrato sotto:

+ +
# Will match on: Fiction, Science fiction, non-fiction etc.
+books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')
+
+ +
+

Nota: Puoi usare gli underscores (__) per navigare su tutti i livelli di relazione che ti servono (ForeignKey/ManyToManyField). Per esempio, un Book che aveva diversi tipi, definiti utilizzando un'ulteriore relazione "cover" potrebbe avere un nome di parametro: type__cover__name__exact='hard'.

+
+ +

C'è molto di più che puoi fare con le query, comprese le ricerche all'indietro dai modelli correlati, concatenare i filtri, restituire un insieme più piccolo di valori, ecc. Per ulteriori informazioni, vedere Making queries (Django Docs).

+ +

Definire i Models della LocalLibrary

+ +

In questa sezione inizieremo a definire i modelli per la libreria. Apri models.py (in /locallibrary/catalog/). Le righe di codice iniziali importano il modulo models, che contiene la classe di base models.Model da cui i nostri modelli erediteranno.

+ +
from django.db import models
+
+# Create your models here.
+ +

Modello Genre

+ +

Copia il codice del modello Genre mostrato sotto e incollalo alla fine del file models.py. Questo modello viene utilizzato per memorizzare informazioni sulla categoria di libri, ad esempio se si tratta di narrativa o saggistica, storia romantica o militare, ecc. Come menzionato sopra, abbiamo creato il Genre come model piuttosto che come testo libero o elenco di selezione in modo che i possibili valori possano essere gestiti tramite il database anziché essere hard-coded.

+ +
class Genre(models.Model):
+    """Model representing a book genre."""
+    name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)')
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return self.name
+ +

Il modello ha un singolo campo CharField (name), che descrive il genere (limitato a 200 caratteri e con un help_text. Alla fine del modello definiamo un metodo __str__(), che restituisce semplicemente il nome del genere definito da un particolare record. Nessun nome dettagliato (verbose) è stato definito, quindi il campo nel form verrà chiamato Name.

+ +

Modello Book

+ +

Copia il modello Book in basso e incollalo nuovamente nella parte inferiore del file. Il modello del libro rappresenta tutte le informazioni su un libro disponibile in senso generale, ma non una particolare "istanza" fisica o "copia" disponibile per il prestito. Il modello usa un campo CharField per rappresentare title e isbn del libro (notare come isbn specifica la sua etichetta come "ISBN" utilizzando il primo parametro senza nome, in caso contrario la label di default sarebbe "Isbn"). Il modello usa TextField per il summary, perchè potrebbe essere un campo abbastanza lungo.

+ +
from django.urls import reverse # Used to generate URLs by reversing the URL patterns
+
+class Book(models.Model):
+    """Model representing a book (but not a specific copy of a book)."""
+    title = models.CharField(max_length=200)
+
+    # Foreign Key used because book can only have one author, but authors can have multiple books
+    # Author as a string rather than object because it hasn't been declared yet in the file
+    author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True)
+
+    summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book')
+    isbn = models.CharField('ISBN', max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>')
+
+    # ManyToManyField used because genre can contain many books. Books can cover many genres.
+    # Genre class has already been defined so we can specify the object above.
+    genre = models.ManyToManyField(Genre, help_text='Select a genre for this book')
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return self.title
+
+    def get_absolute_url(self):
+        """Returns the url to access a detail record for this book."""
+        return reverse('book-detail', args=[str(self.id)])
+
+ +

Genre è un campo ManyToManyField, in modo che un libro possa avere più generi e un genere possa avere molti libri. L'autore è dichiarato come ForeignKey, quindi ogni libro avrà un solo autore, ma un autore può avere molti libri (in pratica un libro potrebbe avere più autori, ma non in questa implementazione semplificata!)

+ +

In entrambi i tipi di campo, la classe del modello correlata viene dichiarata come il primo parametro senza nome utilizzando la classe del modello o una stringa contenente il nome del modello correlato. È necessario utilizzare il nome del modello come stringa se la classe associata non è stata ancora definita in questo file prima che venga referenziata! Gli altri parametri di interesse nel campo author sono null=True, che consente al database di memorizzare un valore Null se nessun autore viene selezionato e on_delete=models.SET_NULL, che imposterà il valore dell'autore su Null se l'autore associato al record viene cancellato.

+ +

Inoltre il modello definisce __str__() , utilizzando il titolo del libro title per rappresentare un record di Book. L'ultimo metodo, get_absolute_url() ritorna un URL che può essere usato per accedere a un record di dettaglio per questo modello (per farlo funzionare dovremo definire una mappatura URL che abbia il nome book-detail, e una view e un template associati).

+ +

Modello BookInstance

+ +

Copia il modello BookInstance sotto gli altri modelli. BookInstance rappresenta una copia specifica di un libro che potrebbe essere presa in prestito da qualcuno e include informazioni sul fatto che la copia sia disponibile o sulla data in cui è prevista la restituzione, o dettagli sulla versione e un ID univoco per il libro nella biblioteca.

+ +

Alcuni metodi e campi suoneranno familiari. Il modello utilizza

+ + + +
import uuid # Required for unique book instances
+
+class BookInstance(models.Model):
+    """Model representing a specific copy of a book (i.e. that can be borrowed from the library)."""
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, help_text='Unique ID for this particular book across whole library')
+    book = models.ForeignKey('Book', on_delete=models.SET_NULL, null=True)
+    imprint = models.CharField(max_length=200)
+    due_back = models.DateField(null=True, blank=True)
+
+    LOAN_STATUS = (
+        ('m', 'Maintenance'),
+        ('o', 'On loan'),
+        ('a', 'Available'),
+        ('r', 'Reserved'),
+    )
+
+    status = models.CharField(
+        max_length=1,
+        choices=LOAN_STATUS,
+        blank=True,
+        default='m',
+        help_text='Book availability',
+    )
+
+    class Meta:
+        ordering = ['due_back']
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return f'{self.id} ({self.book.title})'
+ +

Dichiaramo una ulteriore serie di nuovi campi di altri tipi:

+ + + +

__str__() rappresenta l'oggetto BookInstance usando una combinazione del suo id univoco e del titolo del libro.

+ +
+

Nota: un po' di Python:

+ +
    +
  • A partire da Python 3.6, puoi utilizzare la sintassi di interpolazione delle stringhe (anche nota come f-strings): f'{self.id} ({self.book.title})'.
    • +
  • in altre versioni di questo tutorial, più vecchie, usavamo una stringa formattata (formatted string), che è un altro modo valido di formattare le stringhe in Python (esempio: '{0} ({1})'.format(self.id,self.book.title)).
    • +
+
+ +

Modello Autore

+ +

Copia il modello Author (che trovi qui sotto) dopo il codice esistente in models.py.

+ +
class Author(models.Model):
+    """Model representing an author."""
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    class Meta:
+        ordering = ['last_name', 'first_name']
+
+    def get_absolute_url(self):
+        """Returns the url to access a particular author instance."""
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return f'{self.last_name}, {self.first_name}'
+
+
+ +

Tutti i campi/metodi dovrebbero ora essere familiari. Il modello definisce un autore avente un nome, un cognome, una data di nascita e la data di morte (entrambe opzionali). Esso specifica che per impostazione predefinita __str__() restituisca il nome nell'ordine cognome nome. Il metodo get_absolute_url() inverte il mapping degli URL di author-detail per ottenere l'URL per la visualizzazione di un singolo autore.

+ +

Rieseguire le migrazioni del database

+ +

Tutti i modelli sono stati creati. Rilanciamo la migrazione del database per aggiungerli effettivamente al database.

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+ +

Modello del linguaggio — Sfida

+ +

Immagina che un benefattore locale doni un certo numero di nuovi libri scritti in un'altra lingua (diciamo, Farsi). La sfida è capire come questi sarebbero meglio rappresentati nel nostro sito web della biblioteca e poi aggiungerli ai model.

+ +

Alcune considerazioni:

+ + + +

Dopo aver deciso, aggiungi il campo. Puoi vedere cosa abbiamo deciso su Github here.

+ +

Non dimenticare di rieffettuare le migrazioni dopo ogni cambiamento al tuo modello.

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+ + + + + +

Sommario

+ +

In questo articolo abbiamo appreso come sono definiti i modelli, quindi abbiamo utilizzato queste informazioni per progettare e implementare modelli appropriati per il sito Web LocalLibrary.

+ +

A questo punto ci allontaneremo brevemente dalla creazione del sito e controlleremo il sito di amministrazione di Django. Questo sito ci permetterà di aggiungere alcuni dati alla biblioteca, che possiamo quindi visualizzare usando le nostre view e template (ancora da creare).

+ +

Consulta anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/server-side/django/sessions/index.html b/files/it/learn/server-side/django/sessions/index.html new file mode 100644 index 0000000000..0706090bd5 --- /dev/null +++ b/files/it/learn/server-side/django/sessions/index.html @@ -0,0 +1,195 @@ +--- +title: 'Django Tutorial Part 7: Sessions framework' +slug: Learn/Server-side/Django/Sessions +tags: + - Articolo + - Principiante + - Python + - Server + - django + - sessioni +translation_of: Learn/Server-side/Django/Sessions +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}
+ +

Questo tutorial estende il nostro sito LocalLibrary, aggiungendo un contatore di visite session-based alla home page. Questo è un esempio relativamente semplice, ma mostra come si può usare il session framework per fornire comportamento persistente per utenti anonimi nei tuoi siti.

+ + + + + + + + + + + + +
Prerequisiti:Completa tutti gli argomenti dei tutorial precedenti, compreso Django Tutorial Part 6: Generic list and detail views
Obiettivo:Capire come vengono utilizzate le sessioni.
+ +

Panoramica

+ +

Il sito LocalLibrary che abbiamo creato nei precedenti tutorial permette agli utenti di navigare tra i libri e gli autori nel catalogo. Anche se il contenuto viene generato dinamicamente dal database, ogni utente essenzialmente avrà accesso alle stesse pagine e e gli stessi tipi di informazione quando utilizzano il sito.

+ +

In una biblioteca "reale" potresti desiderare di fornire agli utenti individuali una esperienza customizzata, basata sul loro precedente utilizzo del sito, preferenze, ecc. Per esempio, potresti nascondere messaggi di avviso di cui gli utenti hanno già preso conoscenza la prossima volta che essi visitano il sito, o archiviare e rispettare le loro preferenze (ad esempio, il numero di risultati di ricerca che vogliono mostrato su ogni pagina). 

+ +

Il session framework ti consente di implementare questo tipo di comportamento, permettendoti di memorizzare e recuperare dati arbitrari su una base di visitstore per sito (per-site-visitor). 

+ +

Cosa sono le sessioni?

+ +

Tutte le comunicazioni tra browser web e i server avvengono attraverso il prootocollo HTTP, che è stateless. Il fatto che il protocollo sia stateless significa che i messagggi tra il client e il server sono completamente indipendenti da ciascuno degli altri— non esiste la nozione di "sequenza" o comportamento basato sui precedenti messaggi. Di conseguenza, se vuoi avere un sito che tenga traccia delle relazioni che sono in attive con un client, hai bisogno di implementarlo tu stesso.

+ +

Le sessioni sono il meccanismo utilizzato da Django (e dalla maggior parte dell'Internet) per tenere traccia dello "stato" tra il sito e un particolare browser. Le sessioni ti consentono di memorizzare dati arbitrari per browser, e avere questi dati disponibili per il sito ogni volta che il browser si connette. Item individuali di dati associati con la sessione sono quindi referenziati con una "key", la quale è utilizzata sia per rchiviare che per recuperare i dati.

+ +

Django utilizza un cookie contenente uno speciale session id per identificare ciascun browser e la sua sessione associata col sito. I dati della sessione effettiva sono archiviati nel database del sito di default (questo è più sicuro del memorizzare i dati in un cookie, dove sono più vulnerabili a utenti malevoli). Si può configurare Django per memorizzare i dati della sessione in altre posizioni (nella cache, nei file, nei "secure" cookie), ma la posizione di default è una opzione buona e relativamente sicura.

+ +

Abilitare le sessioni

+ +

Le sessioni sono state abilitate automaticamente quando abbiamo creato lo scheletro del sito web (nel tutorial 2).

+ +

La configurazione è imnpostata nelle sezioni INSTALLED_APPS e MIDDLEWARE del file di progetto (locallibrary/locallibrary/settings.py), come mostrato qui sotto:

+ +
INSTALLED_APPS = [
+    ...
+    'django.contrib.sessions',
+    ....
+
+MIDDLEWARE = [
+    ...
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    ....
+ +

Utilizzo delle sessioni

+ +

Si può accedere all'attributo session nell view dal parametro request (una HttpRequest passata dentro come primo argomento alla view). Questo attributo sessione rappresenta la connessione specifica con l'utente attuale (o per essere più precisi, la connessione al browser attuale, come identificato dal session id nel cookie del browser per questo sito).

+ +

L'attributo session è un oggetto simile a un dizionario (dictionary-like) che puoi leggere e scrivere quante volte vuoi nella tua view, modificandolo come desiderato. Si possono effettuare tutte le normali operazioni dei dictionary, inclusa la cancellazione di tutti i dati, testare se una chiave è presente, ciclare sui dati, ecc. Il più delle volte userete solo l'API standard "dictionary" per ottenere valori e impostare valori.

+ +

I frammenti di codice sotto mostrano come si può ottenere, impostare, e cancellare alcuni dati con la key "my_car", associata alla sessione corrente (browser). 

+ +
+

Nota: Una delle cose belle di Django è che non c'è bisogno di pensare ai meccanismi che legano la sessione alla tua attuale richiesta nella tua view. Se dovessimo usare i frammenti di codice qui sotto nella nostra view, sapremmo che l'informazione su my_car è associata solo al browser che ha inviato la richiesta corrente.

+
+ +
# Get a session value by its key (e.g. 'my_car'), raising a KeyError if the key is not present
+my_car = request.session['my_car']
+
+# Get a session value, setting a default if it is not present ('mini')
+my_car = request.session.get('my_car', 'mini')
+
+# Set a session value
+request.session['my_car'] = 'mini'
+
+# Delete a session value
+del request.session['my_car']
+
+ +

L'API offre anche un certo numero di altri metodi che sono usati principalmente per gestire il cookie associato alla sessione. Per esampio, ci sono metodi per testare che i cookie sono supportati nel browser client, per impostare e controllare la data di scadenza del cookie, e per cancellare le sessioni scadute dal data store. Puoi trovare informazioni sulla API completa in How to use sessions (Django docs).

+ +

Salvare i dati di sessione

+ +

Di default, Django salva solamente il database di sessione e invia il session cookie al client quando la sessione è stata modificata (assegnata) ocancellata. Se si sta aggiornando qualche dato utilizzando la sua session key come mostrato nella precedente sezione, allora non devi preoccuparti di questo! Per esempio:

+ +
# This is detected as an update to the session, so session data is saved.
+request.session['my_car'] = 'mini'
+ +

Se si stanno aggiornando alcune informazioni all'interno dei dati di sessione, allora Django non riconoscerà che hai fatto una modifica alla sessione e salva i dati (per esempio, se dovessi modificare i dati "wheels" all'interno dei tuoi dati "my_car", come mostrato sotto). In questo caso avrai bisogno di contrassegnare esplicitamente la sessione come modificata.

+ +
# Session object not directly modified, only data within the session. Session changes not saved!
+request.session['my_car']['wheels'] = 'alloy'
+
+# Set session as modified to force data updates/cookie to be saved.
+request.session.modified = True
+
+ +
+

Nota: Si può modificare il comportamento in modo che il sito aggiorni il database/invii cookie su ciascuna request aggiungendo SESSION_SAVE_EVERY_REQUEST = True nelle tue impostazioni di progetto (locallibrary/locallibrary/settings.py).

+
+ +

Semplice esempio — ottenere il conteggio delle visite

+ +

Come esempio semplice del mondio reale, aggiorneremo la nostra biblioteca per dire all'utente attuale quante volte essi hanno visitato la home page della LocalLibrary. 

+ +

Apri /locallibrary/catalog/views.py, e effettua le modifiche mostrate in grassetto sotto. 

+ +
def index(request):
+    ...
+
+    num_authors = Author.objects.count()  # The 'all()' is implied by default.
+
+    # Number of visits to this view, as counted in the session variable.
+    num_visits = request.session.get('num_visits', 0)
+    request.session['num_visits'] = num_visits + 1
+
+    context = {
+        'num_books': num_books,
+        'num_instances': num_instances,
+        'num_instances_available': num_instances_available,
+        'num_authors': num_authors,
+        'num_visits': num_visits,
+    }
+
+    # Render the HTML template index.html with the data in the context variable.
+    return render(request, 'index.html', context=context)
+ +

Qui prima otteniamo il valore della session key 'num_visits', impostiamo il valore a 0 se esso non è stato precedentemente impostato. Ogni volta che viene ricevuta una richiesta, allora si incrementa il valore e lo si memorizza di nuovo nella sessione (per la prossima volta che l'utente visita la pagina). La variabile num_visits viene quindi passata al template nella nostra variabile context.

+ +
+

Nota: Potremmo anche verificare se i cookie sono anche supportati nel browser qui (vedi How to use sessions per esempi) o progettare la nostra UI in modo che non importa se i cookie sono supportati o meno.

+
+ +

Aggiungi la linea che trovi alla fine del blocco qui sotto al tuo template HTML principale (/locallibrary/catalog/templates/index.html) alla fine della sezione "Dynamic content" per mostrare la variabile context:

+ +
<h2>Dynamic content</h2>
+
+<p>The library has the following record counts:</p>
+<ul>
+  <li><strong>Books:</strong> \{{ num_books }}</li>
+  <li><strong>Copies:</strong> \{{ num_instances }}</li>
+  <li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
+  <li><strong>Authors:</strong> \{{ num_authors }}</li>
+</ul>
+
+<p>You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.</p>
+
+ +

Salva le modifiche e riavvia il server di test. Ogni volta che tu farai un refresh della pagina, il numero dovrebbe aggiornarsi.

+ + + + + +

Ora sai come è facile utilizzare per migliorare la tua interazione con utenti anonimi. 

+ +

Nei nostri prossimi articoli spiegheremo il framework per l'autenticazione ed autorizzazione (permessi), e ti mostreremo come supportare gli account user.

+ +

Vedi anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}

+ +

In questo modulo

+ + diff --git a/files/it/learn/server-side/django/skeleton_website/index.html b/files/it/learn/server-side/django/skeleton_website/index.html new file mode 100644 index 0000000000..1f5d7117ff --- /dev/null +++ b/files/it/learn/server-side/django/skeleton_website/index.html @@ -0,0 +1,406 @@ +--- +title: 'Django Tutorial Parte 2: Creare lo scheletro di un sito web' +slug: Learn/Server-side/Django/skeleton_website +tags: + - Articolo + - Guida + - Intro + - Introduzione + - Principianti + - Tutorial + - backend + - django + - imparare +translation_of: Learn/Server-side/Django/skeleton_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
+ +

Questo secondo articolo del nostro Tutorial Django mostra come creare uno "scheletro" di progetto di un sito web come base, che potrà poi essere popolato con le impostazioni specifiche del sito, con i path, con i modelli, le view, e i template.

+ + + + + + + + + + + + +
Prerequisiti:Creare un ambiente di sviluppo Django. Visita: Django Tutorial.
Obiettivi:Essere in grado di utilizzare i tool Django per iniziare il tuo progetto web.
+ +

Panoramica

+ +

Questo articolo mostra come creare uno "scheletro" di un sito web, che potrà poi essere popolato con impostazioni specifiche del sito, con i path, con i model, le view, e i template (discuteremo di questo in successivi articoli).

+ +

Il processo è semplice:

+ +
    +
  1. Utilizzare lo strumento django-admin per creare la cartella del progetto, i templates di file di base e lo script di gestione del progetto (manage.py).
    2. +
  2. Utilizzare manage.py per creare una o più applicazioni. +
    +

    Nota: un sito Web può essere costituito da una o più sezioni, ad es. sito principale, blog, wiki, area download, ecc. Django ti incoraggia a sviluppare questi componenti come applicazioni separate, che potrebbero poi essere riutilizzate in diversi progetti, se necessario. 

    +
    +
    3. +
  3. Registrare le nuove applicazioni per includerle nel progetto.
    4. +
  4. Collegare il mapper url/path per ciascuna applicazione.
    5. +
+ +

Per il sito web Local Library la cartella del sito web e la sua cartella di progetto saranno chiamate locallibrary, e avremo solo un'applicazione chiamata catalog. La struttura delle cartelle di livello superiore sarà quindi la seguente:

+ +
locallibrary/         # Cartella Sito Web
+    manage.py         # Script per eseguire i tool di Django per questo progetto (creato utilizzando django-admin)
+    locallibrary/     # Cartella sito web/progetto (creata utilizzando django-admin)
+    catalog/          # Cartella Application (creata utilizzando manage.py)
+
+ +

Le sezioni seguenti illustrano in dettaglio le fasi del processo e mostrano come testare le modifiche. Alla fine dell'articolo discuteremo alcune delle altre configurazioni a livello di sito che potresti fare anche in questa fase.

+ +

Creare il progetto

+ +

Per prima cosa apri un prompt dei comandi / terminale, assicurati di essere nel tuo virtual environment, accedi a dove vuoi archiviare le tue app Django (mettile in un posto facilmente reperibile, all'interno della tua cartella documenti) e crea una cartella per il tuo nuovo sito web (in questo caso: django_projects). Poi entra nella cartella col comando cd:

+ +
mkdir django_projects
+cd django_projects
+ +

Crea il nuovo progetto utilizzando il comando django-admin startproject come mostrato, poi naviga fino alla cartella.

+ +
django-admin startproject locallibrary
+cd locallibrary
+ +

lo strumento django-admin crea una struttura cartella/file come mostrata sotto:

+ +
locallibrary/
+    manage.py
+    locallibrary/
+        __init__.py
+        settings.py
+        urls.py
+        wsgi.py
+ +

la cartella corrente dovrebbe somigliare alla seguente:

+ +
../django_projects/locallibrary/
+ +

La sottocartella del progetto locallibrary è l'entry point per il sito Web:

+ + + +

Lo script manage.py viene utilizzato per creare applicazioni, lavorare con i database e avviare il server web di sviluppo. 

+ + + +

Quindi, esegui il seguente comando per creare l'applicazione catalog che risiederà all'interno del nostro progetto di localibrary (deve essere eseguito nella stessa cartella di manage.py del tuo progetto):

+ +
python3 manage.py startapp catalog
+ +
+

Note: il comando precedente è per Linux / macOS X. Su Windows il comando dovrebbe essere:

+ +

 py -3 manage.py startapp catalog

+ +

Se stai lavorando con Windows rimpiazza python3 con py -3 in tutto questo modulo.

+ +

Se stai usando la versione di Python 3.7.0 o superiore, devi usare solo:

+ +

py manage.py startapp catalog

+
+ +

Lo strumento crea una nuova cartella e la popola con i file per le diverse parti dell'applicazione (mostrate in grassetto sotto). La maggior parte dei file ha un nome utile in base al loro scopo (ad esempio, le viste dovrebbero essere memorizzate in views.py, models in models.py, i test tests.py, le configurazioni per l'amministrazione in admin.py, le applicazioni in apps.py) e contenere un minimo di codice per il lavoro con gli oggetti associati.

+ +

La directory del progetto aggiornata dovrebbe essere così ora:

+ +
locallibrary/
+    manage.py
+    locallibrary/
+    catalog/
+        admin.py
+        apps.py
+        models.py
+        tests.py
+        views.py
+        __init__.py
+        migrations/
+
+ +

Inoltre abbiamo:

+ + + +
+

Note: Hai notato cosa manca nella lista dei file sopra? Mentre c'è un posto per le tue viste e modelli, non c'è nessun posto per te per mettere i tuoi mapping url, templates e file statici. Ti mostreremo come crearli più avanti (non sono necessari in tutti i siti Web ma sono necessari in questo esempio).

+
+ +

Registrare l'applicazione catalog

+ +

Ora che l'applicazione è stata creata, dobbiamo registrarla nel progetto in modo che venga inclusa quando vengono eseguiti tutti gli strumenti (ad esempio per aggiungere modelli al database). Le applicazioni vengono registrate aggiungendole alla lista INSTALLED_APPS in project settings. 

+ +

Aprire il file di project settings django_projects/locallibrary/locallibrary/settings.py e cerca la definizione della lista INSTALLED_APPS. Quindi aggiungi una nuova riga alla fine dell'elenco, come mostrato in grassetto sotto.

+ +
INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'catalog.apps.CatalogConfig', 
+]
+ +

La nuova riga specifica l'oggetto di configurazione dell'applicazione (CatalogConfig) che è stato generato per te in /locallibrary/catalog/apps.py quando hai creato l'applicazione.

+ +
+

Nota: Noterai che ci sono già molti altri INSTALLED_APPS (e MIDDLEWARE, più in basso nel file delle impostazioni).. Questi abilitano il supporto per il sito  Django administration e, di conseguenza, molte delle funzionalità che utilizza (incluse sessioni, autenticazione, ecc.).

+
+ +

Specificare il database

+ +

Questo è anche il punto in cui normalmente si specifica il database da utilizzare per il progetto - è logico utilizzare lo stesso database per lo sviluppo e la produzione laddove possibile, al fine di evitare piccole differenze di comportamento.  Per le differenti opzioni si rimanda a Databases (Django docs). 

+ +

Useremo il database SQLite per questo esempio, perché non ci aspettiamo di richiedere molti accessi simultanei su un database dimostrativo, e anche perché non richiede lavoro aggiuntivo per impostarlo! Puoi vedere come è configurato questo database in settings.py (ulteriori informazioni sono incluse anche di seguito):

+ +
DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+    }
+}
+
+ +

Poichè usiamo SQLite, non abbiamo bisogno di altri setup. Andiamo avanti!

+ +

Altre impostazioni per il progetto

+ +

Il file settings.py viene anche usato per configurare un certo numero di altre impostazioni, ma a questo punto probabilmente si desidera solo modificare TIME_ZONE — che dovrebbe essere impostato uguale ad una delle stringhe standard presenti nella lista List of tz database time zones (la colonna TZ contiene i valori da sostituire). Cambia la tua TIME_ZONE con una di queste stringhe, per esempio:

+ +
TIME_ZONE = 'Europe/Rome'
+ +

Queste altre due impostazioni invece non le cambierai ora, ma dovresti comunque conoscerle:

+ + + +

Collegare il mapper URL

+ +

Il sito Web viene creato con un file di mappatura URL (urls.py) nella cartella del progetto. Sebbene sia possibile utilizzare questo file per gestire tutti i mapping degli URL, è più frequente rinviare i mapping all'applicazione associata.

+ +

Aprite locallibrary/locallibrary/urls.py, notare il testo istruttivo che spiega alcuni modi per utilizzare il mappatore URL.

+ +
"""locallibrary URL Configuration
+
+
+L'elenco "urlpatterns" indirizza gli URL alle viste. Per maggiori informazioni vedi:
+    https://docs.djangoproject.com/en/2.1/topics/http/urls/
+Esempi:
+Views basate su funzioni
+    1. Aggiungere un import:  from my_app import views
+    2. Aggiungere un URL a urlpatterns:  path('', views.home, name='home')
+Views basate su classi
+    1. Aggiungere un import:  from other_app.views import Home
+    2. Aggiungere un URL a urlpatterns:  path('', Home.as_view(), name='home')
+Includere un altro URLconf
+    1. Importare la funzione include(): from django.urls import include, path
+    2. Aggiungere URL a urlpatterns: path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+]
+
+ +

Le mappature URL sono gestite tramite la variabile urlpatterns, che è una list Python di funzioni path(). Ogni funzione path() associa un pattern URL a una view specifica, che verrà visualizzata quando il pattern viene matchato, o con un altro elenco di codice di test pattern URL (in questo secondo caso, il pattern diventa "base URL" per i pattern definiti nel modulo target). La list urlpatterns definisce inizialmente una singola funzione che associa tutti gli URL con il pattern admin/ al modulo admin.site.urls, che contiene le definizioni di mappatura URL proprie dell'applicazione di Amministrazione.

+ +
+

Nota: il percorso (route) in path() è una stringa che definisce un pattern URL da matchare. Questa stringa potrebbe includere una variabile con nome (tra parentesi angolari), ad es. 'catalog/<id>/'. Questo pattern corrisponderà a un URL come /catalog/any_chars/ e passerà any_chars alla view come una stringa con nome di parametro id. Discuteremo ulteriormente i metodi path e i route patterns in successivi argomenti.

+
+ +

Aggiungi le linee qua sotto alla fine del file per aggiungere un nuovo elemento alla lista urlpatterns. Questo nuovo elemento della lista include un path() che inoltra richieste con il pattern catalog/ al modulo catalog.urls (il file con il relativo URL /catalog/urls.py).

+ +
# Use include() to add paths from the catalog application
+from django.urls import include
+from django.urls import path
+
+urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+
+
+ +

Adesso reindirizziamo il root URL del nostro sito (cioè 127.0.0.1:8000) all'URL 127.0.0.1:8000/catalog/; questa è l'unica app che useremo in questo progetto. Per fare ciò, useremo una speciale funzione (RedirectView), che prende come primo argomento il nuovo URL relativo verso cui fare il redirect (/catalog/) quando il pattern URL specificato nella funzione path() viene matchato (il root URL, in questo caso).

+ +

Aggiungere le seguenti linee di codice, sempre alla fine del file:

+ +
#Add URL maps to redirect the base URL to our application
+from django.views.generic import RedirectView
+urlpatterns += [
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+]
+
+ +

Lasciare il primo parametro della funzione path vuoto per implicare '/'. Se scrivi il primo parametro come '/' Django ti darà il seguente avviso quando avvii il server di sviluppo:

+ +
System check identified some issues:
+
+WARNINGS:
+?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'.
+Remove this slash as it is unnecessary.
+If this pattern is targeted in an include(), ensure the include() pattern has a trailing '/'.
+
+ +

Django non utilizza file statici come CSS, JavaScript e immagini per impostazione predefinita, ma può essere utile per lo sviluppo del server Web durante la creazione del sito. Come aggiunta finale a questo mapper URL, è possibile abilitare la pubblicazione di file statici durante lo sviluppo aggiungendo le seguenti righe.

+ +

Aggiungi il seguente blocco di codice alla fine del file:

+ +
# Use static() to add url mapping to serve static files during development (only)
+from django.conf import settings
+from django.conf.urls.static import static
+
+urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+
+ +
+

Nota: Ci sono diversi modi per estendere la list urlpatterns (nel nostro esempio utiliziamo l'operatore append += per separare chiaramente il codice nuovo e da quello vecchio). Avremmo potuto semplicemente includere tutto nella definizione originale della list:

+ +
urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('catalog/', include('catalog.urls')),
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+
+ +

Inoltre, abbiamo aggiunto la linea di import (from django.urls import include) insieme al codice che la utilizza, ma comunemente si preferisce mettere tutti gli import all'inizio del file Python.

+
+ +

Come ultimo passaggio, crea un file all'interno della cartella del tuo catalogo chiamato urls.py e aggiungi il testo seguente per definire gli urlpatterns importati (vuoti). Qui è dove aggiungeremo i nostri modelli, mentre costruiamo l'applicazione.

+ +
from django.urls import path
+from . import views
+
+urlpatterns = [
+
+]
+
+ +

Test del framework del sito Web

+ +

A questo punto abbiamo uno scheletro completo. Il sito Web in realtà non fa ancora nulla, ma vale la pena eseguirlo per assicurarsi che nessuno dei nostri cambiamenti abbia infranto nulla.

+ +

Prima di farlo, dovremmo prima eseguire una migrazione del database. Questo aggiorna il nostro database per includere tutti i modelli nelle nostre applicazioni installate (e rimuove alcuni avvisi di build).

+ +

Effettuare migrazioni di database

+ +

Django utilizza un Object-Relational-Mapper (ORM) per mappare le definizioni di modello nel codice Django alla struttura dati utilizzata dal database sottostante. Quando cambiamo le definizioni dei nostri modelli, Django tiene traccia delle modifiche e può creare script di migrazione del database (in /locallibrary/catalog/migrations/) per migrare automaticamente la struttura dati sottostante nel database in modo che corrisponda al modello.

+ +

Quando abbiamo creato il sito Django ha aggiunto automaticamente un numero di modelli per l'uso da parte della sezione admin del sito (che vedremo in seguito). Eseguire i seguenti comandi per definire le tabelle per tali modelli nel database (assicurarsi di essere nella directory che contiene manage.py):

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+
+ +
+

Importante: Avrai bisogno di eseguire i suddetti comandi ogni volta che i tuoi modelli cambiano in modo tale da influenzare la struttura dei dati che devono essere memorizzati (inclusi sia l'aggiunta che la rimozione di interi modelli e singoli campi).

+
+ +

Il comando makemigrations crea (ma non applica) le migrazioni per tutte le applicazioni installate nel progetto (puoi anche specificare il nome dell'applicazione per eseguire semplicemente una migrazione per un singolo progetto). Questo ti dà la possibilità di controllare il codice per queste migrazioni prima che vengano applicate - quando sei un esperto di Django puoi scegliere di modificarle direttamente!

+ +

Il comando migrate applica effettivamente le migrazioni al tuo database (Django tiene traccia di quelli che sono stati aggiunti al database corrente).

+ +
+

Nota: Consulta Migrations (Django docs) per info aggiuntive sui comandi meno usati nelle migrazioni.

+
+ +

Testare il sito web

+ +

Durante lo sviluppo è possibile testare il sito Web utilizzando il server web di sviluppo e quindi visualizzandolo sul browser web locale.

+ +
+

Nota: Il web server di sviluppo non è abbastanza robusto o performante per l'uso in produzione, ma è un modo molto semplice per far funzionare il tuo sito Django durante lo sviluppo per testarlo in modo rapido. Per impostazione di default il sito si troverà sul tuo computer all'indirizzo (http://127.0.0.1:8000/), ma puoi anche specificare altri computer sulla tua rete su cui hostare il sito. Per ulteriori informazioni, vedere django-admin and manage.py: runserver (Django docs).

+
+ +

Eseguire il server Web di sviluppo chiamando il comando runserver (nella stessa directory di manage.py):

+ +
python3 manage.py runserver
+
+ Performing system checks...
+
+ System check identified no issues (0 silenced).
+ August 15, 2018 - 16:11:26
+ Django version 2.1, using settings 'locallibrary.settings'
+ Starting development server at http://127.0.0.1:8000/
+ Quit the server with CTRL-BREAK.
+
+ +

Una volta attivato il server, puoi vedere il sito visitando il seguente indiriizzo sul browser web locale http://127.0.0.1:8000/. Dovresti vedere la seguente pagina di errore:

+ +

Django Debug page for Django 2.0

+ +

Non preoccuparti! Questa pagina di errore è prevista perché non abbiamo alcuna pagina/URL definita nel modulo catalogs.urls (a cui siamo reindirizzati quando otteniamo un URL alla radice del sito).

+ +
+

Nota: La pagina sopra mostra una grande funzionalità di Django - registrazione automatica del debug. Verrà visualizzata una schermata di errore con informazioni utili ogni volta che non è possibile trovare una pagina o qualsiasi errore viene generato dal codice. In questo caso possiamo vedere che l'URL che abbiamo fornito non corrisponde a nessuno dei nostri pattern URL (come elencato). Il logging verrà disattivato in produzione (quando mettiamo il sito sul Web), nel qual caso verrà pubblicata una pagina meno informativa ma più user-friendly.

+
+ +

Ora sappiamo che Django sta funzionando! 

+ +
+

Nota: Dovresti rieffettuare le migrazioni ogni volta che fai dei cambiamenti significativi, non richiedono molto tempo!

+
+ +

Sfida te stesso

+ +

La cartella catalog/ contiene file per le views, models, e altre parti dell'applicazione. Apri questi file e studiali. 

+ +

Come hai visto sopra, una mappatura URL per il sito di amministrazione è già stata aggiunta nella urls.py del progetto. Passa all'area di amministrazione nel tuo browser e vedi cosa succede (puoi dedurre l'URL corretto dalla mappatura sopra).

+ + + +

Sommario

+ +

Abbiamo creato uno scheletro completo del nostro progetto web, che potremo ora popolare con urls, models, views e templates.

+ +

Ora che lo scheletro per Local Library website è completo e funzionante, è ora di scrivere del codice per far fare al nostro sito cosa vogliamo fargli fare. 

+ +

Consulta anche

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}

+ +

In this module

+ + diff --git a/files/it/learn/server-side/django/tutorial_local_library_website/index.html b/files/it/learn/server-side/django/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..eeabfd4a01 --- /dev/null +++ b/files/it/learn/server-side/django/tutorial_local_library_website/index.html @@ -0,0 +1,79 @@ +--- +title: 'Django Tutorial: The Local Library website' +slug: Learn/Server-side/Django/Tutorial_local_library_website +tags: + - Articolo + - Guida + - Principiante + - Scripting + - Tutorial + - django + - imparare + - lato-server +translation_of: Learn/Server-side/Django/Tutorial_local_library_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
+ +

Il primo articolo della serie di tutorial pratici spiega ciò che imparerai, e fornisce una panoramica del sito web di esempio "local library" con cui andremo a lavorare e che faremo evolvere nei prossimi articoli.

+ + + + + + + + + + + + +
Prerequisiti:Leggere la Introduzione a Django. Per i seguenti articoli sarà anche necessario avere predisposto un  ambiente di sviluppo Django. 
Obiettivo:Presentare l'applicazione di esempio utilizzata in questo tutorial, e mettere in grado i lettori di capire quali argomenti saranno trattati.
+ +

Panoramica

+ +

Benvenuti al tutorial Django MDN "Local Library", nel quale sviluppiamo un sito web che potrebbe essere utilizzato per gestire il catalogo per una biblioteca locale.

+ +

In questa serie di articoli tutorial vedrai come:

+ + + +

Hai già imparato qualcosa riguardo ad alcuni di questi argomenti e hai toccato brevemente gli altri. Alla fine della serie di tutorial dovresti sapere abbastanza per sviluppare semplici app Django da solo.

+ +

Il sito web LocalLibrary

+ +

LocalLibrary è il nome di un sito web che creeremo e faremo evolvere durante il corso di questa serie di tutorial. Come ti aspetteresti, lo scopo del sito è quello di fornire un catalogo online per un piccola biblioteca locale, in cui gli utenti possono ricercare i libri disponibili e gestire i loro account.

+ +

Questo esempio è stato scelto con cura poichè può essere scalato per mostrare pochi o molti dettagli di cui necessitiamo, e può essere utilizzato per mostrare quasi tutte le feature di Django. In modo più importante, ci permette di fornire un percorso guidato attraverso le più importanti funzionalità nel web framework Django:

+ + + +

Anche se questo è un esempio molto estensibile, viene chiamato LocalLibrary per una ragione — stiamo sperando di mostrare le informazioni minime che possano aiutare a metterti in funzione con Django rapidamente. Di conseguenza, archivieremo informazioni su libri, copie di libri, autori e altre informazioni chiave. Non memorizzeremo tuttavia informazioni circa altri elementi che una biblioteca potrebbe archiaviare, o forniremo l'infrastruttura necessaria per supportare più siti di biblioteche o altre feature di "grandi biblioteche". 

+ +

Sono bloccato, dove posso trovare il sorgente?

+ +

Man mano che so segue il tutorial forniremo i frammenti di codice appropriati da copiare e incollare in ciascun punto, e ci sarà altro codice che speriamo tu estenda da solo (con un po' di guida).

+ +

Se ci si blocca, si può trovare la versione completamente sviluppata del sito web su Github qui.

+ +

Sommario

+ +

Ora che sai un po' di più sul sito web LocalLIbrary e cosa stai per andare a imparare, è tempo di iniziare a creare un scheletro di progetto per contenere il nostro esempio.

+ +

{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}

diff --git a/files/it/learn/server-side/express_nodejs/index.html b/files/it/learn/server-side/express_nodejs/index.html new file mode 100644 index 0000000000..d6a55af9c8 --- /dev/null +++ b/files/it/learn/server-side/express_nodejs/index.html @@ -0,0 +1,75 @@ +--- +title: Express web framework (Node.js/JavaScript) +slug: Learn/Server-side/Express_Nodejs +tags: + - Codice + - Express + - Express.js + - Intro + - JavaScript + - Node + - Principiante + - Scripting + - Server + - node.js +translation_of: Learn/Server-side/Express_Nodejs +--- +
{{LearnSidebar}}
+ +

Express è un framework di tipo unopinionated, scritto in Javascript ed hostato dentro un amiente di runtime Node.js. Qusto modulo illustra i benefici chiave di questo framework, come configurare un ambiente di sviluppo, e come compiere alcuni compiti comuni di sviluppo e deploy.

+ +

Prerequisiti

+ +

Prima di iniziare dovrai esssere in grado di capire cosa sia la programmazione lato server e che cosa sia un framework, preferibilmente leggendo i topics Server-side website programming first steps. Una infarinatura generale di programmazione e JavaScript è altamente raccomandata, ma non necessaria per comprendere i concetti chiave.

+ +
+

Nota: questo sito Web offre molte risorse utili per l'apprendimento di JavaScript nel contesto dello sviluppo lato client: JavaScript, JavaScript Guide, JavaScript Basics, JavaScript. Il linguaggio e i concetti fondamentali di JavaScript sono gli stessi per lo sviluppo lato server su Node.js e questo materiale sarà rilevante. Node.js offre API aggiuntive per supportare funzionalità utili in ambienti senza browser (es. per creare un server HTTP ed accedere al file system, ma non supporta le API per lavorare sul browser o interagire con il DOM).

+ +

Questa guida fornirà alcune informazioni su come lavorare con Node.js e Express, e ci sono numerose altre eccellenti risorse su Internet e nei libri - alcune delle quali disponibili ai seguenti link How do I get started with Node.js (StackOverflow) e What are the best resources for learning Node.js? (Quora).

+
+ +

Guide

+ +
+
Express/Node: una introduzione
+
In questo primo articolo rispondiamo alle domande "Cos'è Node?" e "Cos'è Express?" e faremo una panoramica di ciò che rende speciale la struttura web Express. Descriveremo le caratteristiche principali e mostreremo alcuni dei principali elementi costitutivi di un'applicazione Express (sebbene a questo punto non avrete ancora un ambiente di sviluppo in cui testarlo).
+
Creare un ambiente di sviluppo Node (Express)
+
Ora che sai a cosa serve Express, ti mostreremo come configurare e testare un ambiente di sviluppo Node/Express su Windows, Linux (Ubuntu) e Mac OS X. Qualunque sia il sistema operativo che stai usando, questo articolo dovrebbe darti quello che ti serve per iniziare a sviluppare applicazioni Express.
+
Tutorial Express: Il sito Local Library
+
Il primo articolo della nostra serie di tutorial pratica spiega cosa imparerai e fornirà una panoramica del sito web di esempio della "biblioteca locale" che elaboreremo e svilupperemo in articoli successivi.
+
Express Tutorial Parte 2: Creare lo scheletro del sito
+
Questo articolo mostra come è possibile creare uno "scheletro" di un sito web, che può poi essere popolato con percorsi, modelli/viste e database specifici del sito.
+
Express Tutorial Parte 3: Usare un Database (con Mongoose)
+
Questo articolo introduce brevemente i database per Node / Express. Poi continua a mostrare come possiamo usare Mongoose per fornire l'accesso al database per il sito Web LocalLibrary. Spiega come vengono dichiarati lo schema e i modelli dell'oggetto, i tipi di campo principali e la convalida di base. Mostra anche brevemente alcuni dei principali modi in cui è possibile accedere ai dati del modello.
+
Express Tutorial Parte 4: Routeing e controllers
+
In questo tutorial imposteremo i percorsi (codice di gestione degli URL) con le funzioni di gestione "fittizia" per tutti gli endpoint delle risorse che saranno necessari nel sito Web di LocalLibrary. Al termine, avremo una struttura modulare per il nostro codice di gestione del routing, che possiamo estendere con le funzioni di gestione reale nei seguenti articoli. Avremo anche una buona conoscenza di come creare percorsi modulari usando Express.
+
Express Tutorial Parte 5: Mostrare i dati della libreria
+
Siamo ora pronti per aggiungere le pagine che visualizzano i libri del sito Web LocalLibrary e altri dati. Le pagine includeranno una home page che mostra quanti record abbiamo di ogni tipo di modello e lista e pagine di dettaglio per tutti i nostri modelli. Lungo la strada, acquisiremo esperienza pratica nell'ottenere record dal database e utilizzare modelli.
+
Express Tutorial Part 6: Utilizzare i form
+
Vedremo come lavorare con i Forms in Express, usando Pug, e in particolare come creare forms per eseguire operazioni CRUD.
+
Express Tutorial Parte 7: Deployare in produzione
+
Ora hai creato un sito Web di LocalLibrary fantastico, vorrai installarlo su un server Web pubblico in modo che sia accessibile al personale della biblioteca e ai membri su Internet. Questo articolo fornisce una panoramica di come si può trovare un host per la distribuzione del sito Web e di cosa è necessario fare per rendere il sito pronto per la produzione.
+
+ +

Consulta anche

+ +
+
Installare LocalLibrary su PWS/Cloud Foundry
+
Questo articolo fornisce una dimostrazione pratica di come installare LocalLibrary sul Pivotal Web Services PaaS cloud: si tratta di un'alternativa open source completa di Heroku, il servizio cloud PaaS utilizzato nella parte 7 del tutorial, sopra elencato. PWS/Cloud Foundry Merita sicuramente un'occhiata se stai cercando una alternativa ad Heroku o vuoi provare qualcos'altro.
+
+ +

Aggiungere altri tutorials

+ +
+

Questa è la fine degli articoli del tutorial (per ora). Se desideri estenderlo, altri argomenti interessanti da trattare sono:

+ +
    +
  • Utilizzo delle sessioni.
    • +
  • Autenticazioni.
    • +
  • Autorizzazioni e permessi degli utenti.
    • +
  • Testing di una applicazione Express.
    • +
  • Sicurezza delle applicazioni Express.
    • +
+ +

And of course, it would be excellent to have an assessment task!

+
diff --git a/files/it/learn/server-side/index.html b/files/it/learn/server-side/index.html new file mode 100644 index 0000000000..35d72b3443 --- /dev/null +++ b/files/it/learn/server-side/index.html @@ -0,0 +1,52 @@ +--- +title: Server-side website programming +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +
{{LearnSidebar}}
+ +

The Dynamic Websites – Server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a generic introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.

+ +

Most major websites use some kind of server-side technology to dynamically display different data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Displaying all of these using completely different static pages would be completely inefficient, so instead such sites display static templates (built using HTML, CSS, and JavaScript), and then dynamically update the data displayed inside those templates when needed, e.g. when you want to view a different product on Amazon.

+ +

In the modern world of web development, learning about server-side development is highly recommended.

+ +

Learning pathway

+ +

Getting started with server-side programming is usually easier than with client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.

+ +

A basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".

+ +

You will need to understand "how the web works". We recommend that you first read the following topics:

+ + + +

With that basic understanding you'll be ready to work your way through the modules in this section. 

+ +

Modules

+ +

This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks . 

+ +
+
Server-side website programming first steps
+
This module provides server-technology-agnostic information about server-side website programming, including answers to fundamental questions about server-side programming — "what it is", "how it differs from client-side programming", and "why it is so useful" — and an overview of some of the more popular server-side web frameworks and guidance on how to select the most suitable for your site. Lastly we provide an introductory section on web server security.
+
Django Web Framework (Python)
+
Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.
+
Express Web Framework (Node.js/JavaScript)
+
Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.
+
diff --git a/files/it/link_prefetching_faq/index.html b/files/it/link_prefetching_faq/index.html new file mode 100644 index 0000000000..41a0e183c1 --- /dev/null +++ b/files/it/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/localization/index.html b/files/it/localization/index.html new file mode 100644 index 0000000000..678f3670ed --- /dev/null +++ b/files/it/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/mdn/about/index.html b/files/it/mdn/about/index.html new file mode 100644 index 0000000000..b6b978345d --- /dev/null +++ b/files/it/mdn/about/index.html @@ -0,0 +1,116 @@ +--- +title: Informazioni su MDN +slug: MDN/About +tags: + - Collaborazione + - Copyright + - Documentazione + - Guide + - Licenzze + - Meta MDN +translation_of: MDN/About +--- +
{{MDNSidebar}}
+ +

Mozilla Developer Network o MDN (la Rete di Sviluppatori Mozilla) è una piattaforma di apprendimento in continua evoluzione per le tecnologie e il software che rendono il Web possibile, tra cui:

+ + + +

La nostra missione

+ +

La missione di MDN è semplice: fornire agli sviluppatori tutte le informazioni di cui hanno bisogno per creare facilmente progetti web open. Se si tratta di una tecnologia open disponibile sul Web, vogliamo documentarla.

+ +

Inoltre, forniamo documentazione sui prodotti Mozilla come sviluppare e contribuire ai progetti Mozilla.

+ +

Se non sei sicuro che un argomento in particolare debba essere trattato su MDN, leggi l'articolo: Questo appartiene a MDN?

+ +

Come contribuire

+ +

Non devi essere in grado di programmare - o esser uno scrittore - per poter contribuire a MDN! Esistono molti modi per aiutare, dalla revisione degli articoli per assicurarsi che siano sensati, allo scrivere testi, all'aggiungere esempi di codice.  Esistono così tanti modi di contribuire che abbiamo creato una pagina Come Iniziare per aiutarti a scegliere i task piu' adatti in base ai tuoi interessi o al tempo che gli puoi dedicare!

+ +

Puoi contribuire anche promuovendo MDN sul tuo blog o sito web.

+ +

La comunità di MDN

+ +

La nostra è una comunità globale! Abbiamo fantastici collaboratori in tutto il mondo che parlano varie lingue. Se vuoi maggiori informazioni, o se hai bisogno di qualsiasi tipo di aiuto riguardo MDN, puoi cercare nel nostro forum di discussione o il nostro canale IRC! Puoi seguirci su Twitter @MozDevNet per essere sempre aggiornato su quello che stiamo facendo. Se vedi qualcosa di sbagliato, ci vuoi dare il tuo feedback o inviare un ringraziamento ai nostri editori e collaboratori mandaci i tuoi tweet!

+ +

Utilizzare i Web Docs MDN

+ +

I contenuti di MDN sono disponibili gratuitamente sotto licenze opern source.

+ + + +

I contenuti MDN sono completamente disponibili sotto differenti licenze opern source. Questa sezione descrive il tipo di contenuti e le licenze in uno per ognuno di essi.

+ +

Documentazione e articoli

+ +

I documenti wiki di MDN sono stati realizzati con il contributo di vari autori, sia interni che esterni alla Mozilla Foundation. A meno che non sia indicato diversamente, i contenuti sono disponibili secondo i termini della licenza Creative Commons Attribution-ShareAlike (CC-BY-SA), v2.5 o qualsiasi versione successiva. Per favore attribuisci gli articoli a "Mozilla Contributors" e includi un collegamento  (online) o un URL (per le stampe) alla pagina wiki specifica da cui hai preso i contenuti. Per esempio, per indicare l'attribuzione di questo articolo, puoi scrivere

+ +
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
+ +

Nota che nell'esempio, "Mozilla Contributors" è un collegamento allo storico della pagina citata. Per ulteriori informazioni leggi Regole per una corretta attribuzione.

+ +
+

Nota: per maggiori informazioni su come riutilizzare e attribuire contenuti MDN sul sito WebPlatform.org, leggi contenuti MDN su WebPlatform.org.

+
+ +

Esempi di codice e frammenti

+ +

Gli esempi di codice aggiunti dal 20 agosto 2010 (incluso) sono di pubblico dominio. Non è necessaria alcuna nota di licenza, ma se te ne serve una puoi usare: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".

+ +

Gli esempi di codice aggiunti a questo wiki prima del 20 agosto 2010 sono disponibili sotto la licenza MIT; dovresti inserire le seguenti informazioni di attribuzione nel template MIT: "© <data della ultima revisione della pagina wiki> <nome della persona che l'ha inserita nel wiki>".

+ +

Contributi

+ +

Se desideri contribuire a questo wiki devi rendere la tua documentazione disponibile sotto licenza Attribution-ShareAlike (o occasionalmente una licenza altrenativa già specificata nella pagina che stai modificando), e il tuo codice di esempio deve essere disponibile sotto licenza Creative Commons CC-0 (una dedica al Pubblico Dominio). Aggiungere materiale a questo wiki significa che acconsenti a che i tuoi contributi siano resi disponibili secondo queste licenze.

+ +

Alcuni vecchi contenuti sono resi disponibili sotto licenze diverse da quelle qui indicate; questi sono indicati in fondo alla pagina attraverso un Blocco di licenza alternativa.

+ +
+

Nessuna nuova pagina può essere creata usando licenze alternative.

+
+ +

Il copyright per i materiali aggiunti rimane all'autore, a meno che l'autore non lo assegni a qualcun altro.

+ +

In caso di dubbi sull'argomento, contattare gli amministratori MDN.

+ +

Loghi, marchi, marchi di servizio e logotipo

+ +
+

I diritti dei marchi, loghi e marchi dei servizi della Mozilla Foundation, così come l'aspetto di questo sito, non sono sotto licenza Creative Commons e, se si tratta di lavori di autore (come loghi e design grafico) non sono inclusi nelle opere che sottostanno a questa licenza. Se intendi usare il testo di questi documenti e intendi esercitare qualcuno di questi diritti, o se hai altre domande riguardo il rispetto dei nostri termini di licenza per questa collezione, puoi contattare la Mozilla foundation all'indirizzo: licensing@mozilla.org.

+ +

Collegamenti a MDN

+ +

Questo articolo fornisce una guida e best practices quando si crea un link a MDN.

+ +

Scaricare contenuti

+ +

Puoi scaricare un mirror completo in formato tarball di MDN (2.1 GB aggiornato a Febbraio 2017).

+ +

Pagine singole

+ +

Puoi ottenere i contenuti di una singola pagina di MDN aggiungendo dei parametri di documento all'URL per specificare quale formato vuoi richiedere.

+ +

Strumenti di terze parti

+ +

Puoi visualizzare i contenuti di MDN anche tramite strumenti di terze parti come Dash (per Mac OS) e Zeal (per Linux e Windows).

+ +

Kapeli pubblica documenti MDN offline su HTML, CSS, JavaScript, SVG e XSLT.

+ +

Segnalare problemi con i Web Docs MDN

+ +

Visita Come segnalare un problema con MDN.

+ +

La storia di MDN

+ +

Il progetto Mozilla Developer Network (precedentemente Mozilla Developer Center (MDC) o Devmo) è nato all'inizio del 2005 quando la Mozilla Foundation ha ottenuto la licenza da AOL per utilizzare i contenuti originali di DevEdge. Il contenuto di DevEdge è stato estratto per cercare materiale ancora utile, poi migrato su questo wiki dai volontari affinché fosse più facile da aggiornare e mantenere.

+ +

Puoi trovare altre informazioni nella pagina del 10mo anniversario oltre ad un racconto da parte di alcune delle persone che ne hanno fatto parte.

+ +

Informazioni su Mozilla

+ +

Se vuoi saperne di più su chi siamo, su come entrare a far parte di Mozilla o semplicemente sapere dove trovarci, sei arrivato nel posto giusto. Per scoprire cosa ci spinge e ci rende differenti, visita la pagina sulla nostra missione.

diff --git a/files/it/mdn/community/index.html b/files/it/mdn/community/index.html new file mode 100644 index 0000000000..14a121baca --- /dev/null +++ b/files/it/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/mdn/contribute/creating_and_editing_pages/index.html b/files/it/mdn/contribute/creating_and_editing_pages/index.html new file mode 100644 index 0000000000..2ffa7888a4 --- /dev/null +++ b/files/it/mdn/contribute/creating_and_editing_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/feedback/index.html b/files/it/mdn/contribute/feedback/index.html new file mode 100644 index 0000000000..a8e48e0e47 --- /dev/null +++ b/files/it/mdn/contribute/feedback/index.html @@ -0,0 +1,49 @@ +--- +title: Invia feedback su MDN +slug: MDN/Contribute/Feedback +tags: + - Documentazione + - Guida + - Italiano + - MDN +translation_of: MDN/Contribute/Feedback +--- +
{{MDNSidebar}}
+ +

Benvenuto su MDN! Se hai dei suggerimenti, o hai dei problemi nell'utilizzare MDN, questo è il luogo giusto. Il fatto stesso che tu sia interessato nell'offrire feedback ti rende ancora più importante nella community di Mozilla, e ti ringraziamo in anticipo per il tuo interesse.

+ +

Hai diverse opzione per offrire la tua "saggezza"; questo articolo ti aiuterà in tal proposito.

+ +

Aggiorna la documentazione

+ +

Innanzitutto, se hai notato un problema con la documentazione, sentiti pure libero di correggerla tu stesso. Semplicemente accedi utilizzando Github, premi un qualsiasi pulsante blu modifica per aprire l'editor ed entrare nel mondo dei contributori alla documentazione di MDN. Tutta la documentazione qui presente è una wiki, curata da un team di volontari e da dello staff pagato, perciò non essere timido: la tua grammatica non deve essere perfetta. Ci penseremo noi a pulirla nel caso tu dovessi fare un errore!

+ +

Per maggiori informazioni riguardanti la collaborazione alla documentazione di MDN, guarda:

+ + + +

Unisciti alla conversazione

+ +

Parla con noi! Ci sono diversi modi per metterti in contatto con altre persone che lavorano su MDN.

+ +

Chat

+ +

+

Discussioni (Asincroni)

+ + +

Le discussioni a lungo termine si verificano sul nostro forum di discussione MDN. Puoi inviare al forum via e-mail a mdn@mozilla-community.org. Se si aggiunge al forum, puoi scegliere di avere notifiche sulle discussioni inviate anche via e-mail.

+ +

Segnala un problema

+ +

Problemi di documentazione

+ +

Se noti un problema nella documentazione e non lo puoi aggiustare tu stesso per qualsiasi ragione, puoi segnalare il problema! Puoi utilizzare questo form per qualsiasi problema riguardante la documentazione, sia esso una semplice correzione o una richiesta per del contenuto completamente nuovo. Come menzionato in precedenza, ti invitiamo a contribuire ai cambiamenti tu stesso, ma questa opzione è comunque a tua completa disponibilità.

+ +

Problemi del sito

+ +

Se incontri dei problemi con il sito, o se hai delle idee per il futuro di MDN, puoi scrivere un ticket al team di sviluppo di MDN.

diff --git a/files/it/mdn/contribute/getting_started/index.html b/files/it/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..d76748a0dc --- /dev/null +++ b/files/it/mdn/contribute/getting_started/index.html @@ -0,0 +1,95 @@ +--- +title: Primi passi su MDN +slug: MDN/Contribute/Getting_started +translation_of: MDN/Contribute/Getting_started +--- +
{{MDNSidebar}}
+

Siamo una comunità aperta di sviluppatori che stanno creando risorse per un Web migliore, indipendentemente da marchi, browser o piattaforme. Tutti possono contribuire. Ogni nuovo collaboratore ci rende più forti. Insieme possiamo continuare a guidare il processo di innovazione sul Web per il bene comune. E cominciamo da qui, da te.

+

Tutte le varie parti di MDN (documentazione, demo, il sito stesso) sono create da una comunità aperta di sviluppatori. Unisciti a noi!

+

3 semplici passi per contribuire a MDN

+

MDN è un wiki, dove tutti possono aggiungere e modificare contenuti. Non è necessario essere programmatori o sapere tutto sulla tecnologia. Esistono molti compiti che necessitano di volontari, dai più semplici (revisione e correzione degli articoli) ai più complessi (scrivere la documentazione delle API).

+

Contribuire è facile e sicuro. Anche se fai errori è semplice sistemarli. Anche se non sai esattamente quale deve essere l'aspetto delle cose o la tua grammatica non è perfetta, non ti preoccupare! Abbiamo un gruppo di persone che ha il compito di assicurarsi che il contenuto di MDN sia il migliore possibile. Ci sarà sempre qualcuno pronto ad assicurarsi che il tuo lavoro sia ordinato e ben scritto. Condividi quello che sai.

+

Passo 1: creare un account su MDN

+

Per iniziare a collaborare con MDN, devi avere un account su MDN. Per i dettagli leggi come creare un account.

+

Passo 2: scegli un compito da portare a termine

+

Ora che sei registrato e hai effettuato l'accesso, leggi le descrizioni dei vari tipi di compiti nella {{anch("Tipi_di_compiti_possibili", "lista qui sotto")}} e decidi quale ti attira di più. Puoi scegliere qualsiasi compito preferisci per iniziare a collaborare.

+

Passo 3: esegui il compito

+

Una volta che hai deciso che tipo di compito vuoi eseguire, trova una pagina specifica, un esempio di codice ecc. su cui lavorare. E buon lavoro!

+

Non preoccuparti di farlo alla perfezione; altri collaboratori di MDN sono qui per aiutare a correggere gli errori che potresti commettere.  Se in corso d'opera hai qualche dubbio o bisogno di chiarimenti, vedi la pagina Comunità per informazioni sulle mailing list e i canali di chat dove puoi trovare le risposte ai tuoi quesiti.

+
+

Nota: se vuoi fare qualche esperimento prima di affrontare un vero compito su MDN, puoi modificare la pagina Sandbox. Per favore limita i tuoi esperimenti a questa pagina e non effettuare modifiche non necessarie alle altre pagine solo per vedere cosa succede; creeresti confusione che altri dovrebbero poi sistemare.

+
+

Quando hai portato a termine il compito che hai scelto, sentiti libero di scegliere un altro compito o scopri quali altre cose puoi fare su MDN.

+

Tipi di compiti possibili

+

Esistono vari modi per collaborare a MDN a seconda delle tue capacità e interessi. Anche se alcuni compiti possono essere veramente impegnativi, sono disponibili anche molte attività più semplici. Molte di queste richiedono solo cinque minuti (o meno). Insieme ai compiti e a una breve descrizione, viene indicato anche il tempo approssimativamente necessario al loro completamento.

+

Opzione 1: mi piace scrivere

+

Puoi aiutarci a revisionare o modificare la documentazione corrente e applicarle le etichette corrette.

+ +
+ Nota: se stai revisionando un articolo o ne stai scrivendo di nuovi ti chiediamo di leggere la Guida di stile. Questo ci aiuta ad assicurarci che lo stile degli articoli sia omogeneo.
+

Opzione 2: mi piace programmare

+

Abbiamo bisogno di più esempi di codice! Puoi anche aiutare nello sviluppo della piattaforma del sito, Kuma!

+ +

Opzione 3: mi piace sia scrivere che programmare

+

Abbiamo dei compiti che richiedono capacità sia tecniche che linguistiche, come ad esempio la scrittura di nuovi articoli, la revisione tecnica o l'adattamento dei documenti.

+ +

Opzione 4: voglio MDN tradotto nella mia lingua

+

Tutto il lavoro di localizzazione e traduzione di MDN viene svolto dalla nostra fantastica comunità di volontari.

+ +

Opzione 5: ho trovato informazioni sbagliate ma non so come correggerle

+

Puoi segnalare problemi aprendo un bug riguardo la documentazione. (5 minutes)

+

Usa questi valori per i campi richiesti:

+ + + + + + + + + + + + + + + + + + + + + + + +
Campo su BugzillaValore
productDeveloper Documentation
component[scegli un'area appropriata all'argomento o "General" se non sei sicuro su quale sia quella corretta]
URLLa pagina in cui hai trovato il problema
DescriptionIl maggior numero possibile di informazioni per permetterci di replicare il problema e trovare informazioni utili alla sua risoluzione. Puoi includere nomi di persone ("chiedete a tizio o caio") o anche collegamenti web.
+

Altre cose che puoi fare su MDN

+ +
+

 

diff --git a/files/it/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/it/mdn/contribute/howto/convert_code_samples_to_be_live/index.html new file mode 100644 index 0000000000..7c1fe93a6e --- /dev/null +++ b/files/it/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -0,0 +1,33 @@ +--- +title: Come convertire esempi di codice per renderli "vivi" +slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live +tags: + - Come fare + - Principiante +translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +--- +
{{MDNSidebar}}

MDN ha un sistema di "esempi vivi",  in cui il codice d'esempio mostrato nella pagina è utilizzato per mostrare immediatamente il risultato che si ottiene con quel codice. Comunque, molti articoli esistenti hanno esempi di codice che non sfruttano questo sistema e devono essere convertiti.

+ +

Gli esempi vivi, che permettono di vedere qual è il risultato di un esempio, rendono la documentazione più dinamica e istruttiva. Questa guida spiega come modificare gli esempi e aggiungere la funzionalità "live".

+ +
+
Dove c'è bisogno di farlo?
+
Negli articoli con etichetta NeedsLiveSample
+
Cosa ho bisogno di sapere?
+
+
    +
  • Conoscere i linguaggi HTML, CSS e/o JavaScript, a seconda del codice d'esempio.
    • +
  • Capacità nell'usare le macro KumaScript negli articoli di MDN.
    • +
+
+
Quali sono i passi per completare il compito?
+
+
    +
  1. Scegli un articolo dalla lista di quelli che sono etichettati con NeedsLiveSample, in cui il codice d'esempio usa una funzionalità che ti è familiare.
    2. +
  2. Converti il codice per renderlo "vivo".
    3. +
  3. Cancella qualsiasi codice o immagine che era usata in precedenza per mostrare il risultato dell'esempio.
    4. +
+
+
+ +

Per maggiori informazioni su come creare e modificare "esempi vivi", fai riferimento a Utilizzare il sistema di esempi dal vivo.

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 new file mode 100644 index 0000000000..c6759dc479 --- /dev/null +++ b/files/it/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/mdn/contribute/howto/delete_my_profile/index.html b/files/it/mdn/contribute/howto/delete_my_profile/index.html new file mode 100644 index 0000000000..182bc6a241 --- /dev/null +++ b/files/it/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/mdn/contribute/howto/do_a_technical_review/index.html b/files/it/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..31f0885a09 --- /dev/null +++ b/files/it/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/mdn/contribute/howto/do_an_editorial_review/index.html b/files/it/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..7bfc4bf759 --- /dev/null +++ b/files/it/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/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 new file mode 100644 index 0000000000..ba8df38979 --- /dev/null +++ b/files/it/mdn/contribute/howto/impostare_il_riassunto_di_una_pagina/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/mdn/contribute/howto/index.html b/files/it/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..129865db8b --- /dev/null +++ b/files/it/mdn/contribute/howto/index.html @@ -0,0 +1,16 @@ +--- +title: Guide come fare per +slug: MDN/Contribute/Howto +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto +--- +
{{MDNSidebar}}
{{IncludeSubnav("/it/docs/MDN")}}
+ +

Questi articoli forniscono una guida passo passo per raggiugnere specifici obiettivi quando si contribuisce a MDN.

+ +

{{LandingPageListSubpages}}

diff --git a/files/it/mdn/contribute/howto/tag/index.html b/files/it/mdn/contribute/howto/tag/index.html new file mode 100644 index 0000000000..e518fc0c96 --- /dev/null +++ b/files/it/mdn/contribute/howto/tag/index.html @@ -0,0 +1,380 @@ +--- +title: Usare correttamente i tag +slug: MDN/Contribute/Howto/Tag +tags: + - Beginner + - Contribute + - Glossary + - Guide + - Howto + - Intro + - MDN Meta + - Tutorial +translation_of: MDN/Contribute/Howto/Tag +--- +
{{MDNSidebar}}
+ +

I tag associati agli articoli sono uno strumento fondamentale per permettere ai visitatori di accedere a contenuti rilevanti. Normalmente, ogni pagina dovrebbe essere associata a più tag, che contribuiscono a mantenere i contenuti organizzati. Questa pagina spiega come ottimizzare l'uso dei tag per facilitare i lettori nella ricerca e agevolare i gestori nell'organizzazione e mantenimento dei contenuti.

+ +

Per informazioni su come modificare i tag dall'interfaccia utente, consulta la sezione sui tag della guida all'editor di testo di MDN.

+ +

È importante utilizzare i tag secondo queste regole, altrimenti gli automatismi non saranno in grado di generare liste di contenuti, landing page e link incrociati tra i vari articoli.

+ +
+

Nota per i traduttori e i localizzatori: non tradurre nessuno dei tag elencati in questa pagina. Sono necessari per scopi specifici, come ad esempio operazioni di gestione del sito ed elaborazione automatica di dati. Tali processi non funzionano con tag tradotti.

+
+ +

Uso dei tag in MDN

+ +

In MDN i tag vengono utilizzati in diversi modi:

+ +
+
{{anch("Categoria documento")}}
+
Di che tipo di documento si tratta? È un materiale di consultazione? Un tutorial? Una landing page? Si tratta di una categoria di tag fondamentali, che i lettori possono utilizzare per filtrare le ricerche.
+
{{anch("Argomento")}}
+
Qual è l'argomento dell'articolo? Parla di API? Oppure di DOM? O di grafica? Questi tag, al pari dei precedenti, hanno un ruolo fondamentale nel filtrare i risultati di ricerca.
+
{{anch("Identificazione API")}}
+
Ogni pagina di consultazione di un'API deve essere associata a un tag che identifichi lo specifico componente trattato (ovvero l'interfaccia di cui fa parte e, dove applicabile, la proprietà o metodo).
+
{{anch("Stato tecnologia")}}
+
Qual è lo stato dell'arte della tecnologia trattata? Non è riconosciuta come standard? È obsoleta o deprecata? Oppure sperimentale?
+
{{anch("Livello di competenza")}}
+
Applicabile a tutorial e guide: quanto è avanzata la materia di cui tratta l'articolo?
+
{{anch("Metadati del documento")}}
+
Chi scrive e gestisce i contenuti usa questi tag per tenere traccia del tipo di interventi da effettuare sulle pagine.
+
+ +

Guida ai tipi di tag

+ +

Segue una breve guida ai tipi di tag utilizzati su MDN e i loro significati.

+ +

Categoria documento

+ +

I tag di categoria, associati a un articolo, facilitano la generazione automatica di landing page, indici e via dicendo. Inoltre, nel nuovo sistema di ricerca, questi termini possono essere usati anche dagli utenti per trovare materiali di consultazione e guide pertinenti.

+ +

Ecco i tag che identificano le categorie:

+ +
+
{{Tag("Intro")}}
+
"Introduzione". L'articolo tratta di contenuti introduttivi su un argomento. Come regola generale, ciascuna area tecnologica dovrebbe disporre di un unico tag "Intro".
+
{{Tag("Reference")}}
+
"Consultazione". L'articolo contiene materiali di consultazione su un'API, un elemento, un attributo, una proprietà o simili.
+
{{Tag("Landing")}}
+
Indica che la pagina in questione è una landing page, la pagina iniziale di un dato argomento.
+
{{Tag("Guide")}}
+
"Guida". L'articolo consiste in una pagina contenente una guida o una procedura guidata.
+
{{Tag("Example")}}
+
"Esempio". L'articolo contiene un codice di esempio, oppure campioni di codice (ovvero non semplici esempi di sintassi da una riga, bensì frammenti di codice che possono essere riutilizzati).
+
+ +

Argomento

+ +

I tag che identificano l'argomento di un articolo consentono di ottenere risultati di ricerca più pertinenti. Inoltre, facilitano la navigazione e l'individuazione di landing page.

+ +

Pur trattandosi di una categoria che può espandersi mano a mano che vengono identificati nuovi argomenti, cerchiamo di limitare i tag ai nomi di API o tecnologie. Alcuni esempi pratici:

+ + + +

In linea generale, i tag di argomento sono nomi di un'interfaccia associati a diverse pagine rilevanti (per esempio, Node è associato a diverse pagine perché possiede molteplici proprietà e metodi), o nomi che indicano un complesso di tecnologie. Ad esempio, una pagina che parla di WebGL potrebbe essere associata ai tag Graphics e WebGL, mentre una pagina che tratta dell'elemento {{HTMLElement("canvas")}} ai tag HTML, Element, Canvas e Graphics.

+ +

Contenuti Mozilla

+ +

I seguenti tag sono associati esclusivamente a contenuti specifici di Mozilla:

+ + + +

Identificazione API

+ +

All'interno del materiale di consultazione delle API, ciascun articolo dovrebbe essere associato a un tag che identifichi la specifica parte dell'API trattata:

+ +
+
{{tag("Interface")}}
+
"Interfaccia". Il tag da associare all'articolo principale dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection")}}.
+
{{tag("Constructor")}}
+
"Costruttore". Ciascuna interfaccia può contenere fino a una pagina con tag "Constructor", ovvero il costruttore dell'interfaccia. Il titolo della pagina deve corrispondere al nome dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection.RTCPeerConnection()", "RTCPeerConnection()")}}.
+
{{tag("Property")}}
+
"Proprietà". Questo tag va associato a ciascun articolo che descrive una proprietà specifica all'interno dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection.connectionState")}}
+
{{tag("Method")}}
+
"Metodo". Questo tag va associato a ciascun articolo che descrive un metodo dell'interfaccia. Esempio: {{DOMxRef("RTCPeerConnection.createOffer()")}}
+
+ +

In aggiunta, le pagine di consultazione devono includere tra i tag i nomi di interfaccia, proprietà e metodo. Alcuni esempi:

+ +
+
L'interfaccia {{DOMxRef("RTCPeerConnection")}}
+
include il tag {{Tag("RTCPeerConnection")}} in aggiunta ad altri tag rilevanti come {{Tag("Interface")}}, {{Tag("WebRTC")}}, {{Tag("WebRTC API")}}, {{Tag("API")}}, {{Tag("Reference")}} ecc.
+
Il metodo {{DOMxRef("RTCPeerConnection.createOffer()")}}
+
include i tag {{Tag("RTCPeerConnection")}} e {{Tag("createOffer")}} (attenzione: non inserire parentesi all'interno dei nomi dei tag!) in aggiunta ad altri tag rilevanti come {{Tag("Method")}}, {{Tag("WebRTC")}}, {{Tag("WebRTC API")}}, {{Tag("API")}}, {{Tag("Reference")}}, ecc. Qui è anche possibile aggiungere anche altri tag rilevanti come {{Tag("Offer")}} e {{Tag("SDP")}}.
+
La proprietà {{DOMxRef("RTCPeerConnection.iceConnectionState")}}
+
include i tag {{Tag("RTCPeerConnection")}} e {{Tag("iceConnectionState")}} in aggiunta ad altri tag rilevanti come {{Tag("Property")}}, {{Tag("WebRTC")}}, {{Tag("WebRTC API")}}, {{Tag("API")}} e {{Tag("Reference")}}. È possibile aggiungere anche il tag {{Tag("ICE")}}.
+
+ +

Stato tecnologia

+ +

I seguenti tag identificano lo stato dell'arte delle specifiche tecnologiche. Aiutano il lettore a farsi un'idea di quanto praticabile sia una particolare tecnologia. Il tag non spiega in dettaglio il tipo e i progressi della tecnologia nel processo di specificazione (per questo scopo c'è la tabella delle specifiche), ma aiuta il lettore a giudicare a colpo d'occhio quanto convenga utilizzare la tecnologia descritta nell'articolo.

+ +

Di seguito, i possibili valori per questa categoria di tag:

+ +
+
{{Tag("Read-only")}}
+
"Sola lettura". Il tag da applicare alle pagine di consultazione, che descrivono una proprietà o un attributo di sola lettura.
+
{{Tag("Non-standard")}}
+
"Non standardizzata". Indica che la tecnologia o l'API descritta sulla pagina non rientra in alcuno standard, indipendentemente dalla sua stabilità nei browser che la implementano (se è instabile, va aggiunto anche il tag {{Tag("Experimental")}}). In assenza di questo tag, il lettore presumerà che quella descritta sia una tecnologia standard. La pagina deve inoltre contenere una tabella di compatibilità con l'elenco dei browser che supportano l'API o la tecnologia trattata.
+
{{Tag("Deprecated")}}
+
"Deprecata". Quando la tecnologia o API trattata nella pagina è segnalata come "deprecata", è probabile che cada in disuso, anche se per il momento è ancora disponibile nelle versioni più recenti dei browser.
+
{{Tag("Obsolete")}}
+
"Obsoleta". La tecnologia o API trattata è ormai ritenuta obsoleta, dunque è stata rimossa (o è in corso di rimozione) da tutti gli attuali browser, o quasi.
+
{{Tag("Experimental")}}
+
"Sperimentale". La pagina tratta di una tecnologia non ancora standardizzata, dunque sperimentale, oppure di un'API che potrebbe o meno diventare parte di uno standard. È inoltre soggetta alle modifiche nel motore del browser che la implementa (di solito si tratta di un singolo browser). Se tale tecnologia non fa parte di alcuna specifica (neanche in forma di bozza), deve essere associata anche al tag {{tag("Non-standard")}}.
+
{{Tag("Needs Privileges")}}
+
"Richiede privilegi". L'API trattata richiede privilegi di accesso al dispositivo su cui si esegue il codice.
+
{{Tag("Certified Only")}}
+
"Solo certificato". L'API trattata funziona solo con codice certificato.
+
+ +

I tag precedenti non sostituiscono la tabella di compatibilità, che deve essere sempre presente nell'articolo.

+ +

Livello di competenza

+ +

I tag che indicano il livello di competenza vanno applicati unicamente a guide e tutorial (ovvero, alle pagine con tag Guide). Aiutano l'utente a scegliere un tutorial in base alla propria conoscenza di una data tecnologia. Questa categoria ha tre valori:

+ +
+
{{Tag("Beginner")}}
+
"Principiante". Articoli concepiti per presentare una tecnologia a chi non l'ha mai utilizzata o la conosce solo superficialmente.
+
{{Tag("Intermediate")}}
+
"Intermedio". Articoli destinati a utenti che hanno già iniziato a utilizzare la tecnologia trattata, ma non ne sono ancora esperti.
+
{{Tag("Advanced")}}
+
"Avanzato". Articoli che approfondiscono le possibilità della tecnologia trattata e mettono alla prova le competenze dell'utente.
+
+ +

Metadati del documento

+ +

La comunità dei creatori di contenuti usa i tag per contrassegnare gli articoli che richiedono interventi di tipo specifico. Di seguito, una lista dei più utilizzati:

+ +
+
{{Tag("Draft")}}
+
"Bozza". L'articolo non è ancora completo. In teoria, significa che è in fase di aggiornamento, ma potrebbe trattarsi anche di un articolo abbandonato. Prima di eseguire qualsiasi modifica, è buona norma contattare i collaboratori che hanno lavorato all'ultima bozza dell'articolo, al fine di evitare possibili conflitti di contenuto.
+
{{Tag("NeedsCompatTable")}}
+
"Richiede tabella compatibilità". Occorre aggiungere all'articolo una tabella che specifichi la compatibilità della funzione trattata con i vari browser. Vedi anche la guida per collaborare alla compilazione di una tabella di compatibilità dei browser.
+
{{Tag("NeedsContent")}}
+
"Richiede contenuti". L'articolo è solo un abbozzo, oppure contiene informazioni incomplete. Questo tag indica che è richiesto un revisore per controllare la correttezza dei contenuti, aggiungere ulteriori informazioni e/o completare la stesura dell'articolo.
+
{{Tag("NeedsExample")}}
+
"Richiede esempio". L'articolo necessita di uno o più esempi che chiariscano i concetti illustrati. Tali esempi devono utilizzare il sistema di codice esempio live.
+
{{Tag("NeedsLiveSamples")}}
+
"Richiede esempi live". L'articolo contiene uno o più esempi che devono essere aggiornati al sistema di codice esempio live.
+
{{Tag("NeedsMarkupWork")}}
+
"Richiede formattazione". Il codice di markup che costituisce la formattazione dell'articolo deve essere ottimizzato (solitamente perché l'articolo è formattato solo o quasi da tag generici tipo {{HTMLElement("p")}}).
+
{{Tag("NeedsSpecTable")}}
+
"Richiede tabella specifiche". Occorre aggiungere all'articolo una tabella che documenti le specifiche della funzione trattata.
+
{{Tag("NeedsUpdate")}}
+
"Richiede aggiornamento". Occorre aggiornare i contenuti dell'articolo con informazioni più recenti.
+
{{Tag("l10n:exclude")}}
+
"Escluso da localizzazione". Non vale la pena localizzare questo contenuto, dunque verrà escluso dalle pagine di stato della localizzazione.
+
{{Tag("l10n:priority")}}
+
"Priorità localizzazione". Questo contenuto è importante, i traduttori di MDN dovrebbero dargli la priorità rispetto ad altri articoli. Questo tag viene visualizzato in una tabella delle priorità a parte nelle pagine di stato della localizzazione.
+
+ +

Combinare i vari tag

+ +

Abbiamo visto che a ogni pagina vanno assegnati più tag di diverse categorie, per esempio:

+ +
+
Un tutorial per principianti su WebGL
+
comprende i tag {{Tag("WebGL")}}, {{Tag("Graphics")}}, {{Tag("Guide")}}, {{Tag("Beginner")}}
+
La pagina di consultazione dell'elemento {{HTMLElement("canvas")}}
+
comprende i {{Tag("Canvas")}}, {{Tag("HTML")}}, {{Tag("Element")}}, {{Tag("Graphics")}}, {{Tag("Reference")}}
+
Una landing page sugli strumenti di sviluppo di Firefox
+
comprende i tag {{Tag("Tools")}}, {{Tag("Firefox")}}, {{Tag("Landing")}}
+
+ +

Tag e filtri di ricerca

+ +

L'efficacia dei filtri di ricerca dipende dall'inserimento dei tag corretti nelle pagine di MDN. Di seguito, una tabella dei filtri di ricerca con i tag corrispondenti. (Questi filtri di ricerca si applicano unicamente al sito wiki (la versione modificabile di MDN); la versione MDN in sola lettura utilizza un sistema di ricerca diverso, senza filtri.)

+ +
+

Nota: Quando sotto la colonna "Nome tag" sono presenti più tag, significa che, perché l'articolo compaia nei risultati di ricerca, deve essere associato a uno o più dei tag elencati.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Gruppo filtroNome filtro ricercaNome tag
ArgomentoAPIs and DOM{{Tag("API")}} || {{Tag("DOM")}} {{Deprecated_Inline}}
Add-ons & Extensions {{Deprecated_Inline}}{{Tag("Add-ons")}} || {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}} || {{Tag("WebExtensions")}}
CSS{{Tag("CSS")}}
Canvas{{Tag("Canvas")}}
Firefox{{Tag("Firefox")}}
Firefox OS{{Tag("Firefox OS")}}
Games{{Tag("Games")}}
HTML{{Tag("HTML")}}
HTTP{{Tag("HTTP")}}
JavaScript{{Tag("JavaScript")}}
Marketplace {{Non-standard_Inline}}{{Tag("Marketplace")}}
MathML{{Tag("MathML")}}
Mobile{{Tag("Mobile")}}
Open Web Apps {{Non-standard_Inline}}{{Tag("Apps")}}
SVG{{Tag("SVG")}}
Web Development{{Tag("Web Development")}}
Web Standards{{Tag("Web")}}
WebExtensions{{Tag("WebExtensions")}}
WebGL{{Tag("WebGL")}}
Writing Documentation{{Tag("MDN Meta")}}
XPCOM {{Non-standard_Inline}}{{Tag("XPCOM")}}
XUL {{Non-standard_Inline}}{{Tag("XUL")}}
{{anch("Livello di competenza")}}I'm an Expert{{Tag("Advanced")}}
Intermediate{{Tag("Intermediate")}}
I'm Learning{{Tag("Beginner")}}
Tipo di documentoDocsRestringe il campo di ricerca alla documentazione, escludendo i contenuti di Hacks e contenuti di altro tipo in MDN.
DemosQuesto tipo di documento non è più in uso nella documentazione web di MDN.
Tools{{Tag("Tools")}}
Code Samples{{Tag("Example")}}
How-To & Tutorial{{Tag("Guide")}}
Developer ProfilesInclude nei risultati di ricerca i profili degli sviluppatori registrati su MDN.
External ResourcesIl team di sviluppo non ha ancora stabilito come utilizzare questo filtro...
+ +

Problemi di tag che puoi aiutare a risolvere

+ +

I collaboratori possono contribuire a risolvere diversi tipi di problemi riguardanti i tag:

+ +
+
Niente tag
+
Di norma, ogni articolo dovrebbe essere associato almeno a un tag per la {{anch("Categoria documento", "categoria")}} e a un tag per l'{{anch("Argomento", "argomento")}} del documento. È possibile aggiungere altri tag appropriati, ma assicurarsi che ogni pagina abbia i tag strettamente necessari costituisce già di per sé un enorme contributo.
+
Tag non conformi agli standard MDN
+
Quando si trova un documento che non segue gli standard di questa pagina, è opportuno correggerlo.
+Attenzione: su alcune pagine in lingua inglese è possibile talvolta imbattersi in tag localizzati in altre lingue (es. Référence). Questo problema è dovuto a un bug in Kuma per cui i tag ricomparivano anche dopo essere stati eliminati. Il bug è stato successivamente risolto: ora è possibile ripulire le pagine da tutti i tag erratamente localizzati.
+
Tag non corretti
+
Se un articolo sul codice HTML è associato al tag "JavaScript", si tratta probabilmente di un errore. Lo stesso vale per un articolo che tratta di meccanismi interni di prodotti Mozilla, ma è associato al tag "Web". I tag non corretti vanno rimossi e quelli appropriati vanno aggiunti, se mancanti. Inoltre, vanno corretti anche i tag che contengono errori di battitura, come ad esempio "Javascript" (il tag funziona comunque, poichè il sistema non coglie la differenza tra maiuscole e minuscole, ma anche la forma va curata).
+
Tag mancanti
+
Un articolo potrebbe già essere associato ad alcuni tag, ma non a tutti quelli necessari. In questo caso, occorre aggiungere i tag mancanti. Per esempio, se una pagina di consultazione in JavaScript presenta soltanto il tag "JavaScript" (peraltro corretto), i collaboratori sono incoraggiati ad aggiungere i tag "Reference" o di un'altra {{anch("Categoria documento", "categoria")}}.
+
Tag spam
+
Si tratta del problema più fastidioso di tutti: alcuni malevoli frequentatori del Web hanno attaccato anche MDN, infestando le pagine con tag tipo "Free warez!" o "Ehi passavo da questo sito e volevo sapere se potete aiutarmi a risolvere il problema con Flash che crasha sempre". Questi tag vanno eliminati al più presto! Non solo danno fastidio e creano problemi nella gestione delle pagine se non vengono rimossi tempestivamente, ma hanno anche un effetto deleterio sul {{Glossary("SEO")}}.
+
+ +

Quando si nota uno (o più) di questi tag, accedere a MDN e premere MODIFICA nell'angolo in alto a destra della finestra. Una volta che l'editor si sarà caricato, scorrere fino al riquadro dei tag, che si trova in fondo alla pagina. Per ulteriori dettagli sull'interfaccia di inserimento dei tag, consulta la sezione sui tag nella guida all'editor di MDN.

diff --git a/files/it/mdn/contribute/index.html b/files/it/mdn/contribute/index.html new file mode 100644 index 0000000000..2a0a00581a --- /dev/null +++ b/files/it/mdn/contribute/index.html @@ -0,0 +1,71 @@ +--- +title: Contribuire a MDN +slug: MDN/Contribute +tags: + - Documentation + - Guide + - Landing + - MDN +translation_of: MDN/Contribute +--- +
{{MDNSidebar}}
+ +

 Benvenuto! Visitando questa pagina hai fatto il primo passo per diventare un collaboratore di MDN. Queste guide coprono tutti gli aspetti inerenti la collaborazione con MDN, ad esempio le guide di stile, le guide per l'uso dell'editor, dei vari strumenti e altro ancora.

+ +
+
+

Guide per i collaboratori

+ +
+
Primi passi
+
Una guida veloce per prepararti ai tuoi primi contributi.
+
Guida di stile e di contenuto
+
La guida di stile e di contenuto di MDN fornisce i dettagli riguardo lo stile di scrittura, il layout delle pagine e lo stile dei contenuti, per fare sì che ciò che scrivi sia in linea con il resto del contenuto di MDN.
+
Guida all'editor
+
Una guida completa all'uso dell'editor di MDN.
+
Revisione degli articoli
+
Una guida alla revisione editoriale e tecnica del contenuto degli articoli, per assicurarci che tutto il contenuto di MDN sia il più possibile utile e leggibile.
+
Terminologia e convenzioni
+
La nostra guida alla terminologia e alle convenzioni fornisce informazioni che puoi utilizzare per assicurarti che tu stia usando la corretta terminologia per descrivere i vari concetti.
+
Lavorare con la comunità di MDN
+
Una guida che spiega come lavorare con la nostra comunità, trovare aiuto e connetterti con le persone giuste per risolvere qualsiasi dubbio tu abbia nella tua collaborazione con MDN.
+
Risposte a domande frequenti
+
Suggerimenti e risposte alle domande più frequenti riguardo alla collaborazione con MDN.
+
+ +
+
Contribuire a Kuma
+
Una guida alla collaborazione con il progetto Kuma, ovvero la piattaforma del sito web di MDN.
+
+
+ +
+

Come fare per...

+ +

I nostri manuali di istruzioni ti guideranno passo passo nello svolgere specifici compiti quando collabori con MDN.

+ +
+
Come documentare una proprietà CSS
+
Una guida alla scrittura di documentazione per le proprietà CSS. Tutti i documenti sulle proprietà dei CSS devono adeguarsi allo stile e al layout descritti in questo articolo.
+
Come documentare un elemento HTML
+
Questa guida alla scrittura di documentazione sugli elementi HTML permette di preparare documenti che siano in linea con la documentazione già presente su MDN.
+
Come etichettare correttamente le pagine
+
Questa guida all'etichettatura delle pagine fornisce informazioni riguardo ai nostri standard per l'etichettatura. Inoltre contiene un elenco di etichette che hanno un significato standard su MDN. Seguire questa guida garantirà che i tuoi contenuti siano categorizzati appropriatamente, più facili da cercare e che il nostro sistema di filtri di ricerca funzioni correttamente con i tuoi articoli.
+
Come interpretare le specifiche
+
Questa guida ti aiuterà ad interpretare correttamente le specifiche degli standard Web; la capacità di leggere queste specifiche può essere una vera e propria forma d'arte. Una corretta interpretazione ti aiuterà a creare una documentazione migliore.
+
+ +

Localizzazione

+ +
+
Tour guidato alla localizzazione
+
Questo tour guidato spiega come localizzare i contenuti su MDN.
+
Guida alla localizzazione
+
Questa guida fornisce maggiori dettagli riguardo al processo di localizzazione dei contenuti su MDN.
+
Progetti di localizzazione
+
Quasta pagina ti permette di trovare i progetti di localizzazione per la tua lingua o, se non ne esistono, ti spiega come crearne uno!
+
+
+
+ +

 

diff --git a/files/it/mdn/contribute/localize/guidaitaliano/index.html b/files/it/mdn/contribute/localize/guidaitaliano/index.html new file mode 100644 index 0000000000..203b17067d --- /dev/null +++ b/files/it/mdn/contribute/localize/guidaitaliano/index.html @@ -0,0 +1,82 @@ +--- +title: Processo di localizzazione di MDN per la versione Italiana +slug: MDN/Contribute/Localize/GuidaItaliano +tags: + - Localization + - MDN + - l10n +--- +
{{MDNSidebar}}
+ La localizzazione di MDN viene gestita principalmente da Mozilla Italia, un gruppo di volontari che si occupa della localizzazione e diffusione dei progetti e dei valori di Mozilla per gli utenti italiani.
+
+  
+
+ Abbiamo messo a punto un sistema che ci permette di gestire più agevolmente il processo di localizzazione e QA (Quality Assurance, ovvero Controllo Qualità) degli articoli presenti su MDN. Se da un lato non è obbligatorio usare questo sistema per partecipare alla localizzazione degli articoli di MDN, dall'altro questo ci aiuta ad evitare la duplicazione del lavoro e ad avere un approccio più sistematico nell'opera che stiamo portando avanti.
+
+  
+

Ruoli attuali

+
+ Il processo di traduzione viene eseguito da due figure: il traduttore ed il revisore.
+
+  
+
+ Il traduttore si occupa di tradurre gli articoli, mentre il revisore si occupa della parte di QA, ovvero di verificare che la traduzione sia scritta in maniera chiara, leggibile e linguisticamente corretta.
+
+  
+

Prerequisiti

+
+ I localizzatori devono:
+
+ 1. Essere in grado di modificare e creare nuovi articoli su MDN (vedi [link alla pagina di MDN sulla modifica degli articoli])
+
+ 2. Essere iscritti al forum di Mozilla Italia (http://forum.mozillaitalia.org )
+
+  
+
+ I revisori devono:
+
+ 1. Essere iscritti al forum di Mozilla Italia (http://forum.mozillaitalia.org )
+
+  
+

Il processo di localizzazione

+
+ Questo elenco di operazioni copre il ciclo di vita di una localizzazione, da quando il localizzatore comincia il proprio lavoro a quando la localizzazione dell'articolo risulta terminata.
+
+  
+
+ 1. Il localizzatore decide quale pagina localizzare. Nella scelta di quante e quali pagine tradurre occorre tenere presente che il lavoro del localizzatore non si esaurisce con la traduzione della pagina allo stato attuale, ma continua con l’impegno di tenerla costantemente aggiornata.
+
+ 2. Il localizzatore esegue il proprio lavoro.
+
+ 3. Prima di salvare si assicura che, in fondo alla pagina dell'editor siano spuntate le voci "Localizzazione in corso" e "Editoriale" sotto la sezione "È necessaria una revisione?"
+
+ 4. Il localizzatore aggiunge una riga sull'etherpad presente all'indirizzo https://etherpad.mozilla.org/9LBcQCAbkA indicando il titolo dell'articolo, l'URL dell'articolo e il proprio nickname.
+
+ 5. Il localizzatore aggiunge un post al topic "[MDN] Traduzione articoli" sul forum di Mozilla Italia all'indirizzo http://forum.mozillaitalia.org/index.php?topic=54775.0 
+
+ 6. Il revisore controlla l'articolo tradotto e nello stesso topic suggerisce al localizzatore le correzioni da effettuare. Questi suggerimenti non sono vincolanti, sta al localizzatore decidere se accettarli o meno
+
+ 7. Il localizzatore effettua le correzioni che ritiene opportune
+
+ 8. Se i revisori si ritengono soddisfatti delle correzioni apportate, il localizzatore sbarra la voce dell'articolo sull'etherpad (selezionando la riga corrispondente e usando il pulsante con la "S" sbarrata in alto a destra dell'editor per applicare alla selezione lo stile "Strikethrough")
+
+  
+

Suggerimenti

+ +
+  
+

Consistenza terminologica e aggiornamenti

+
+ Essendo MDN una guida per sviluppatori, è di fondamentale importanza che la terminologia degli articoli sia consistente con quella utilizzata nella localizzazione ufficiale di Mozilla. Pertanto:
+ +

Traduzioni incomplete

+
+ Se un traduttore interrompe la localizzazione di una pagina e desidera riprenderla in un secondo (ragionevolmente non troppo lontano) momento, è bene che spunti la casella “Localizzazione in corso” nella schermata di traduzione, in modo da informare gli altri utenti che quella pagina non è stata abbandonata a se stessa. Le pagine incomplete sprovviste dell’etichetta “Localizzazione in corso” verranno considerate a tutti gli effetti libere di essere modificate da altri localizzatori.
+
+  
diff --git a/files/it/mdn/contribute/localize/index.html b/files/it/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..a322dd56f2 --- /dev/null +++ b/files/it/mdn/contribute/localize/index.html @@ -0,0 +1,28 @@ +--- +title: Localizzazione di MDN +slug: MDN/Contribute/Localize +tags: + - Documentation + - Localization + - MDN + - TopicStub +translation_of: MDN/Contribute/Localize +--- +
{{MDNSidebar}}

MDN è usato in tutto il mondo come riferimento e guida alle tecnologie del Web e come documentazione tecnica di Firefox. Le nostre comunità di localizzazione sono una componente fondamentale del progetto Mozilla; il loro sforzo nel tradurre e localizzare la documentazione permette alle persone in tutto il mondo di sviluppare per l'open Web. Se vuoi maggiori informazioni sui nostri gruppi di localizzazione, unirti a uno dei gruppi esistenti o magari iniziare una nuova localizzazione non ancora presente, sei nel posto giusto.

+

{{LandingPageListSubpages}}

+

Strumenti per la localizzazione

+

Questi sono alcuni degli strumenti che vengono utilizzati per la localizzazione:

+
+
+ Verbatim
+
+ Utilizzato per la traduzione delle stringhe di vari progetti Mozilla, tra cui l'interfaccia utente di MDN e quella di Firefox.
+
+ Transvision
+
+ Uno strumento fornito da Mozilla France che permette di cercare occorrenze di una stringa in inglese e di trovare, in base alla lingua di proprio interesse, tutte le varie traduzioni che vengono utilizzate all'interno del codice Mozilla. È molto utile per trovare le traduzioni più utilizzate per i vari termini o frasi.
+
+

Vedi anche

+ diff --git a/files/it/mdn/contribute/localize/progetti_localizzazione/index.html b/files/it/mdn/contribute/localize/progetti_localizzazione/index.html new file mode 100644 index 0000000000..5266f57222 --- /dev/null +++ b/files/it/mdn/contribute/localize/progetti_localizzazione/index.html @@ -0,0 +1,283 @@ +--- +title: I progetti di localizzazione +slug: MDN/Contribute/Localize/progetti_localizzazione +translation_of: MDN/Contribute/Localize/Localization_projects +--- +

Il lavoro di localizzazione e di traduzione su MDN viene svolto dalla nostra straordinaria comunità di volontari. In questo articolo vengono elencati i progetti di localizzazione, coloro che ve ne sono alla guida e chi vi collabora, oltre ad altri dettagli.

+

A capo della localizzazione vi è colui che guida una comunità di localizzazione su MDN,  a localizzare i contenuti in base ad uno specifico luogo o tema. Insieme ai team di localizzazione, essi devono riportare i loro dati nella tabella progetti sottostante, in modo che, coloro interessati a contribuire, possano contattarli. Ognuno a capo della localizzazione ( o qualsiasi persona facente parte del team del progetto di localizzazione) è stimolato nel creare sul wiki una pagina team per i vostri progetti di localizzazione , da utilizzare per scopi organizzativi e amministrativi.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LinguaCapo LocalizzazioneCollaboratoriNotes
+

ગુજરાતી

+

(Gujarati)

+ 		prafull_satasiyaprafull_satasiyaCerchiamo traduttori
العربية wassim_h 
Persian Amir Farsi, Kazem EbrahimiCerchiamo traduttori
Bengali (Bangladesh)Shafiul Azam Chowdhury +

tuxboy, shafiul, Nasir Khan Saikat, Towfique Anam Rine, Tanha Islam, Sekander Badsha, Fahia Nasnin, Salman Rahman Desh, jaggedzak

+ 		Il Team Mozilla Bangladesh  cerca nuovi collaboratori. Maggiori informazioni
FrenchJeremie PatonnierFredB, Alain Boquet, Fréderic Chateaux, Vincent N., Benoit Leseul, Shz, Thierry Régagnon (tregagnon), xaky, Goofy, sylzys, the prisoner, Julien STUBY, poum, sylvie, Delapouite, Sphinx(note o URL alla pagina del team del progetto di traduzione)
Italian Federico, mck89, marcostudios, loris94, MrW0lf, Iacchi, camaleo, marcantonio, Grino, Nicola_D, EdoPut, Giona, klezMozilla Italia cerca collaboratori! Se vuoi aiutare a localizzare MDN, ti chiediamo di guardare questa guida per imparare come tradurre MDN.
Indonesian ariestiyansyah, Pieter Erlanda,  imrizal, Vernando Simbolon 
Japanese Yoshino(ex.Mozilla Japan), Yuichiro, myakura(Masataka Yakura), yyss, ethertank, sosleepy, Marsf(Masahiko Imanaka), Masayuki, nobuoka, yoshitanaka, taguchi-ch, sii, saneyuki_s, Shimono(Atsushi Shimono), Taken(Takeshi Kurosawa), Electrolysis, dextra,PotappoMDC Japan Project (-2009)
Lao ພາສາລາວ Anousak Souphavanh, Angkhan Buasavanh, Phaynalinh Sypasert, Sulaxay Manivong, Robert M Campbell, Lao Thor 
Polish Tomasz Sokół,Marcoos(Marek Stępień), Dapi 
SpanishManuel CamachoNukeador, Superruzafa, vhanla, maedca, inma_610, ccarruitero, artopal, StripTM, Jorge.villalobos, Scipion, Verruckt, Nathymig, Rkovac, ajimix, mhauptma73, deimidis, Joalar, Maharba, jessest, MPoli, Daniel Pereyra, luisgm76, LeoHirsch, gorrotowiCerchiamo urgentemente traduttori.
Portuguese (Brazil) Jaydson Gomes, Galvão, Atila, francisco.hansen, francineemilia, battisti, jpalharini, LeonardoPacheco, Lehrerschuler, hsteffano, lfz, -pedrohenrique-, eduardodx, mateus.m.luna, josivansilva, TelaSocial, mazulo, vlopez5, robsonds, HenriqueSilverio, srsaudeCome collaborare con MDN
Portuguese (Portugal) Leandro Mercês Xavier, Matheus Smythe Svolenski, Luis Henrique Sousa, f.sanxz 
KoreanChanny Yun Korean ContributorsGoogle Groups
Germanfscholzeminor, AlexPl, Sprottenwels, tessarakt3, jwl, SJW, Holger Sinn, Sebastian ZartnerCerchiamo traduttori
+

Greek

+ 		 syssgx, JasnaPaka, DJ.MacaCerchiamo traduttori
Russian Cobalt747, Sky_Fox, Chernetsky, uleming, karasiov, Dionys, Megapotz, hazestalker, Kwinto, kupCerchiamo traduttori
Chinese (Traditional) BobChao, dwchiang, happysadman, petercpg, sailplaneTW, Kourge, Josesun, Sonrisa, Kennyluck, sycheng, naihsi, evelynhung, ypwalter, steely.wingCerchiamo traduttori! Unisciti a noi! Google Groups!
+

中文 (简体)

+ 		ziyunfei如有问题讨论，请加 QQ 群 26079139 咨询带头人。
Hebrew Ziv Perry, InkbugCerchiamo traduttori
Romanian Raul Malea, Andrew_PhamCerchiamo traduttori.
Telugu Dyvik Chenna Thirunahari, DyvikCerchiamo traduttori
Thai Hassadee PimsuwanCerchiamo traduttori
+

Turkish

+ 		 Hakan Damar, ramesaliyev +

Cerchiamo urgentemente traduttori

+
Hindi Meghraj Suthar, meghraj +

Cerchiamo traduttori

+
Hawaiian KolonaheCerchiamo urgentemente traduttori
Serbian Vladimir KrsticIniziate a localizzare, siete i benvenuti. C'è molto da fare!
SinhalesepkavindaPasindu Kavinda (පසිඳු කවින්ද) +

Cerchiamo traduttori

+
MalayalamRigin OommenAmjad M, Kumaresan C.S, ST AlfasSiamo alla ricerca di persone in grado di tradurre documenti  in lingua malese.
MyanmarSet Kyar Wa larSet Kyar Wa LarSiamo alla ricerca di persone in grado di tradurre documenti  in lingua birmana.
+ diff --git a/files/it/mdn/contribute/localize/translating_pages/index.html b/files/it/mdn/contribute/localize/translating_pages/index.html new file mode 100644 index 0000000000..f45ad0085f --- /dev/null +++ b/files/it/mdn/contribute/localize/translating_pages/index.html @@ -0,0 +1,55 @@ +--- +title: Come tradurre le pagine di MDN +slug: MDN/Contribute/Localize/Translating_pages +tags: + - Guide + - Localization + - MDN Meta + - Page Translation + - l10n +translation_of: MDN/Contribute/Localize/Translating_pages +--- +

{{MDNSidebar}}

+ +

Questo articolo contiene una guida di base su come tradurre i contenuti su MDN, includendo sia le meccaniche di traduzione che consigli per la corretta gestione dei diversi tipi di argomenti.

+ +

Iniziare una nuova traduzione

+ +

Quando t'imbatti in una pagina che vorresti vedere tradotta nella tua lingua, segui questi passaggi:

+ +
    +
  1. Clicca sull'icona delle lingue per aprire il menu delle lingue e clicca su Add a Translation. Se non dovessi trovare questa voce, prova  prima a passare alla lingua Inglese.
    2. +
  2. Nella pagina Select Languages, scegli la lingua in cui vuoi tradurre il testo. Si aprirà la pagina con l'articolo originale sulla sinistra e l'editor di testo per scrivere la nuova versione sulla destra dello schermo.
    3. +
  3. Nella sezione Translate Description, puoi tradurre il titolo e lo slug della pagina. Lo slug è l'ultima parte dell'url di una pagina (per esempio, "Translating_pages" in questo articolo). In alcune lingue lo slug non viene tradotto, mantenendo quello originale in inglese. Confronta dunque le altre pagine nella tua lingua per seguire una pratica comune. Per nascondere la sezione Translate Description puoi cliccare sul meno a sinistra del titolo, così da avere più spazio sullo schermo per la sezione Translate Content.
    4. +
  4. Nella sezione Translate Content puoi tradurre il testo principale e puoi vederne l'anteprima cliccando su Preview Changes.
    5. +
  5. Ricordati di scegliere almeno un tag per pagina.
    6. +
  6. Clicca Save Changes quando hai finito, Discard Changes se hai deciso di annullare le modifiche apportate.
    7. +
+ +
Nota: L'interfaccia di traduzione è inizialmente mostrata in inglese. Nelle successive visite verrà visualizzata nella tua lingua, sempre se il servizio di localizzazione di MDN riesce a stabilirla. La lingua viene scelta usando il servizio Verbatim.
+Vai a Localizzazione con Verbatim per i dettagli di questo strumento.
+ +

Modificare una pagina già tradotta

+ + + +

Se la versione originale in inglese è stata modificata dopo l'ultimo aggiornamento nella tua lingua, l'interfaccia di traduzione mostrerà le modifiche a livello del codice sorgente, che può essere utile per aggiornare la traduzione.

+ +

Tag

+ +

È importante che ogni pagina abbia almeno un tag. Anche se si tratta di una traduzione. Generalmente, usare gli stessi tag della versione originale dell’articolo è una buona prassi.

+ +

Alcuni tag sono utilizzati come filtri per le ricerche, o come riferimento per chi contribuisce a MDN. Non dovrebbero essere tradotti. Per sapere quali sono questi tag, visita la pagina standard di etichettatura. Sei libero di creare nuovi tag nella tua lingua, a patto che non siano parte di questa lista.

+ +

Suggerimenti per i nuovi localizzatori

+ +

Se tu sei principiante nella localizzazione su MDN, qui sono alcuni suggerimenti:

+ + diff --git a/files/it/mdn/contribute/persona_sign-in/index.html b/files/it/mdn/contribute/persona_sign-in/index.html new file mode 100644 index 0000000000..5b89975a4d --- /dev/null +++ b/files/it/mdn/contribute/persona_sign-in/index.html @@ -0,0 +1,26 @@ +--- +title: MDN and Persona sign-ins +slug: MDN/Contribute/Persona_sign-in +translation_of: Archive/MDN/Persona_sign-ins +--- +
{{MDNSidebar}}
+

Please link your GitHub account to your MDN profile now so you can continue to sign into MDN.

+
+ +

Attualmente, MDN permette ai collaboratori di accedere utilizzando due differenti modalità: Mozilla Persona e GitHub. A partire dal 1 novembre 2016 verrà rimossa l'opzione Persona per il login. Di conseguenza, sarà necessario abilitare l'autenticazione Github sul proprio profilo per evitare di perdere l'accesso di login a MDN.

+ +

Ci rendiamo conto che questo è un inconveniente e ci scusiamo per questo. Purtroppo questa cosa è al di fuori del nostro controllo.

+ +

Perché Persona verrà rimosso?

+ +

Mozilla ha terminato il progetto Persona, e i suoi server verranno spenti nel Novembre 2016. You can learn more about Mozilla's decision to shut down Persona on the Mozilla wiki.

+ +

When will Persona be removed?

+ +

We will disable Persona as an authentication provider on November 1, 2016; in other words, the last day you'll be able to sign into MDN using Persona will be October 31, 2016. We will be issuing increasingly frequent and increasingly urgent notifications to add a GitHub account to your MDN profile starting now. Please do this as soon as you can, in order to avoid any risk of losing access to your MDN account.

+ +

Will MDN offer another authentication provider?

+ +

We would very much like to do so, but have not yet identified another provider which meets our requirements; in addition, we don't currently have the developer resources to integrate another provider. For the time being, your only option to keep contributor access to MDN is to link your MDN profile to your GitHub account.

+ +

Keep in mind, of course, that you don't need to sign into MDN in order to read our content. But if you have an account for contributing, and wish to be able to contribute at any time in the future, be sure to add a GitHub account to your profile as soon as you can, before October 31, 2016.

diff --git a/files/it/mdn/editor/index.html b/files/it/mdn/editor/index.html new file mode 100644 index 0000000000..856ef1fc2d --- /dev/null +++ b/files/it/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/mdn/guidelines/index.html b/files/it/mdn/guidelines/index.html new file mode 100644 index 0000000000..11412724a1 --- /dev/null +++ b/files/it/mdn/guidelines/index.html @@ -0,0 +1,13 @@ +--- +title: MDN content and style guides +slug: MDN/Guidelines +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Guidelines +--- +
{{MDNSidebar}}

These guides provide details on how MDN documentation should be written and formatted, as well as how our code samples and other content should be presented. By following these guides, you can ensure that the material you produce is clean and easy to use.

+

{{LandingPageListSubpages}}

diff --git a/files/it/mdn/guidelines/macros/index.html b/files/it/mdn/guidelines/macros/index.html new file mode 100644 index 0000000000..a09cf37e30 --- /dev/null +++ b/files/it/mdn/guidelines/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/guidelines/migliore_pratica/index.html b/files/it/mdn/guidelines/migliore_pratica/index.html new file mode 100644 index 0000000000..2aadc92c27 --- /dev/null +++ b/files/it/mdn/guidelines/migliore_pratica/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/index.html b/files/it/mdn/index.html new file mode 100644 index 0000000000..16a5058327 --- /dev/null +++ b/files/it/mdn/index.html @@ -0,0 +1,29 @@ +--- +title: Il progetto MDN +slug: MDN +translation_of: MDN +--- +
{{MDNSidebar}}
+ +

Mozilla Developer Network (MDN) è un wiki che utilizziamo per documentare il Web open, le tecnologie Mozilla, Firefox OS e altri argomenti inerenti il lavoro degli sviluppatori. Tutti coloro che vogliono aggiungere o modificare contenuti sono i benvenuti. Non è necessario essere programmatori o sapere tutto sulla tecnologia; esistono vari compiti che necessitano di volontari, dai più semplici (revisione e correzione degli articoli) ai più complessi (scrivere documentazione per le API).

+ +
+

L'obiettivo del progetto MDN è quello di documentare l'Open Web, le tecnologie Mozilla e il progetto Mozilla. Ti invitiamo ad aiutarci!

+
+ +

Ci serve il tuo aiuto! È semplice. Non serve che chiedi il permesso e non avere paura di commettere errori. D'altro canto, ti consigliamo di fare conoscenza con la comunità MDN; siamo qui per aiutarti! La documentazione sottostante può essere un valido aiuto per iniziare.

+ + + + diff --git a/files/it/mdn/structures/index.html b/files/it/mdn/structures/index.html new file mode 100644 index 0000000000..b8df701dac --- /dev/null +++ b/files/it/mdn/structures/index.html @@ -0,0 +1,16 @@ +--- +title: Document structures +slug: MDN/Structures +tags: + - Landing + - MDN Meta + - NeedsTranslation + - Structures + - TopicStub +translation_of: MDN/Structures +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Throughout MDN, there are various document structures that are used repeatedly, to provide consistent presentation of information in MDN articles. Here are articles describing these structures, so that, as an MDN author, you can recognize, apply, and modify them as appropriate for documents you write, edit, or translate.

+ +

{{LandingPageListSubPages()}}

diff --git "a/files/it/mdn/structures/tabelle_compatibilit\303\240/index.html" "b/files/it/mdn/structures/tabelle_compatibilit\303\240/index.html" new file mode 100644 index 0000000000..81ee695696 --- /dev/null +++ "b/files/it/mdn/structures/tabelle_compatibilit\303\240/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:

+ +
    +
  • mdn_url: Contains the URL of the reference page for this feature on MDN. Note that this needs to be written without the locale directory inside, e.g. /docs/... not /docs/en-US/... (or whatever). This is added in by the macro when the data is put on the page, for localization purposes.
    • +
  • support: Contains members representing the browser support information for this feature in all the different browsers we want to report.
    • +
  • status: Contains members reporting the standards track status of this feature.
    • +
+ +

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:

+ +
    +
  • A version number: If you know the exact version in which a browser started to support your feature, use a string representing the number, e.g. "47".
    • +
  • true: If a browser supports a feature but you don't know the exact version number, use the value true. This equivalent to the \{{CompatVersionUnknown}} macro call in the old manual tables.
    • +
  • false: If a browser does not support a feature, use the value false. This is equivalent to the the \{{CompatNo}} macro call in the old manual tables.
    • +
  • null: If you don't know whether a browser supports a feature or not, use the value null. This is equivalent to the \{{CompatUnknown}} macro call in the old manual tables.
    • +
+ +

Inside the status member, you'll include three submembers:

+ +
    +
  •  "experimental": This should be set to true if the feature is experimental, or false otherwise.
    • +
  • "standard_track": This should be set to true if a feature is on some kind of standards track (most commonly W3C/WHATWG, but there are also other standards efforts such as Khronos, TC39, etc.) or false otherwise.
    • +
  • "deprecated": This should be set to true if the feature is deprecated, or false otherwise.
    • +
+ +

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 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/midas/index.html b/files/it/midas/index.html new file mode 100644 index 0000000000..975b7bdfa8 --- /dev/null +++ b/files/it/midas/index.html @@ -0,0 +1,330 @@ +--- +title: Midas +slug: Midas +tags: + - DOM + - Midas + - NeedsContent + - NeedsHelp + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub +translation_of: Mozilla/Projects/Midas +--- +

Introduction

+ +

Midas is the code name for Gecko's built-in rich text editor. Midas can be enabled via JavaScript on an HTML document. When Midas is enabled, the document becomes editable by the user. Scripting for Midas is based on the DHTML commands supported by Internet Explorer. Internet Explorer supports the ability to make an entire document editable by setting the designMode property of the {{domxref("document")}} object; this is how Midas is invoked in Gecko. Internet Explorer also supports the ability to edit specific elements using the contentEditable attribute; Starting with Firefox 3, Gecko also supports contentEditable. Once Midas is invoked, a few more methods of the document object become available.

+ +

Properties

+ +
+
document.designMode
+
By setting this property to "on", the document becomes editable.
+
+ +

Notes

+ +

Since an entire document becomes editable, authors often load the editable document into an IFRAME and do the bulk of the scripting in the parent document. According to standards, The IFRAME element has the contentDocument property that refers to the document in the inline frame. It also has a property called contentWindow that refers to the window object inside the inline frame. This also avoids problems with {{bug(198155)}}.

+ +

In addition to the built-in commands, advanced editing can be done by manipulating the {{domxref("Selection")}} and {{domxref("range")}} objects. It is beneficial to be familiar with these objects when working with an editable document.

+ +

Examples

+ +

This example shows the basic structure described in the Notes section :

+ +
<html>
+	<head>
+		<title>Simple Edit Box</title>
+	</head>
+	<body>
+		<iframe
+			id="MidasForm"
+			src="about:blank"
+			onload="this.contentDocument.designMode='on';"
+		></iframe>
+	</body>
+</html>
+
+ +

Methods

+ +
+
{{domxref("Document.execCommand")}}
+
Executes the given command.
+
{{domxref("Document.queryCommandEnabled")}}
+
Determines whether the given command can be executed on the document in its current state.
+
{{domxref("Document.queryCommandIndeterm")}}
+
Determines whether the current selection is in an indetermined state.
+
{{domxref("Document.queryCommandState")}}
+
Determines whether the given command has been executed on the current selection.
+
{{domxref("Document.queryCommandValue")}}
+
Determines the current value of the document, range, or current selection for the given command.
+
+ +

Supported Commands

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandValueDescription
backcolorA color code.This command will set the background color of the document.
bold If there is no selection, the insertion point will set bold for subsequently typed characters. +

If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.

+
contentReadOnly This command will make the editor readonly(true)or editable(false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.
copy If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen. +

note: this command won't work without setting a pref or using signed JS. See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.

+
createlinkA URI.This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.
cut If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen. +

note: this command won't work without setting a pref or using signed JS. See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.

+
decreasefontsize This command will add a <small> tag around selection or at insertion point.
delete This command will delete all text and objects that are selected. If no text is selected it deletes one character to the right. This is similar to the Delete button on the keyboard.
fontnameA font nameThis command will set the font face for a selection or at the insertion point if there is no selection. +

The given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.

+
fontsizeA numberThis command will set the fontsize for a selection or at the insertion point if there is no selection. +

The given number is such as would be used in the "size" attribute of the font tag.

+
forecolorA color codeThis command will set the text color of the selection or at the insertion point.
formatblockH1, H2, H3, H4, H5, H6, P, DIV, ADDRESS, BLOCKQUOTE (more?)The selection surrounded by the given block element.
headingH1, H2, H3, H4, H5, H6Selected block will be formatted as the given type of heading.
hilitecolorA color codeThis command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.
increasefontsize This command will add a <big> tag around selection or at insertion point.
indent Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.
insertbronreturntrue/falseSelects whether pressing return inside a paragraph creates another paragraph or just inserts a <br> tag.
inserthorizontalrulenull/string (when string is the Line's id)This command will insert a horizontal rule (line) at the insertion point. +

Does it delete the selection? Yes!

+
inserthtmlA string.This command will insert the given html into the <body> in place of the current selection or at the caret location. +

The given string is the HTML to insert.

+
insertimageA URI.This command will insert an image (referenced by the given url) at the insertion point.
insertorderedlist Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.
insertunorderedlist Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.
insertparagraph Inserts a new paragraph.
italic If there is no selection, the insertion point will set italic for subsequently typed characters. +

If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.

+
justifycenter Center-aligns the current block.
justifyfull Fully-justifies the current block.
justifyleft Left-aligns the current block.
justifyright Right aligns the current block.
outdent Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen. +

If the caret is in a list item, the item will bump up a level in the list or break out of the list entirely.

+
paste This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents. +

note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.

+
redo This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect. +

note: the shortcut key will automatically trigger this command (typically accel-shift-Z)

+
removeformat Removes inline formatting from the current selection.
selectall This command will select all of the contents within the editable area. +

note: the shortcut key will automatically trigger this command (typically accel-A)

+
strikethrough If there is no selection, the insertion point will set strikethrough for subsequently typed characters. +

If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.

+
styleWithCSS This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate <b> if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.
subscript If there is no selection, the insertion point will set subscript for subsequently typed characters. +

If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.

+
superscript If there is no selection, the insertion point will set superscript for subsequently typed characters. +

If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text.

+
underline If there is no selection, the insertion point will set underline for subsequently typed characters. +

If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.

+
undo This command will undo the previous action. If no action has occurred in the document, then this command will have no effect. +

note: the shortcut key will automatically trigger this command (typically accel-Z)

+
unlink If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.
{{Deprecated_header}}
readonly This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.
useCSS This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.
+ +

 

diff --git a/files/it/midas/security_preferences/index.html b/files/it/midas/security_preferences/index.html new file mode 100644 index 0000000000..c3962fce60 --- /dev/null +++ b/files/it/midas/security_preferences/index.html @@ -0,0 +1,73 @@ +--- +title: 'Midas editor, cambiare le impostazioni di sicurezza' +slug: Midas/Security_preferences +tags: + - Firefox + - Gecko + - Midas + - Non-standard + - Sicurezza + - editor +translation_of: Mozilla/Projects/Midas/Security_preferences +--- +
+

Nota: Se hai raggiunto questa pagina da un messaggio di Firefox oppure da un altro prodotto Mozilla, prova ad utilizzare gli shortcut da tastiera : taglia,copia ed incolla :

+ +
    +
  • Copia : Ctrl+C or Ctrl+Insert (command+C sul Mac)
    • +
  • Incolla : Ctrl+V or Shift+Insert (command+V sul Mac)
    • +
  • Taglia : Ctrl+X or Shift+Delete (command+X sul Mac)
    • +
+ +

Il resto delle informazioni presenti in questa pagina sono per sviluppatori web ed utenti esperti. Per favore non tentare di modificare questa pagina

+
+ +

Per proteggere la privacy degli utenti, gli scripts non autorizzati non possono invocare taglia, copia ed incolla in Midas, il text editor di Mozilla. Questo significa che i pulsanti corrispondenti in Mozilla Rich Text Editing demo page non funzioneranno. Per abilitare queste funzioni, devi modificare le preferenze del tuo browser.

+ +
+

Attenzione : Cambiando queste impostazioni, il tuo browser diventa vulnerabile, soprattutto se fornisci permessi a siti poco sicuri. Cambia questi settaggi solo se hai bisogno di testare il demo sopra oppure per testare un tuo addon per Firefox. Assicurati di ripristinare questi settaggi quando hai concluso

+
+ +

Cambiare le preferenze in Firefox

+ +
    +
  1. Chiudi Firefox. Se hai il quick launch attivo (su Windows è un icona nella toolbar), chiudi anche quella.
    2. +
  2. Cerca la directory contenente il tuo profilo Firefox
    3. +
  3. Apri il file user.js presente nella cartella in un text editor. Se il file user.js non è presente, creane uno.
    4. +
  4. Aggiungi queste righe al file user.js: + 
    user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+
    +
    5. +
  5. Modifica l' URL https://www.mozilla.org con il sito verso cui vuoi abilitare questa funzione.
    6. +
  6. Salva il file e apri Firefox. I bottoni della Clipboard nel demo, o bottoni simili nel sito da te indicato, ora dovrebbero funzionare.
    7. +
+ +
Nota: E' preferibile un sito come da protocollo specifico.. Esempio: + +
user_pref("capability.policy.allowclipboard.sites", "http://www-archive.mozilla.org")
+
+ +

non è uguale a :

+ +
user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org")
+
+ +

Questo perchè il primo esempio usa HTTP mentre il secondo usa HTTPS.

+Se vuoi consentire a multipli url di accere alla funzione "Incolla", separa gli URLs con uno spazio. Esempio : + +
user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org https://developer.mozilla.org")
+
+
+ +

Ancora, non dimenticare i rischi per la sicurezza a cui incorri e assicurati alla conclusione, di aver rimosso i permessi di accesso .

+ +

Guarda anche

+ + diff --git a/files/it/migrare_applicazioni_da_internet_explorer_a_mozilla/index.html b/files/it/migrare_applicazioni_da_internet_explorer_a_mozilla/index.html new file mode 100644 index 0000000000..83afe5e679 --- /dev/null +++ b/files/it/migrare_applicazioni_da_internet_explorer_a_mozilla/index.html @@ -0,0 +1,1268 @@ +--- +title: Migrare applicazioni da Internet Explorer a Mozilla +slug: Migrare_applicazioni_da_Internet_Explorer_a_Mozilla +tags: + - Da_unire + - Standard_Web + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Archive/Mozilla/Migrate_apps_from_Internet_Explorer_to_Mozilla +--- +

 

+ +

Introduzione

+ +

Quando Netscape diede il via al browser Mozilla, prese la decisione conscia di supportare gli standard W3C. Come risultato, Mozilla non è pienamente retrocompatibile con il vecchio codice di Netscape Navigator e Microsoft Internet Explorer; ad esempio, Mozilla non supporta <layer> come discuteremo in seguito. I browser, come Internet Explorer 4, realizzati prima della concezione degli standard W3C hanno ereditato molti comportamenti anomali (quirks). In questo articolo, descriveremo il quirks mode di Mozilla, che fornisce una forte retrocompatibiltà HTML con Internet Explorer ed altri browser datati.

+ +

Verranno considerate anche tecnologie non standard, come XMLHttpRequest ed il rich text editing, supportati da Mozilla perche' non esistevano all'epoca equivalenti del W3C. Esse includono:

+ + + +

Consigli generali di programmazione cross-browser

+ +

Anzhe se esistono gli standard Web, browser differenti si comportano in maniera differente (infatti, lo stesso browser potrebbe agire in modi diversi in base alla piattaforma). Molti browser, come Internet Explorer, supportano inoltre API precedenti a quelle definite dal W3C, e non hanno mai aggiunto un suporto estensivo per quelle definite dal W3C stesso.

+ +

Prima di entrare nello specifico delle differenze tra Mozilla ed Internet Explorer, verranno introdotti alcuni metodi base per rendere una applicazione Web estensibile in modo da aggiungere in un secondo momento il supporto per nuovi browser.

+ +

Poiché browser differenti a volte usano API differenti per le stesse funzionalità, di solito si trovano molti blocchi if() else() all'interno del codice per stabilire la differenza tra i vari browser. Il codice seguente mostra blocchi disegnati per Internet Explorer:

+ +
. . .
+
+var elm;
+
+if (ns4)
+  elm = document.layers["myID"];
+else if (ie4)
+  elm = document.all["myID"]
+
+ +

Il codice appena visto non è estensibile, perciò se si vuole supportare un nuovo browser, bisogna necessariamente aggiornare questi blocchi all'interno dell'applicazione Web.

+ +

Il modo più semplice per eliminare il bisogno di riprogrammare per un nuovo browser è asttrarre le funzionalità. Piuttosto di molteplici blocchi if() else(), è possibile aumentare l'efficienza prendendo le azioni comuni e ed astraendole dalle proprie funzioni. Non solo questeo rende il codice più facile da leggere, semplifica l'aggiunta del supporto per nuovi client:

+ +
var elm = getElmById("myID");
+
+function getElmById(aID){
+  var element = null;
+
+  if (isMozilla || isIE5)
+    element = document.getElementById(aID);
+  else if (isNetscape4)
+    element = document.layers[aID];
+  else if (isIE4)
+    element = document.all[aID];
+
+  return element;
+}
+
+ +

Il codice soprastante ha ancora il problema del browser sniffing, o le rilevazione del browser che l'utente sta usando. Il browser sniffing viene solitamente eseguito attraverso lo useragent, come ad esempio:

+ +
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016
+
+ +

Mentre l'uso dell'useragent per rilevare il browser fornisce dettagliate informazioni sul browser in uso, il codice che gestisce gli useragent è soggetto ad errori nel momento in cui arrivano nuove versioni di un browser, il che richiede un cambiamento nel codice.

+ +

Se il tipo di browser non è importante (supponiamo siano stati già bloccati i browser non supportati dall'accesso all'applicazione Web), è molto meglio e più sicuro rilevare le funzionalità del browser o il supporto di caratteristiche degli oggetti. Solitamenre è possibile fare questo testando le funzionalità richieste in JavaScript. Ad esempio, piuttosto che:

+ +
if (isMozilla || isIE5)
+
+ +

Si preferisce usare:

+ +
if (document.getElementById)
+
+ +

Questo potrebbe permettere ad altri browser che supportano i metodi standard del W3C, come Opera o Safari, di funzionare senza altri cambiamenti.

+ +

Lo sniffing dello useragent, in ogni caso, ha senso quando è importante l'accuratezza, ad esempio quando si sta verificando che un browser venga incontro ai requisiti di versione dell'applicazione Web o si sta provando ad evitare un bug.

+ +

JavaScript permette inoltre l'uso di statement condizionali abbreviati, il che può semplificare la leggibilità del codice:

+ +
 var foo = (condition) ? conditionIsTrue : conditionIsFalse;
+
+ +

Ad esempio, per ottenere un elemento, è possibile usare:

+ +
 function getElement(aID){
+   return (document.getElementById) ? document.getElementById(aID)
+                                    : document.all[aID]);
+ }
+
+ +

Oppure un'altra maniera è l'uso dell'operatore ||:

+ +
 function getElement(aID){
+   return (document.getElementById(aID)) || document.all[aID]);
+ }
+
+ +

 

+ +

Differenze tra Mozilla e Internet Explorer

+ +

Anzitutto, discuteremo le differenze nel modo in cui HTML lavora tra Mozilla ed Internet Explorer.

+ +

 

+ +

Tooltip

+ +

I browser più datati hanno introdotto i tooltip in HTML mostrandoli sui link ed usando il valore dell'attributo alt come contenuto del tooltip. Le ultile specifice del W3C hanno dato vita all'attributo title, che serve per contenere una dettagliata descrizione del link. I browser moderni useranno l'attributo title per mostrare i tooltip, e Mozilla supporta solo la visualizzazione dei tooltip per questo attributo e non per alt.

+ +

Entità

+ +

Il marcatore HTML può contenere molte entità, come definito dal W3C web standards body. Le entità possono essere riferite attraverso il loro riferimento numerico o a caratteri. Ad esempio, è possibile riferire il carattere di spazio bianco #160 con &#160;, o con il suo equivalente riferimento a caratteri &nbsp;.

+ +

Alcuni browser più vecchi, come Internet Explorer, hanno comportamenti strani che permettono l'uso di entità sostituendo il carattere ; (punto e virgola) alla fine con del testo normale:

+ +
&nbsp Foo
+&nbsp&nbsp Foo
+
+ +

Mozilla interpreterà il precedente &nbsp con spazi bianchi, anche se contro le specifiche W3C. Il browser non effettuerà il parsing di un &nbsp se è direttamente seguito da più caratteri, come ad esempio:

+ +
&nbsp12345
+
+ +

Questo codice non funziona in Mozilla, poiché contro gli standard web del W3C. Per evitare discrepanze, è buona norma usare sempre la forma corretta (&nbsp;).

+ +

Differenze del DOM

+ +

Il Document Object Model (DOM) è la 'struttura ad albero che contiene gli elemendi del documento. Si può manipolarlo tramite le API JavaScript, che il W3C ha reso standard. In ogni caso, prima della standardizzazione del W3c, Netscape 4 ed Internet Explorer 4 implementavano delle API simili. Mozilla implementa solo le vecchie API che non sono riprodotte dagli standard W3C

+ +

 

+ +

Accedere agli elementi

+ +

Per ottenere un riferimento ad un elemento usando l'approccio cross-browser, si utilizza document.getElementById(aID), che funziona in Internet Explorer 5.0 e superiori, nei browser basati su Mozilla, altri browser che si attengono allo standard W3C ed è parte delle specifiche DOM Level 1.

+ +

Mozilla non supporta l'accesso agli elementi attraverso document.elementName o anche tramite il nome dell'elemento, come accade in Internet Explorer (una pratica chiamata anche inquinamento globale dei namspace). Mozilla inoltre non supporta il metodo document.layers di Netscape 4 né il document.all di Internet Explorer. Mentre document.getElementById permette di ottenere un elemento, si possono usare document.layers e document.all per avere una lista di tutti gli elementi del documento con un certo tag, come ad esempio tutti gli elementi <div>.

+ +

I metodi del DOM Level 1 del W3c fanno riferimento a tutti gli elementi con lo stesso tag attraverso getElementsByTagName(). Il metodo ritorna un array in JavaScript, e può essere chiamato sull'elemento document o altri nodi per cercare solo un il loro sottoalbero. Per ottenenere un array di elementi nell'albero DOM, è possibile usare getElementsByTagName("*").

+ +

Come mostrato nella Tabella 1, i metodi del DOM Level1 sono comunemente usati per muovere un elemento da una certa posizione e cambiare la sua visibilità (menu, animazioni). Netscape 4 usava il tag <layer>, che non è supportato da Mozilla, dato che un elemento HTML può essere posizionato ovunque. In Mozilla, è possibile posizionare ogni elemento usando il tag <div>, che usa anche Internet Esplorer e che si trova nella specifica di HTML.

+ +

 

+ + + + + + + + + + + + + + + + + +
Tabella 1. Metodi usati per accedere agli elementi
MetodoDescrizione
document.getElementById( aId )Ritorna un riferimento all'elemento con l'ID specificato.
document.getElementsByTagName( aTagName )Ritorna un array di elementi avebti il nome specifico nel documento.
+ +

Attraversare il DOM

+ +

Mozilla supporta le API DOM W3C per attraversare l'albero DOM tramite JavaScript (vedi Tabella 2). Le API esistono per ogni nodo nel documento e permettono di esplorare l'albero in ogni direzione. Anche Internet Explorer supporta queste API, ma support anche le sue vecchie API per per l'esplorazione dell'albero DOM, come la proprietà children

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 2. Metodi usati per attraversare il DOM
Proprietà/MetodoDescrizione
childNodesRitorna un array di tutti i nodi figli child dell'elemento.
firstChildRitorna il primo nodo figlio dell'elemento.
getAttribute( aAttributeName )Ritorna il valore per l'attributo specifico.
hasAttribute( aAttributeName )Ritorna un valore booleano indicante se il nodo corrente ha un attributo definito con il nome specifico.
hasChildNodes()Ritorna un valore booleano se il nodo corrente ha nodi figli.
lastChildRitorna l'ultimo nodo figlio dell'elemento.
nextSiblingRitorna il nodo immediatamente seguente a quello considerato.
nodeNameRitorna il nome del nodo in forma di stringa.
nodeTypeRitorna il tipo del nodo corrente. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValoreDescrizione
1Nodo Element
2Nodo Attribute
3Nodo Text
4Nodo Sezione CDATA
5Nodo Entity Reference
6Nodo Entity
7Nodo Processing Instruction
8Nodo Comment
9Nodo Document
10Nodo Document Type
11Nodo Document Fragment
12Nodo Notation
+
nodeValueRitorna il valore del nodo corrente. Per nodi che contengono testo, ad esempio nodi text e comment, ritorna il loro valore in stringa. Per nodi attribute, viene ritornato il valore dell'attributo. Per tutti gli altri nodi, viene ritornato null.
ownerDocumentRitorna l'oggetto document contenente il nodo corrente.
parentNodeRitorna il nodo padre del nodo corrente.
previousSiblingRitorna il nodo immediatamente precedente a quello corrente.
removeAttribute( aName )Rimuove l'attributo specificato dal nodo corrente.
setAttribute( aName, aValue )Setta il valore dell'attributo specificato con il valore specificato.
+ +

Internet Explorer ha un comportamento non standard, dove molte delle API vanno ad evitare i nodi di spazi bianchi che sono generati, ad esempio, da caratteri di ritorno a capo. Mozilla non li evita, per questo alcune volte si ha bisogno di distinguere questi nodi. Ogni nodo ha una propietà nodeType che specifica il tipo di nodo. Ad esempio, un nodo element ha tipo 1, mentre un nodo text ha tipo 3 ed un nodo comment è di tipo 8. Il modo migliore per processare solo i nodi elemento è iterare su tutti i nodi figli e processare solo quelli con un nodeType di 1:

+ +

 

+ +
HTML:
+  <div id="foo">
+    <span>Test</span>
+  </div>
+
+JavaScript:
+  var myDiv = document.getElementById("foo");
+  var myChildren = myXMLDoc.childNodes;
+  for (var i = 0; i < myChildren.length; i++) {
+    if (myChildren[i].nodeType == 1){
+      // element node
+    };
+  };
+
+ +

 

+ +

Generare e manipolare contenuto

+ +

Mozilla supporta i metodi più datati per aggiungere dinamicamente contenuto al DOM, come document.write, document.open w document.close. Mozilla supporta inoltre il metodo di Internet Explorer innerHTML, che può essere richiamato su quasi tutti i nodi. Non supporta outerHTML (che aggiunge marcatori intorno all'elemento e non ha equivalenti standard) e innerText (che modifica il valore del testo del nodo ed il cui comportamento viene ripreso in Mozilla usando textContent).

+ +

Internet Explorer ha diversi metodi per la manipolazione del contenuto che non sono né standard né supportati da Mozilla, incluso la ricezione del valore, l'inserimento di testo e di elementi adiacenti ad un nodo, come getAdjacentElement e insertAdjacentHTML. La Tabella 3 mostra i modi con cui standard W3C e Mozilla manipolano il contenuto, ognuno dei quali è metodo di un nodo DOM.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 3. Metodi usati da Mozilla per manipolare contenuti
MetodoDescrizione
appendChild( aNode )Crea un nuovo nodo figlio. Ritorna un riferimento al nuovo nodo figlio.
cloneNode( aDeep )Crea una copia del nodo sul quale viene chiamato e ritorna la copia. Se aDeep è true, la copia viene estesa all'intero sottoalbero del nodo.
createElement( aTagName )Crea e ritorna un nuvo nodo DOM senza genitori, del tipo specificato da aTagName.
createTextNode( aTextValue )Crea e ritorna un nuovo nodo di testo DOM senza genitori, con il valore specificato da aTextValue.
insertBefore( aNewNode, aChildNode )Inserisce aNewNode prima di aChildNode, il quale deve essere figlio del nodo corrente.
removeChild( aChildNode )rimuove aChildNode e ritorna un riferimento ad esso
replaceChild( aNewNode, aChildNode )Sostituisce aChildNode con aNewNode e ritorna un riferimento al nodo rimosso.
+ +

Frammenti del documento

+ +

per ragioni di performance, è possibile creare il documento in memoria piuttosto che lavorare nel DOM del documento esistente. La specifica DOM Level 1 Core ha introdotto i document fragments (frammenti di documento), ovvero documenti leggeri che contengono un sottoinsieme della normale interfaccia del documento. Ad esempio, getElementById non esiste, al contrario di appendChild. Inoltre è possbile aggiungere facilmente frammenti di documento al documento esistente.

+ +

Mozilla crea frammenti i documento attraverso document.createDocumentFragment(), che ritorna un frammento vuoto.

+ +

L'implementazione di Internet Explorer dei frammenti, comunque, non si attiene allo standard web del W3C e semplicemente ritorna un documento regolare.

+ +

Differenze di JavaScript

+ +

Molte differenze tra Mozilla e Internet Explorer sono solitamente notate in JavaScript. IN ogni caso, ilproblema risiede solitamente nelle API che un browser fornisce a JavaScript, come ad esempio gli agganci al DOM. I due browser possiedono alcune differenze nel linguaggio JavaScript stesso; i problemi incontrati sono spesso legati a fattori temporali.

+ +

 

+ +

Differenza di Date in JavaScript

+ +

L'unica differenza di Date è il metodo getYear. Secondo le specifiche ECMAScript (che sono le specifiche seguite da JavaScript), il metodo non è Y2k-compliant, e l'esecuzione di new Date().getYear() nel 2004 ritorna "104". Per la specifica ECMAScript, getYear ritorna l'anno meno 1900, originariamente inteso come "98" per "1998". getYear è assunto come deprecato nella versione 3 di ECMAScript ed è sostituito da getFullYear(). Internet Explorer ha modificato getYear() in modo da funzionare nella stessa maniera di getFullYear() rendendolo Y2K-compliant, mentre Mozilla ha mantenuto il metodo standard.

+ +

Differenze nell'esecuzione di JavaScript

+ +

Browser differenti eseguono JavaScript in maniera differente. Ad esempio, il codice seguente assume che il nodo div esista al momento in cui il blocco di codice script viene eseguito:

+ +
...
+<div id="foo">Loading...</div>
+
+<script>
+  document.getElementById("foo").innerHTML = "Done.";
+</script>
+
+ +

Ovviamente, ciò non è garantito. Per assicurarsi che l'elemento esisya, è necessario usare il gestore di evento onload nel tag <body>:

+ +
<body onload="doFinish();">
+
+<div id="foo">Loading...</div>
+
+<script>
+  function doFinish() {
+    var element = document.getElementById("foo");
+    element.innerHTML = "Done.";
+  }
+</script>
+...
+
+ +

Problemi collegati al tempo sono inoltre legati all'hardware -- sistemi più lenti possono manifestare dei bug che invece sistemi più veloci nascondono. Un esempio concreto è window.open, che apre una nuova finestra:

+ +
<script>
+  function doOpenWindow(){
+    var myWindow = window.open("about:blank");
+    myWindow.location.href = "http://www.ibm.com";
+  }
+</script>
+
+ +

Il problema con il codice è dato dal fatto che window.open è asincrona -- non blocca l'esecuzione di JavaScript finché la finestra non ha terminato il caricamento. Per questo, è possibile eseguire le linee di codice dopo window.open anche prima che la nuova finestra abbia terminato. Si può cercare di risolvere il problema usando un gestore onload nella nuova finestra e quindi tornare indietro alla finestra progenitrice (usando window.opener)

+ +

Differenza nella generazione di HTML con JavaScript

+ +

Javascript può, attraverso document.write, generare HTML al volo da una stringa. Il primo problema qui si ha quando JavaScript, inserito all'interno del documento HTML (cioè all'interno dei tag <script>), genera HTML che contiene un tag <script>. Se il documento è nel modo di impaginazione strict, verrà effettuato il parsing di <script> all'interno della stringa fino al tag di chiusura di <script>. Il codice seguente illustra meglio questa situazione:

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+...
+<script>
+  document.write("<script type='text\/javascript'>alert('Hello');<\/script>")
+</script>
+
+ +

Dato che la pagina è in modo strict, il parser di Mozilla vedrà prima <script> ed effettuerà il parsing fino a trovare un tag di chiusura, che sarà la prima occorrenza di </script>. Questo perché il parser non è a conoscenza di JavaScript (o altri linguaggi) nella modalità strict. Nel modo quirks, il parser tiene conto di JavaScript nella sua esecuzione (il che lo rallenta). Internet Explorer è sempre in modalità quirks, poiché non supporta veramente XHTML. Per fare in modo che il funzionamento sia lo stesso in Mozilla, basta separare la stringa in due parti:

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+...
+<script>
+  document.write("<script type='text\/javascript'>alert('Hello');</" + "script>")
+</script>
+
+ +

Debug di JavaScript

+ +

Mozilla fornisce diversi modi per il debugging di problemi legati a JavaScript trovati in applicazioni create per Internet Explorer. Il primo strumento è la console JavaScript integrata, mostrata in figura 1, dove errori ed avvertenze sono registrate. Vi si può accedere in Mozilla andando su Tools -> Web Development -> JavaScript Console o in Firefox (il prodotto solo browser di Mozilla) da Tools -> JavaScript Console.

+ +


+ Figura 1. console JavaScript

+ +

Console Javascript

+ +

La console JavaScript può mostrare l'intera lista registrata o solamente errori, avvertenze e messaggi. Il messaggio di errore in Figura 1 indica che, su aol.com, la linea 95 prova ad accedere ad una variabile non definita chiamata is_ns70. Cliccando sil link si apre la finestra di visualizzazione sorgente di Mozilla con la riga interessata dall'errore evidenziata.

+ +

La console permette inoltre di valutare espressioni JavaScript. Per fare una prova della sinatssi JavaScript, inserire 1+1 nel campo di input e premere Evaluate,come mostrato dalla Figura 2.

+ +

Figura 2. valutazione di codice JavaScript

+ +

JavaScript Console evaluating

+ +

Il motore JavaScript di Mozilla ha un supporto integrato per il debugging, ovvero fornisce strumenti potenti per gli sviluppatori JavaScript. Venkman, mostrato nella Figura 3, è un potente debugger JavaScript multipiattaforma integrato con Mozilla. usualmente viene incluso insieme con le varie release di Mozilla; si può trovare in Tools -> Web Development -> JavaScript Debugger. Firefox non include ill debugger; invece, si può installarlo dalla pagina del progetto Venkman. Sono disponibili anche dei tutorial nella pagina di sviluppo, situati nella pagina di sviluppo Venkman.

+ +

Figura 3. Debugger JavaScript di Mozilla

+ +

Mozilla's JavaScript debugger

+ +

Il debugger JavaScript può effettuare il debug di JavaScript in esecuzione nella finestra browser di Mozilla. Supporta molte caratteristiche standard per il debugging, come la gestione breakpoint, l'inspezione dello stack di chiamata, e l'ispezione di variabile/oggetto. Tutte le caratteristiche sono accedibili attraverso l'interfaccia utente oppure tramite la console interattiva del debugger. Con la console, può essere eseguito codice JavaScript arbitrario nello stesso scope del codice JavaScript in corso di debugging.

+ +

Differenze sui CSS

+ +

I prodotti basati su Mozilla hanno il più forte supporto per i fogli di stile a cascata (CSS), inclusi la gran parte di CSS1, CSS2.1 e parti di CSS3, in rapporto ad Internet Explorer così come con altri browser.

+ +

Per molti dei problemi menzionati sotto, Mozilla aggiunge una riga di errore o di avvertenza nella console JavaScript. Per problemi legati a CSS, è sufficiente quindi controllare la console JavaScript.

+ +

Mimetypes (Quando i file CSS non vengono applicati)

+ +

Il più comune problema legato ai CSS è dato dal fatto che le definizioni dei CSS all'interno di file CSS referenziati non vengono applicate. Questo solitamente a causa del server che invia un errato mimetype per il file CSS. Le specifiche CSS indicano che il file CSS deve essere servito con il tipo mime text/css. Mozilla rispetta questa indicazione e carica solo file CSS con questo mimetype se la pagina web è visualizzata con in modalità strettamente standard. Internet Explorer carica sempre il file CSS, senza tenere conto del mimetype con il quale viene servito. Le pagine web vengono considerate nel modo strettamente standard quando iniziano con un doctype strict. Discuteremo dei doctype nella sezione seguente.

+ +

CSS e unità

+ +

Molte applicazioni web non usano unità con i propri CSS, specialmente se viene utilizzato Javascript per impostare i CSS. Mozilla tollera questo comportamento, nel momento in cui la pagina non viene visualizzata nel modo strict. Poiché Internet Explorer non supporta XHTML, non considera per niente se vengono specificate delle unità. Se la pagina è in modo strettamente standard, e nessuna unità viene usata, Mozilla ignora lo stile:

+ +
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+  "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+   <title>CSS and units example</title>
+  </head>
+  <body>
+    // works in strict mode
+    <div style="width: 40px; border: 1px solid black;">
+      Text
+    </div>
+
+    // will fail in strict mode
+    <div style="width: 40; border: 1px solid black;">
+      Text
+    </div>
+  </body>
+</html>
+
+ +

Dato che l'esempio mostrato ha un doctype strict, la pagina viene visualizzata con modo di impaginazione strettamente standard. Il primo div ha una lunghezza di 40px, poiché usa una unità, ma il secondo div non avrà una lunghezza, cioè tornerà alla lunghezza di default di 100%, la qual cosa accadrebbe se la stessa lunghezza fosse impostata tramite JavaScript.

+ +

JavaScript e CSS

+ +

Dato che Mozilla supporta gli standard CSS, supporta inoltre lo standard DOM CSS per impostare i CSS attraverso JavaScript. Si può accedere, rimuovere e cambiare la regola di un elemento CSS attraverso il membro style dell'elemento:

+ +
<div id="myDiv" style="border: 1px solid black;">
+  Text
+</div>
+
+<script>
+  var myElm = document.getElementById("myDiv");
+  myElm.style.width = "40px";
+</script>
+
+ +

In questo modo si può raggiungere ogni attributo CSS. Ancora, se la pagina Web è in modo strict, va impostata una unità o Mozilla ignorerà il comando. Nella richiesta di un valore, diciamo per .style.width, in Mozilla ed Internet Explorer, il valore ritornato conterrà l'unità, il che implica il ritorno di una stringa. La stringa può essere convertita attraverso parseFloat("40px").

+ +

Differenze nell'overflow dei CSS

+ +

CSS aggiunge la nozione di overflow (traboccamento), che permette di definire come gestire un traboccamento; ad esempio, quando il contenuto di un div con una specifica altezza risulta più alto. Lo standard CSS definisce che se non è impostato alcun comportamento nel caso di overflow, il contenuto del div traboccherà dallo stesso. In ogni caso, Internet Explorer non rispetta questa indicazione e va ad espandere il div oltre l'altezza impostata per poter riprendere il contenuto. Sotto un esempio che mostra la differenza:

+ +
<div style="height: 100px; border: 1px solid black;">
+  <div style="height: 150px; border: 1px solid red; margin: 10px;">
+    a
+  </div>
+</div>
+
+ +

Come si vede dalla Figura 4, Mozilla agisce secondo le specifiche dello standard W3C. Lo standard dice che, in questo caso, il div interno trabocca verso il basso poiché il suo contenuto ha una maggiore altezza relativa al suo contenitore. Se si preferisce il comportamento di Internet Explorer, semplicemente non va specificata alcuna altezza per l'elemento esterno.

+ +

Figura 4. overflow DIV

+ +

DIV Overflow

+ +

differenza di hover

+ +

Il comportamento non standard del selettore hover in Internet Exloprer si può riconoscere in diversi siti web. Usualmente si manifesta cambiando lo stile del testo se attraversato dal mouse con Mozilla, ma non con Internet Explorer. Questo perché il selettore a:hover in Internet Explorer considera <a href="">...</a> ma non <a name="">...</a>, che imposta una ancora in HTML. Il cambio di testo avviene perché gli autori incapsulano l'area con un marcatore di impostazione ancora:

+ +
CSS:
+  a:hover {color: green;}
+
+HTML:
+  <a href="foo.com">This text should turn green when you hover over it.</a>
+
+  <a name="anchor-name">
+    This text should change color when hovered over, but doesn't
+    in Internet Explorer.
+  </a>
+
+ +

Mozilla segue le specifiche CSS correttamente e cambia il colore in verde in questo esempio. SI possono usare due maniere per far agire Mozilla come Internet Explorer a non cambiare il colore del testo al passaggio del mouse:

+ + + +

Quirks vs. modo standard

+ +

Le versioni più antiquate di alcuni browser, come Internet Exlporer 4, impaginano insernedo artefatti in determinate condizioni. Mentre Mozilla tende ad essere un browser aderente agli standard, fornisce tre modi per sopportare pagine Web meno recenti realizzate con in mente questi comportamenti particolari. Recapito e contenuto della pagina determinano quale modo sarà utilizzato. Mozilla indicherà il modo di impaginazione in View -> Page Info (o premendo Ctrl+I); Firefox lo mostrerà in Tools -> Page Info.

+ +

The mode in which a page is located depends on its doctype.

+ +

Un Doctype (abbreviazione per document type declaration) è simile a questo:

+ +

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

+ +

La sezione in blu viene chiamata identificatore pubblico (public identifier), la parte vedere è l'identificatore di sistema (system identifier), nella forma di URI.

+ +

Modo standard

+ +

Il modo standard di impaginazione è qullo più restrittivo -- l'impaginazione avviene attenendosi alle specifiche HTML e CSS del W3C e non saranno supportati artefatti. Mozilla lo utilizza alle seguenti condizioni:

+ + + +

Modo quasi standard

+ +

Mozilla ha introdotto il modo quasi standard (almost standard mode) per una ragione: una sezione nella specifica CSS 2 rompe i design basati su un preciso schema fatto di piccole immagini in celle di tabelle. Invece di fornire una immagine intera all'utente, ogni piccola immagine finisce con un piccolo spazio a seguire. La vecchia homepage IBM mostrata in Figura 5 offre un esempio di questo comportamento.

+ +

Figura 5. Spazio tra immagini

+ +

Image Gap

+ +

Il modo quasi standard agisce quasi esattamente come il modo standard, fatta eccezione nel trattamento di immagini con un problema di spazio finale. Il problema occorre solitamente nelle pagine aderenti agli standard e causa la loro incorretta visualizzazione.

+ +

Mozilla usa il modo quasi standard alle seguenti condizioni:

+ + + +


+ Per altre informazioni, consultare l'articolo riguardante il problema di spazio tra immagini

+ +

Modo Quirks

+ +

Ad oggi, il Web è pieno di marcatori HTML invalidi, così come altri che funzionano solo a causa di bug di alcuni browser. I vecchi browser Netscape, nel periodo della loro leadership di mercato, contenevano bug. Quando fece il suo ingresso Internet Explorer, cercò di imitare gli stessi bug per poter funzionare con i contenuti dell'epoca. Con l'introduzione di nuovi browser nel mercato, molti di questi bug originali, solitamente chiamati quirks (artefatti), sono stati mantenuti per avere retrocompatibilità. Mozilla supporta molti di questi nel suo modo di impaginazione quirks. Si noti che a causa di questi artefatti, i documenti vengono impaginati più lentamente che se fossero stati aderenti agli standard. Molte pagine web sono trattate in questa maniera.

+ +

Mozilla usa il modo quirks alle seguenti condizioni:

+ + + +

Per approfondimenti, si vedano: Funzionamento del Quirks Mode di Mozilla e Sniffing DOCTYPE di Mozilla

+ +

Differenze nella gestione eventi

+ +

Mozilla e Internet Explorer sono completamente differenti nell'area degli eventi Il modello eventi di Mozilla segue i modelli W3C e Netscale. In Internet Explorer, se una funzione viene chiamata tramite evento, ha accesso all'oggetto event attraverso window.event Mozilla passa un oggetto event ai gestori di eventi, i quali devono specificatamente passare l'oggetto alla funzione chiamata tramite un argomento.

+ +

Ecco un esempio di gestione cross-browser (nota: implica l'impossibilità di definire una vasriabile globale chiamata event nel proprio codice):

+ +
<div onclick="handleEvent(event);">Click me!</div>
+
+<script>
+  function handleEvent(aEvent) {
+    var myEvent = window.event ? window.event : aEvent;
+  }
+</script>
+
+ +

Funzioni e proprietà esposte dell'oggetto event sono solitamente chiamate in maniera differente in Mozilla e Internet Explorer, come mostrato dalla Tabella 4.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 4. Differenze delle proprietà di event tra Mozilla e Internet Explorer
Nome Internet ExplorerNome MozillaDescrizione
altKeyaltKeyProprietà booleana ritornata in caso di pressione del tasto ALT durante l'evento.
cancelBubblestopPropagation()Usata per fermate la propagazione dell'evento verso la radice dell'alberoUsed to stop the event.
clientXclientXOrdinata dell'evento, in relazione al viewport dell'elemento.
clientYclientYAscissa dell'evento, in relazione al viewport dell'elemento.
ctrlKeyctrlKeyproprietà ritornata in caso di pressione del tasto CTRL durante l'evento.
fromElementrelatedTargetper eventi del mouse, l'elemento dal quale il mouse si è spostato.
keyCodekeyCodePer eventi da tastiera, il numero che rappresentante il tasto premuto. Per eventi del mouse è 0. Per eventi keypress (non keyup o keydown) riguardanti tasti che producono output, l'equivalente Mozilla è charCode, non keyCode.
returnValuepreventDefault()usato per prevenire l'esecuzione dell'azione di default dell'evento.
screenXscreenXOrdinata dell'evento, in relazione allo schermo.
screenYscreenYAscissa dell'evento, in relazione allo schermo.
shiftKeyshiftKeyProprietà booleana ritornata in caso di pressione del tasto SHIFT durante l'evento.
srcElementtargetElemento dal quale l'evento ha avuto origine.
toElementcurrentTargetPer eventi del mouse, l'elemento verso il quale il mouse si è mosso.
typetypeRitorna il nome dell'evento.
+ +

Aggiungere gestori di eventi

+ +

Mozilla supporta due modi per aggiungere eventi attraverso JavaScript. Il primo, supportato da tutti i browser, imposta le proprietà event direttamente sugli oggetti. Per impostare un gestore di evento click, un riferimento di funzione viene passato alla proprietà onclick dell'oggetto:

+ +
<div id="myDiv">Click me!</div>
+
+<script>
+  function handleEvent(aEvent) {
+    // if aEvent is null, means the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad(){
+    document.getElementById("myDiv").onclick = handleEvent;
+  }
+</script>
+
+ +

Mozilla supporta pienamente il metodo standard del W3C di aggiungere dei listener (letterarmente ascoltatori) ai nodi DOM. L'uso dei metodi addEventListener() e removeEventListener() ha il beneficio di permettere l'impostazione di molteplici listener per lo stesso tipo di evento. Entrambi i metodi richiedono tre paramentri: Il tipo di evento, una riferimento a funzione, ed un valore booleano che indica se il listener debba o meno catturare eventi nella sua fase di cattura. Se il valore del booleano è false, verranno catturati solo gli eventi propagati. Gli eventi W3C hanno tre fasi: cattura (capturing), obbiettivo (at target) e propagazione (bubbling). Ogni oggetto evet ha un attributo eventPhase che indica la fase numericamente (a partire da 0). Ogni qualvolta viene eseguito un evento, esso parte dall'elemento più esterno del DOM, quello alla radice dell'albero DOM. L'evento poi viaggia all'interno del DOM usando il percorso più diretto verso l'obbiettivo, realizzando la fase di capturing. Appena arriva, l'evento si trova nella fase obbiettivo. Dopo il suo arrivo, effettua un nuovo viaggio nell'albero verso il nodo più esterno: la fase di propagazione. Il modello eventi di Internet Explorer ha solo la fase di propagazione; questo significa che impostare il terzo parametro come false equivale ad imitare il comportamento di Internet Explorer:

+ +
<div id="myDiv">Click me!</div>
+
+<script>
+
+  function handleEvent(aEvent) {
+    // if aEvent is null, it is the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad() {
+    var element = document.getElementById("myDiv");
+    element.addEventListener("click", handleEvent, false);
+  }
+</script>
+
+ +

Un vantaggio di addEventListener() e removeEventListener() rispetto ad impostare proprietà è la possibilità di impostare molteplici listener per lo stesso evento, ognuno dei quali richiama una funzione. Per questo la rimozione di un listener richiede che i tre parametri siano gli stessi usati per la sua aggiunta.

+ +

Mozilla non supporta il metodo di Internet Explorer di conversione dei tag <script> in gestori di event, che estende <script> con gli attributi for e event (vedi Tabella 5). Inoltre non supporta i metodi attachEvent e detachEvent. Al loro posto si consiglia l'utilizzo dei metodi addEventListener e removeEventListener. Internet Explorer non supporta le specifiche degli eventi del W3C

+ + + + + + + + + + + + + + + + + + + + +
Tabella 5. Differenze dei metodi di eventi tra Mozilla e Internet Explorer
Metodo Internet ExplorerMetodo MozillaDescrizione
attachEvent(aEventType, aFunctionReference)addEventListener(aEventType, aFunctionReference, aUseCapture)Aggiunge un listener di evento ad un elemento DOM.
detachEvent(aEventType, aFunctionReference)removeEventListener(aEventType, aFunctionReference, aUseCapture)Rimuove un listener di evento da un elemento DOM.
+ +

Rich text editing

+ +

Mentre Mozilla si vanta di essere il milgior browser attinente agli standard W3C, supporta inoltre funzionalità standard, come innerHTML ed il rich text editing, nel momento in cui non esistenti equivalenti W3C.

+ +

Mozilla 1.3 ha introdotto una implementazione del designMode di Internet Explorer, che converte un documento HTML in un rich text editor. Una volta fatto questo, possono essere esguiti comandi attraverso il comando execCommand. Mozilla non supporta l'attributo contentEditable di Internet Explorer per rendere ogni widget modificabile. Si può usare un iframe per aggiungere un rich text editor.

+ +

Differenze nel Rich text

+ +

Mozilla supporta lo standard W3C per accedere all'oggetto document di un iframe attraverso IFrameElmRef.contentDocument, mentre Internet Explorer richiede l'accesso attraverso document.frames{{ mediawiki.external('\"IframeName\"') }} e poi l'accesso al document risultante.

+ +
<script>
+function getIFrameDocument(aID) {
+  var rv = null;
+
+  // if contentDocument exists, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    rv = document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    rv = document.frames[aID].document;
+  }
+  return rv;
+}
+</script>
+
+ +

Un'altra differenza tra Internet Explorer e Mozilla è nell'HTML creato dal rich text editor. Mozilla usa come modo predefinito i CSS per i marcatori generati. In ogni caso, Mozilla permette anche di scegliere tra i modi HTML e CSS usando il comando execCommand useCSS e scegliendo tra i valori true e false. Internet Explorer usa sempre il modo HTML.

+ +
Mozilla (CSS):
+  <span style="color: blue;">Big Blue</span>
+
+Mozilla (HTML):
+  <font color="blue">Big Blue</font>
+
+Internet Explorer:
+  <FONT color="blue">Big Blue</FONT>
+
+ +

Sotto una lista di comandi supportati in execCommand di Mozilla:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 6. Comandi rich text editing
Nome comandoDescrizioneArgomento
boldCambia l'attributo bold (grassetto) della selezione.---
createlinkgenera un link HTML dal testo selezionato.URL da usare per il link
deleteCancella la selezione.---
fontnameCambia il font usato nel testo selezionato.Nome del font da usare (ad esempio Arial)
fontsizeCambia la dimensione del font usato nel testo selezionato.Dimensione da usare
fontcolorCambia il colore del font usato nel testo selezionato.Colore da usare
indentIndenta il blocco su cui è posizionato il cursore.---
inserthorizontalruleInserisce un elemeto <hr> alla posizione del cursore.---
insertimageInserisce una immagine alla posizione del cursore.URL dell'immagine da usare
insertorderedlistInserisce un elemento di lista ordinata (<ol>) alla posizione del cursore.---
insertunorderedlistInserisce un elemento di lista non ordinata (<ul>) alla posizione del cursore.---
italicCambia l'attributo italic (corsivo) della selezione.---
justifycenterCentra il contenuto della linea corrente.---
justifyleftGiustifica il contenuto della linea corrente a sinistra.---
justifyrightGiustifica il contenuto della linea corrente a destra.---
outdentIndenta all'indietro il blocco su cui è posizionato il cursore.---
redoRiesegue un comando precedentemente annullato---
removeformatRimuove la formattazione del testo selezionato---
selectallSeleziona tutto all'interno del rich text editor.---
strikethroughCambia l'attributo strikethrough (segnato) della selezione.---
subscriptConverte la selezione corrente in pedice.---
superscriptConverte la selezione corrente in apice.---
underlineCambia l'attributo underline (sottolineato) della selezione.---
undoAnnulla l'ultimo comando eseguito---
unlinkRimuove le informazioni di link del testo selezionato.---
useCSSCambia l'uso dei CSS nel marcatore generatoValore booleano
+ +

Per altre informazioni, consultare Rich-Text Editing in Mozilla.

+ +

Differenze in XML

+ +

Mozilla ha un robusto supporto per XML e tecnologie ad esso correlato, come XSLT e Web service. Supporta inoltrer alcune estensioni non standard di Internet Explorer, come XMLHttpRequest.

+ +

Come gestire XML

+ +

Come con lo standard HTML, Mozilla supporta le specifiche W3C XML DOM, che permettono di manipolare quasi ogni aspetto di un documento XML. Differenze tra il DOM XML in Internet Explorer e Mozilla sono solitamente causate da comportamenti non standard di Internet Explorer. Probabilmente la più comune è la gestione nodi di spazi bianchi. Solitamente un documento generato in XML contiene spazi tra i nodi XML. Internet Explorer, nell'uso di Node.childNodes, non contiene tali nodi di spazio. In Mozilla, questi nodi saranno contenuti nell'array.

+ +
XML:
+  <?xml version="1.0"?>
+  <myXMLdoc xmlns:myns="http://myfoo.com">
+    <myns:foo>bar</myns:foo>
+  </myXMLdoc>
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  alert(myXMLDoc.childNodes.length);
+
+ +

La prima linea di javaScript carica il documento XML ed accede all'elemento radice (myXMLDoc) usando documentElement. La seconda linea semplicemente annuncia il numero di nodi figli. Secondo le specifiche W3C, gli spazi bianchi ed i ritorno a capo si fondono in un solo nodo di testo, se essi si susseguono. Per Mozilla, il nodo myXMLdoc ha tre figli: un nodo testo contenente un ritorno a capo e due spazi; il nodo the myns:foo: ed un altro nodo di testo con un ritorno a capo. Internet Explorer, comunque, Internet Explorer non tollera questo e ritorna "1" per il codice soprastante, indicando solo il nodo myns:foo. Per questo, per scorrere gli elementi figli evitando i nodi testo, questi vanno identificati.

+ +

Come detto prima, ogni nodo ha una proprietà nodeType rappresentante il tipo di nodo. Ad esempio, un nodo element ha tipo1, mentre un nodo document ha tipo 9. Per evitare i nodi di testo, è sufficiente controllare i tipi 3 (nodo testo) e 8 (nodo commento).

+ +
XML:
+  <?xml version="1.0"?>
+  <myXMLdoc xmlns:myns="http://myfoo.com">
+    <myns:foo>bar</myns:foo>
+  </myXMLdoc>
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  var myChildren = myXMLDoc.childNodes;
+
+  for (var run = 0; run < myChildren.length; run++){
+    if ( (myChildren[run].nodeType != 3) &&
+          myChildren[run].nodeType != 8) ){
+      // not a text or comment node
+    };
+  };
+
+ +

Vedere Spazi nel DOM per una discussione dettagliata e possibili soluzioni.

+ +

Isole dati XML

+ +

Internet Explorer ha una caratteristica non standard chiamata Isole dati XML (XML data islands), che permette di integrare XML all'interno di tag di un documento HTML. La stessa funzionalità è raggiungibile tramite l'uso di XHTML: comunque, poiché il supporto ad XHTML di Internet Explorer è debole, questa non si rivela una opzione usuale.

+ +

IE XML data island:

+ +
<xml id="xmldataisland">
+  <foo>bar</foo>
+</xml>
+
+ +


+ Una soluzione cross-browser consiste nell'usare i parser DOM, che effettuano i parsing di una stringa che contiene un documento XML serializzato e generano il documento per l'XML sottoposto al parsing. Mozilla usa l'oggetto DOMParser, che prende una stringa serializzata e genera un documento da essa. Il codice seguente mostra come:

+ +
var xmlString = "<xml id=\"xmldataisland\"><foo>bar</foo></xml>";
+var myDocument;
+
+if (window.DOMParser) {
+  // This browser appears to support DOMParser
+  var parser = new DOMParser();
+  myDocument = parser.parseFromString(xmlString, "text/xml");
+} else if (window.ActiveXObject){
+  // Internet Explorer, create a new XML document using ActiveX
+  // and use loadXML as a DOM parser.
+  myDocument = new ActiveXObject("Microsoft.XMLDOM");
+  myDocument.async = false;
+
+  myDocument.loadXML(xmlString);
+} else {
+  // Not supported.
+}
+
+ +

vedere Uso di Isole dati XML in Mozilla per un approccio alternativo.

+ +

XMLHttpRequest

+ +

Internet Explorer permette di inviare e ricevere file XML usando la classe MSXML XMLHTTP. Istanzata attraverso ActiveX usando new ActiveXObject("Msxml2.XMLHTTP") o new ActiveXObject("Microsoft.XMLHTTP"). Poiché non esiste metodo standard per fare questo, Mozilla fornisce la stessa funzionalità nell'oggetto globale XMLHttpRequest. Dalla versione 7 IE stesso supporta un oggetto XMLHttpRequest "nativo".

+ +

Dopo aver instanziato l'oggetto usando new XMLHttpRequest(), si può usare il metodo open per specificare il tipo di richiesta (GET o POST) da usare, quale file caricare, e l'asincronicità o meno della chiamata. Se la chiamata è asincrona, va dato un riferimento a funzione al membro onload, chiamato una volta completata la richiesta.

+ +

Synchronous request:

+ +
var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "data.xml", false);
+
+myXMLHTTPRequest.send(null);
+
+var myXMLDocument = myXMLHTTPRequest.responseXML;
+
+ +

Asynchronous request:

+ +
var myXMLHTTPRequest;
+
+function xmlLoaded() {
+  var myXMLDocument = myXMLHTTPRequest.responseXML;
+}
+
+function loadXML(){
+  myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "data.xml", true);
+  myXMLHTTPRequest.onload = xmlLoaded;
+  myXMLHTTPRequest.send(null);
+}
+
+ +

La Tabella 7 mostra a lista di metodi e proprietà disponibili per XMLHttpRequest di Mozilla.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 7. Proprietà e metodi XMLHttpRequest
NomeDescrizione
void abort()Ferma la richiesta se ancora in esecuzione.
string getAllResponseHeaders()Ritorna tutte le intestazioni di risposta in un'unica stringa.
string getResponseHeader(string headerName)Ritorna il valore dell'intestazione specificata.
functionRef onerrorSe impostata, la funzione riferita viene chiamata ogni qualvolta si presenta un errore durante la richiesta.
functionRef onloadSe impostata, la funzione riferita viene chiamata quando la richiesta termina con successo e viene ricevuta la risposta. Metodo usato per richieste asincrone.
void open (string HTTP_Method, string URL)
+
+ void open (string HTTP_Method, string URL, boolean async, string userName, string password)		Inizializza la richiesta per lo URL dato, usando uno dei metodi HTTP GET o POST. Per inviare la richiesta, viene chiamato il metodo send() dopo l'inizializzazione. Se async è false, la richiesta è sincrona, altrimento automaticamente asincrona. Opzionalmente, possono essere specificati username e password per lo URL se necessario.
int readyStateStato della richiesta. valori possibili: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValoreDescrizione
0UNINITIALIZED - open() non è ancora stato chiamato.
1LOADING - send() non è ancora stato chiamato.
2LOADED - send() è stato chiamato, sono disponibili stato e intestazioni.
3INTERACTIVE - In fase di download, responseText mantiene i dati parziali.
4COMPLETED - Tutte le operazioni terminate.
+
string responseTextStringa contenente la risposta.
DOMDocument responseXMLDOM Document contenente la risposta.
void send(variant body)Inizia la richiesa. Se body è definito, viene inviato come corpo della richiesta POST. body puo essere un XML document o un XML document serializzato come stringa.
void setRequestHeader (string headerName, string headerValue)Imposta una intestazione HTTP da usare per la richista. Deve essere invocato dopo la chiamata di open().
string statusCodice di stato della risposta HTTP.
+ +

Differenze in XSLT

+ +

Mozilla supporta XSL Transformations (XSLT) 1.0. Permette inoltre a JavaScript di eseguire trasformazioni XSLT e di eseguire XPath su un documento.

+ +

Mozilla richiede di inviare i file XML ed XSLT con un mimetype XML (text/xml or application/xml). Questa è la ragione più comune per cui XSLT solitamente non funziona con Mozilla ma funziona con Internet Explorer. Mozilla è molto esigente per questo.

+ +

Internet Explorer 5.0 e 5.5 supportano il working draft di XSLT, il quale è sostanzialmente differente dalla raccomandazione finale 1.0. Un semplice modo per distinguere quale versione viene utilizzata per scrivere un file XSLT è dato dal controllo del namespace. Il namespace per la raccomandazione 1.0 è http://www.w3.org/1999/XSL/Transform, mentre il namespace del draft è http://www.w3.org/TR/WD-xsl. Internet Explorer 6 supporta il draft per retrocompatibilità ma Mozilla non supporta il draft, ma solo la raccomandazione finale.

+ +

Se XSLT richiede l'identificazione del browser, è possibile interrogare la proprietà di sistema "xsl:vendor". Il motore XSLT di Mozilla dà come risposta "Transformiix", e Internet Explorer risponde "Microsoft".

+ +
<xsl:if test="system-property('xsl:vendor') = 'Transformiix'">
+  <!-- Mozilla specific markup -->
+</xsl:if>
+<xsl:if test="system-property('xsl:vendor') = 'Microsoft'">
+  <!-- Internet Explorer specific markup -->
+</xsl:if>
+
+ +

Mozilla fornisce inoltre interfacce JavaScript per XSLT, permettendo ad un sito Web di completare trasformazioni XSLT in memoria, attraverso l'oggetto globale XSLTProcessor. XSLTProcessor richiede di caricare i file XML ed XSLT, in quanto necessita i loro DOM document. Il document XSLT, importato attraverso XSLTProcessor, permette di manipolare parametri XSLT.

+ +

XSLTProcessor può generare un documento a sé usando transformToDocument(), o creare un frammento di documento tramite transformToFragment(), che può essere facilmente aggiunto ad un altro document DOM. Un esempio sotto:

+ +
var xslStylesheet;
+var xsltProcessor = new XSLTProcessor();
+
+// load the xslt file, example1.xsl
+var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xsl", false);
+myXMLHTTPRequest.send(null);
+
+// get the XML document and import it
+xslStylesheet = myXMLHTTPRequest.responseXML;
+
+xsltProcessor.importStylesheet(xslStylesheet);
+
+// load the xml file, example1.xml
+myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xml", false);
+myXMLHTTPRequest.send(null);
+
+var xmlSource = myXMLHTTPRequest.responseXML;
+
+var resultDocument = xsltProcessor.transformToDocument(xmlSource);
+
+ +

Dopo la creazione di un XSLTProcessor, è possibile caricare un file XSLT usando XMLHttpRequest. Il membro responseXML di XMLHttpRequest contiene il documento XML per il file XSLT, il quale viene passato importStylesheet. Si può ancora usare XMLHttpRequest per caricare il documento sorgente XML da trasformare; tale documento viene passato al metodo transformToDocument metodo di XSLTProcessor. La Tabella 8 mostra una lista di metodi XSLTProcessor.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabella 8. Metodi XSLTProcessor
MethodDescrizione
void importStylesheet(Node styleSheet)Importa il foglio di stile XSLT. L'argomento styleSheet è il nodo radice del documento DOM del foglio si stile XSLT.
DocumentFragment transformToFragment(Node source, Document owner)Trasforma il nodo source applicando il foglio di stile importato tramite il metodo importStylesheet e genera un DocumentFragment. owner il documento DOM a cui DocumentFragment deve appartenere, permettendone l'aggiunta.
Document transformToDocument(Node source)Trasforma il nodo source applicando il foglio di stile importato usando importStylesheet e ritorna un documento DOM a sé.
void setParameter(String namespaceURI, String localName, Variant value)Imposta un parametro nel foglio di stile XSLT importato.
Variant getParameter(String namespaceURI, String localName)Ritorna il valore di un parametro nel foglio di stile XSLT importato.
void removeParameter(String namespaceURI, String localName)Rimuove tutti i valori impostati nel foglio di stile XSLT e riporta i parametri ai valori predefiniti
void clearParameters()Removes all set parameters and sets them to defaults specified in the XSLT stylesheet.
void reset()Rimuove tutti i parametri e fogli di stile.
+ +
+

Original Document Information

+ + +
+ +

 

diff --git a/files/it/mozilla/add-ons/index.html b/files/it/mozilla/add-ons/index.html new file mode 100644 index 0000000000..a9545252da --- /dev/null +++ b/files/it/mozilla/add-ons/index.html @@ -0,0 +1,93 @@ +--- +title: Componenti aggiuntivi +slug: Mozilla/Add-ons +tags: + - Add-ons + - TopicStub +translation_of: Mozilla/Add-ons +--- +
{{AddonSidebar}}
+ +
Modifica ed espandi le applicazioni Mozilla
+ +

I componenti aggiuntivi arricchiscono di nuove funzionalità le applicazioni basate su Gecko come Firefox, SeaMonkey e Thunderbird. Esistono due diversi tipi di componenti aggiuntivi: le estensioni che aggiungono nuove funzionalità all'applicazione, mentre i temi modificano l'interfaccia utente.

+ +

Sia le estensioni che i temi vengono raccolti in un repository gestito da Mozilla su addons.mozilla.org, noto anche come AMO. Quando uno sviluppatore sceglie di caricare un componente aggiuntivo su AMO, esso viene sottoposto a una revisione e, se la supera, pubblicato sul sito per essere scaricato dagli utenti. Sottoporre i propri componenti aggiuntivi ad AMO non è obbligatorio, tuttavia costituisce la garanzia per gli utenti che il componente sia stato revisionato e offre agli sviluppatori visibilità su una piattaforma riconosciuta come fonte di applicazioni utili.

+ +

I componenti aggiuntivi possono alterare in maniera significativa il funzionamento dell'applicazione che li ospita. Mozilla ha quindi sviluppato una serie di linee guida per assicurare che ogni componente offra all'utente un'esperienza ottimale. Queste linee guida sono valide per tutti i tipi di componente aggiuntivo, che siano ospitati sul server di addons.mozilla.org o meno.

+ +
+

Estensioni

+ +

Le estensioni aggiungono nuove funzionalità alle applicazioni sviluppate da Mozilla come Firefox o Thunderbird. Possono integrare il browser con funzioni particolari, come per esempio un sistema alternativo per gestire le schede, e modificare i contenuti web per migliorare l'accessibilità o la sicurezza di un sito particolare.

+ +

Le estensioni possono essere sviluppate con tre tecniche diverse: estensioni basate su Add-on SDK, estensioni che si avviano manualmente senza richiedere il riavvio del browser ed estensioni overlay.

+ + + +

Quando possibile, è consigliabile utilizzare Add-on SDK, che sfrutta lo stesso meccanismo delle estensioni con riavvio non richiesto ma semplificando alcune operazioni ed eliminando automaticamente il codice superfluo. In caso Add-on SDK non soddisfi le proprie esigenze, l'alternativa è implementare manualmente un'estensione con riavvio non richiesto. Le estensioni overlay sono attualmente obsolete, anche se ne rimane in circolazione un numero elevato.

+ +

Per un approfondimento su quale tecnica sia più opportuno scegliere, ecco un articolo comparativo.

+ +
+
+

Pratiche consigliate

+ +

Indipendentemente dalle modalità con cui si sceglie di sviluppare un'estensione, esistono linee guida comuni da rispettare per garantire che il proprio componente offra la migliore esperienza utente possibile.

+ +
+
Prestazioni
+
Come rendere un'estensione veloce, reattiva e ottimizzata nel consumo della memoria.
+
Sicurezza
+
Come evitare di esporre l'utente a siti dannosi.
+
Etichetta
+
Come gestire l'interazione con altre estensioni correttamente.
+
+
+ +
+

Nozioni specifiche per applicazione

+ +

La maggior parte della documentazione è scritta pensando a chi sviluppa per Firefox Desktop. Gli sviluppatori che intendono progettare per altre applicazioni basate su Gecko devono prendere atto di alcune differenze fondamentali.

+ +
+
Thunderbird
+
Sviluppare estensioni per il client di posta elettronica Thunderbird.
+
Firefox per Android
+
Sviluppare estensioni per la versione di Firefox per il sistema operativo Android.
+
SeaMonkey
+
Sviluppare estensioni per la suite di applicazioni SeaMonkey.
+
+
+
+ +
+

Temi

+ +

I Temi sono componenti aggiuntivi in grado di personalizzare l'interfaccia utente dell'applicazione. Esistono due tipi di tema: temi di sfondo (o semplicemente "temi") e temi completi.

+ +
+
+

I temi di sfondo sono significativamente più semplici da implementare rispetto ai temi completi, ma offrono un livello di personalizzazione più limitato.

+
+ +
+

I temi completi consentono modifiche più radicali all'interfaccia utente dell'applicazione. La documentazione sui temi completi è attualmente incompleta, ma viene qui citata in previsione di futuri aggiornamenti.

+
+
+ +
+

Altri tipi di componente aggiuntivo

+ +

I plugin dei motori di ricerca sono un tipo di componente aggiuntivo semplice e specifico: aggiungono nuovi motori alla barra di ricerca del browser.

+ +

I plugin consentono all'applicazione di elaborare contenuti non supportati nativamente. Mozilla sta tentando di scoraggiare l'implementazione dei plugin, che hanno in passato causato problemi di stabilità, prestazioni e sicurezza.

+ +
diff --git a/files/it/mozilla/add-ons/kaspersky/index.html b/files/it/mozilla/add-ons/kaspersky/index.html new file mode 100644 index 0000000000..dd6dcd576c --- /dev/null +++ b/files/it/mozilla/add-ons/kaspersky/index.html @@ -0,0 +1,82 @@ +--- +title: Firma e distribuzione del vostro componente aggiuntivo +slug: Mozilla/Add-ons/kaspersky +translation_of: Mozilla/Add-ons/Distribution +--- +

Dopo che avete compilato il vostro add-on, voi vorrete distribuirlo di modo che gli altri possano provarlo. Sia che vogliate distribuirlo pubblicamente o privatamente, attraverso addons.mozilla.org (AMO) o altrove, voi vorrete avere il vostro pacchetto add-on firmato.

+ +

Firmare il vostro add-on

+ +

Ad iniziare dalla versione n. 43 di Firefox, esistono delle restrizioni per distribuire un componente aggiuntivo. Le estensioni e i programmi di installazione multipackage che supportano Firefox devono essere firmati da Mozilla affinché possano essere installati nelle versioni beta e di rilascio di Firefox. Si noti che questo si applica solo ai componenti aggiuntivi di tipo 2 e 32; altri tipi di componenti aggiuntivi come temi e language pack non richiedono la firma. Sono esclusi anche i componenti aggiuntivi che supportano solo altre applicazioni come Thunderbird e SeaMonkey. I componenti aggiuntivi non firmati possono ancora essere installati nelle versioni Developer Edition, Nightly e versioni ESR di Firefox, dopo aver attivato la preferenza xpinstall.signatures.required in about: config.

+ +

Solo Mozilla può firmare il componente aggiuntivo in modo che Firefox lo installi per impostazione predefinita.I componenti aggiuntivi vengono firmatisubmitting them to AMO o utilizzando l'API e passando una revisione automatica o manuale del codice. Si noti che non è necessario elencare o distribuire il componente aggiuntivo tramite AMO. Se stai distribuendo il componente aggiuntivo da soli, di può scegliere l'opzione Unlisted e AMO servirà solo per firmare il pacchetto contenente il componente aggiuntivo.

+ +

API per la firma

+ +

Voi potete firmare il vostro file XPI usando le addons.mozilla.org signing API. Se usate il tool jpm, il comando jpm sign utilizza le API per firmare il vostro componente aggiuntivo.

+ +

Inviare ad AMO

+ +

Il nuovo componente aggiuntivo è inviato ad AMO tramite questa form di invio. Il primo passo è leggere e poi accettare Developer Agreement.

+ +

Successivamente, dovrete decidere se vorrete distribuire e pubblicizzare il vostro componente aggiuntivo tramite AMO oppure no. Ecco alcune cose da prendere in considerazione per prendere questa decisione:

+ + + +

You should make this decision carefully, as it isn't easy to switch between Listed and Unlisted at present. Due to some platform limitations, in order to make the switch you'll need to delete your add-on entry and then contact the AMO Admins list in order to enable your add-on ID so you can submit it again. You should also know that if you switch from Listed to Unlisted, your current users won't be automatically migrated to the unlisted versions of your add-on. Switching from Unlisted to Listed is easier because Firefox will check for updates on AMO if an add-on doesn't have an updateURL in its install manifest.

+ +

Unlisted add-ons

+ +

After accepting the Developer Agreement, you'll be asked if you want to list your add-on on AMO. Make sure you choose not to list it.

+ +

You'll then be asked if you want your add-on to be side-loaded or not. Side-loading is when your add-on XPI isn't installed directly by users but instead it is bundled in an application installer. An example of this would be an antivirus software package that includes a companion security extension. If your add-on XPI will be installed directly from the web or downloaded and installed manually by your users, then you don't need this option.

+ +
+

Internally, AMO labels unlisted add-on submissions that require side-loading as Full Review submissions, and all the rest as Preliminary Review submissions. You may find these labels when looking at your add-on review status. Note that there's no difference between full and preliminary review for unlisted add-ons, other than the ability to side-load the add-on.

+
+ +

Choose the platforms your add-on supports and upload your XPI. The file will be scanned by an automatic code validator which will show a number or warnings or errors depending on what it detects. If no errors are found in your package, your add-on management page will be created and your file will be immediately signed. You'll receive an email with instructions on how to download the signed file.

+ +

All new versions of your add-ons will also need to signed. Once your first version has been submitted, you can upload new versions in the developer page for your add-on.  The signing process is the same as with new add-ons.

+ +

Listed add-ons

+ +

After accepting the Developer Agreement, you'll be asked if you want to list your add-on on AMO. Listing it should be the default option.

+ +

Choose the platforms your add-on supports and upload your XPI. The file will be scanned by an automatic code validator which will show a number of warnings or errors depending on what it detects. Errors only show up for listed add-ons if there's something wrong in the package that needs to be fixed before it can be accepted. Warnings can vary in importance and severity; you should read through all of them carefully and see if there's anything you can fix in your add-on in order to avoid them showing up. This doesn't mean that you should obfuscate your code to bypass validation warnings. That practice can lead to your add-on being rejected and potentially blocklisted.

+ +

Once you finish your listed add-on submission, it will be placed in a review queue, where one member of our review team will eventually give it a look. This can take between a couple of hours to a number of weeks, depending on add-on complexity and other factors. It also takes longer for the first submission, since all of the code needs to be reviewed. Updates are reviewed based on a diff, so they are quicker. Once your add-on passes review, the file is signed and published on AMO.

+ +

Listed add-ons can be submitted for Preliminary Review or Full Review.  Preliminary Review consists of security and content checks, focused on the add-on's code. Full Review is a higher standard, and reviews include feature testing and performance checks. Add-ons with Full Review have more prominence on the site and can be nominated to be featured. Add-ons that are nominated for Full Review and don't meet that standard may receive Preliminary Review approval instead.

+ +

Beta versions

+ +

Beta channels are only available to fully-reviewed add-ons.

+ +

To create a beta channel, upload a file with a unique version string that contains any of the following strings: a,b,alpha,beta,pre,rc, with an optional number at the end. This text must come at the end of the version string. If you understand regex format, here's what we look for in the version number: "(a|alpha|b|beta|pre|rc)\d*$".

+ +

Once a file meeting this criteria is uploaded to AMO, it will automatically be detected as a beta version. Users of add-ons with these unique version numbers will automatically be served the newest beta updates. Beta versions are treated like unlisted add-on versions, in that they will be accepted and signed immediately if they pass automatic validation.

+ +

While we call these "Beta versions", you can use this channel for nightlies, or alphas, or prerelease versions as you wish. Please note that there is only one channel for this purpose and all of your users on this channel will receive the latest add-ons submitted. For instance, if you upload 1.0beta1 to the release channel and then upload 1.1alpha1, all users of 1.0beta1 will be offered an upgrade to 1.1alpha1. Updates are pushed by submission date and not version number, so users will always get the most recent channel update regardless of any kind of alphabetical sorting.

+ +

Ownership

+ +

Add-ons can have multiple users with permission to update and manage the listing. Existing authors of an add-on can transfer ownership and add additional developers to an add-on's listing through the Developer Tools provided. No interaction with Mozilla representatives is necessary for a transfer of ownership.

+ +

Code disputes

+ +

Many add-ons allow their source code to be openly viewed. This does not mean that the source code is open source or available for use in another add-on. The original author of an add-on retains copyright of their work unless otherwise noted in the add-on's license.

+ +

In the event that we're notified of a copyright or license infringement, we will take steps to address the situation per the DMCA, which may include taking down the add-on listing. Details about this process and how to report trademark or licensing issues can be found here.

+ +

If you are unsure of the current copyright status of an add-on's source code, you must contact the original author and receive explicit permission before using the source code.

diff --git a/files/it/mozilla/add-ons/overlay_extensions/firefox_addons_developer_guide/index.html b/files/it/mozilla/add-ons/overlay_extensions/firefox_addons_developer_guide/index.html new file mode 100644 index 0000000000..eef336d088 --- /dev/null +++ b/files/it/mozilla/add-ons/overlay_extensions/firefox_addons_developer_guide/index.html @@ -0,0 +1,29 @@ +--- +title: Firefox addons developer guide +slug: Mozilla/Add-ons/Overlay_Extensions/Firefox_addons_developer_guide +translation_of: Archive/Add-ons/Overlay_Extensions/Firefox_addons_developer_guide +--- +
+
+ La guida per sviluppatori Firefox Add-ons è stata inviata da nostra comunità del Giappone; Esso copre come andare sulla creazione di estensioni per Firefox utilizzando XPCOM e XUL. In questi giorni, si consiglia di utilizzare invece il SDK del componente aggiuntivo, ma ci sono momenti quando è necessario il controllo aggiuntivo offerto da un approccio più diretto.
+
+
+ {{Next ("Firefox addons sviluppatore guida/introduzione alle estensioni")}}
+
+
    +
  1. Introduzione alle estensioni
    2. +
  2. Tecnologie utilizzate nello sviluppo di estensioni
    3. +
  3. Introduzione a XUL — come costruire un'interfaccia utente più intuitiva
    4. +
  4. Utilizzando XPCOM — implementazione avanzata di processi
    5. +
  5. Costruiamo un'estensione per Firefox
    6. +
  6. Applicazioni XUL e estensioni di Firefox
    7. +
+
+
    +
  • Licenza e autori
    • +
+
+
+ {{Next ("Firefox addons sviluppatore guida/introduzione alle estensioni")}}
+
+

 

diff --git a/files/it/mozilla/add-ons/overlay_extensions/index.html b/files/it/mozilla/add-ons/overlay_extensions/index.html new file mode 100644 index 0000000000..6b6ac40112 --- /dev/null +++ b/files/it/mozilla/add-ons/overlay_extensions/index.html @@ -0,0 +1,71 @@ +--- +title: Overlay extensions +slug: Mozilla/Add-ons/Overlay_Extensions +tags: + - Add-ons + - Extensions + - Landing + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Overlay_Extensions +--- +

This page contains links to documentation for the approach to developing extensions for Gecko-based applications which uses:

+ +

Before Gecko 2.0 was released this was the only way to develop extensions. Now there are two alternative techniques: restartless extensions and Add-on SDK-based extensions. The privileged JavaScript APIs described here can still be used by the newer techniques.

+

XUL School

+

XUL School is a comprehensive add-on development tutorial, focusing on Firefox extension development but mostly applicable to other Gecko-based applications.

+

More resources

+
+
+
+
+ Setting up your environment
+
+ Setting up the application for extension development.
+
+ XUL
+
+ Tutorials and reference for the user interface language used by XUL extensions.
+
+ Code snippets
+
+ Sample code for many of the things you'll want to do.
+
+ Installing extensions
+
+ How to install an extension by copying the extension files into the application's install directory.
+
+ Firefox add-ons developer guide
+
+ A guide to developing overlay extensions.
+
+
+
+
+
+ JavaScript code modules
+
+ JavaScript modules available to extension developers.
+
+ Extension preferences
+
+ How to specify the preferences for your extension that will appear in the Add-ons Manager.
+
+ Frequently Asked Questions
+
+ Common issues with extension development.
+
+ Extension packaging
+
+ How extensions are packaged and installed.
+
+ Binary Firefox extensions
+
+ Creating binary extensions for Firefox.
+
+
+
+

 

diff --git a/files/it/mozilla/add-ons/overlay_extensions/xul_school/getting_started_with_firefox_extensions/index.html b/files/it/mozilla/add-ons/overlay_extensions/xul_school/getting_started_with_firefox_extensions/index.html new file mode 100644 index 0000000000..3857bb6773 --- /dev/null +++ b/files/it/mozilla/add-ons/overlay_extensions/xul_school/getting_started_with_firefox_extensions/index.html @@ -0,0 +1,71 @@ +--- +title: Getting Started with Firefox Extensions +slug: >- + Mozilla/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions +--- +

{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}

+

Che cos'è un'estensione di Firefox?

+
+

Le estensioni aggiungono funzionalità alle applicazioni di Mozilla come Firefox e Thunderbird. Possono aggiungere qualsiasi cosa da un pulsante sulla barra degli strumenti a funzionalità completamente nuove. Permettono di personalizzare l'applicazione per soddisfare le necessità personali di qualsiasi utente che le necessiti, permettendo comunque di mantenere dimensioni ridotte.

+
+

Tratto dalla Pagina della estensioni.

+

Come descritto nel testo virgolettato, un'estensione è una piccola applicazione che aggiunge qualcosa di nuovo a una o più applicazioni Mozilla. Questo corso si focalizza sulle estensioni per Firefox, ma gli stessi principi sono validi (quasi identicamente) per qualsiasi altra applicazione come per esempio,Thunderbird, Seamonkey e Flock.

+

Vale la pena notare che ci sono delle differenze nelle definizioni di estensione e add-on. Tutte le estensioni sono degli add-ons, ma gli add-ons possono anche essere temi, plugin o traduzioni (language packs). Questo corso riguarda lo sviluppo delle applicazioni, ma anche i temi e i language pack si sviluppano in modo molto simile. I plugin sono tutt'altra cosa e non saranno spiegati in questo corso. Puoi trovare più informazioni sui plugin e il loro sviluppo nella pagina dei plugins.

+

Firefox provides a very rich and flexible architecture that allows extension developers to add advanced features, customize the user's experience, and completely replace and remove parts of the browser. The Mozilla Add-ons repository (AMO) holds an extensive number of extensions with a wide variety of functions: content filtering (AdBlock Plus, NoScript), web application interaction (Delicious Bookmarks, eBay Companion) and web development (DOM Inspector, Firebug). These are very advanced and complex extensions, and you'll learn most of what it takes to create extensions like these (Glaxstar actually worked on 3 of those listed).

+

Extensions now exist in 3 different forms: Add-ons SDK extensions (also known as Jetpacks), bootstrapped extensions and traditional extensions. If you're only getting started developing add-ons, the Add-ons SDK provides a great way to quickly create simple ones and build on them. This tutorial focuses on traditional extensions, which are created differently. Bootstrapped extensions are a step above traditional ones in complexity, so you should go through this tutorial before giving them a try.

+

We'll begin the tutorial by analyzing a very simple extension.

+

The Hello World Extension

+

Our sample extensions and this tutorial in general are meant for modern versions of Firefox, but most of it works on older versions too.

+

We'll now begin with a basic "Hello World" extension. Let's start by installing it. Click on the link below.

+

Install Hello World

+

This will either trigger an install or a file download, depending on the content type the web server is using for the file. The appropriate content type to trigger an install is application/x-xpinstall. In the case of this wiki, the content type is properly set and a install window should appear.

+

If the content type is set correctly, you will probably get notified that the site is not allowed to install add-ons on Firefox. This is a security barrier that prevents sites from installing extensions without user consent. It is necessary because malicious extensions can do the same level of harm as any malicious program: stealing data, erasing or replacing files, and causing unwanted behavior in general. AMO is the only pre-allowed site because all published add-ons on AMO have gone through a review process that includes security checks.

+

After downloading the file, you can drag and drop it into the Firefox content area, and installation should begin.

+

You'll see a window telling you that you're about to install an extension, with some additional information such as the name of the author. You'll see a message saying that the author cannot be verified. Only extensions signed with a digital certificate can verify authorship. Signed extensions are rare, but we'll cover how to sign them later on.

+

Click on the Install Now button. After the extension is installed, you'll be asked to restart Firefox. Installing, uninstalling, enabling and disabling add-ons require a restart to complete, with the exception of NPAPI plugins, Add-ons SDK extensions and bootstrapped extensions. This is an important point to keep in mind if you're building an extension that manipulates other extensions or themes.

+

After installing, look at the main Firefox window and see if you notice anything different.

+

Did you see it? There's a new menu on the main menu, labeled "Hello World!". If you open the menu and then the menu item below, you'll see a nice alert message (for some definitions of 'nice'). Click on the OK button to close it.

+

+

That's all the extension does. Now let's take a closer look at it.

+

Extension Contents

+

You may have noticed that the extension file you installed is named xulschoolhello1.xpi. XPI (pronounced "zippy") stands for Cross-Platform Installer, because the same installer file can work on all platforms Firefox supports. XPIs are simply ZIP files, but Firefox recognizes the XPI extension and triggers the installation process when an XPI file is loaded.

+

To look into the XPI file you need to download it first, not install it. If the server triggers an install when clicking on a link or button, what you need to do is right click on the install link, and choose the Save Link As... option.

+

Decompress the XPI file in a convenient location. Issue the following command to unzip the file on Linux or Mac OS X:

+
unzip xulschoolhello1.xpi -d xulschoolhello1
+
+

On Windows, you can change the file extension from xpi to zip, or open the file directly, then unzip it, using a ZIP tool.

+

You should see the following directory structure:

+ +

That's lots of files for something so simple! In the next section, we'll inspect these files and see what they do.

+

{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}

+

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/it/mozilla/add-ons/overlay_extensions/xul_school/index.html b/files/it/mozilla/add-ons/overlay_extensions/xul_school/index.html new file mode 100644 index 0000000000..085c07b26f --- /dev/null +++ b/files/it/mozilla/add-ons/overlay_extensions/xul_school/index.html @@ -0,0 +1,71 @@ +--- +title: XUL School Tutorial +slug: Mozilla/Add-ons/Overlay_Extensions/XUL_School +tags: + - Add-ons + - Extensions + - NeedsTranslation + - References + - TopicStub + - Tutorials + - XUL +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School +--- +

XUL School è una guida per lo sviluppo di estensioni, che si focalizza sulla creazione di estensioni per Firefox. Si raccomanda di leggere almeno una volta tutto il contenuto. Il contenuto di questa guida sarà aggiornato e valido, anche mentre Firefox cambia rapidamente.

+ +
+
Introduzione
+
+ +
+
Basic functionality
+
+ +
+
Intermediate functionality
+
+ +
+
Advanced topics
+
+ +
+
Appendices
+
+ +
+
+ +

The XUL School project was developed by Appcoast (formerly Glaxstar). The project is now published here following its sharing licenses. Its contents have been modified from the original source as necessary.

diff --git a/files/it/mozilla/add-ons/performance_best_practices_in_extensions/index.html b/files/it/mozilla/add-ons/performance_best_practices_in_extensions/index.html new file mode 100644 index 0000000000..6908930ec7 --- /dev/null +++ b/files/it/mozilla/add-ons/performance_best_practices_in_extensions/index.html @@ -0,0 +1,104 @@ +--- +title: Performance best practices in extensions +slug: Mozilla/Add-ons/Performance_best_practices_in_extensions +translation_of: Archive/Add-ons/Performance_best_practices_in_extensions +--- +

+ One of Firefox's great advantages is its extreme extensibility. Extensions + can do almost anything. There is a down side to this: poorly written + extensions can have a severe impact on the browsing experience, including on + the overall performance of Firefox itself. This article offers some best + practices and suggestions that can not only improve the performance and speed + of your extension, but also of Firefox itself. +

+ +

Improving startup performance

+ +

Extensions are loaded and run whenever a new browser window opens. That means every time a window opens, your extension can have an impact on how long it takes the user to see the content they're trying to view. There are several things you can do to reduce the amount of time your extension delays the appearance of the user's desired content.

+ +

Load only what you need, when you need it

+ +

Don't load things during startup that are only needed if the user clicks a button, or if a given preference is enabled when it's not. If your extension has features that only work when the user has logged into a service, don't load the resources for those features until the user actually logs in.

+ +

Use JavaScript code modules

+ +

You can create your own JavaScript code modules incorporating sets of features that are only needed under specific circumstances. This makes it easy to load chunks of your extension on the fly as needed, instead of loading everything all at once.

+ +

+ While JavaScript modules can be extremely useful, and provide significant performance benefits, they should be used wisely. Loading modules incurs a small cost, so breaking code up to an unnecessary degree can be counter-productive. Code should be modularized to the extend that doing so increases clarity, and loading of large or expensive chunks of code fragments can be significantly deferred. +

+ +

Defer everything that you can

+ +

Most extensions have a load event listener in the main overlay that runs their startup functions. Do as little as possible here. The browser window is blocked while your add-on's load handler runs, so the more it does, the slower Firefox will appear to the user.

+ +

If there is anything that can be done even a fraction of a second later, you can use an {{ interface("nsITimer") }} or the {{ domxref("window.setTimeout()") }} method to schedule that work for later.  Even a short delay can have a big impact.

+ +

General Performance Tips

+ +

Avoid Creating Memory Leaks

+ +

Memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance.

+ +

Zombie compartments are a particular kind of memory leak that you can detect with minimal effort.  See the Zombie compartments page, especially the Proactive checking of add-ons section.

+ +

See Common causes of memory leaks in extensions for ways to avoid zombie compartments and other kinds of leaks.

+ +

As well as looking for these specific kinds of leaks, it's worth exercising your extension's functionality and checking the contents of about:memory for any excessive memory usage.  For example, bug 719601 featured a "System Principal" JavaScript compartment containing 100s of MBs of memory, which is much larger than usual.

+ +

Avoid Writing Slow CSS

+ + + +

Avoid DOM mutation event listeners

+ +

DOM mutation event listeners are extremely expensive and, once added to a document even briefly, significantly harm its performance. As mutation events are officially deprecated, and there are many alternatives, they should be avoided at all costs.

+ +

Lazily load services

+ +

The XPCOMUtils JavaScript module provides two methods for lazily loading things:

+ + + +

Many common services are already cached for you in Services.jsm.

+ +

Use asynchronous I/O

+ +

This cannot be stressed enough: never do synchronous I/O on the main thread.

+ +

Any kind of I/O on the main thread, be it disk or network I/O, can cause serious UI responsiveness issues.

+ + + +

Avoid mouse movement events

+ +

Avoid using mouse event listeners, including mouseover, mouseout, mouseenter, mouseexit, and especially mousemove. These events happen with high frequency, so their listeners can trivially create very high CPU overhead.

+ +

When these events cannot be avoided, computation during the listeners should be kept to a minimum and real work throttled. The listeners should be added to the most specific element possible, and removed when not immediately necessary.

+ +

Avoid animated images

+ +

Animated images are much more expensive than generally expected, especially when used in XUL {{ XULElem("tree") }} elements..

+ +

Consider using Chrome Workers

+ +

You can use a {{ domxref("ChromeWorker") }} to execute long running tasks or do data processing.

+ +

See also

+ + diff --git a/files/it/mozilla/add-ons/sdk/builder/index.html b/files/it/mozilla/add-ons/sdk/builder/index.html new file mode 100644 index 0000000000..a28a909dd4 --- /dev/null +++ b/files/it/mozilla/add-ons/sdk/builder/index.html @@ -0,0 +1,13 @@ +--- +title: Builder +slug: Mozilla/Add-ons/SDK/Builder +translation_of: Archive/Add-ons/Add-on_SDK/Builder +--- +

Add-on Builder era un ambiente di sviluppo web-based che permetteva agli sviluppatori usando le SDK API, ma senza il bisogno di utilizzare lo strumento linea di comando cfx. È stato dismesso l'1 Aprile 2014, e il dominio "builder.addons.mozilla.org" adesso reindirizza a questa pagina.
+
+ Se hai già usato SDK attraverso il builder, conosci già la maggior parte delle cose di cui hai bisogno per sviluppare usando solo SDK. Le high-level e le low-level API usate per il Builder sono esattamente le stesse. Per passare all'SDK:

+ diff --git a/files/it/mozilla/add-ons/sdk/guide/index.html b/files/it/mozilla/add-ons/sdk/guide/index.html new file mode 100644 index 0000000000..82e8c97f15 --- /dev/null +++ b/files/it/mozilla/add-ons/sdk/guide/index.html @@ -0,0 +1,114 @@ +--- +title: Guide +slug: Mozilla/Add-ons/SDK/Guide +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Guides +--- +

Questa pagina contiene più articoli approfonditi sull'SDK.

+ +
+

Contributor's guide

+ +
+
+
+
Per cominciare
+
Scopri come contribuire all'SDK: ottieni il codice sorgente, apri/lavora su un bug, presenta una patch, ottieni recensioni e aiuto.
+
Moduli
+
Impara di più sul sitema a moduli usato dall'SDK (che è basato sulla specifica CommonJS), su come i sandbox e i compartimenti possono essere usati per migliorare la sicurezza, o sull'SDK Module Loader incorporato, Cuddlefish.
+
Classi ed ereditarietà
+
Impara come le classi e l'ereditarietà può essere implementata in JavaScript, usando costruttori e prototipi, e su come la funzione di aiuto fornita dall'SDK semplifica tutto ciò.
+
+
+ +
+
+
Proprietà Private
+
Scopri come le proprietà private possono essere implementate in JavaScript usando prefissi, chiusure (closures), e le WeakMaps, e come l'SDK supporta le proprietà private usando i namespace (che sono una generalizzazione delle WeakMaps).
+
Content Processes
+
L'SDK è stata concepita per lavorare in un ambiente dove il codice per manipolare il contenuto web viene eseguito in un processo diverso dal codice principale del componente aggiuntivo. Questo articolo mette in risalto le funzioni principali di questo design.
+
Testare il Componente Aggiuntivo nell'SDK
+
Impara come eseguire il Componente Aggiuntivo nella suite per il testing contenuta nell'SDK.
+
+
+
+ +
+

Strutture dell'SDK

+ +
+
+
+
Struttura a moduli dell'SDK
+
L'SDK, e i Componenti Aggiuntivi sviluppati con esso, sono formati a partire da moduli riusabili di JavaScript. Questo articolo spiega cosa sono questi moduli, come caricare i moduli, e come l'albero dei moduli dell'SDK è strutturato.
+
Ciclo Vitale delle API dell'SDK
+
Definizione di ciclo vitale per le API dell'SDK, incluso il rating di stabilità.
+
+
+ +
+
+
Program ID
+
Il Program ID è un identificativo unico per il tuo Add-on. Questa guida spiega come è creato, come viene usato e come crearne uno tuo.
+
Compatibilità con Firefox
+
Controlla quale versione di Firefox è compatibile con la versione dell'SDK in uso, e controlla i problemi di compatibilità.
+
+
+
+ +
+

Linguaggi dell'SDK

+ +
+
+
+
Lavorare con gli Eventi
+
Scrivi codice attraverso gli Eventi. L'SDK ti permette di fare ciò usando il suo framework concepito per lavorare con gli eventi.
+
Guida sui Content Scripts
+
Una panoramica sui content scripts, includendo: cosa sono, cosa possono fare, come caricarli e come comunicare con loro.
+
+
+ +
+
+
Due tipi di script
+
Questo articolo illustra le differenze tra le API disponibili al codice principale del tuo Add-On e quelle disponibili ai Content Scripts.
+
+
+
+ +
+

XUL migration

+ +
+
+
+
XUL - Guida al Porting
+
Tecniche per aiutare il porting dall'add-on in XUL all'SDK.
+
XUL contro SDK
+
Le debolezze e le forze dell'SDK, confrontate ad un tradizionale add-on basato su XUL.
+
+
+ +
+
+
Esempio di Porting
+
Una procedura dettagliata sul porting di un semplice add-on basato su XUL all'SDK.
+
+
+
+ +
+

Firefox Multiprocesso

+ +
+
+
+
Firefox Multiprocesso e l'SDK
+
Come controllare che il tuo add-on sia compatibile con Firefox Multiprocesso e, in caso di non-compatibilita, come correggere.
+
+
+ +
+
diff --git a/files/it/mozilla/add-ons/sdk/index.html b/files/it/mozilla/add-ons/sdk/index.html new file mode 100644 index 0000000000..42dd1efbbb --- /dev/null +++ b/files/it/mozilla/add-ons/sdk/index.html @@ -0,0 +1,84 @@ +--- +title: Add-on SDK +slug: Mozilla/Add-ons/SDK +tags: + - Add-on SDK + - Guide Add-on +translation_of: Archive/Add-ons/Add-on_SDK +--- +

Con Add-on SDK puoi creare componenti aggiuntivi per Firefox utilizzando tecnologie standard del Web come JavaScript, HTML e CSS. SDK include delle API per JavaScript che puoi usare per sviluppare i componenti aggiuntivi, nonché strumenti per eseguirli, testarli e comprimerli in pacchetto.

+ +
+

Guide

+ +
+
+
+
Per iniziare
+
Come installare SDK e utilizzare gli strumenti della suite cfx per sviluppare, testare e comprimere in pacchetto i componenti aggiuntivi.
+
Interagire con il browser
+
Aprire pagine web, monitorare lo stato di caricamento di una pagina e elencare le schede aperte.
+
Tecniche di sviluppo
+
Scopri le tecniche di sviluppo più comuni come, ad esempio, i test di unità, il logging, i moduli riutilizzabili, la localizzazione e lo sviluppo per dispositivi portatili.
+
+
+ +
+
+
Creare i componenti di una interfaccia utente
+
Aggiungi all’interfaccia utente componenti come pulsanti della barra strumenti, menu contestuali, elementi del menu e finestre di dialogo.
+
Modificare le pagine web
+
Modifica le pagine basandoti su un determinato modello URL oppure opera dinamicamente su una singola scheda.
+
Ricapitolando
+
Guida passo per passo del componente aggiuntivo esempio Annotator.
+
+
+
+ +
+

Guide varie

+ +
+
+
+
Guida per i collaboratori
+
Scopri come contribuire a SDK e quali sono gli elementi fondamentali nel suo codice, come i moduli, le classi e l’ereditarietà, le proprietà private e l’elaborazione dei contenuti.
+
Infrastruttura di SDK
+
I vari aspetti delle tecnologie alla base di SDK: i moduli, il Program ID e le regole che definiscono la compatibilità con Firefox.
+
Content script
+
Una guida dettagliata per lavorare con i content script.
+
+
+ +
+
+
Idiomi di SDK
+
La gestione degli eventi e la distinzione tra add-on script e content script.
+
Migrazione da XUL
+
Una guida per effettuare il porting da XUL a SDK. Include un confronto tra i due sistemi e un esempio pratico di come effettuare il porting di un componente aggiuntivo XUL.
+
Firefox in modalità multiprocesso e SDK
+
Come garantire e verificare la compatibilità di un componente aggiuntivo con Firefox in modalità multiprocesso.
+
+
+
+ +
+

Riferimenti

+ +
+
+
+
API di alto livello
+
Documentazione di riferimento per le API di alto livelli di SDK.
+
Strumenti di riferimento
+
Documentazione di riferimento per lo strumento cfx utilizzato per sviluppare, testare e comprimere in pacchetto i componenti aggiuntivi, la console globale utilizzata per il logging e il file package.json.
+
+
+ +
+
+
API di basso livello
+
Documentazione di riferimento per le API di basso livello di SDK.
+
+
+
diff --git a/files/it/mozilla/add-ons/sdk/tutorials/index.html b/files/it/mozilla/add-ons/sdk/tutorials/index.html new file mode 100644 index 0000000000..3de449f5f1 --- /dev/null +++ b/files/it/mozilla/add-ons/sdk/tutorials/index.html @@ -0,0 +1,145 @@ +--- +title: Tutorials +slug: Mozilla/Add-ons/SDK/Tutorials +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials +--- +

Questa pagina riporta articoli pratici su come compiere specifici compiti usando l'SDK.

+ +
+

Primi passi

+ +
+
+
+
Installazione
+
Scaricare, installare, e iniziare ad usare l'SDK su Windows, OS X e Linux.
+
+ +
+
Risoluzione problemi
+
Alcune indicazioni per risolvere i problemi più comuni e ottenere più aiuto.
+
+
+ +
+
+
Inizia
+
Scenario di creazione di un semplice add-on con l'SDK.
+
+
+
+ +
+

Creazione di l'interfacce grafiche per l'utente

+ +
+
+
+
Aggiungere un bottone alla toolbar
+
aggiungi un bottone alla toolbar degli Add-on di Firefox.
+
Aggiungiere una voce al menu di Firefox
+
Aggiungi delle voci al menù principale di Firefox.
+
+
+ +
+
+
Mostra un popup
+
Mostra un dialogo di popup implementato con HTML e JavaScript
+
Aggiungi una voce al menù contestuale
+
Aggiungi delle voci al menù contestuale di Firefox.
+
+
+
+ +
+

Interazione con il browser

+ +
+
+
+
Apri una pagina web
+
Apri una pagina web in una nuova scheda o in una nuova finestra del  browser , usando il modulo tabs, e accedendo al suo contenuto.
+
Cattura l'evento di caricamento di una pagina
+
Usa il modulo tabs per essere notificato quando nuove pagine web sono caricate ed accedi al loro contenuto.
+
+
+ +
+
+
Recupera l'elenco delle schede aperte
+
Usa il modulo tabs per scorrere lungo le schede attualmente aperte, accedendo al loro contenuto.
+
+
+
+ +
+

Modifica delle pagine web

+ +
+
+
+
Modifica le pagine web basate su URL
+
Crea filtri per le pagine web, basati sul loro URL: ogni volta che viene caricata una pagina web il cui URL combacia con il filtro, si esegue uno specifico script in essa.
+
+
+ +
+
+
Modifica la pagina web attiva
+
Dinamicamente carica uno script in una pagina web attualmente attiva
+
+
+
+ +
+

Tecniche di Sviluppo

+ +
+
+
+
Logging
+
Impiega messaggi di log alla console per scopi diagnostici.
+
Crea moduli riusabili
+
Struttura il tuo add-on in moduli separati per renderlo più facile da sviluppare, debuggare e manutenerlo. Crea packages riusabili, contenenti i tuoi moduli, affinché anche altri sviluppatori di add-on possano usarli.
+
Unit testing
+
Scrivi ed esegui test di unità usando il framework di test dell'SDK.
+
Chrome authority
+
Ottieni l'accesso alle componenti dell'oggetto, abilitando il tuo add-on a caricare e usare qualsiasi oggetto XPCOM.
+
Crea event targets
+
Abilita gli oggetti che definisci ad emettere i loro eventi.
+
+
+ +
+
+
Cattura l'evento abilitazione e disabilitazione dell'add-on
+
Ottieni notifiche quando il tuo add-on è abilitato o disabilitato da Firefox, e passa gli argomenti nel tuo add-on dalla linea di comando.
+
Usa moduli di terze parti
+
Installa e usa moduli aggiuntivi che non sono inclusi nell'SDK stessa.
+
Localizzazione
+
Scrivi codice localizzabile.
+
Sviluppo Mobile
+
Sviluppa add-ons perFirefox Mobile su Android.
+
Add-on Debugger
+
Debugga i tuoi add-on in JavaScript.
+
+
+
+ +
+

Unificazione dei concetti illustrati

+ +
+
+
+
Annotator add-on
+
Una spiegazione esauriente di un add-on relativamente complesso.
+
+
+
+ +

 

diff --git a/files/it/mozilla/add-ons/sdk/tutorials/installazione/index.html b/files/it/mozilla/add-ons/sdk/tutorials/installazione/index.html new file mode 100644 index 0000000000..ae1ede9fb2 --- /dev/null +++ b/files/it/mozilla/add-ons/sdk/tutorials/installazione/index.html @@ -0,0 +1,75 @@ +--- +title: Installazione +slug: Mozilla/Add-ons/SDK/Tutorials/Installazione +translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation +--- +

Prerequisiti

+

Per sviluppare con Add-on SDK hai bisogno di:

+ +

L'ultima versione in sviluppo è presente nella repository su GitHub.

+

Costruire l'estensione per AMO

+

Solo l'ultima versione della tag verrà usata se presentata alla AMO.

+

The git archive command is needed to expand some git attribute placeholders.

+
git checkout 1.16
+
+git archive 1.16 python-lib/cuddlefish/_version.py | tar -xvf -
+

Procedimento di installazione per Linux/ Mac OS X / FreeBSD

+

Utilizzando il terminale si estrarre il file contenenti nell'archivio dell'SDK e dopodichè si ci sposta nella cartella principale appena estratta.

+

Per esempio:

+
tar -xf addon-sdk.tar.gz
+cd addon-sdk
+
+

Se siete utenti Bash (molte persone lo sono) eseguire questo comando dal vostro terminale:

+
source bin/activate
+
+

se non funziona il comando precedente e/o non siete utensi Bash usate questo comando:

+
bash bin/activate
+
+

Dal vostro terminale dovrebbe aparire la stringa simile a questa contenente il nome della cartella dell'SDK, come per esempio:

+
(addon-sdk)~/mozilla/addon-sdk >
+
+

Installazione nel Mac usando Homebrew

+

Se siete utenti Mac, si può scegliere di utilizzare Homebrew per l'installazione dell'SDK, usando i seguenti comandi:

+
brew install mozilla-addon-sdk
+

Una volta che l'installazione è completata con successo, si può usare il programma cfx dal terminale in qualsiasi momento: senza dover eseguire bin/activate.

+

Installation on Windows

+

Extract the file contents wherever you choose, and navigate to the root directory of the SDK with a shell/command prompt. For example:

+
7z.exe x addon-sdk.zip
+cd addon-sdk
+
+

Then run:

+
bin\activate
+
+

Your command prompt should now have a new prefix containing the full path to the SDK's root directory:

+
(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk>
+
+

activate

+

The activate command sets some environment variables that are needed for the SDK. It sets the variables for the current command prompt only. If you open a new command prompt, the SDK will not be active in the new prompt. until you type activate again.

+

This means that you can have multiple copies of the SDK in different locations on disk and switch between them, or even have them both activated in different command prompts at the same time.

+

Making activate permanent

+

By setting these variables permanently in your environment so every new command prompt reads them, you can make activation permanent. Then you don't need to type activate every time you open up a new command prompt.

+

Because the exact set of variables may change with new releases of the SDK, it's best to refer to the activation scripts to determine which variables need to be set. Activation uses different scripts and sets different variables for bash environments (Linux and Mac OS X) and for Windows environments.

+

Windows

+

On Windows, bin\activate uses activate.bat, and you can make activation permanent using the command line setx tool or the Control Panel.

+

Linux/Mac OS X

+

On Linux and Mac OS X, source bin/activate uses the activate bash script, and you can make activation permanent using your ~/.bashrc (on Linux) or ~/.bashprofile (on Mac OS X).

+

As an alternative to this, you can create a symbolic link to the cfx program in your ~/bin directory:

+
ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
+
+

If you used Homebrew to install the SDK, the environment variables are already set permanently for you.

+

Sanity check

+

Run this at your shell prompt:

+
cfx
+
+

It should produce output whose first line looks something like this, followed by many lines of usage information:

+
Usage: cfx [options] [command]
+
+

This is the cfx command-line program. It's your primary interface to the Add-on SDK. You use it to launch Firefox and test your add-on, package your add-on for distribution, view documentation, and run unit tests.

+

Ci sono problemi?

+

Prova la pagina per Risoluzione dei problemi.

+

Prossimo passo

+

Quindi, guardate la Guida introduttiva di CFX, che spiega come creare add-on utilizzando lo strumento CFX.

diff --git a/files/it/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/it/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html new file mode 100644 index 0000000000..56e7917140 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -0,0 +1,146 @@ +--- +title: Anatomy of an extension +slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +--- +
{{AddonSidebar}}
+ +

Un'estensione consiste in una raccolta di file, confezionati per la distribuzione e l'installazione. In questo articolo, esamineremo rapidamente i file che potrebbero essere presenti in un'estensione.

+ +

manifest.json

+ +

Questo è l'unico file che deve essere necessariamente presente in ogni estensione. Contiene metadati di base come il nome, la versione e le autorizzazioni richieste. Fornisce anche puntatori ad altri file nell'estensione.

+ +

Il file manifest può anche contenere puntatori a diversi altri tipi di file:

+ + + +

+ +

Vedere la pagina di riferimento manifest.json per maggiori dettagli.

+ +

Oltre a quelli a cui fa riferimento il manifest, un'estensione può includere Extension pages aggiuntive con file di supporto.

+ +

Script di Background

+ +

Extensions often need to maintain long-term state or perform long-term operations independently of the lifetime of any particular web page or browser window. That is what background scripts are for.

+ +

Background scripts are loaded as soon as the extension is loaded and stay loaded until the extension is disabled or uninstalled. You can use any of the WebExtension APIs in the script, as long as you have requested the necessary permissions.

+ +

Specifying background scripts

+ +

You can include a background script using the background key in "manifest.json":

+ +
// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}
+ +

You can specify multiple background scripts: if you do, they run in the same context, just like multiple scripts that are loaded into a single web page.

+ +

Instead of specifying background scripts, you can specify a background page which has the added advantage of supporting ES6 modules:

+ +

manifest.json

+ +
// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}
+ +

background-page.html

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script type="module" src="background-script.js"></script>
+  </head>
+</html>
+ +

Background script environment

+ +

DOM APIs

+ +

Background scripts run in the context of a special page called a background page. This gives them a window global, along with all the standard DOM APIs provided by that object.

+ +

WebExtension APIs

+ +

Background scripts can use any of the WebExtension APIs in the script, as long as their extension has the necessary permissions.

+ +

Cross-origin access

+ +

Background scripts can make XHR requests to any hosts for which they have host permissions.

+ +

Web content

+ +

Background scripts do not get direct access to web pages. However, they can load content scripts into web pages and can communicate with these content scripts using a message-passing API.

+ +

Content security policy

+ +

Background scripts are restricted from certain potentially dangerous operations, like the use of eval(), through a Content Security Policy. See Content Security Policy for more details on this.

+ + + +

Your extension can include various user interface components whose content is defined using an HTML document:

+ + + +

For each of these components, you create an HTML file and point to it using a specific property in manifest.json. The HTML file can include CSS and JavaScript files, just like a normal web page.

+ +

All of these are a type of Extension pages, and unlike a normal web page, your JavaScript can use all the same privileged WebExtension APIs as your background script. They can even directly access variables in the background page using {{WebExtAPIRef("runtime.getBackgroundPage()")}}.

+ +

Extension pages

+ +

You can also include HTML documents in your extension which are not attached to some predefined user interface component. Unlike the documents you might provide for sidebars, popups, or options pages, these don't have an entry in manifest.json. However, they do also get access to all the same privileged WebExtension APIs as your background script.

+ +

You'd typically load a page like this using {{WebExtAPIRef("windows.create()")}} or {{WebExtAPIRef("tabs.create()")}}.

+ +

See Extension pages to learn more.

+ +

Script di contenuto

+ +

Use content scripts to access and manipulate web pages. Content scripts are loaded into web pages and run in the context of that particular page.

+ +

Content scripts are extension-provided scripts which run in the context of a web page; this differs from scripts which are loaded by the page itself, including those which are provided in {{HTMLElement("script")}} elements within the page.

+ +

Content scripts can see and manipulate the page's DOM, just like normal scripts loaded by the page.

+ +

Unlike normal page scripts, they can:

+ + + +

Content scripts cannot directly access normal page scripts but can exchange messages with them using the standard window.postMessage() API.

+ +

Usually, when we talk about content scripts, we are referring to JavaScript, but you can inject CSS into web pages using the same mechanism.

+ +

See the content scripts article to learn more.

+ +

Web accessible resources

+ +

Web accessible resources are resources such as images, HTML, CSS, and JavaScript that you include in the extension and want to make accessible to content scripts and page scripts. Resources which are made web-accessible can be referenced by page scripts and content scripts using a special URI scheme.

+ +

For example, if a content script wants to insert some images into web pages, you could include them in the extension and make them web accessible. Then the content script could create and append img tags which reference the images via the src attribute.

+ +

To learn more, see the documentation for the web_accessible_resources manifest.json key.

+ +

 

+ +

 

diff --git a/files/it/mozilla/add-ons/webextensions/api/index.html b/files/it/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..955086de10 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,53 @@ +--- +title: JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +
{{AddonSidebar}}
+ +
+

JavaScript APIs for WebExtensions can be used inside the extension's background scripts and in any other documents bundled with the extension, including browser action or page action popups, sidebars, options pages, or new tab pages. A few of these APIs can also be accessed by an extension's content scripts (see the list in the content script guide).

+ +

To use the more powerful APIs you need to request permission in your extension's manifest.json.

+ +

You can access the APIs using the browser namespace:

+ +
function logTabs(tabs) {
+  console.log(tabs);
+}
+
+browser.tabs.query({currentWindow: true}, logTabs);
+
+ +
+

Many of the APIs are asynchronous, returning a Promise:

+ +
function logCookie(c) {
+  console.log(c);
+}
+
+function logError(e) {
+  console.error(e);
+}
+
+var setCookie = browser.cookies.set(
+  {url: "https://developer.mozilla.org/"}
+);
+setCookie.then(logCookie, logError);
+
+ +
+

Note that this is different from Google Chrome's extension system, which uses the chrome namespace instead of browser, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports chrome and callbacks as well as browser and promises. Mozilla has also written a polyfill which enables code that uses browser and promises to work unchanged in Chrome: https://github.com/mozilla/webextension-polyfill.

+ +

Firefox also implements these APIs under the chrome namespace using callbacks. This allows code written for Chrome to run largely unchanged in Firefox for the APIs documented here.

+ +

Microsoft Edge uses the browser namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.

+ +

Not all browsers support all the APIs: for the details, see Browser support for JavaScript APIs.

+
+ +
{{SubpagesWithSummaries}}
diff --git a/files/it/mozilla/add-ons/webextensions/api/runtime/connectnative/index.html b/files/it/mozilla/add-ons/webextensions/api/runtime/connectnative/index.html new file mode 100644 index 0000000000..7f52576e62 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/api/runtime/connectnative/index.html @@ -0,0 +1,122 @@ +--- +title: runtime.connectNative() +slug: Mozilla/Add-ons/WebExtensions/API/runtime/connectNative +tags: + - API + - Add-ons + - Estensioni + - Estensioni Web + - Non-standard + - Riferimenti + - connectNative + - metodo + - runtime +translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/connectNative +--- +
{{AddonSidebar()}}
+ +
Connette l'estensione ad un'applicazione nativa presente sul computer dell'utente.
+ +
 
+ +
Utilizza il nome di un'applicazione nativa come parametro.
+ +
Avvia l'applicazione nativa e restituisce un oggetto {{WebExtAPIRef("runtime.Port")}} alla funzione invocante.
+ +
 
+ +
La funzione invocante può usare la Port per scambiare messaggi con l'applicazione nativa utilizzando Port.postMessage() e port.onMessage.
+ +
 
+ +
L'applicazione nativa rimane attiva a meno che non termini autonomamente, sia invocata la funzione Port.disconnect(), o la pagina che ha generato la Port venga distrutta. Un volta disconnessa la Port il browser rimane in attesa qualche secondo finchè il processo non termina correttamente ed in definitiva lo chiude se non fosse ancora terminato.
+ +
Per maggiori informazioni, vedere Native messaging.
+ +

Syntax

+ +
var port = browser.runtime.connectNative(
+  application // string
+)
+
+ +

Parameters

+ +
+
application
+
string. Il nome dell'applicazione nativa alla quale collegarsi. Questo deve combaciare con la proprietà "name" nel native application's manifest file.
+
+ +

Return value

+ +

Un oggetto {{WebExtAPIRef('runtime.Port')}}. La porta che la funzione invocante può usare per scambiare messaggi con l'applicazione nativa.

+ +

Browser compatibility

+ + + +

{{Compat("webextensions.api.runtime.connectNative")}}

+ +

Examples

+ +

L'esempio crea una connessione con l'applicazione nativa "ping_pong" e rimane in ascolto per i messaggi in entrata. Invia inoltre, all'applicazione nativa, un messaggio nel momento in cui l'utente clicca su un'icona specifica del browser:

+ +
/*
+On startup, connect to the "ping_pong" app.
+*/
+var port = browser.runtime.connectNative("ping_pong");
+
+/*
+Listen for messages from the app.
+*/
+port.onMessage.addListener((response) => {
+  console.log("Received: " + response);
+});
+
+/*
+On a click on the browser action, send the app a message.
+*/
+browser.browserAction.onClicked.addListener(() => {
+  console.log("Sending:  ping");
+  port.postMessage("ping");
+});
+ +

{{WebExtExamples}}

+ +
Fonti informative + +

Questa API è basata sull'API Chromium chrome.runtime.  Questo documento deriva dal runtime.json del codice di Chromium.

+ +

La compatibilità con Microsoft Edge è fornita da Microsoft ed è qui inclusa su licenza Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/it/mozilla/add-ons/webextensions/api/runtime/index.html b/files/it/mozilla/add-ons/webextensions/api/runtime/index.html new file mode 100644 index 0000000000..1768642e7a --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/api/runtime/index.html @@ -0,0 +1,168 @@ +--- +title: runtime +slug: Mozilla/Add-ons/WebExtensions/API/runtime +tags: + - API + - Add-ons + - Extensions + - Interface + - NeedsTranslation + - Reference + - TopicStub + - WebExtensions + - runtime +translation_of: Mozilla/Add-ons/WebExtensions/API/runtime +--- +
{{AddonSidebar}}
+ +

This module provides information about your extension and the environment it's running in.

+ +

It also provides messaging APIs enabling you to:

+ + + +

Types

+ +
+
{{WebExtAPIRef("runtime.Port")}}
+
Represents one end of a connection between two specific contexts, which can be used to exchange messages.
+
{{WebExtAPIRef("runtime.MessageSender")}}
+
+

Contains information about the sender of a message or connection request.

+
+
{{WebExtAPIRef("runtime.PlatformOs")}}
+
Identifies the browser's operating system.
+
{{WebExtAPIRef("runtime.PlatformArch")}}
+
Identifies the browser's processor architecture.
+
{{WebExtAPIRef("runtime.PlatformInfo")}}
+
Contains information about the platform the browser is running on.
+
{{WebExtAPIRef("runtime.RequestUpdateCheckStatus")}}
+
Result of a call to {{WebExtAPIRef("runtime.requestUpdateCheck()")}}.
+
{{WebExtAPIRef("runtime.OnInstalledReason")}}
+
The reason that the {{WebExtAPIRef("runtime.onInstalled")}} event is being dispatched.
+
{{WebExtAPIRef("runtime.OnRestartRequiredReason")}}
+
The reason that the {{WebExtAPIRef("runtime.onRestartRequired")}} event is being dispatched.
+
+ +

Properties

+ +
+
{{WebExtAPIRef("runtime.lastError")}}
+
This value is set when an asynchronous function has an error condition that it needs to report to its caller.
+
{{WebExtAPIRef("runtime.id")}}
+
The ID of the extension.
+
+ +

Functions

+ +
+
{{WebExtAPIRef("runtime.getBackgroundPage()")}}
+
Retrieves the Window object for the background page running inside the current extension.
+
{{WebExtAPIRef("runtime.openOptionsPage()")}}
+
+

Opens your extension's options page.

+
+
{{WebExtAPIRef("runtime.getManifest()")}}
+
Gets the complete manifest.json file, serialized as an object.
+
{{WebExtAPIRef("runtime.getURL()")}}
+
Given a relative path from the manifest.json to a resource packaged with the extension, returns a fully-qualified URL.
+
{{WebExtAPIRef("runtime.setUninstallURL()")}}
+
Sets a URL to be visited when the extension is uninstalled.
+
{{WebExtAPIRef("runtime.reload()")}}
+
Reloads the extension.
+
{{WebExtAPIRef("runtime.requestUpdateCheck()")}}
+
Checks for updates to this extension.
+
{{WebExtAPIRef("runtime.connect()")}}
+
Establishes a connection from a content script to the main extension process, or from one extension to a different extension.
+
{{WebExtAPIRef("runtime.connectNative()")}}
+
+
Connects the extension to a native application on the user's computer.
+
+
{{WebExtAPIRef("runtime.sendMessage()")}}
+
Sends a single message to event listeners within your extension or a different extension. Similar to {{WebExtAPIRef('runtime.connect')}} but only sends a single message, with an optional response.
+
{{WebExtAPIRef("runtime.sendNativeMessage()")}}
+
Sends a single message from an extension to a native application.
+
{{WebExtAPIRef("runtime.getPlatformInfo()")}}
+
Returns information about the current platform.
+
{{WebExtAPIRef("runtime.getBrowserInfo()")}}
+
Returns information about the browser in which this extension is installed.
+
{{WebExtAPIRef("runtime.getPackageDirectoryEntry()")}}
+
Returns a DirectoryEntry for the package directory.
+
+ +

Events

+ +
+
{{WebExtAPIRef("runtime.onStartup")}}
+
Fired when a profile that has this extension installed first starts up. This event is not fired when an incognito profile is started.
+
{{WebExtAPIRef("runtime.onInstalled")}}
+
Fired when the extension is first installed, when the extension is updated to a new version, and when the browser is updated to a new version.
+
{{WebExtAPIRef("runtime.onSuspend")}}
+
Sent to the event page just before the extension is unloaded. This gives the extension an opportunity to do some cleanup.
+
{{WebExtAPIRef("runtime.onSuspendCanceled")}}
+
Sent after {{WebExtAPIRef("runtime.onSuspend")}} to indicate that the extension won't be unloaded after all.
+
{{WebExtAPIRef("runtime.onUpdateAvailable")}}
+
Fired when an update is available, but isn't installed immediately because the extension is currently running.
+
{{WebExtAPIRef("runtime.onBrowserUpdateAvailable")}} {{deprecated_inline}}
+
Fired when an update for the browser is available, but isn't installed immediately because a browser restart is required.
+
{{WebExtAPIRef("runtime.onConnect")}}
+
Fired when a connection is made with either an extension process or a content script.
+
{{WebExtAPIRef("runtime.onConnectExternal")}}
+
Fired when a connection is made with another extension.
+
{{WebExtAPIRef("runtime.onMessage")}}
+
Fired when a message is sent from either an extension process or a content script.
+
{{WebExtAPIRef("runtime.onMessageExternal")}}
+
Fired when a message is sent from another extension. Cannot be used in a content script.
+
{{WebExtAPIRef("runtime.onRestartRequired")}}
+
Fired when the device needs to be restarted.
+
+ +

Browser compatibility

+ + + +

{{Compat("webextensions.api.runtime")}}

+ +
{{WebExtExamples("h2")}}
+ +
Acknowledgements + +

This API is based on Chromium's chrome.runtime API. This documentation is derived from runtime.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/it/mozilla/add-ons/webextensions/api/search/index.html b/files/it/mozilla/add-ons/webextensions/api/search/index.html new file mode 100644 index 0000000000..07f8f4d05a --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/api/search/index.html @@ -0,0 +1,10 @@ +--- +title: search +slug: Mozilla/Add-ons/WebExtensions/API/search +translation_of: Mozilla/Add-ons/WebExtensions/API/search +--- +
 
+ +
{{AddonSidebar}}
+ +

Lasciato intenzionalmente bianco fino a che l'API non sarà completata.

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 new file mode 100644 index 0000000000..c74fbd8473 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/cosa_sono_le_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/index.html b/files/it/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..078f67268d --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,88 @@ +--- +title: WebExtensions +slug: Mozilla/Add-ons/WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions +--- +
{{AddonSidebar}}
+ +

Le WebExtensions sono un metodo cross-browser per sviluppare add-on. In larga parte il metodo è compatibile con le extension API supportate da Google, Chrome e Opera. Le estensioni create per questi browsers funzioneranno con poche modifiche su Firefox o Microsoft Edge. Le API sono anche completamente compatibili con Firefox multiprocesso.

+ +

Vogliamo continuare ad estendere le API per supportare le necessità degli sviluppatori di add-ons, perciò se hai idee, ci piacerebbe sentirle. Contattaci su dev-addons mailing list o #webextensions su IRC.

+ +
+
+

Iniziare

+ + + +

Come fare

+ + + +

Concetti

+ + + +

Porting

+ + + +

Firefox workflow

+ + +
+ +
+

Riferimenti

+ + + +

JavaScript APIs

+ +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}
+ +

Manifest keys

+ +
{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}
+
+
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 new file mode 100644 index 0000000000..fac1b12e36 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/la_tua_prima_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/add-ons/webextensions/script_contenuto/index.html b/files/it/mozilla/add-ons/webextensions/script_contenuto/index.html new file mode 100644 index 0000000000..4ee11316c5 --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/script_contenuto/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:

+ +
    +
  • accounts-static.cdn.mozilla.net
    • +
  • accounts.firefox.com
    • +
  • addons.cdn.mozilla.net
    • +
  • addons.mozilla.org
    • +
  • api.accounts.firefox.com
    • +
  • content.cdn.mozilla.net
    • +
  • content.cdn.mozilla.net
    • +
  • discovery.addons.mozilla.org
    • +
  • input.mozilla.org
    • +
  • install.mozilla.org
    • +
  • oauth.accounts.firefox.com
    • +
  • profile.accounts.firefox.com
    • +
  • support.mozilla.org
    • +
  • sync.services.mozilla.com
    • +
  • testpilot.firefox.com
    • +
+ +

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/user_interface/index.html b/files/it/mozilla/add-ons/webextensions/user_interface/index.html new file mode 100644 index 0000000000..bfc48bdc9e --- /dev/null +++ b/files/it/mozilla/add-ons/webextensions/user_interface/index.html @@ -0,0 +1,89 @@ +--- +title: Interfaccia utente +slug: Mozilla/Add-ons/WebExtensions/user_interface +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +
{{AddonSidebar}}
+ +

Le estensioni che usa le API delle WebExtension sono fornite con diverse opzioni dell'interfaccia utente che possono aggiungere nuove funzioni all'utente. Un elenco di queste opzioni è presente di seguito, in questa sezione è presente una descrizione dettagliata di ogni opzione.

+ +
+

Per consigli sull'utilizzo di questi componenti UI per permettere un migliore utilizzo, da parte dell'utente, della vostra estensione, guardate l'articolo User experience best practices.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI optionDescriptionExample
Toolbar button (browser action)Un pulsante nella barra degli strumenti del browser che invia un evento all'estensione quando si fa clic sul pulsante. Per impostazione predefinita, il pulsante è visibile in tutte le schede.Example showing a toolbar button (browser action).
Toolbar button with a popupUna finestra popup che si attiva facendo clic su un pulsante nella barra degli strumenti del browser. la finestra popup è definita in un documento HTML che gestisce l'interazione con l'utente.Example of the pop-up on a toolbar button
Address bar button (page action)Un pulsante nella barra degli indirizzi del browser che invia un evento all'estensione quando si fa clic. Per impostazione predefinita, il pulsante è nascosto in tutte le schede.Example showing an address bar button (page action)
Address bar button with a popupUna finestra popup che si attiva facendo clic su un pulsante nella barra degli indirizzi del browser. La finestra popup è definita in un documento HTML che gestisce l'interazione con l'utente.Example of a popup on the address bar button
Context menu itemElementi del menu, caselle di controllo e pulsanti di opzione su uno o più menu di scelta rapida del browser. Inoltre, i menu possono essere strutturati aggiungendo separatori. Quando si fa clic su una voce del menu, un evento viene inviato all'estensione.Example of content menu items added by a WebExtension, from the context-menu-demo example
Sidebar +

Un documento HTML visualizzato accanto a una pagina Web, con l'opzione per contenuti unici per pagina. La barra laterale viene aperta quando viene installata l'estensione, quindi obbedisce alla selezione della visibilità della barra laterale dell'utente. L'interazione dell'utente all'interno della barra laterale è gestita dal suo documento HTML.

+ 		Example of a sidebar
Options pageUna pagina che consente di definire le preferenze della vostra estensione che gli utenti possono modificare. L'utente può accedere a questa pagina dal gestore dei componenti aggiuntivi del browser.Example showing the options page content added in the favorite colors example.
Extension pageUtilizzare le pagine Web incluse nell'estensione per fornire moduli, aiuto o qualsiasi altro contenuto richiesto, all'interno di finestre o schede.Example of a simple bundled page displayed as a detached panel.
NotificationNotifiche temporanee visualizzate all'utente tramite il meccanismo delle notifiche del sistema operativo sottostante. Invia un evento all'estensione quando l'utente fa clic su una notifica o quando una notifica si chiude (automaticamente o su richiesta dell'utente).Example of an extension triggered system notification
Address bar suggestionOffre suggerimenti personalizzati sulla barra degli indirizzi quando l'utente inserisce una parola chiave.Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
Developer tools panelUna scheda con un documento HTML associato che viene visualizzato negli strumenti di sviluppo del browser.Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
+ +

Le seguenti guide pratiche forniscono indicazioni dettagliate per la creazione di alcune di queste opzioni dell'interfaccia utente:

+ + diff --git a/files/it/mozilla/bugzilla/index.html b/files/it/mozilla/bugzilla/index.html new file mode 100644 index 0000000000..83c9832732 --- /dev/null +++ b/files/it/mozilla/bugzilla/index.html @@ -0,0 +1,58 @@ +--- +title: Bugzilla +slug: Mozilla/Bugzilla +tags: + - Bugzilla + - Developing Mozilla + - 'Developing_Mozilla:Tools' + - NeedsTranslation + - QA + - Tools + - TopicStub +translation_of: Mozilla/Bugzilla +--- +

bugzilla.mozilla.org (often abbreviated b.m.o) is Mozilla.org's bug-tracking system, a database for recording bugs and enhancement requests for Firefox, Thunderbird, SeaMonkey, Camino, and other mozilla.org projects.

+ +
+
+

Documentation about B.m.o.

+ +
+
What to do and what not to do in Bugzilla
+
Tips for how to use Bugzilla, as well as things you should avoid.
+
Bugzilla etiquette
+
A guide to etiquette; this guide will help you understand how best to conduct yourself on b.m.o. and how using proper manners and civility will help ensure your problem gets solved sooner rather than later.
+
How to tell if a bug has already been reported
+
It's useful (but not mandatory) for you to check if the problem you're reporting has been already tracked. This guide will help you do so.
+
Quality assurance
+
Documentation about quality assurance at Mozilla.
+
Bug writing guidelines
+
A guide to writing a good, understandable, bug that will be easily followed by the development team.
+
How to submit a patch
+
If you've fixed a bug, or have implemented a new feature, you'll need to get your patch into the tree so it can become part of the product. This guide will teach you how!
+
+ +

View All...

+
+ +
+

Other materials

+ + + +

Tools

+ +
    +
  • Bugzilla Todos lists review and flag requests, patches to check in, unfulfilled requests you made of other people, and assigned bugs.
    • +
  • Bz Kanban is a board to visualize the status of bugs within a milestone.
    • +
+
+
diff --git a/files/it/mozilla/bugzilla/testopia/index.html b/files/it/mozilla/bugzilla/testopia/index.html new file mode 100644 index 0000000000..a7b2105705 --- /dev/null +++ b/files/it/mozilla/bugzilla/testopia/index.html @@ -0,0 +1,165 @@ +--- +title: Testopia +slug: Mozilla/Bugzilla/Testopia +tags: + - Questo documento non ha tag +translation_of: Mozilla/Bugzilla/Testopia +--- +

Testopia è un "test case management system" cioè un "gestore per tenere traccia dei test" fornito come estensione di Bugzilla. E' stato progettato come tool generico permettendo di integrare i report dei difetti (bug reporting) nelle vostre prove.  Benché progettato pensando al Software Testing, può essere usato per tenere traccia dei test su qualsiasi problematica del processo ingegneristico.

+ +

Testopia 2.5

+ +

Questa versione supporta Bugzilla 4.2 e la bella notizia è che non richiede più di applicare correzioni (patch) a Bugzilla stesso. Se stai aggiornando Testopia da una precedente versione, per favore togli le correzioni precedentemente applicate prima di proseguire.  Un'istallazione pulita richiede soltanto di scompattatare (untar) il pacchetto nella cartella radice di Bugzilla e lanciare (il solito) checksetup(.pl).
+ I ringraziamenti vanno a LpSolit del gruppo di sviluppatori di Bugzilla che ha reso possibile ciò.

+ +

Testopia 2.4 - Nota importante!

+ +

Se stai facendo un aggiornamento su un filesystem case sensitive (cioè che differenzia tra lettere maiuscole e minuscole), devi rimuovere la cartella testopia presente nella cartella delle estensioni (extensions) di Bugzilla . Se hai fatto delle modifiche sul codice sorgente di "testopia", devi farne il merge (riportare le stesse modifiche) nella nuova cartella "Testopia" (nota la T maiuscola). Se stai lavorando con un OS come Windows, che non differenzia tra maiuscole e minuscole, per prima cosa rinomina la vecchia cartella testopia (ad esempio testopia-old) e quindi scompatta la nuova distribuzione (tarball). Puoi ora fare il merge delle tue modifiche prima di cancellare la vecchia versione.

+ +

AVVERTENZA PER CHI USA LE API:  l'utilizzo dei parametri posizionali è stato deprecato. D'ora in poi tutti i parametri andrebbero trasmessi in un hash (struct, dict, hashmap o comunque vi piaccia chiamare una chiave e il suo valore). Benché sia stato fatto tutto il possibile per continuare a supportare i parametri posizionali, vi preghiamo di prestare attenzione al fatto che alcune chiamate alle API potrebbero fallire se non viene adottato il nuovo approccio. Inoltre, nelle versioni future questo supporto potrebbe venir meno.

+ +

Al solito si prega di fare un backup della propria istallazione prima di procedere ad una nuova installazione o aggiornamento.

+ +

Punti di integrazione (condivisione)

+ + + +

Peculiarità della versione 2.4 (Bugzilla 3.6.x)

+ + + +

Peculiarità della versione 2.3 (Bugzilla 3.4.x)

+ + + +

Peculiarità  della ver. 2.2 (Bugzilla 3.2 e 3.0.x)

+ +

Questa versione è un rilascio effettuato principalmente per stabilità e rendere compatibile Testopia con Bugzilla 3.2 and Bugzilla 3.0.6.  Attenzione a scaricare il pacchetto corretto rispetto alla versione di Bugzilla in uso.

+ +

Per l'istallazione seguire queste linee guida (vedere README per i dettagli):

+ +
    +
  1. Untar il pacchettone Testopia 2.4 all'interno della vostra cartella (principale) di Bugzilla.
    2. +
  2. Applicare le correzioni sui files di Bugzilla.
    + Nei sistemi Linux potreste fare così: +

    patch -p0 -i extensions/testopia/patch-3.6

    +
    3. +
  3. Al termine lanciare il solito comando di Bugzilla "checksetup.pl"
    4. +
+ +

Per aggiornare una istallazione esistente di Testopia si proceda come sopra avendo cura di togliere le vecchie correzioni PRIMA di scaricare i files. Se nell'occasione pensate anche di aggiornare Bugzilla completate questa attività prima di passare ad occuparvi di Testopia stesso.

+ +

patch -p0 -R -i extensions/testopia/patch-<version>

+ +

Dove <version> è la versione della correzione che avete applicato (versione di Bugzilla).

+ +

Presupposti

+ +

Durante lo sviluppo abbiamo deciso di utilizzare come riferimento l'ultima versione stabile di Bugzilla (attualmente la 3.4). Questo ci ha dato una buona base di partenza per il nostro lavoro. Centrare l'obiettivo nello sviluppo di plugins ed estensioni è arduo proprio come colpire un bersaglio in movimento. Questo approccio permette di traguardare nuove funzionalità spesso in anticipo sui tempi.  Quindi la compatibilità col passato può essere sacrificata per mancanza di tempo. Chiunque desiderasse aiutarci in questo sforzo è il benvenuto.

+ + + +

DA FARE

+ + + +

Guardate la Roadmap e la Bug List per maggiori dettagli.

+ +

Collegamenti

+ + + +

Cosa e dove scaricare (Downloads)

+ + + +

Sviluppatori

+ +

Greg Hendricks (corrente)
+ Vance Baarda (precedente)
+ Ed Fuentetaja (precedente)

diff --git a/files/it/mozilla/connettere/index.html b/files/it/mozilla/connettere/index.html new file mode 100644 index 0000000000..b15c279efa --- /dev/null +++ b/files/it/mozilla/connettere/index.html @@ -0,0 +1,98 @@ +--- +title: Connettere con Mozilla +slug: Mozilla/Connettere +translation_of: Mozilla/Connect +--- +
+

Facilita, ispira e collabora per rendere il Web la piattaforma principale per creare esperienze su tutti i dispositivi connessi.

+
+ + +
+
+
+
+

Hacks blog

+ +

Una risorsa chiave per le persone che sviluppano per l'Open Web, il blog Mozilla Hacks offre notizie e discussioni sulle novità nel campo delle tecnologie Web e le funzionalità del browser.

+ +
Leggi ora
+
+
+ +
+
+

Aiuta Q&A

+ +

Unisciti alle discussioni riguardanti il Web e le Web apps su Stack Overflow, dove potrai condividere le tue idee con altri sviluppatori Web.

+ +
{{anch("Developer discussions", "Search the Q&A below")}}
+ +
Mozilla Q&A su Stack Overflow
+
+
+ +
+
+

Unisciti MDN

+ +

Iscriviti a MDN! Avrai la possibilità di modificare la documentazione, creare un profilo per mostrare il tuo lavoro e ottenere l'accesso a varie funzionalità man mano che verranno implementate.

+ +
Iscriviti o effettua l'accesso
+
+
+
+ +
+

Connettiti con Mozilla

+ +

Gli sviluppatori stanno creando il futuro costruendo servizi e applicazioni di qualità per gli utenti. L'obiettivo di Mozilla Developer Relation è aiutarli ad usare tecnologie aperte e standardizzate nel portare a termine i loro progetti. Oltre alla documentazione presente su MDN offriamo aiuto e risorse per permettere loro di raggiungere i propri obiettivi, attraverso vari canali. Ti invitiamo a connetterti, imparare e condividere la tua conoscenza.

+ +

Offriamo aiuto tramite Q&A su Stack Overflow per risolvere specifiche questioni tecniche e possibili problemi. È disponibile anche una newsletter per tenerti informato sulle ultime novità nella scena del web riguardo web apps e molto altro. Iscriviti alla newsletter Apps & Hacks.

+ +

Se condividi i principi e la missione di Mozilla e vuoi aiutarci a diffonderli tra gli sviluppatori, scopri come puoi entrare a far parte degli evangelisti tecnici ed entrare a far parte del gruppo di discussione sull'evangelizzazione.

+ +

Abbiamo molti piani e idee per espandere il Mozilla Developer Program in maniera iterativa, e vogliamo la tua partecipazione. Quindi segui i tag su Stack Overflow, segui Hacks blog, ed iscriviti!

+
+ +
+
+

Q&A su Stack Overflow Vedi tutte Q&A...

+ +

Abbiamo una serie di Q&A per discutere problemi e complicazioni che si presentano durante lo sviluppo, soprattutto per Firefox OS e l'Open Web su mobile. È raggiungibile su Stack Overflow tramite l'URL http://stackoverflow.com/r/mozilla.

+ +
Stack form
+ +

Ultimi argomenti Q&A

+
+ +
 
+
+ +

Sviluppatori ad un laboratorio di Firefox OS a Madrid.

+ +
+
+

Dov'è Mozilla? Vedi i partecipanti e i dettagli nella nostra pagina Eventi...

+ +

Qui trovi una lista di rappresentanti di Mozilla che terranno dei talk a eventi a te vicini. Assicurati di parlare con loro!

+
+ +
+

Altre risorse

+ + +
+
+
+ +

 

diff --git a/files/it/mozilla/developer_guide/index.html b/files/it/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..288d4e19ac --- /dev/null +++ b/files/it/mozilla/developer_guide/index.html @@ -0,0 +1,145 @@ +--- +title: Developer Guide +slug: Mozilla/Developer_guide +tags: + - Developing Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide +--- +

Whether you're an old hand or just getting started, articles you can find starting from this page will help you while you're working on Mozilla development.

+ + + + + + + +
+

Documentation topics

+
+
+ Getting Started
+
+ A step-by-step beginner's guide to getting involved with Mozilla.
+
+
+
+ Working with Mozilla Source Code
+
+ A code overview, how to get the code, and the coding style guide.
+
+ Build Instructions
+
+ How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.
+
+ Development process overview
+
+ An overview of the entire Mozilla development process.
+
+ Managing multiple profiles
+
+ When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.
+
+ Automated Testing
+
+ How to run Mozilla's automated tests, and how to write new tests.
+
+ How to submit a patch
+
+ After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.
+
+ Getting documentation updated
+
+ How to ensure that documentation is kept up to date as you develop.
+
+ Mozilla modules and module ownership
+
+ This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.
+
+ Code snippets
+
+ Useful code samples for a wide variety of things you might need to figure out how to do.
+
+ Mozilla development strategies
+
+ Tips for how to make the most of your time working on the Mozilla project.
+
+ Debugging
+
+ Find helpful tips and guides for debugging Mozilla code.
+
+ Performance
+
+ Performance guides and utilities to help you make your code perform well (and to play nicely with others).
+
+ The Mozilla platform
+
+ Information about the workings of the Mozilla platform.
+
+ Adding APIs to the navigator object {{ gecko_minversion_inline("9.0") }}
+
+ How to augment the {{ domxref("window.navigator") }} object with additional APIs.
+
+ Interface Compatibility
+
+ Guidelines for modifying scriptable and binary APIs in Mozilla.
+
+ Customizing Firefox
+
+ Information about creating customized versions of Firefox.
+
+ Virtual ARM Linux environment
+
+ How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.
+
+ Obsolete Build Caveats and Tips
+
+ A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.
+
+ 		+

Tools

+
+
+ Bugzilla
+
+ The Bugzilla database used to track issues for Mozilla projects.
+
+ MXR
+
+ Browse and search the Mozilla source code repository on the Web.
+
+ Bonsai
+
+ The Bonsai tool lets you find out who changed what file in the repository, and when they did it.
+
+ Mercurial
+
+ The distributed version-control system used to manage Mozilla's source code.
+
+ Tinderbox
+
+ Tinderbox shows the status of the tree (whether or not it currently builds successfully).  Check this before checking in and out, to be sure you're working with a working tree.
+
+ Crash tracking
+
+ Information about the Socorro and Talkback crash reporting systems.
+
+ Performance tracking
+
+ See performance information for Mozilla projects.
+
+ Callgraph
+
+ A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.
+
+ Developer forums
+
+ A topic-specific list of discussion forums where you can talk about Mozilla development issues.
+
+ Mozilla Platform Development Cheat Sheet
+
+ Brian Bondy's list of frequently referenced information for platform developers.
+
+
+

 

diff --git a/files/it/mozilla/firefox/developer_edition/index.html b/files/it/mozilla/firefox/developer_edition/index.html new file mode 100644 index 0000000000..f735815e52 --- /dev/null +++ b/files/it/mozilla/firefox/developer_edition/index.html @@ -0,0 +1,60 @@ +--- +title: Developer Edition +slug: Mozilla/Firefox/Developer_Edition +tags: + - Beginner + - Firefox + - Landing + - NeedsTranslation + - TopicStub + - 'etichette{locale}' +translation_of: Mozilla/Firefox/Developer_Edition +--- +
{{FirefoxSidebar}}

A version of Firefox that's tailored for web developers.

+ +

Download Firefox Developer Edition

+ +
+
+
+

The latest Firefox features

+ +

Firefox Developer Edition replaces the Aurora channel in the Firefox Release Process. Like Aurora, features will land in the Developer Edition every six weeks, after they have stabilized in Nightly builds.

+ +

By using the Developer Edition, you gain access to tools and platform features at least 12 weeks before they reach the main Firefox release channel.

+ +

Find out what's new in the Developer Edition.

+
+ +
+

A distinct theme

+ +

This includes quicker access to the developer tools.

+ +

Experimental developer tools

+ +

We'll include experimental tools that aren't yet ready to ride the trains to release.

+ +

For example, the Developer Edition includes the Valence add-on, which enables you to connect the Firefox developer tools to other browsers such as Chrome on Android and Safari on iOS.

+
+
+ +
+
+

A separate profile

+ +

Firefox Developer Edition uses a separate profile from other Firefox versions installed on your machine. This means you can easily run the Developer Edition alongside your release or Beta version of Firefox.

+ +
+

Note: This means that the first time you start up the Developer Edition, you will see a completely uncustomized browser, with no add-ons, bookmarks, or history. You can use Firefox Sync if you want to unify your settings between the Developer Edition and other editions of Firefox.

+
+
+ +
+

Set up for web developers

+ +

We've set default preference values tailored for web developers. For example, chrome and remote debugging are enabled by default.

+
+
+ +

 

diff --git a/files/it/mozilla/firefox/developer_edition/ripristinare/index.html b/files/it/mozilla/firefox/developer_edition/ripristinare/index.html new file mode 100644 index 0000000000..d087d53194 --- /dev/null +++ b/files/it/mozilla/firefox/developer_edition/ripristinare/index.html @@ -0,0 +1,27 @@ +--- +title: Ripristinare +slug: Mozilla/Firefox/Developer_Edition/Ripristinare +translation_of: Mozilla/Firefox/Developer_Edition/Reverting +--- +
{{FirefoxSidebar}}

Ripristinare il tema dalla Developer Edition

+ +


+ Se vuoi usare la Developer Edition, ma preferisci il tema 'Australis' usato in Firefox e Firefox Beta, puoi tornare al normale tema Firefox : Basta aprire il pannello "Customize" e cliccare su "Use Firefox Developer Edition Theme".

+ +

{{EmbedYouTube("OvJwofTjsNg")}}

+ +

Il tema Developer Edition non è ancora compatibile con temi "lightweight", per cui se usate questi temi, dovete ripristinare il tema Australis.

+ +

Ripristinare Firefox Aurora

+ +


+ Se volete tutte le caratteristiche della "pre-beta" che sono nella Firefox Developer Edition, ma non volete nessuna delle altre modifiche, potete ripristinare il sistema a qualcosa di simile al vecchio Firefox Aurora. Ciò ripristinerà anche il tuo profilo prima dell'aggiornamento e i dati delle sessioni.

+ +

Questo si articola in due fasi, da eseguire in quest'ordine:

+ +
    +
  1. Aprire la pagina preferenze della Developer Edition e disabilitare la casella "Allow Firefox Developer Edition and Firefox to run at the same time". Ti verrà richiesto di riavviare il browser.
    2. +
  2. Dopo il riavvio, puoi ripristinare il tema dalla developer edition, aprendo il pannello "Customize" e cliccando su "Use Firefox Developer Edition Theme".
    3. +
+ +

{{EmbedYouTube("0Ofq-vlw8Qw")}}

diff --git "a/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" "b/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/index.html" new file mode 100644 index 0000000000..2cc528ad36 --- /dev/null +++ "b/files/it/mozilla/firefox/funzionalit\303\240_sperimentali/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/index.html b/files/it/mozilla/firefox/index.html new file mode 100644 index 0000000000..c49c144593 --- /dev/null +++ b/files/it/mozilla/firefox/index.html @@ -0,0 +1,52 @@ +--- +title: Firefox +slug: Mozilla/Firefox +tags: + - Firefox + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox +--- +
{{FirefoxSidebar}}
+ +
+

Firefox è il popolare browser web di Mozilla, disponibile per varie piattaforme, tra cui Windows, Mac OS X, e Linux sul desktop, Android e altri dispositivi mobile. Con la sua ampia compatibilità, le ultime novità nelle tecnologie web e i potenti strumenti di sviluppo, Firefox è una scelta fantastica sia per gli sviluppatori web che per gli utenti.

+ +

Firefox è un progetto open source; la maggior parte del codice è stata scritta dalla nostra enorme comunità di volontari. In questo documento è possibile imparare come contribuire al progetto Firefox e anche trovare link alle informazioni riguardanti lo sviluppo di componenti aggiuntivi per Firefox, utilizzare gli strumenti di sviluppo e altro ancora.

+ +
+

Impara a creare componenti aggiuntivi per Firefox, sviluppare e compilare Firefox stesso e come funzionano le parti interne di Firefox e dei suoi sottoprogetti.

+
+ +
    +
  • Note di rilascio per gli sviluppatori + +

    Note di rilascio focalizzate sugli sviluppatori; scopri quali nuove capacità vengono incluse in ogni versione di Firefox, sia per lo sviluppo di siti web che per i componenti aggiuntivi.

    +
    • +
  • Documentazione del progetto +

    Ottieni informazioni dettagliate riguardo il funzionamento interno di Firefox e il suo sistema di compilazione, per aiutarti a trovare ciò che cerchi nel codice.

    +
    • +
  • Guida per gli sviluppatori +

    La nostra guida per gli sviluppatori fornisce i dettagli riguardanti il come ottenere e compilare i sorgenti di Firefox, come orientarsi e come contribuire al progetto.

    +
    • +
+ +

Firefox è disponibile su quattro canali. Il canale release è adatto all'uso quotidiano; è la versione fornita e usata dalle persone di tutto il mondo. Gli altri canali vengono utilizzati dai tester, dai pionieri e dai veri entusiasti.

+ +
    +
  • Firefox Nightly + +

    Compilazioni notturne solo per scopi di test.

    + Scarica Nightly
    • +
  • Firefox Aurora +

    Le ultime innovazioni in un ambiente sperimentale.

    + Scarica Aurora
    • +
  • Firefox Beta +

    Le ultime novità in un ambiente più stabile.

    + Scarica Beta
    • +
  • Firefox +

    Provato, testato e usato da milioni di utenti in tutto il mondo.

    + Scarica Firefox
    • +
+
diff --git a/files/it/mozilla/firefox/multiprocess_firefox/index.html b/files/it/mozilla/firefox/multiprocess_firefox/index.html new file mode 100644 index 0000000000..316b048c8c --- /dev/null +++ b/files/it/mozilla/firefox/multiprocess_firefox/index.html @@ -0,0 +1,73 @@ +--- +title: Multiprocess Firefox +slug: Mozilla/Firefox/Multiprocess_Firefox +translation_of: Mozilla/Firefox/Multiprocess_Firefox +--- +
{{FirefoxSidebar}}

Nelle attuali versioni di Firefox Desktop, l'intero browser gira in un singolo processo del sistema operativo. In particolare, JavaScript che avvia la UI del browser (conosciuta anche come "codice chrome") gira nello stesso processo così come nelle pagine web (meglio conosciute come "contenuto" o "contenuto web").
+
+ Le future versioni di Firefox avvieranno la UI del browser in un processo separato dal contenuto web. Nella iniziale iterazione di questa architettura tutte le schede del browser funzioneranno nello stesso processo, e la UI del browser girerà in un processo differente. Nelle prossime iterazioni, ci aspettiamo di avere più di un unico processo di contenuti. Il progetto di Firefox multiprocesso che stiamo consegnando è chiamato Electrolysis, a volte abbreviato in e10s.

+ +

Le normali pagine web non sono influenzate da Firefox multiprocesso. Lo staff che sta lavorando a Firefox stesso e gli sviluppatori di Firefox add-on saranno influenzati se il loro i loro rilasci di codice potranno aver accesso diretto al contenuto web.

+ +

Anziché accedere direttamente al contenuto, JavaScript di chrome dovrà usare il message manager per accedere al contenuto. Per rendere più semplice la transizione abbiamo implementato il Cross Process Object Wrappers e alcuni integratori di compatibilità per sviluppatori di add-on. Se sei uno sviluppatore di add-on che si sta chiedendo se ne sei influenzato, vedi la guida per operare con Firefox multiprocesso.

+ +

Firefox Multiprocesso è attualmente abilitato di default nelle builds di Nightly.

+ +
+
+
+
+
Technical overview
+
A very high-level view of how multiprocess Firefox is implemented.
+
Glossary
+
A reference for the jargon used in multiprocess Firefox.
+
The message manager
+
How to communicate between chrome and content.
+
Message Manager interfaces
+
Includes links to the API reference for the message manager interfaces.
+
Frame script environment
+
The environment frame scripts run in, and especially how it differs from the environment for chrome code.
+
+
+ +
+
+
Motivation
+
Why we're implementing multiprocess Firefox: performance, security, and stability.
+
Add-on migration guide
+
If you're an add-on developer, find out if you're affected and how to update your code.
+
Cross Process Object Wrappers
+
Cross Process Object Wrappers are a migration aid, giving chrome code synchronous access to content.
+
Debugging frame scripts
+
Using the Browser Content Toolbox to debug frame scripts.
+
+
+
+ +
+
+
+
+
Limitations of chrome scripts
+
Practices that will no longer work in chrome code, and how to fix them.
+
+
+ +
+
+
Limitations of frame scripts
+
Practices that will not work inside frame scripts, and what to do instead.
+
+
+
+ +
+

Contact us

+ +

Find out more about the project, get involved, or ask us your questions.

+ + diff --git a/files/it/mozilla/firefox/releases/40/index.html b/files/it/mozilla/firefox/releases/40/index.html new file mode 100644 index 0000000000..0b57ccb6ba --- /dev/null +++ b/files/it/mozilla/firefox/releases/40/index.html @@ -0,0 +1,117 @@ +--- +title: Firefox 40 per sviluppatori +slug: Mozilla/Firefox/Releases/40 +tags: + - Firefox + - Rilasci +translation_of: Mozilla/Firefox/Releases/40 +--- +
{{FirefoxSidebar}}
Installa Firefox Nightly
+ +

Novità per Sviluppatori Web

+ +

Strumenti per sviluppatore

+ + + +

CSS

+ + + +

HTML

+ +

Nessuna novità.

+ +

JavaScript

+ + + +

Interfacce/APIs/DOM

+ + + +

MathML

+ +

Nessuna novità.

+ +

SVG

+ +

Nessuna novità.

+ +

Audio/Video

+ +

Nessuna novità.

+ +

Networking

+ +

Nessuna novità.

+ +

Sicurezza

+ +

Nessuna novità.

+ +

Novità per componenti aggiuntivi e sviluppatori Mozilla

+ +

XUL

+ +

Nessuna novità.

+ +

Moduli di codice JavaScript

+ + + +

XPCOM

+ +

Nessuna novità.

+ +

Altro

+ + + +

Vedi anche

+ + + +

Vecchie versioni

+ +

{{Firefox_for_developers('39')}}

diff --git a/files/it/mozilla/firefox/releases/42/index.html b/files/it/mozilla/firefox/releases/42/index.html new file mode 100644 index 0000000000..5d02b8ce79 --- /dev/null +++ b/files/it/mozilla/firefox/releases/42/index.html @@ -0,0 +1,189 @@ +--- +title: Firefox 42 for developers +slug: Mozilla/Firefox/Releases/42 +tags: + - Firefox + - Note di rilascio + - Rilasci +translation_of: Mozilla/Firefox/Releases/42 +--- +
{{FirefoxSidebar}}
+ +
Installa Firefox Developer Edition Firefox 42 was released on November 3, 2015. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
+ +

Modifiche per gli sviluppatori

+ +

Strumenti per gli sviluppatori

+ +

In evidenza:

+ + + +

All devtools bugs fixed between Firefox 41 and Firefox 42.

+ +

CSS

+ + + +

HTML

+ + + +

JavaScript

+ + + +

Interfaces/APIs/DOM

+ +

DOM & HTML DOM

+ + + +

Service Workers

+ + + +

Web Animations API

+ +

Our experimental implementation of Web Animations API have been extended to support:

+ + + +

Web Components

+ +

Our experimental implementation of the Shadow DOM has been modified:

+ + + +

WebGL

+ + + +

WebRTC

+ + + +

New APIs

+ + + +

Miscellaneous

+ + + +

MathML

+ +

No change.

+ +

SVG

+ +

No change.

+ +

Audio/Video

+ +

No change.

+ +

HTTP

+ +

No change.

+ +

Networking

+ + + +

Sicurezza

+ + + +

Cambiamenti per gli add-on e Mozilla developers

+ +

Interfaces

+ +

nsIContentPolicy

+ + + +

XUL

+ +

No change.

+ +

JavaScript code modules

+ +

No change.

+ +

XPCOM

+ +

No change.

+ +

Other

+ +

No change.

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('41')}}

diff --git a/files/it/mozilla/firefox/releases/59/index.html b/files/it/mozilla/firefox/releases/59/index.html new file mode 100644 index 0000000000..7d1cec5737 --- /dev/null +++ b/files/it/mozilla/firefox/releases/59/index.html @@ -0,0 +1,203 @@ +--- +title: Firefox 59 per sviluppatori +slug: Mozilla/Firefox/Releases/59 +translation_of: Mozilla/Firefox/Releases/59 +--- +
{{FirefoxSidebar}}

Questo articolo fornisce informazioni sulle modifiche in Firefox 59 che interesseranno gli sviluppatori. Firefox 59 è l'attuale versione Beta di Firefox, che  sarà pubblicata il 13 marzo 2018.

+ +

Cambios pro le disveloppatores de web

+ +

Utensiles pro le disveloppatores de web

+ + + +

HTML

+ +

The {{HTMLElement("textarea")}} element's {{htmlattrxref("autocomplete", "textarea")}} attribute has been implemented. This lets you enable or disable form auto-fill for the element.

+ +

CSS

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ +

No changes.

+ +

APIs

+ +

New APIs

+ +

{{domxref("PointerEvent","PointerEvents")}} have been enabled in Firefox Desktop ({{bug(1411467)}}).

+ +

DOM

+ + + +

DOM events

+ +

The {{domxref("Event.composedPath()")}} method has been implemented ({{bug(1412775)}}).

+ +

Service workers

+ + + +

Media and WebRTC

+ + + +

Canvas and WebGL

+ +

No changes.

+ +

CSSOM

+ +

The {{domxref("CSSNamespaceRule")}} interface and its namespaceURL and prefix properties have been implemented ({{bug(1326514)}}).

+ +

HTTP

+ +

No changes.

+ +

Security

+ + + +

Plugins

+ +

No changes.

+ +

Other

+ +

No changes.

+ +

Removals from the web platform

+ +

HTML

+ +

The non-standard version parameter of the {{htmlelement("script")}} element's {{htmlattrxref("type","script")}} attribute (e.g.  type="application/javascript;version=1.8") has been removed ({{bug(1428745)}}).

+ +

CSS

+ + + +

JavaScript

+ + + +

APIs

+ + + +

SVG

+ +

Support for SMIL's accessKey feature has been removed ({{bug(1423098)}}).

+ +

Other

+ +

Support for the non-standard pcast:// and feed:// protocols has been removed from Firefox ({{bug(1420622)}}).

+ +

Changes for add-on and Mozilla developers

+ +

WebExtensions

+ + + +

See also

+ +

Site compatibility for Firefox 59

+ +

Older versions

+ +

{{Firefox_for_developers(58)}}

diff --git a/files/it/mozilla/firefox/releases/64/index.html b/files/it/mozilla/firefox/releases/64/index.html new file mode 100644 index 0000000000..dd7d4e1532 --- /dev/null +++ b/files/it/mozilla/firefox/releases/64/index.html @@ -0,0 +1,184 @@ +--- +title: Firefox 64 for developers +slug: Mozilla/Firefox/Releases/64 +translation_of: Mozilla/Firefox/Releases/64 +--- +
{{FirefoxSidebar}}
+ +

Questo articolo fornisce informazioni riguardo i cambiamenti in Firefox 64 che interesseranno gli sviluppatori. Firefox 64 è stato rilasciato l' 11 Dicembre, 2018.

+ +

Changes for web developers

+ +

Developer tools

+ + + +

Removals

+ + + +

HTML

+ +

No changes.

+ +

CSS

+ + + +

Removals

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ + + +

APIs

+ +

DOM

+ + + +

Service workers

+ + + +

Media, Web Audio, and WebRTC

+ + + +

Removals

+ + + +

Security

+ + + +

Plugins

+ +

No changes.

+ +

Changes for add-on developers

+ +

API changes

+ + + + + +

Windows

+ + + +

Privacy

+ + + +

devtools.panels API

+ + + +

Manifest changes

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(64)}}

diff --git a/files/it/mozilla/firefox/releases/66/index.html b/files/it/mozilla/firefox/releases/66/index.html new file mode 100644 index 0000000000..85441c5ce4 --- /dev/null +++ b/files/it/mozilla/firefox/releases/66/index.html @@ -0,0 +1,156 @@ +--- +title: Firefox 66 for developers +slug: Mozilla/Firefox/Releases/66 +translation_of: Mozilla/Firefox/Releases/66 +--- +
{{FirefoxSidebar}}
+ +

Questo articolo fornisce informazioni sulle modifiche in Firefox 66 che interesseranno gli sviluppatori. Firefox 66 è l'attuale versione Beta di Firefox, sarà disponibile 19 Marzo del 2019.

+ +

Modifiche per gli sviluppatori web

+ +

Strumenti di sviluppo

+ + + +

HTML

+ + + +

Removals

+ + + +

CSS

+ + + +

SVG

+ +

No additions.

+ +

Removals

+ + + +

JavaScript

+ +

No changes.

+ +

APIs

+ +

New APIs/changes

+ + + +

DOM

+ + + +

DOM events

+ + + +

Media, Web Audio, and WebRTC

+ + + +

Removals

+ + + +

Networking

+ + + +

Security

+ +

No changes.

+ +

Plugins

+ +

No changes.

+ +

Changes for add-on developers

+ +

API changes

+ + + + + +

Manifest changes

+ +

No changes.

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(65)}}

diff --git a/files/it/mozilla/firefox/releases/index.html b/files/it/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..a7185bc5e5 --- /dev/null +++ b/files/it/mozilla/firefox/releases/index.html @@ -0,0 +1,10 @@ +--- +title: Firefox developer note di rilascio +slug: Mozilla/Firefox/Releases +tags: + - Firefox +translation_of: Mozilla/Firefox/Releases +--- +
{{FirefoxSidebar}}

Questa pagina fornisce i link "Firefox X per sviluppatori" agli articoli di ogni rilascio Firefox. Queste note ci mostrano quali funzionalità saranno aggiunte e quali bug verranno eliminati in ogni versione di Firefox.

+ +
{{ListSubpages("",1,0,1)}}
diff --git a/files/it/mozilla/firefox_for_android/index.html b/files/it/mozilla/firefox_for_android/index.html new file mode 100644 index 0000000000..15240f6c30 --- /dev/null +++ b/files/it/mozilla/firefox_for_android/index.html @@ -0,0 +1,66 @@ +--- +title: Firefox per Android +slug: Mozilla/Firefox_for_Android +translation_of: Mozilla/Firefox_for_Android +--- +

Per molte persone i device mobili sono la fonte primaria, o anche l' unica, per l' accesso al Web.

+ +

Firefox for Android (nome in codice Fennec) è open, hackable, basata sugli standard web, come Firefox desktop.

+ +

Firefox per Android basa  la sua interfaccia utente su quella nativa  di Android widgets, invece di XUL: questo migliora notevolmente le prestazioni, soprattutto in tempo di avvio, e utilizzo della memoria. Per il momento questa versione si rivolge solo a telefoni, mentre la versione tablet utilizza ancora XUL. In futuro, si prevede di sostituire ufficialmente la versione dell' interfaccia utente nativa anche sui tablet.

+ +

Contribuire a Firefox per Android.

+ +

Il principale punto di partenza per informazioni su Firefox per Android è il progetto stesso pagina Wiki del progetto.

+ +

Potete aiutarci a creare e migliorare Firefox per Android:

+ + + +

Sviluppare per il web mobile

+ +

Abbiamo iniziato a mettere insieme una guida per progettare siti web per dispositivi mobili.

+ +

Con Firefox per Android, hai accesso a un certo numero di API che espongono le funzionalità di base del dispositivo per colmare il divario tra il Web e le applicazioni native:

+ + + +

Per testare il vostro sito web su Firefox per Android, è possibile istallarlo su un dispositivo Android  o  eseguirlo sul proprio desktop utilizzando l'emulatore di Android.

+ +

Realizzare addon per il mobile

+ +

Firefox for Android supports add-ons using the exact same extension system used by all other Gecko-based applications. We did not invent a new add-on system. This means that building an add-on for Firefox on Android is the same process that would be used for desktop Firefox. Add-ons that work with desktop Firefox do not automatically work in Firefox on Android. The user interfaces are just too different.

+ +
Firefox on Android has a unique application identifier which must be used in install.rdf. The identifier is {aa3c5121-dab2-40e2-81ca-7ea25febc110}
+ +

Both classic restart-required and newer restartless add-on approaches are supported. Using the restartless approach is preferred whenever possible because the user experience is far superior to forcing an application restart when installing or removing an add-on.

+ +

Introduzione Veloce

+ + + +

Informati e ricevi informazioni su Firefox per Android

+ +

Documentation and tutorials for using and troubleshooting Firefox for Android are available on the Mozilla Support website.

diff --git a/files/it/mozilla/index.html b/files/it/mozilla/index.html new file mode 100644 index 0000000000..e24ed8a774 --- /dev/null +++ b/files/it/mozilla/index.html @@ -0,0 +1,13 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla +--- +
+ {{draft}}
+

This will soon be an awesome landing page for Mozilla internals. For now, it's not.

+
+ {{ListSubpages}}
diff --git a/files/it/mozilla/localizzazione/index.html b/files/it/mozilla/localizzazione/index.html new file mode 100644 index 0000000000..4aff8d7f64 --- /dev/null +++ b/files/it/mozilla/localizzazione/index.html @@ -0,0 +1,23 @@ +--- +title: La localizzazione su Mozilla +slug: Mozilla/Localizzazione +tags: + - Localizzazione + - Mozilla + - Traduzione + - l10n +translation_of: Mozilla/Localization +--- +

La localizzazione (L10n) consiste nel tradurre le interfacce software degli utenti da una lingua ad un'altra, rendendola accessibile a tutte le altre culture straniere. Queste risorse sono destinate a chiunque abbia interesse per gli aspetti tecnici coinvolti nella localizzazione, oltre che agli sviluppatori e a tutti i collaboratori.

+ +

Vedi anche

+ +

Localizzare MDN

+ +
+
Come localizzare la documentazione qui su MDN.
+
App di localizzazione
+
Articolo riguardante più nello specifico le applicazioni di localizzazione, inclusa l'applicazione di Firefox OS.
+
L10n
+
Documenti in riferimento all' L10n API che Mozilla usa per localizzare Firefox OS.
+
diff --git a/files/it/mozilla/marketplace/criteri_revisione_marketplace/index.html b/files/it/mozilla/marketplace/criteri_revisione_marketplace/index.html new file mode 100644 index 0000000000..9e2d6e10bf --- /dev/null +++ b/files/it/mozilla/marketplace/criteri_revisione_marketplace/index.html @@ -0,0 +1,79 @@ +--- +title: Criteri di revisione del Marketplace +slug: Mozilla/Marketplace/criteri_revisione_marketplace +translation_of: Archive/Mozilla/Marketplace/Publishing/Marketplace_review_criteria +--- +
+

Questo articolo descrive i requisiti che un'app deve soddisfare per essere distribuita su Firefox Marketplace. Tali requisiti sono stati elaborati per conservare un equilibrio tra le esigenze degli sviluppatori e quelle degli utenti. Gli sviluppatori cercano requisiti equi, coerenti, non troppo rigorosi e affidabili per costituire le basi del loro business. D'altra parte, gli utenti esigono la garanzia che le app siano sicure, in grado di funzionare sui loro dispositivi e che rispettino quanto dichiarato nelle note di versione. I seguenti requisiti tentano di conciliare tutte queste esigenze.

+
+

Di seguito le prospettive di Mozilla riguardo alle revisioni:

+ +

Sicurezza

+

Tutte le specifiche di sicurezza per la progettazione di app sono disponibili in questa pagina:https://wiki.mozilla.org/Apps/Security

+ +

Privacy

+ +

Contenuto

+ +

Linee guida per i contenuti

+

Questa lista descrive contenuti considerati inappropriati su Firefox Marketplace. Non è una lista definitiva ma solo illustrativa e potrebbe essere aggiornata. Se un'applicazione viola queste linee guida, Mozilla si riserva il diritto di rimuoverla da Firefox Marketplace.

+ +

Funzionalità

+ +

Usabilità

+ +

Politica sulle app bloccate

+

Nella speranza di non arrivare mai a esercitarlo, ci riserviamo il diritto di eliminare ("bloccare") qualsiasi app già pubblicata che in un secondo momento riveli di aver violato i requisiti di sicurezza, privacy o contenuto, oppure di causare un peggioramento significativo nelle prestazioni del sistema o del network. Gli sviluppatori verranno informati prima del blocco della loro app, saranno considerati in buona fede in assenza di prove che dimostrino il contrario e potranno contare sulla piena collaborazione del team di revisione, che comunicherà loro la situazione e li assisterà nella risoluzione del problema. Esempi specifici di casi in cui si procede al blocco di un'app:

+ diff --git a/files/it/mozilla/marketplace/index.html b/files/it/mozilla/marketplace/index.html new file mode 100644 index 0000000000..b868c7f23d --- /dev/null +++ b/files/it/mozilla/marketplace/index.html @@ -0,0 +1,129 @@ +--- +title: Firefox Marketplace +slug: Mozilla/Marketplace +tags: + - Apps + - Firefox OS + - Marketplace + - Mobile + - TopicStub +translation_of: Archive/Mozilla/Marketplace +--- +
Firefox Marketplace è una piattaforma online aperta e non proprietaria per la distribuzione di app web. Questa sezione fornisce le informazioni necessarie per realizzare ed esporre un’app su Firefox Marketplace, illustra consigli su come rendere l'app più fruibile e popolare, le varie opzioni di distribuzione, pubblicazione e aggiornamento, le librerie e API necessarie per sfruttare le funzionalità del Marketplace.
+ +
+

Mozilla porta i suoi principi fondamentali, apertura, libertà e diritto dell'utente di scegliere, nel mercato delle app.

+ +

Firefox Marketplace permette di pubblicare app open web sfruttando tecnologie web, linguaggi e strumenti standardizzati. Le app possono essere di due tipi: locali (packaged), cioè eseguibili dall'interno di Firefox, oppure remote (hosted), ospitate su un server proprio. Le app pubblicate sul Marketplace sono disponibili agli utenti di Firefox OS in tutto il mondo e possono essere facilmente trovate attraverso la sezione "App consigliate", le varie categorie di app e una versatile funzione di ricerca. L'installazione delle app gratuite richiede pochi istanti, mentre le app a pagamento possono essere acquistate sfruttando il sempre più completo supporto per i pagamenti con carta di credito oppure direttamente dal cellulare.

+
+ +
+
+

Prepararsi al successo

+ +
+
Che tu sviluppi app per profitto o semplicemente per soddisfazione personale, se le esponi sul Marketplace probabilmente è perché miri a farle scoprire, utilizzare e apprezzare dagli utenti. Questa sezione spiega come far conoscere la propria app e costruire una comunità di utenti soddisfatti.
+
+ +

Opzioni di pubblicazione

+ +
+
Locale o remota, questo è il dilemma. Le risposte alle tue domande su come distribuire il contenuto delle app e sulle varie opzioni per desktop, dispositivi Android e Firefox OS.
+
+ +

Pubblicare un'app

+ +
+
Esibisci le tue app davanti al resto del mondo. Scopri come esporre le tue app su Firefox Marketplace, dal procedimento per caricare l'app al processo di revisione, all'aggiornamento, al controllo delle statistiche, alla revisione dei commenti degli utenti.
+
+
+ +
+
+
+ +

Strumenti per lo sviluppo di app

+ +
+
Librerie e API di Firefox Marketplace
+
Una panoramica con i link alle librerie e alle API a disposizione per aggiungere nuove funzionalità alle app del Marketplace.
+
Strumenti per sviluppatori di app
+
Una lista esauriente dei vari strumenti a disposizione per rendere lo sviluppo delle app open web efficiente e divertente.
+
WebIDE
+
Lo strumento principale per verificare, inviare a un dispositivo e sottoporre al debug le app di Firefox OS attraverso Firefox OS Simulator o un dispositivo con sistema operativo Firefox OS.
+
+
+
+ + + +
    +
  1. Prepararsi al successo + +
      +
    1. Introduzione
      2. +
    2. Deciding what to build
      3. +
    3. Getting to know your users
      4. +
    4. Choosing your business model
      5. +
    5. Localizing your apps
      6. +
    6. Promoting your app
      7. +
    7. Creating your community
      8. +
    +
    2. +
  2. Opzioni di pubblicazione +
      +
    1. Introduzione
      2. +
    2. Packaged apps
      3. +
    3. Hosted apps
      4. +
    4. Packaged or hosted?
      5. +
    5. Mobile-optimized websites
      6. +
    6. Publish apps yourself
      7. +
    +
    3. +
  3. App publishing overview +
      +
    1. Introduzione
      2. +
    2. Submission checklist
      3. +
    3. Criteri di revisione del Marketplace
      4. +
    4. Marketplace showcase criteria
      5. +
    5. Adding a subdomain for an app
      6. +
    6. Policies and Guidelines +
        +
      1. Introduzione
        2. +
      2. Marketplace screenshot criteria
        3. +
      3. Privacy policy
        4. +
      4. App testing and troubleshooting
        5. +
      +
      7. +
    +
    4. +
  4. Submit your app +
      +
    1. Panoramica
      2. +
    2. Step 1: Sign-in
      3. +
    3. Step 2: Load app
      4. +
    4. Step 3: Listing details
      5. +
    5. Step 4: Next steps
      6. +
    6. Step 5: App rating
      7. +
    7. Step 6: Define team members
      8. +
    8. Step 7: View listing
      9. +
    9. Step 8: Edit other localizations
      10. +
    +
    5. +
  5. Managing and updating published apps +
      +
    1. Introduzione
      2. +
    2. Your app's status
      3. +
    3. Updating apps
      4. +
    4. App Stats
      5. +
    +
    6. +
  6. Add-on submission +
      +
    1. Add-on submission overview
      2. +
    2. Add-on review criteria
      3. +
    +
    7. +
  7. Librerie e API
    8. +
  8. FAQ di Firefox Marketplace
    9. +
diff --git a/files/it/mozilla/marketplace/monetization/introduction_monetization/index.html b/files/it/mozilla/marketplace/monetization/introduction_monetization/index.html new file mode 100644 index 0000000000..ef368a9586 --- /dev/null +++ b/files/it/mozilla/marketplace/monetization/introduction_monetization/index.html @@ -0,0 +1,31 @@ +--- +title: Introduction — Monetization +slug: Mozilla/Marketplace/Monetization/Introduction_Monetization +tags: + - italiano tags +translation_of: Archive/Marketplace/Monetization/Introduction_Monetization +--- +
+

You've worked hard on designing your latest app, and now you want to ensure it generates revenue. This section provides the information you need to implement and publish a paid app, a paid upgrade app, and apps using in-app payments or in-app advertising.

+
+ +
+
+
Publishing your app for profit
+
An overview to the development and publishing process for each type of monetized app, as well as details on refunds and how payments are processed.
+
Building paid apps
+
An introduction to creating an app users have to pay for.
+
Building for in-app payments
+
Guides to implementing support for in-app payments using fxPay or mozPay.
+
Refunds
+
Details on refunds users can request and how they effect your app.
+
Validating a receipt
+
A guide to when and how to validate your app's purchase receipt, whether you want to implement the validation yourself or use an existing library.
+
App pricing tiers
+
Details of the fixed price points you can choose for your paid apps, and how these vary among different currencies, along with useful supporting information on dealing with app payments.
+
Country guide
+
Additional details, such as tax and exchange rates used, for each country where payments in the local currency are available.
+
+
+ +

 

diff --git a/files/it/mozilla/marketplace/monetization/profiting_from_your_app/index.html b/files/it/mozilla/marketplace/monetization/profiting_from_your_app/index.html new file mode 100644 index 0000000000..f623f72cc8 --- /dev/null +++ b/files/it/mozilla/marketplace/monetization/profiting_from_your_app/index.html @@ -0,0 +1,53 @@ +--- +title: Publishing your app for profit +slug: Mozilla/Marketplace/Monetization/Profiting_from_your_app +tags: + - italiano tags +translation_of: Archive/Marketplace/Monetization/Profiting_from_your_app +--- +
+

Creating Web Apps is not only fun; it's also a great way to turn your passion into revenue! This article sumarizes how you publish app using various the monetization models available.

+
+ +
+

Note: If you're looking for more information on monetization models or advice on which one to use, check out Choosing your business model. In addition, the payments section of the Marketplace FAQ provides answers to many common questions about Marketplace payments.

+
+ +

How to ...

+ +

Release a premium app

+ +

To offer a premium (paid) app you need to set it so it's installed from Firefox Marketplace. Then include code to verify a receipt issued by Marketplace, to make sure the app has been paid for before allowing it to run. For more information, see the App payments guide.

+ +

To setup an app as premium in Firefox Marketplace you first identify it as Paid in the initial (monetization) section of the Submit an App page. You then create an account with one or more payment providers. Once this is done you can select a price point for your app. Bear in mind that currently only apps installed into Firefox OS can be premium apps, because payments are not yet supported on desktop or Android.

+ +

Release a promote as upgrade app

+ +

For this approach you obviously need two apps — the free one and the premium app you'll promote as an upgrade.

+ +

Once your apps are ready, first add the free version of the app to Firefox Marketplace, then the premium version. While submitting the premium app select the promote as upgrade to free version option at the bottom of the Compatibility & Pricing page.

+ +

Release an app with in-app payments

+ +

You have two options for adding in-app payments to your apps: fxPay and mozPay. The principal difference between the two options is that fxPay works without the need for your own server, while mozPay requires you to have a server to store transaction receipts.

+ +

In simple terms, development of your app involves defining a number of in-app products you have for sale, reading those products into your app, providing a purchase 'button', and validating the receipt when the product is 'consumed' to ensure it was validly purchased. Full details on the coding required is provided in the In-app payments section.

+ +
+

Note: While we encourage apps using in-app payments to be free for download, it's possible to have a paid app that also uses in-app payments.

+
+ +

To setup an app with in-app purchases in Firefox Marketplace, you first identify it as Paid / In-app in the initial (monetization) section of the Submit an App page (noting that you will do this for a stub app before development starts to get a API key for mozPay or load in-app products for fxPay). You then create an account with one or more payment providers, before publishing your app. Bear in mind that currently only apps installed into Firefox OS can be premium apps, because payments are not yet supported on desktop or Android.

+ +

Releasing an app with in-app advertising

+ +

Mozilla has no special relationship with any advertising network, so you are free to choose the ad network or networks. You'll need to consult the developer resources from your chosen network to get full details of the development process, but in general the process is likely to involve: getting a key that will identify to the network that an ad has been displayed or clicked in your app, and coding the ads into your app.

+ +

To publish on Firefox Marketplace you now simply identify it as Free or Paid / In-app as appropriate in the initial (monetization) section of the Submit an App page and compete the apps details. There are no special steps to follow, compared to posting an app without in-app adverts.

+ +

See also

+ + diff --git a/files/it/mozilla/marketplace/options/index.html b/files/it/mozilla/marketplace/options/index.html new file mode 100644 index 0000000000..067b7756f8 --- /dev/null +++ b/files/it/mozilla/marketplace/options/index.html @@ -0,0 +1,21 @@ +--- +title: Your publication options +slug: Mozilla/Marketplace/Options +tags: + - NeedsTranslation + - Structure only + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Options/Introduction +--- +

In this section you'll discover:

+ +
+

Content in this section is still under development.

+
+

 

diff --git a/files/it/mozilla/marketplace/options/packaged_apps/index.html b/files/it/mozilla/marketplace/options/packaged_apps/index.html new file mode 100644 index 0000000000..056adf7d11 --- /dev/null +++ b/files/it/mozilla/marketplace/options/packaged_apps/index.html @@ -0,0 +1,55 @@ +--- +title: Packaged apps +slug: Mozilla/Marketplace/Options/Packaged_apps +translation_of: Archive/Mozilla/Marketplace/Options/Packaged_apps +--- +
+

A packaged app is an Open Web App that has all of its resources (HTML, CSS, JavaScript, app manifest, and so on) contained in a zip file, instead of having its resources on a Web server. This article provides an introduction to packaged apps and links to everything you need to know about packaged apps from a developer standpoint.

+
+

A packaged app is zip file that contains all the resources that enable an Open Web App to function, along with an app manifest in the zip's root directory. The app manifest provides details about the app such as its description, icons used to identify the installed app and such like. The package is then used to install the app to Firefox OS devices, Android devices and desktops. Once installed the app runs on the device, but is still able to access resources on the Web, such as a database on a Web server.

+

There are three types of packaged apps: web app, privileged app and certified app. While packaged apps can be used to deliver any type of Open Web App, privileged and certified apps are digitally signed to enable the use of privileged and certified APIs. Privileged apps are signed as part of the Marketplace review process, while certified apps are signed by device manufacturers or operators.

+

In addition to their ability to use privileged and certified APIs, packaged apps offer users a faster first start response as all the of the app's resources are available on the device after installation.These feature makes packaged apps the recommended approach for delivering Open Web Apps to Firefox OS devices, Android devices and desktops.

+
+

Note: Currently the Firefox Marketplace supports web and privileged packaged apps. In addition, Firefox Marketplace supports paid packaged apps for Firefox OS only and free packaged apps for Firefox OS, Firefox for Android and Firefox for Desktop. Support for paid apps on all platforms is under development.

+
+

Types of packaged apps

+

There are three types of packaged apps: web apps, privileged apps and certified app. Each type of packaged app corresponds to a level of the App Security model implemented in Firefox OS. This section provides more information on each.

+

Web app

+

A web app is one that doesn't make use of privileged or certified APIs. When submitted to Marketplace the app's package is signed, but the special authentication process used for privileged or certified apps isn't performed. Web apps therefore cannot use privileged or certified APIs. These apps are not subject to the Content Security Policies (CSPs) required for privileged and certified apps.

+

This type of packaged app doesn't require the type field in its manifest.webapp file, because the default value for type (web) is correct.

+

Web apps may be self-published or distributed through the Firefox Marketplace. Web apps can also be delivered using the Hosted app mechanism.

+

Privileged app

+

A privileged app is one that makes use of privileged APIs and can be considered as the equivalent of a native app on platforms such as iOS and Android. When submitted to the Firefox Marketplace, privileged apps are approved using a special process. This process gives users of the app a level of assurance that the app has been carefully reviewed for potential security, privacy and capability issues.

+

To specify that an app is a privileged app, add the type field to its manifest.webapp file and set it to privileged. Every privileged API your app needs to access  must be added to the permissions field in the app's manifest.

+

Firefox OS and the Web runtimes for Android and desktops enforces the following CSP for privileged apps:

+
"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"
+

Privileged apps may be distributed through the Firefox Marketplace only.

+

Certified app

+
+

Certified apps are not generally available to third-party developers and aren't distributed through the Firefox Marketplace. The long term goal for the APIs covered by certification is to harden then so they can be made available as privileged APIs. If you've an interest in seeing a particular API made available, please provide feedback on the dev-webapps mailing list.

+
+

A certified app is one that makes used of certified APIs, APIs that offer access to critical system function such as the default dialer or the system settings app on a device. Compared to to a privileged app, all API permissions in a certified app are implicit, meaning they are enabled without explicit user approval. A certified app must be approved for a device by the OEM or carrier.

+

To specify that an app is a certified app, add the type field to its manifest.webapp file and set it to certified. Every privileged and certified API your app needs to access  must be added to the permissions field in the app's manifest.

+

Firefox OS implements the following CSP for certified apps:

+
"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"
+

This has the effect of implementing stricter rules for inline CSP for certified compared to privileged apps. If you want to understand the reasoning behind this, see Default CSP policy and Bug 768029.

+

Certified apps are preloaded onto devices by OEMs and operators.

+

Testing packaged apps

+

To install a packaged app into a Firefox OS Simulator or onto a device for testing purposes, see Using the App Manager. Alternatively, you can install it on to a device from a Web server by following the steps described in Publishing apps yourself. Remember that when you publish apps yourself, packaged web apps only can be installed .

+

Publishing packaged apps

+

You have two options for publishing packaged apps: on Firefox Marketplace or self-publishing.

+

Publishing on Firefox Marketplace

+

The process for submitting a packaged app to Firefox Marketplace is described in the App Publishing section.

+

When you submit your packaged app, its zip file is stored on the Marketplace servers, and the Marketplace generates a new manifest called the mini-manifest that is based on the app manifest in your packaged app's zip file. When a user installs your app, the mini-manifest is passed to the Apps.installPackage() function to install the app. The mini-manifest exists for installation and update purposes and isn't used when your app runs.

+

Publishing yourself

+

It's possible to publish packaged web apps outside Firefox Marketplace, on your own web server. Details are provided in Publishing apps yourself.

+

Updating packaged apps

+

For information on updating apps, see Updating apps.

+

More information

+ +

 

+Ytughf diff --git a/files/it/mozilla/marketplace/prepare/choosing_your_business_model/index.html b/files/it/mozilla/marketplace/prepare/choosing_your_business_model/index.html new file mode 100644 index 0000000000..b4bceec5cf --- /dev/null +++ b/files/it/mozilla/marketplace/prepare/choosing_your_business_model/index.html @@ -0,0 +1,121 @@ +--- +title: Choosing your business model +slug: Mozilla/Marketplace/Prepare/Choosing_your_business_model +tags: + - italiano tags +translation_of: Archive/Mozilla/Marketplace/Prepare/Choosing_your_business_model +--- +
+

A guide to and advice on choosing an appropriate business model for monetizing Firefox Marketplace apps.

+
+ +

You may be happy to create and distribute your apps for free. We applaud you for that, it’s very much in the spirit of everything we do here at Mozilla. However, we also understand that you may want to make app development your source of income and there is nothing wrong with that. Selecting the most appropriate monetization model your apps is a critical step if you want to maximize the revenue you earn. It's about a lot more than simply loading your app into Firefox Marketplace and setting a price: it's entirely possible that you could make more money by not charging for your app at all.

+ +

To assist you with implementing the best monetization option, this page describes the models available before looking at the criteria to consider in deciding which option to use.

+ +

Monetization models

+ +

When it comes to making money from your Firefox Marketplace apps there are a number of monetization models you can use. This section describes the options available.

+ +

The Paid App or Premium model

+ +

This is the simple, traditional model for monetizing apps: You generate your revenue from sales of your app by setting a price for it in the Marketplace. The user must then pay before being able to download and install your app.

+ +

The advantage of this model is its simplicity, you simply write your app and price it. There are however several disadvantages:

+ + + +

Try and Buy model

+ +

In this model you make a version of your app available for free and then offer a paid app version with enhanced features, using Marketplace's 'promote as an upgrade' feature. This enables you to retain the simplicity of the premium monetization model, while addressing some of the issues with using the premium model alone.

+ +

There are several approaches you can take to differentiating the free and paid versions of your app, such as:

+ + + +

This approach can overcome the resistance to buying apps, as it allows the user to understand the app’s value before making the purchase. However, it doesn’t overcome any limitations created by the means of payment available in some markets.

+ +

If you choose to use this model, Firefox Marketplace offers the Promote as upgrade to free version option. Using this option you link a paid app to its free version and Firefox Marketplace then provides a link to the paid version from the free one's Marketplace listing, as shown below.

+ +

The Premium version available notice and link in the listing of a free app on a Firefox OS device..

+ +

 

+ +

In-App Purchases model

+ +

In this model you distribute a free version of your app only, but then offer users various additional items from within the app. These in-app purchases fall broadly into two categories:

+ + + +

This model can often be easiest to implement in games, where additional levels, characters, power ups, and various other game unlocks lend themselves well to separate purchases. But equally an information app could offer a small set of information for free and an expanded or more details set from an in-app purchase.

+ +

One particular benefit of in-app purchases is that it offers the ability to generate a recurring stream of revenue from installed apps. Games are a particularly good example of how this model works. You might offer a free download with 5 levels. Then, when the user has completed those levels, offer an additional 5 levels as an in-app purchase. Then at the end of those levels, offer 5 more for an in-app payment and so on. And as long as each new level pack is as engaging as the last, users will most likely continue to purchase new level packs.

+ +

This model, overcomes the issues associated with any reluctance to download a paid app, but could still be effected by the same disadvantages notably any limitation on payment options.

+ +
+

The in-app payment system in Firefox OS doesn’t yet support periodic subscriptions.

+
+ +

Ad supported

+ +

In this model you incorporate advertising into your app and generate revenue from ad views and clickthroughs to view the advertised product or service. You will usually offer your app for free when it's ad-supported, but you can include ads in a premium app or in conjunction with in-app purchases, but do this with caution — particularly in premium apps — as users may consider you're 'charging ' them twice. You could also combine this approach with Promote as upgrade: offer the full app with adverts as the 'try' and a premium version without ads as the 'upgrade'. Alternatively you could use an in-app payment to offer a 'remove the ads' feature in the app.

+ +

If you want to take this approach you can use any ad network you wish. There are a number of companies that offer ad services for websites and mobile apps, for example Google AdMob and Inneractive.

+ +

This model completely removes the barriers that paid app or in-app purchases have, in that you don’t have to worry about the willingness or ability of users to make payments.

+ +

Choosing your model

+ +

Finding the right monetization model for your application isn’t an exact science; even simply deciding what price to charge can be a difficult process. The information you gathered while getting to know your users is the best place to start. This should provide you with some insight into their expectations:

+ + + +

This information needs to be combined with that on the available payment methods. This will help you determine if users will be willing and able to purchase apps or in-app products. You also should consider that the Firefox Marketplace will allow you to convert a free app to one users have to pay for, but you cannot make a paid for app free. So, unless you release a second version of the app, once you've chosen a paid model it’s hard to change to a free one.

+ +

If you choose to use a paid or in-app purchase model, you’ll need to assess what your users will tolerate in terms of app price. Here it’s worth investigating what models and prices are being used by your competitors. Even if there is no direct competition, look at similar classes of app and see what they do.

+ +

Even if you want to price your apps, err towards a model that provides users with a free download of some sort — as a paid download, even a low priced one, will be a barrier to many users.

+ +

If you've any doubts about the effectiveness of a model with a paid element, then consider implementing in-app advertising in a free to download app.

+ +

You can also mix the models, for example by using both advertising and in-app purchases. The only combination that should be used with caution is advertising in a paid app, as users may view this combination negatively.

+ +

Bear in mind that there are some apps where you may be practically limited to either free or paid options only. For example games targeted at children may work better as paid apps: parents may look for games without advertising or in-app purchases that they can safely let their children use.

+ +

If you come to no firm conclusions from your research, consider trying these general guidelines when choosing your model:

+ + + +

You’ll probably have to experiment with different models to find the right one for any particular app. You may also find that you need to use different models for different apps in your portfolio, particularly if the user base varies between those apps. Similarly, variations among markets may mean that you can price your app in one country, but need to use in-app advertising in another — for example, you might be able to position a soccer app as paid in the UK or Brazil, but need to use in-app advertising in a version for the US.

+ +

Also see

+ + diff --git a/files/it/mozilla/marketplace/prepare/introduction/index.html b/files/it/mozilla/marketplace/prepare/introduction/index.html new file mode 100644 index 0000000000..80a27bbc81 --- /dev/null +++ b/files/it/mozilla/marketplace/prepare/introduction/index.html @@ -0,0 +1,35 @@ +--- +title: Introduction — Prepare for Success +slug: Mozilla/Marketplace/Prepare/Introduction +tags: + - italiano tags +translation_of: Archive/Mozilla/Marketplace/Prepare/Introduction +--- +
+

Learn about the techniques you can use to create quality Firefox Marketplace apps and games people want, and build a worldwide user base of dedicated and loyal fans.

+
+ +

Creating a successful Open Web App isn't just about great coding for a great open platform. Whether you’re coding for pleasure and the joy of sharing your ideas, or you want to build a business from your coding activities, you’ll want users to download and use your apps.

+ +

This section contains the advice you need to achieve your goals in terms of app downloads, revenue and use.

+ +
+
+
Deciding what to build
+
A great app starts with a great idea. Get guidance on choosing what to build.
+
Getting to know your users
+
Understanding your users and what they are looking for in your apps is critical to success.
+
Choosing your business model
+
Discover the business models available to your apps and games, and see how you might use them.
+
 
+
Localizing your apps
+
Taking your app to the world means localizing it for users worldwide. Find out about the processes and implications of localizing your app.
+
Promoting your app
+
Firefox Marketplace is a great way for users to discover apps, but to achieve the downloads you deserve you’ll need to shout about your app. Find out how to make a noise.
+
Creating your community
+
Nurture and grow a vibrant community around your apps and tap into their enthusiasm and expertise.
+  
+
+
+ +

 

diff --git a/files/it/mozilla/marketplace/publishing/index.html b/files/it/mozilla/marketplace/publishing/index.html new file mode 100644 index 0000000000..e2b172a388 --- /dev/null +++ b/files/it/mozilla/marketplace/publishing/index.html @@ -0,0 +1,9 @@ +--- +title: Publishing +slug: Mozilla/Marketplace/Publishing +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction +--- +

Marketplace publishing

diff --git a/files/it/mozilla/marketplace/publishing/opzioni_pubblicazione_app/index.html b/files/it/mozilla/marketplace/publishing/opzioni_pubblicazione_app/index.html new file mode 100644 index 0000000000..ab3302cc6c --- /dev/null +++ b/files/it/mozilla/marketplace/publishing/opzioni_pubblicazione_app/index.html @@ -0,0 +1,152 @@ +--- +title: Autopubblicare un'app +slug: Mozilla/Marketplace/Publishing/opzioni_pubblicazione_app +translation_of: Archive/Mozilla/Marketplace/Options/Self_publishing +--- +
+

In alcune circostanze è preferibile non distribuire un'app attraverso Firefox Marketplace, per esempio nel caso si desideri condividerla soltanto con i membri della propria organizzazione, eseguire un test su una versione beta o semplicemente farne un uso privato. In questa pagina è spiegato come autopubblicare le proprie app al di fuori di Firefox Marketplace.

+
+ +

Le app open web possono essere installate su Firefox OS e dispositivi dotati di Firefox per Android o Firefox per desktop utilizzando {{ domxref("Apps.install") }} o {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }}. Il ruolo di entrambe le API è trasmettere l'URL del manifesto contenente la descrizione dell'app da installare. Dunque i requisiti di base per autopubblicare un'app sono:

+ +
    +
  1. un server dove ospitare il manifesto dell'app,
    2. +
  2. un server dove ospitare l'app (nel caso di app remota) o l'app stessa compressa in un file zip,
    3. +
  3. un codice nel sito web che richiami {{ domxref("Apps.install") }} o {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} a seconda del caso.
    4. +
+ +

Limitazioni

+ +

Prima di autopubblicare un'app open web è bene considerare le seguenti limitazioni:

+ + + +

App locali autopubblicate

+ +

È possibile pubblicare un'app locale ospitando il file zip su un server insieme a un mini-manifesto. Il mini-manifesto, utilizzato per identificare l'app durante il processo di installazione, deve essere ospitato nella stessa directory del file zip. Il passo successivo è creare uno script per richiamare {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} e trasmettergli le informazioni contenute nel mini-manifesto. Ecco il procedimento dettagliato:

+ +
    +
  1. +

    Comprimere i contenuti dell'app in un file zip e rinominarlo package.zip. Questo file deve contenere tutte le risorse dell'app, compreso il manifesto principale.

    + +
    +

    Attenzione: al momento di creare il file zip, posizionare tutti i contenuti che devono comparire nell'app nella cartella principale, senza sottocartelle. Comprimendo la cartella genitore con all'interno le sottocartelle, il manifesto risulterebbe in una posizione sbagliata, invalidando l'app.

    +
    +
    2. +
  2. Creare un file e nominarlo manifest.webapp, poi aggiungere i contenuti riportati di seguito. Questo file è chiamato mini-manifesto perché consiste in una versione leggermente ridotta del manifesto incluso nel file zip dell'app locale. Viene utilizzato da {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} per installare l'app. Per informazioni dettagliate sul contenuto del file leggere Campi del mini-manifesto di seguito. + 
    {
+    "name": "My sample app",
+    "package_path" : "http://my-server.com/my-app-directory/package.zip",
+    "version": "1",
+    "developer": {
+        "name": "A. Developer",
+        "url": "http://my-server.com"
+    }
+}
    +
    3. +
  3. Creare lo script di installazione. Nell'esempio viene utilizzato un semplice file html nominato index.html , ma è possibile anche aggiungere lo script a un pulsante o utilizzare qualsiasi altro metodo appropriato per richiamarlo al sito web. Il codice JavaScript di questa pagina richiama l'API di installazione per le app locali ({{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }}), includendo anche dei callback per notificare l'esito dell'installazione. + 
    <html>
+  <body>
+    <p>Packaged app installation page</p>
+    <script>
+      // This URL must be a full url.
+      var manifestUrl = 'http://my-server.com/my-app-directory/manifest.webapp';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    </script>
+  </body>
+</html>
    +
    4. +
  4. Caricare i file su un server o sito web copiando package.zip, manifest.webapp e index.html nella directory desiderata (nel codice di esempio my-app-directory).
    5. +
  5. Ora è possibile installare l'app su un dispositivo compatibile (come uno smartphone Firefox OS). Aprire il file index.html (nel testo di esempio posizionato al percorso http://my-server.com/my-app-directory/index.html). Verrà visualizzata una richiesta di conferma per procedere con l'installazione. Confermando inizierà il processo di installazione. Al termine del processo, lo script della pagina web notificherà l'esito positivo o negativo dell'operazione.
    6. +
+ +
+

Suggerimento: per eseguire i test su dispositivo è possibile anche ospitare un'app locale su un server locale. Il server web e il dispositivo devono essere sullo stesso network, inoltre il server deve essere abilitato a servire richieste dal network locale. Sarà sufficiente includere il percorso assoluto nel package_path del mini-manifesto, esattamente come viene incluso normalmente (vedi sotto). Se si sta utilizzando una porta non predefinita, includere anche le informazioni della porta (es. http://10.10.12.1:8080/package.zip).

+
+ +

Campi del mini-manifesto

+ +

Gli sviluppatori che scelgono di pubblicare le proprie app con Firefox Marketplace non hanno bisogno di compilare il mini-manifesto, in quanto esso viene generato automaticamente dal Marketplace, estrapolando le informazioni necessarie dal manifesto dell'app incluso nel file zip. I dettagli sui contenuti del manifesto principale si trovano nell'articolo App manifest.

+ +

Gli sviluppatori che desiderano autopubblicare un'app devono invece compilare il mini-manifesto. Il metodo più sicuro per ottenere un mini-manifesto è fare una copia del manifesto principale e modificare le parti necessarie. Lavorare su una copia garantisce il rispetto del primo requisito di un mini-manifesto, ovvero che i campi name, version, developer e locales siano esattamente uguali a quelli del manifesto principale. Occorre poi aggiungere i campi esclusivi del mini-manifesto: package_path, release_notes e size.

+ +
+
package_path (obbligatorio)
+
Il percorso assoluto (ovvero l'url completo, ad esempio http://my-server.com/my-app-directory/manifest.webapp) della posizione in cui è stato archiviato il file zip dell'app.
+
release_notes (facoltativo)
+
Informazioni sulla versione corrente dell'app. Su Firefox Marketplace queste informazioni vengono fornite durante il processo di caricamento.
+
+ +
+
size (facoltativo)
+
Le dimensioni del file zip espresse in byte. Questa informazione viene utilizzata da {{ domxref("DOMApplicationsRegistry.installPackage", "Apps.installPackage") }} per mostrare l'avanzamento del processo di installazione.
+
+ +

Esempio:

+ +
{
+  "name": "My app",
+  "package_path": "http://thisdomaindoesnotexist.org/myapp.zip",
+  "version": "1.0",
+  "size": 172496,
+  "release_notes": "First release",
+  "developer": {
+    "name": "Developer Name",
+    "url": "http://thisdomaindoesnotexist.org/"
+  },
+  "locales": {
+    "fr-FR": {
+      "name": "Mon application"
+    },
+    "se-SE": {
+      "name": "Min balla app"
+    }
+  },
+  "icons": {
+    "16": "/icons/16.png",
+    "32": "/icons/32.png",
+    "256": "/icons/256.png"
+  }
+}
+
+ +

Gli altri campi presenti nell'esempio sono:

+ +
+
name (obbligatorio)
+
Il nome dell'app. Lunghezza massima 128 caratteri.
+
version (facoltativo)
+
La versione dell'app.
+
developer  (facoltativo)
+
Informazioni sullo sviluppatore, contiene i campi name e url. Le informazioni sullo sviluppatore presenti nel manifesto principale e nel mini-manifesto devono coincidere.
+
locales (facoltativo)
+
Informazioni sulla localizzazione. I codici del locale devono essere espressi nel formato xx-YY.
+
icons (facoltativo)
+
Le icone in uso dell'app.
+
+ +

Per informazioni più dettagliate sui contenuti dei manifesti leggere App manifest.

+ +

App remote autopubblicate

+ +

Rispetto a quello per le app locali, il processo di autopubblicazione di un'app remota (hosted) è più diretto: basta creare i contenuti con lo stesso metodo utilizzato per la pubblicazione su Firefox Marketplace. In pratica occorre creare il file manifest dell'app. In seguito si aggiunge il codice per richiamare {{ domxref("Apps.install") }}. Il codice è essenzialmente lo stesso che si utilizza per le app locali, mostrato precedentemente, con la sola differenza che è anche possibile utilizzare un riferimento relativo alla posizione del file manifest.

+ +

Vedi anche

+ + diff --git a/files/it/mozilla/marketplace/publishing/submit/index.html b/files/it/mozilla/marketplace/publishing/submit/index.html new file mode 100644 index 0000000000..265a1ad776 --- /dev/null +++ b/files/it/mozilla/marketplace/publishing/submit/index.html @@ -0,0 +1,10 @@ +--- +title: Submit +slug: Mozilla/Marketplace/Publishing/Submit +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit +--- +

This section describes the process for submitting an app to Firefox Marketplace

+

Residual details: https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app

diff --git a/files/it/mozilla/mobile/index.html b/files/it/mozilla/mobile/index.html new file mode 100644 index 0000000000..f406d8be3a --- /dev/null +++ b/files/it/mozilla/mobile/index.html @@ -0,0 +1,28 @@ +--- +title: Mobile +slug: Mozilla/Mobile +tags: + - HTML + - HTTP + - JavaScript + - Mobile + - Mozilla +translation_of: Mozilla/Mobile +--- +

Firefox OS

+ +

Firefox OS è un sistema operativo mobile Open Source che utilizza Linux e Mozilla con il motore Gecko per eseguire una interfaccia utente e un insieme di applicazioni scritte interamente in HTML, CSS e javaScript

+ +

Leggi come installare Firefox OS e come sviluppare applicazioni per esso.

+ +

Firefox per Android

+ +

Firefox per Android è il browser web mobile di Mozilla per i dispositivi Android. E' stato recentemente riscritto per poter utilizzare un'interfaccia utente nativa di Android, rendendolo più veloce, più snello e reattivo. Fornisce supporto per le più potenti API per accedere alle funzionalità del dispositivo, come la macchina fotografica e la chiamata telefonica.

+ +

Leggi come contribuire al creare Firefox per Android, come utilizzare le sue API e come contribuire a creare componenti aggiunti.

+ +

Sviluppo web sul mobile

+ +

I dispositivi mobili solo molto diversi per quanto riguarda le caratteristiche hardware da un Desktop o laptot, e molte delle API utilizzate per lavorare con tutti gli ambienti sono ancora in corso di standardizzazione.

+ +

Leggi come sviluppare siti web ottimali per i dispositivi mobili e sfruttare le nuove possibilità che tali offrono. Impara a creare il tuo sito web su diversi dispositivi e browser.

diff --git a/files/it/mozilla/mobile/viewport_meta_tag/index.html b/files/it/mozilla/mobile/viewport_meta_tag/index.html new file mode 100644 index 0000000000..5e6617d215 --- /dev/null +++ b/files/it/mozilla/mobile/viewport_meta_tag/index.html @@ -0,0 +1,94 @@ +--- +title: Usare il viewport meta tag per controllare il layout nei browser su mobile +slug: Mozilla/Mobile/Viewport_meta_tag +tags: + - Layout + - Mobile +translation_of: Mozilla/Mobile/Viewport_meta_tag +--- +

Background

+ +

La “{{glossary("viewport")}}” di un browser è l'area della finestra in cui si può vedere il contenuto di una pagina web. Spesso, questa non ha la stessa dimensione della pagina intera, in questo caso i browser mostrano delle barre di scorrimento (scrollbar) per permettere all'utente di scorrere in ogni direzione e usufruire di tutti i contenuti.

+ +

Gli schermi di dispsitivi stretti (come i telefoni) renderizzano le pagine in una finestra virtuale, o “viewport”, che solitamente è più larga dello schermo, e successivamente stringono il risultato già renderizzato in modo che possa essere visto interamente. Gli utenti possono dunque spostarsi e ingrandire per vedere aree differenti della pagina. Per esempio, se lo schermo di uno smartphone ha una larghezza di 640 pixel, le pagine potrebbero essere renderizzate con una finestra virtuale di 980 pixel, e successivamente ristrette per stare nello spazio di 640 pixel.

+ +

Questo avviene perché molte pagine non sono ottimizzate per dispositivi mobili (o almeno, appaiono peggio) quando renderizzati a una minore larghezza rispetto alla finestra virtuale. La “viewport” è un modo per rendere siti non ottimizzati per la visualizzazione da mobile per apparire in modo migliore su schermi stretti.

+ +

Enter viewport meta tag

+ +

However, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.

+ +

To mitigate this problem, Apple introduced the "viewport meta tag" in Safari iOS to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple's documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.

+ +

Learn more about viewports in different mobile browsers in A Tale of Two Viewports at quirksmode.org.

+ +

Viewport basics

+ +

A typical mobile-optimized site contains something like the following:

+ +
<meta name="viewport" content="width=device-width, initial-scale=1">
+ +

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

+ +

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

+ +
+

Usage of user-scalable=no can cause accessibility issues to users with visual impairements such as low vision.

+
+ +

A pixel is not a pixel

+ +

In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in A pixel is not a pixel.

+ +

On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:

+ +
+

If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

+
+ +

For web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.

+ +

The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(density/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.

+ +

Viewport width and screen width

+ +

Sites can set their viewport to a specific size. For example, the definition "width=320, initial-scale=1" can be used to fit precisely onto a small phone display in portrait mode. This can cause problems when the browser doesn't render a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices like the iPad. (Allen Pike's Choosing a viewport for iPad sites has a good explanation for web developers.)

+ +

For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:

+ +
<meta name="viewport" content="width=500, initial-scale=1">
+ +

Other attributes that are available are minimum-scale, maximum-scale, and user-scalable. These properties affect the initial scale and width, as well as limiting changes in zoom level.

+ +

Not all mobile browsers handle orientation changes in the same way. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

+ +
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
+ +

Suppress the small zoom applied by many smartphones by setting the initial scale and minimum-scale values to 0.86. The result is horizontal scroll is suppressed in any orientation and the user can zoom in if they want to.

+ +
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
+ +

Common viewport sizes for mobile and tablet devices

+ +

If you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of mobile and tablet viewport sizes here. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}{{Spec2('CSS3 Device')}}Non-normatively describes the Viewport META element
+ +

There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to keep up to date with any changes.

diff --git a/files/it/mozilla/performance/about_colon_memory/index.html b/files/it/mozilla/performance/about_colon_memory/index.html new file mode 100644 index 0000000000..b3d0e3c732 --- /dev/null +++ b/files/it/mozilla/performance/about_colon_memory/index.html @@ -0,0 +1,188 @@ +--- +title: 'about:memory' +slug: 'Mozilla/Performance/about:memory' +tags: + - Performance + - diagnosi + - memoria + - registro + - resoconto +translation_of: 'Mozilla/Performance/about:memory' +--- +

about:memory è una pagina speciale all'interno di Firefox che ti permette di vedere, salvare, caricare e differenziare misure dettagliate sull'uso di memoria di Firefox. Ti permette anche di fare altre operazioni legate alla memoria come attivare i GC, CC; scaricare registri GC e CC; e scaricare resoconti DMD.

+ +

Come generare registri di memoria

+ +

Mettiamo che vuoi misurare l'uso di memoria di Firefox. Forse vorrai analizzarlo tu stesso, o forse qualcuno ti ha chiesto di usare about:memory per generare "registri di memoria" in modo che possano analizzare il problema che stai avendo. Segui questi passaggi.

+ + + +

Nota che in entrambi i casi i dati generati contengono dati sensibili come una lista completa delle pagine web che hai aperte in altri pannelli. Se non desideri condividere queste informazioni, puoi scegliere la spunta "anonymize" prima di premere su "Measure and save..." o "Measure...". Questo fara in modo che i dati sensibili vengano rimossi, ma renderà anche più difficile per gli altri investigare l'uso di memoria.

+ +

Caricare registri di memoria da file

+ +

Il modo più facile di caricare registri di memoria da file è usare il pulsante "Load...". Puoi anche usare il pulsante "Load and diff..." per avere la differenza tra due file di registro.

+ +

I file di registro singoli possono essere caricati automaticamente quando about:memory viene caricato aggiungendo una stringa di ricerca file, per esempio:

+ +
about:memory?file=/home/username/reports.json.gz
+
+ +

Questa è maggiormente utile quando carichi registri di memoria ottenuti da un dispositivo con S. O. firefox

+ +

I registri di memoria vengono salvati come file JSON gzipped. Questi file possono venire caricati per come sono, ma possono anche venire caricati dopo essere stati estratti.

+ +

Interpretare i registri di memoria.

+ +

Quasi tutto quello che vedi in about:memory ha un suggerimento esplicativo. Passa sopra un qualsiasi pulsante per vedere una descrizione di cosa fa. Passa sopra una qualsiasi misura per vedere una descrizione di cosa significa.

+ +

Informazioni fondamentali sulle misure.

+ +

Molte misure usano i byte come unita, ma alcune sono somme o percentuali.

+ +

Molte misure sono presentate all'interno di alberi. Ad esempio:

+ +
 585 (100.0%) -- preference-service
+ └──585 (100.0%) -- referent
+    ├──493 (84.27%) ── strong
+    └───92 (15.73%) -- weak
+        ├──92 (15.73%) ── alive
+        └───0 (00.00%) ── dead
+
+ +

I nodi a foglia rappresentano effettive misure; il valore di ogni nodo interno è la somma dei suoi children.

+ +

L'uso degli alberi permette alle misure di essere divide in ulteriori categorie, sotto-categorie, sotto-sotto-categorie, ecc., fin dove serve. Tutte le misure all'interno di un singolo albero non si soprappongono.

+ +

Possono venire aggiunti percorsi usando "/" come separatore. Per esempio, preference/referent/weak/dead rappresenta il rpercorso  che va all'ultimo nodo a foglia nell'esempio qua sopra. 

+ +

I sotto-alberi possono venire ristretti o allargati cliccandoci sopra. Se trovi un qualsiasi albero in particolare troppo grande da gestire, può essere utile restringere i sotto-alberi immediatamente sotto la radice e poi allargare graduatamente i sotto-alberi d'interesse.

+ +

Sezioni

+ +

Molti registri di memoria sono mostrati in base al processo, con un processo per sezione. All'interno delle misure di ogni processo, ci sono le seguenti sottosezioni.

+ +

Allocazioni esplicite

+ +

Questa sezione contiene un singolo albero, chiamato "explicit", che misure tutta la memoria allocata attraverso chiamate esplicite alle funzioni di allocazione di tipo heap (come malloc e new) e alle funzioni di allocazione non-heap (come mmap e VirtualAlloc).

+ +

Qui c'è un esempio di una sessione di un browser dove i pannelli erano aperti su cnn.com, techcrunch.con e artechnica.com. Vari sotto-alberi sono stati allargati ed altri ristretti per presentare il tutto meglio.

+ +
191.89 MB (100.0%) -- explicit
+├───63.15 MB (32.91%) -- window-objects
+│   ├──24.57 MB (12.80%) -- top(http://edition.cnn.com/, id=8)
+│   │  ├──20.18 MB (10.52%) -- active
+│   │  │  ├──10.57 MB (05.51%) -- window(http://edition.cnn.com/)
+│   │  │  │  ├───4.55 MB (02.37%) ++ js-compartment(http://edition.cnn.com/)
+│   │  │  │  ├───2.60 MB (01.36%) ++ layout
+│   │  │  │  ├───1.94 MB (01.01%) ── style-sheets
+│   │  │  │  └───1.48 MB (00.77%) -- (2 tiny)
+│   │  │  │      ├──1.43 MB (00.75%) ++ dom
+│   │  │  │      └──0.05 MB (00.02%) ── property-tables
+│   │  │  └───9.61 MB (05.01%) ++ (18 tiny)
+│   │  └───4.39 MB (02.29%) -- js-zone(0x7f69425b5800)
+│   ├──15.75 MB (08.21%) ++ top(http://techcrunch.com/, id=20)
+│   ├──12.85 MB (06.69%) ++ top(http://arstechnica.com/, id=14)
+│   ├───6.40 MB (03.33%) ++ top(chrome://browser/content/browser.xul, id=3)
+│   └───3.59 MB (01.87%) ++ (4 tiny)
+├───45.74 MB (23.84%) ++ js-non-window
+├───33.73 MB (17.58%) ── heap-unclassified
+├───22.51 MB (11.73%) ++ heap-overhead
+├────6.62 MB (03.45%) ++ images
+├────5.82 MB (03.03%) ++ workers/workers(chrome)
+├────5.36 MB (02.80%) ++ (16 tiny)
+├────4.07 MB (02.12%) ++ storage
+├────2.74 MB (01.43%) ++ startup-cache
+└────2.16 MB (01.12%) ++ xpconnect
+ +

Per capire i dettagli completi è richiesta della competenza, ma ci sono varie cose che vale la pena di segnalare.

+ + + +

Un po' dell'uso di memoria dei componenti aggiuntivi può venire identificato, come mostra il seguente esempio.

+ +
├───40,214,384 B (04.17%) -- add-ons
+│   ├──21,184,320 B (02.20%) ++ {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}/js-non-window/zones/zone(0x100496800)/compartment([System Principal], jar:file:///Users/njn/Library/Application%20Support/Firefox/Profiles/puna0zr8.new/extensions/%7Bd10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d%7D.xpi!/bootstrap.js (from: resource://gre/modules/addons/XPIProvider.jsm:4307))
+│   ├──11,583,312 B (01.20%) ++ jid1-xUfzOsOFlzSOXg@jetpack/js-non-window/zones/zone(0x100496800)
+│   ├───5,574,608 B (00.58%) -- {59c81df5-4b7a-477b-912d-4e0fdf64e5f2}
+│   │   ├──5,529,280 B (00.57%) -- window-objects
+│   │   │  ├──4,175,584 B (00.43%) ++ top(chrome://chatzilla/content/chatzilla.xul, id=4293)
+│   │   │  └──1,353,696 B (00.14%) ++ top(chrome://chatzilla/content/output-window.html, id=4298)
+│   │   └─────45,328 B (00.00%) ++ js-non-window/zones/zone(0x100496800)/compartment([System Principal], file:///Users/njn/Library/Application%20Support/Firefox/Profiles/puna0zr8.new/extensions/%7B59c81df5-4b7a-477b-912d-4e0fdf64e5f2%7D/components/chatzilla-service.js)
+│   └───1,872,144 B (00.19%) ++ treestyletab@piro.sakura.ne.jp/js-non-window/zones/zone(0x100496800)
+ +

Altre cose che vale la pena di far notare sono come segue:

+ + + +

Altre misure

+ +

Questa sezione contiene alberi multipli, inclusde molti che si incrociano le misure nell'albero "explicit". Per esempio, nell'albero "explicit" tutti i DOM e le misure dei layout sono divise da finestra a finestra, ma in "Other Measurements" quelle misure sono aggregate in totali per l'intero browser, come mostra il seguente esempio.

+ +
26.77 MB (100.0%) -- window-objects
+├──14.59 MB (54.52%) -- layout
+│  ├───6.22 MB (23.24%) ── style-sets
+│  ├───4.00 MB (14.95%) ── pres-shell
+│  ├───1.79 MB (06.68%) ── frames
+│  ├───0.89 MB (03.33%) ── style-contexts
+│  ├───0.62 MB (02.33%) ── rule-nodes
+│  ├───0.56 MB (02.10%) ── pres-contexts
+│  ├───0.47 MB (01.75%) ── line-boxes
+│  └───0.04 MB (00.14%) ── text-runs
+├───6.53 MB (24.39%) ── style-sheets
+├───5.59 MB (20.89%) -- dom
+│   ├──3.39 MB (12.66%) ── element-nodes
+│   ├──1.56 MB (05.84%) ── text-nodes
+│   ├──0.54 MB (02.03%) ── other
+│   └──0.10 MB (00.36%) ++ (4 tiny)
+└───0.06 MB (00.21%) ── property-tables
+ +

Alcuni degli alberi di questa sezione misurano cose che non si incrociano con le misure dell'albero "explicit", come quelle nell'esempio "preference service" qua sopra.

+ +

Per ultimo, alla fine di questa sezione ci sono misure individuali, come mostra l'esempio seguente.

+ +
    0.00 MB ── canvas-2d-pixels
+    5.38 MB ── gfx-surface-xlib
+    0.00 MB ── gfx-textures
+    0.00 MB ── gfx-tiles-waste
+          0 ── ghost-windows
+  109.22 MB ── heap-allocated
+        164 ── heap-chunks
+    1.00 MB ── heap-chunksize
+  114.51 MB ── heap-committed
+  164.00 MB ── heap-mapped
+      4.84% ── heap-overhead-ratio
+          1 ── host-object-urls
+    0.00 MB ── imagelib-surface-cache
+    5.27 MB ── js-main-runtime-temporary-peak
+          0 ── page-faults-hard
+    203,349 ── page-faults-soft
+  274.99 MB ── resident
+  251.47 MB ── resident-unique
+1,103.64 MB ── vsize
+ +

Alcune misure importanti sono come segue.

+ + diff --git a/files/it/mozilla/performance/index.html b/files/it/mozilla/performance/index.html new file mode 100644 index 0000000000..828fe485be --- /dev/null +++ b/files/it/mozilla/performance/index.html @@ -0,0 +1,143 @@ +--- +title: Performance +slug: Mozilla/Performance +tags: + - Add-ons + - Debugging + - Development + - Mozilla + - NeedsTranslation + - Performance + - TopicStub +translation_of: Mozilla/Performance +--- +

The articles linked to from here will help you improve performance, whether you're developing core Mozilla code or an add-on.

+ + + + + + + + +
+

Documentation

+ +
+
Reporting a Performance Problem
+
A user friendly guide to reporting a performance problem. A development environment is not required.
+
Benchmarking
+
Tips on generating valid performance metrics.
+
Performance best practices in extensions
+
A performance "best practices" guide for extension developers.
+
Measuring Add-on Startup Performance
+
A guide for add-on developers on how to set up a performance testing environment.
+
XUL School: Add-on Performance
+
Tips for add-on developers to help them avoid impairing application performance.
+
GPU performance
+
Tips for profiling and improving performance when using a GPU.
+
Scroll-Linked Effects
+
Information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.
+
Automated Performance Testing and Sheriffing
+
Information on automated performance testing and sheriffing at Mozilla.
+
+ +

View all pages tagged with "Performance"...

+ +

Memory profiling and leak detection tools

+ +
+
The Developer Tools "Memory" panel
+
The memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.
+
+ +
+
about:memory
+
about:memory is the easiest-to-use tool for measuring memory usage in Mozilla code, and is the best place to start. It also lets you do other memory-related operations like trigger GC and CC, dump GC & CC logs, and dump DMD reports. about:memory is built on top of Firefox's memory reporting infrastructure.
+
DMD
+
DMD is a tool that identifies shortcomings in about:memory's measurements, and can also do multiple kinds of general heap profiling.
+
Are We Slim Yet
+
areweslimyet.com (a.k.a. AWSY) is a memory usage and regression tracker.
+
BloatView
+
BloatView prints per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class. It is used as part of Mozilla's continuous integration testing.
+
Refcount tracing and balancing
+
Refcount tracing and balancing are ways to track down leaks caused by incorrect uses of reference counting. They are slow and not particular easy to use, and thus most suitable for use by expert developers.
+
GC and CC logs
+
GC and CC logs can be generated and analyzed to in various ways. In particular, they can help you understand why a particular object is being kept alive.
+
Valgrind
+
Valgrind is a tool that detects various memory-related problems at runtime, including leaks. Valgrind is used as part of Mozilla's continuous integration testing, though the coverage is limited because Valgrind is slow.
+
LeakSanitizer
+
LeakSanitizer (a.k.a. LSAN) is similar to Valgrind, but it runs faster because it uses static source code instrumentation. LSAN is part of Mozilla's continuous integration testing, with most tests running through it as part of the AddressSanitizer (a.k.a. ASAN) test jobs.
+
Apple tools
+
Apple provides some tools for Mac OS X that report similar problems to those reported by LSAN and Valgrind. The "leaks" tool is not recommended for use with SpiderMonkey or Firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see bug 390944).
+
Leak Gauge
+
Leak Gauge is a tool that can be used to detect certain kinds of leaks in Gecko, including those involving documents, window objects, and docshells.
+
LogAlloc
+
LogAlloc is a tool that dumps a log of memory allocations in Gecko. That log can then be replayed against Firefox's default memory allocator independently or through another replace-malloc library, allowing the testing of other allocators under the exact same workload.
+
Memory Profiler
+
The memory profiler samples allocation events and provides different views to analyze the allocation characteristic.
+
+ +

See also the documentation on Leak-hunting strategies and tips.

+ 		+

Profiling and performance tools

+ +
+
Profiling with the Developer Tools Profiler
+
The profiler built into the developer tools has a high-level waterfall, detailed call tree, allocations and GC profiling, and flame graphs. It is available on all platforms and release channels, and also supports remote profiling b2g and Fennec.
+
+ +
+
Profiling with the Gecko Profiler {{ gecko_minversion_inline("16.0") }}
+
The Gecko Profiler is a good tool to start with, particularly for understanding where time is spent within C++ code in Firefox.
+
Profiling with Instruments
+
How to use Apple's Instruments tool to profile Mozilla code.
+
Profiling with Xperf
+
How to use Microsoft's Xperf tool to profile Mozilla code.
+
Profiling with Concurrency Visualizer
+
How to use Visual Studio's Concurrency Visualizer tool to profile Mozilla code.
+
Profiling with Zoom
+
Zoom is a profiler for Linux done by the people who made Shark
+
Measuring performance using the PerfMeasurement.jsm code module {{ gecko_minversion_inline("2.0") }}
+
Using PerfMeasurement.jsm to measure performance data in your JavaScript code.
+
Adding a new Telemetry probe
+
Information on how to add a new measurement to the Telemetry performance-reporting system
+
Profiling JavaScript with Shark (obsolete - replaced by Instruments)
+
How to use the Mac OS X Shark profiler to profile JavaScript code in Firefox 3.5 or later.
+
Profiling with Shark (obsolete - replaced by Instruments)
+
How to use Apple's Shark tool to profile Mozilla code.
+
Investigating CSS Performance
+
How to figure out why restyle is taking so long
+
+ +

Power profiling

+ +
+
Power profiling overview
+
This page provides an overview of relevant information, including details about hardware, what can be measured, and recommended approaches. It should be the starting point for anybody new to power profiling.
+
tools/power/rapl (Mac, Linux)
+
tools/power/rapl is a command-line utility in the Mozilla codebase that uses the Intel RAPL interface to gather direct power estimates for the package, cores, GPU and memory.
+
powermetrics (Mac-only)
+
powermetrics is a command-line utility that gathers and displays a wide range of global and per-process measurements, including CPU usage, GPU usage, and various wakeups frequencies.
+
TimerFirings logging (All platforms)
+
TimerFirings logging is a built-in logging mechanism that prints data on every time fired.
+
Activity Monitor, Battery Status Menu and top (Mac-only)
+
The battery status menu, Activity Monitor and top are three related Mac tools that have major flaws but often consulted by users, and so are worth understanding.
+
Intel Power Gadget (Windows, Mac, Linux)
+
Intel Power Gadget provides real-time graphs for package and processor RAPL estimates. It also provides an API through which those estimates can be obtained.
+
perf (Linux-only)
+
perf is a powerful command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups.
+
turbostat (Linux-only)
+
turbostat is a command-line utility that gathers and displays various power-related measurements, with a focus on per-CPU measurements such as frequencies and C-states.
+
powertop (Linux-only)
+
powertop is an interactive command-line utility that gathers and displays various power-related measurements.
+
+ + + +
+
JavaScript, XPCOM, Developing Mozilla, Extensions, Addons
+
+
+ +

 

diff --git a/files/it/mozilla/preferences/index.html b/files/it/mozilla/preferences/index.html new file mode 100644 index 0000000000..1169ecabf1 --- /dev/null +++ b/files/it/mozilla/preferences/index.html @@ -0,0 +1,48 @@ +--- +title: Preferences +slug: Mozilla/Preferences +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Preferences +--- +

The preference system makes it possible to store data for Mozilla applications using a key/value pairing system. These articles provide information about how to use the preference system.

+ + + + + + + +
+

Documentation

+
+
Preferences system
+
An introduction to using the preference system in Mozilla.
+
XUL School: Handling preferences
+
The XUL School tutorial chapter on preferences.
+
Mozilla preference reference
+
A reference guide to all Mozilla preferences; currently a work in progress.
+
A brief guide to Mozilla preferences
+
An introductory guide to where preferences are stored and other useful information about the core preference system.
+
Using preferences from application code {{gecko_minversion_inline("6.0")}}
+
Firefox 6 introduced static functions for accessing preferences efficiently from within application code. This API is not available for add-ons, but if you're working on a Gecko application, this API is the preferred way to access preferences.
+
Mozilla networking preferences
+
A guide to key networking-related preferences.
+
Mozilla preferences for uber-geeks
+
A guide to preferences that only truly elite geeks should play with.
+
+

View all pages tagged with "Preferences"...

+ 		+

Examples

+
+
Code snippets
+
Preference-related code snippets.
+
Adding preferences to an extension
+
How to add preferences to an existing extension.
+
+ + +
diff --git a/files/it/mozilla/preferences/una_breve_guida_alle_impostazioni_di_mozilla/index.html b/files/it/mozilla/preferences/una_breve_guida_alle_impostazioni_di_mozilla/index.html new file mode 100644 index 0000000000..6256382fe5 --- /dev/null +++ b/files/it/mozilla/preferences/una_breve_guida_alle_impostazioni_di_mozilla/index.html @@ -0,0 +1,110 @@ +--- +title: Una breve guida alle preferenze di Mozilla +slug: Mozilla/Preferences/Una_breve_guida_alle_impostazioni_di_Mozilla +translation_of: Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences +--- +
+

Questo articolo è rivolto agli utenti con conoscenze avanzate e agli amministratori di sistema. In questo articolo troverete una panoramica generale delle impostazioni di Mozilla ( note come preferenze ), compreso l'elenco dei file in cui esse vengono memorizzate ed un'analisi della sequenza di caricamento di questi file, oltre alle informazioni necessarie alla modifica di tali impostazioni.

+
+ +

Cos'è una preferenza?

+ +
+

Una preferenza è un qualsiasi valore oppure un particolare comportamento che possa essere selezionato fra altri valori o comportamenti ( presumibilmente, un valore o un comportamento è "preferibile" ad un altro ). Le modifiche alle preferenze, apportate attraverso l'interfaccia utente, normalmente diventano effettive immediatamente. I valori vengono salvati nel profilo utente ( nel file prefs.js ), sia per Firefox che per Thunderbird.

+ +

Una preferenza viene letta da un file e può invocare fino a quattro metodi: pref(), user_pref(), sticky_pref() e lockPref(). Tutti i file che conservano le preferenze possono invocare pref(), user_pref() e sticky_pref(), mentre il file di configurazione può invocare anche lockPref().

+
+ +

I file delle preferenze

+ +
+

Per proteggere la privacy, prevenendo la possibilità di un caricamento involontario, nel browser, di un file delle preferenze, la prima riga del file viene resa "un-parseable" ( non analizzabile ) e saltata in fase di caricamento. La sola eccezione è per il file user.js .

+ +

Al lancio dell'applicazione, vengono caricati diversi file delle preferenze:

+ +
+
I file delle preferenze di default
+
+

Firefox trova le preferenze di default in più file, tutti all'interno della directory dell'applicazione:

+ +
    +
  • greprefs.js - contiene le preferenze condivise da tutte le applicazioni che utilizzano la piattaforma Mozilla.
    • +
  • services/common/services-common.js - contiene le preferenze per alcuni servizi condivisi. Verosimilmente, potrebbe essere incluso in qualche altro file.
    • +
  • defaults/pref/services-sync.js - contiene le preferenze di default per la sincronizzazione di Firefox ( Firefox Sync ): salvato anche in posizione strana.
    • +
  • browser/app/profile/channel-prefs.js - un file che contiene il nome del canale dell'utente da usare per gli aggiornamenti. Viene tenuto separato dalle altre preferenze, poichè può agire sulle modalità di applicazione degli aggiornamenti.
    • +
  • browser/app/profile/firefox.js - contiene le preferenze di default specifiche per Firefox.
    • +
  • browser/app/profile/firefox-branding.js - contiene le preferenze di default specifiche per la versione di Firefox installata (Nightly, Aurora, Beta, Release).
    • +
  • browser/defaults/preferences/firefox-l10n.js - contiene le preferenze di default specifiche per la lingua installata in Firefox. Nessuno degli altri file delle  preferenze contiene preferenze locali specifiche.
    • +
+
+
Config. file
+
+

Un file di configurazione, normalmente con estensione .cfg, può essere invocato da un file di default delle preferenze utilizzando la preferenza general.config.filename. Questo file permette il blocco delle preferenze (preference locking) attraverso la funzione lock_pref(). I dettagli sul file di configurazione sono al di fuori dello scopo di questo documento.

+
+
User pref. files
+
+

Nella directory di profilo ci sono due file delle preferenze riservate all'utente:  prefs.js e user.js.  prefs.js viene generato automaticamente dall'applicazione e non dovrebbe essere modificato manualmente, mentre user.js è un file opzionale che l'utente può creare per sovrascrivere le preferenze inizializzate in altri file delle preferenze.

+
+
+
+ +

Caricamento delle preferenze e risoluzione

+ +
+

Al lancio dell'applicazione, l'applicazione carica le preferenze nel seguente ordine:

+ +
    +
  1. +

    tutti i file di default delle preferenze.

    +
    2. +
  2. +

    Se c'è, il file di configurazione.

    +
    3. +
  3. +

    I file delle preferenze dell'utente: il file prefs.js prima, il file user.js  poi.

    +
    4. +
+ +

I conflitti vengono risolti in favore dell'ultimo record caricato; per esempio, user.js ha la precedenza su prefs.js .

+ +

Se l'applicazione incontra un qualsiasi errore durante il caricamento di un file di default delle preferenze, l'applicazione emette un messaggio di avviso che informa che il caricamento del file è fallito e si chiude. Questo permette agli amministratori di sistema di sapere velocemente se c'è un errore di configurazione nell'installazione. Se l'applicazione incontra un qualsiasi errore durante il caricamento di un file delle preferenze dell'utente, invece, l'applicazione emette un messaggio di avviso, ma continua nell'esecuzione.

+
+ +

Salvare le preferenze

+ +
+

Normalmente, quando un utente conferma una modifica di una preferenza, effettuata attraverso l'interfaccia utente, come, ad esempio, la finestra di dialogo Preferenze, l'applicazione salva la modifica sovrascrivendo il file prefs.js . Alla chiusura dell'applicazione, tutte le preferenze utente vengono salvate nel file prefs.js . Questo significa anche che le preferenze inizialmente impostate nel file user.js verranno anche salvate nel file prefs.js.

+ +

NON modificare il file prefs.js direttamente.

+ +

Nota: l'applicazione non modifica mai il file user.js. In questo modo, al lancio dell'applicazione, il file user.js sovrascrive le preferenze in conflitto con la precedente sessione dell'applicazione.

+ +

Quando viene scritto il file prefs.js, vengono salvate solo le preferenze utente che hanno valori differenti dai valori di default. La sola eccezione a questo è la preferenza letta utilizzando la funzione sticky_pref() - questa preferenza viene scritta comunque, basta che contenga un valore dato dall'utente, anche se questo valore fosse identico al valore di default.

+
+ +

Modificare le preferenze

+ +
+

Gli utenti avanzati possono impostare le preferenze utilizzando l'editor avanzato delle preferenze, digitando about:config nella barra degli indirizzi del browser. Questa interfaccia utente ( UI ) non è da raccomandare alla gran parte degli utenti. Le modifiche alle preferenze da effettuarsi da un programma possono essere richieste utilizzando il modulo JS Preferences.jsm ( JavaScript Module ), oppure i metodi della classe statica mozilla::Preferences del codice C++.

+ +

Modificare i valori di default

+ +

Un amministratore di sistema può modificare una preferenza di default in due modi:

+ +
    +
  1. l'amministratore può aggiungere un file delle preferenze chiamato all-companyname.js (install_directory/browser/defaults/preferences/all-companyname.js). Questo file verrà analizzato per ultimo, nel corso del processo di caricamento delle preferenze.
    2. +
  2. +

    l'amministratore, in alternativa, può salvare il file user.js nella directory app_dir/defaults/profile/ ; in questo modo, una copia del file user.js verrà salvata in ogni nuovo profilo creato. Questo metodo ha il vantaggio di riportare, ad ogni start-up, le preferenze ai valori voluti dall'amministratore. Ricorda, però, che un utente, detenendo i privilegi necessari ad accedere alla propria directory di profilo, potrà sempre modificare i valori di default, sempre che sappia come farlo. Un altro svantaggio di questa alternativa è che i profili esistenti non verranno influenzati dai nuovi valori assegnati. Questo metodo è considerato user-hostile ( ostile all'utente ). Qualsiasi uso di questa tecnica, fatta da software quali le estensioni Firefox, al fine di sovrascrivere le preferenze utente normali, darà, come risultato, quello di essere inseriti nella blocklist di Firefox oppure di vedere rimosse forzatamente le preferenze stesse.

    +
    3. +
+ +
+

Nota: a causa degli abusi del file user.js, il supporto per il file user.js potrebbe essere rimosso nelle versioni future di Firefox.

+
+
+ +

Le Sticky Preference

+ +

Le Sticky preference furono introdotte in Firefox 40, via bug 1098343.

+ +

Le Sticky preference vengono create con la funzione sticky_pref(). Queste preferenze si comportano come le preferenze di default, ma ovunque venga stabilito un valore per la preferenza, quel valore viene sempre scritto, anche se uguale al valore di default. Le Sticky preference vengono usate, generalmente, per le preferenze che hanno un valore di default differente per ciascun canale. L'intento è di impostare il valore di una preferenza per un canale e far sì che quel valore resti invariato, anche utilizzando un differente canale, per il quale sia previsto un diverso valore di default. Per esempio, ipotizziamo che Nightly abbia una preferenza "some.preference" con valore di default impostato a "true", mentre DeveloperEdition assegna alla stessa preferenza il valore di default "false". Ipotizziamo ora che l'utente desideri che la preferenza abbia valore "true" per entrambi i canali. Se la preferenza non è una Sticky preference e l'utente esegue DeveloperEdition e cambia la preferenza in "true", la modifica verrà salvata perchè non è uguale al valore di default. Quando l'utente eseguirà Nightly, la preferenza avrà lo stesso valore di default e, di conseguenza, non verrà salvata da Nightly. Quando l'utente eseguirà ancora DeveloperEdition, il valore della preferenza sarà "false", poichè  Nightly non aveva salvato alcuna preferenza utente. Se la preferenza viene definita come Sticky preference, il valore "true" verrà salvato da Nightly anche se riconosciuto come valore corrente di default, così che quando verrà eseguita DeveloperEdition, la preferenza avrà il valore desiderato di "true".

diff --git a/files/it/mozilla/projects/index.html b/files/it/mozilla/projects/index.html new file mode 100644 index 0000000000..6291137b31 --- /dev/null +++ b/files/it/mozilla/projects/index.html @@ -0,0 +1,14 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +

{{ draft() }}

+

This page needs to become a pretty index to Mozilla projects whose documentation is located under it.

+

{{ LandingPageListSubpages() }}

diff --git a/files/it/mozilla/projects/nss/esempi_codice_nss/index.html b/files/it/mozilla/projects/nss/esempi_codice_nss/index.html new file mode 100644 index 0000000000..e98ceaa015 --- /dev/null +++ b/files/it/mozilla/projects/nss/esempi_codice_nss/index.html @@ -0,0 +1,28 @@ +--- +title: Esempi di Codice NSS +slug: Mozilla/Projects/NSS/Esempi_Codice_NSS +tags: + - Esempi NSS +translation_of: Mozilla/Projects/NSS/NSS_Sample_Code +--- +

Esempi di Codice NSS

+ +

La collezione di esempi di codice che segue, mostra come NSS possa essere usato per le operazioni crittografiche, la gestione di certificati, SSL, ecc... Mostra inoltre alcune buone norme nell'applicazione della crittografia.

+ +

 

+ +
    +
  1. Esempio di Codice 1: Generazione di Chiavi e Trasporto tra server
    2. +
  2. Esempio di Codice 2: Crittografia Simmetrica
    3. +
  3. Esempio di Codice 3: Hashing, MAC
    4. +
  4. Esempio di Codice 4: Crittografia PKI
    5. +
  5. Esempio di Codice 5: Crittografia PKI con chiave pubblica e privata raw in formato DER
    6. +
  6. Sample Code 6: Chiavi Simmetriche Permanenti in database NSS
    7. +
+ +


+ Questi esempi dono molto vecchi e necessitano di essere sostituiti. Vedi https://bugzilla.mozilla.org/show_bug.cgi?id=490238

+ +

C'è una git repo temporanea con il lavoro in corso

+ +
git clone git://fedorapeople.org/~emaldonado/samples.git
diff --git a/files/it/mozilla/projects/nss/index.html b/files/it/mozilla/projects/nss/index.html new file mode 100644 index 0000000000..718314f916 --- /dev/null +++ b/files/it/mozilla/projects/nss/index.html @@ -0,0 +1,198 @@ +--- +title: Network Security Services +slug: Mozilla/Projects/NSS +tags: + - JSS + - NSS + - NeedsMigration + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Projects/NSS +--- +

Network Security Services (NSS) is a set of libraries designed to support cross-platform development of security-enabled client and server applications. Applications built with NSS can support SSL v2 and v3, TLS, PKCS #5, PKCS #7, PKCS #11, PKCS #12, S/MIME, X.509 v3 certificates, and other security standards.

+

For detailed information on standards supported, see Overview of NSS. For a list of frequently asked questions, see the FAQ.

+

NSS is available under the Mozilla Public License. For information on downloading NSS releases as tar files, see Download PKI Source.

+

If you're a developer and would like to contribute to NSS, you might want to read the documents highlevel overview of internal details of NSS and getting started with NSS.

+ + + + + + + +
+

Documentation

+

Background Information

+
+
+ Overview of NSS
+
+ Provides a brief summary of NSS and its capabilities.
+
+ NSS FAQ
+
+ Answers basic questions about NSS.
+
+ Introduction to Public-Key Cryptography
+
+ Explains the basic concepts of public-key cryptography that underlie NSS.
+
+ Introduction to SSL
+
+ Introduces the SSL protocol, including information about cryptographic ciphers supported by SSL and the steps involved in the SSL handshake.
+
+

Getting Started

+
+
+ NSS Releases
+
+ This page contains information about the current and past releases of NSS.
+
+ Get the source code and Build it
+
+ Instructions on how to build NSS on the different supported platforms.
+
+ Get Mozilla Source Code Using Mercurial
+
+ Information about with working with Mercurial.
+
+ Get Mozilla Source Code Using CVS (deprecated)
+
+ Old deprecated CVS documentation.
+
+

NSS APIs

+
+
+ Introduction to Network Security Services
+
+ Provides an overview of the NSS libraries and what you need to know to use them.
+
+ NSS Public Functions
+
+ Summarizes the APIs exported by the NSS shared libraries.
+
+ NSS Reference
+
+ API used to invoke SSL operations.
+
+ NSS API Guidelines
+
+ Explains how the libraries and code are organized, and guidelines for developing code (naming conventions, error handling, thread safety, etc.)
+
+ NSS Technical Notes
+
+ Links to NSS technical notes, which provide latest information about new NSS features and supplementary documentation for advanced topics in programming with NSS.
+
+

Tools, testing, and other technical details

+
+
+ Build Instructions for NSS
+
+ Describe how to check out and build NSS releases.
+
+
+
+ NSS Developer Tutorial
+
+ How to make changes in NSS. Coding style, maintaining ABI compatibility.
+
+
+
+ NSS Tools
+
+ Tools for developing, debugging, and managing applications that use NSS.
+
+ Sample Code
+
+ Demonstrates how NSS can be used for cryptographic operations, certificate handling, SSL, etc.
+
+ NSS 3.2 Test Suite
+
+ Archived version. Describes how to run the standard NSS tests.
+
+ NSS Performance Reports
+
+ Archived version. Links to performance reports for NSS 3.2 and later releases.
+
+ Encryption Technologies Available in NSS 3.11
+
+ Archived version. Lists the cryptographic algorithms used by NSS 3.11.
+
+ NSS 3.1 Loadable Root Certificates
+
+ Archived version. Describes the scheme for loading root CA certificates.
+
+ cert7.db
+
+ Archived version. General format of the cert7.db database.
+
+

PKCS #11 information

+ +
+
+

CA certificates pre-loaded into NSS

+ +
+
+

NSS is built on top of Netscape Portable Runtime (NSPR)

+
+
+ Netscape Portable Runtime
+
+ NSPR project page.
+
+ NSPR Reference
+
+ NSPR API documentation.
+
+

Additional Information

+ +

Testing

+ +

Planning

+

Information on NSS planning can be found at wiki.mozilla.org, including:

+ + 		+

Community

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

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

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

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

+ + +
+

 

diff --git a/files/it/mozilla/qa/bug_writing_lineeguida/index.html b/files/it/mozilla/qa/bug_writing_lineeguida/index.html new file mode 100644 index 0000000000..31eca62c6d --- /dev/null +++ b/files/it/mozilla/qa/bug_writing_lineeguida/index.html @@ -0,0 +1,253 @@ +--- +title: Linee guida per la segnalazione dei Bug +slug: Mozilla/QA/Bug_writing_lineeguida +translation_of: Mozilla/QA/Bug_writing_guidelines +--- +
+

Se avete bisogno di aiuto con i software Mozilla (per esempio con Firefox, Seamonkey o Thunderbird), usate una delle support options disponibili. Non modifcate questa pagina!

+
+ +

Questa pagina da per scontato che vogliate contribuire al progetto Mozilla raccogliendo abbastanza informazioni per poter caricare un bug report utile, nel sistema di bug tracking di Mozilla. Grazie!

+ +

Se siete nuovi nella segnalazione dei bug, potreste voler provare ad ottenere aiuto da i contributori di maggior esperienza. Controllate la sezione Community nella pagina  QA (Question and Answers - Domande e risposte) per avere indicazioni. Se vi accingete a segnalare un bug  Firefox, potete anche ottenere assistenza nel canale #firefox su irc.mozilla.org. Per altri progetti (es., Thunderbird, SeaMonkey) potete trovare  il canale appropriato su IRC.

+ +

Come segnalare un bug

+ +

Aprite un nuovo bug report per ogni problema!

+ +

Così verrà completato un flusso di correzione bug (bugfix) efficace per ogni  problema.

+ +

Altri dettagli cui prestare attenzione

+ +
    +
  1. Descrivere i passi per riprodurre il bug: + +
      +
    • Se avete precisi passi per riprodurre — ottimo! — siete sulla buona strada per segnalare un bug report utile.
      • +
    • Se riuscite a riprodurre occasionalmente, ma non a seguito di specifici passi, dovete  fornire ulteriori informazioni perchè il bug report sia utile.
      • +
    • Se non riuscite a riprodurre il problema, probabilmente non è utile riportarlo, a meno che non riusciate a fornire informazioni univoche circa il suo verificarsi.
      • +
    +
    2. +
  2. assicuratevi che il vs software sia aggiornato. L'ideale sarebbe, testare il problema conuna versione in fase di sviluppo per vedere se il bug è stato già corretto (e.g. Firefox Beta, Aurora, o l'avanzatissima Nightly).
    3. +
  3. Quando riportate un bug di Firefox, prima verificate se potete riprodurlo in un nuovo profilo Firefox. Se il bug si verifica solo nel vostro profilo esistente, provate a identificare quali settings, extensions, o files nel vostro profilo sono necessari per riprodurre il bug. +
      +
    • Se il bug sembra "eclatante" (cioè ovviamente che affligge una larga porzione di utenti),  probabilmente c'è qualcosa di insolito nella configurazione che è una parte necessaria dei passaggi per riprodurre il bug. Hai molte più possibilità di capirlo rispetto a uno sviluppatore che non ha accesso al tuo sistema.
      • +
    • Se il bug rientra in uno dei tipi specifici di bug elencati in una sezione sottostante, potrebbe comunque essere utile anche se non potete riprodurlo in un nuovo profilo Firefox.
      +  
      • +
    +
    4. +
  4. Apri il modulo Inserisci un nuovo bug  (Enter a new bug) che ti guiderà nella maggior parte del processo di segnalazione dei bug: +
      +
    • Crea un account Bugzilla se non ne hai già uno, seleziona il prodotto con il bug.
      • +
    • Inserite un riassunto univoco chiaro (clear unique summary) come descritto nel seguito; controlla se il bug è già stato segnalato (se vuoi essere più completo, c'è una guida avanzata sullo screening dei bug duplicati).
      • +
    • Fornite passaggi precisi per riprodurre, risultati attesi e risultati effettivi come descritto nella sezione seguente.
      • +
    • Fornite ulteriori informazioni (anche descritte di seguito), soprattutto se non è possibile riprodurre il bug in un nuovo profilo; e / o segnalando crash, utilizzo della memoria, prestazioni, bug di regressione; o se il problema è con un sito web specifico.
      • +
    +
    5. +
  5. In caso di problemi multipli, si prega di presentare segnalazioni di bug separate.
    6. +
+ +

Scrivere un riassunto chiaro

+ +

Come descrivereste il bug usando approssimativamente 10 parole? Questa è la prima parte del vostro bug report che un triager o uno sviluppatore vedrà.

+ +

Un buon riassunto deve identificare il bug report in maniera rapida e chiara. Esso deve spiegare il problema, non suggerire la soluzione.

+ + + + + +

Scrivere passi precisi per riprodurre

+ +

Come può uno sviluppatore riprodurre il bug sul proprio computer?
+
+ I passaggi per la riproduzione sono la parte più importante di qualsiasi segnalazione di bug. Se uno sviluppatore è in grado di riprodurre il bug, è molto probabile che il bug sia corretto. Se i passaggi non sono chiari, potrebbe non essere nemmeno possibile sapere se il bug è stato corretto.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Cosa includere in un bug report?Bene (preciso) esempio +

Cattivo (inpreciso)

+
Indicare se è possibile riprodurre il bug a volontà, occasionalmente o per niente.Posso riprodurlo eseguendo i passi seguenti: 
+

Descrivi il tuo metodo di interazione con Firefox oltre all'intento di ogni passaggio.

+ 		+

1. Avvia Firefox facendo clic sull'icona del desktop
+ 2. Premere Cmd + N (o Ctrl + N per utenti Windows) per aprire una nuova finestra del browser
+ 3. Incolla https://mail.google.com/ nella barra degli indirizzi e premere Invio

+ 		Apri Gmail in un'altra finestra
+

Dopo i passaggi, descrivere con precisione il risultato (effettivo) osservato e il risultato atteso. Separare chiaramente i fatti (osservazioni) dalle speculazioni.

+ 		Risultati previsti: la mia Posta in arrivo viene visualizzata correttamente.
+ Risultati effettivi: nella mia Posta in arrivo viene visualizzato il messaggio "Il browser non supporta i cookie (errore -91)".		 +

"Non funziona"

+ +

"La pagina è mostrata non correttamente"

+
+ +

Providing additional information

+ +

The following information is requested for most bug reports. You can save time by providing this information below the Expected results. If you need to attach multiple files, you can do so after submitting the report.

+ +

For specific types of bugs

+ +

If you are reporting a crash bug, please include a Breakpad ID or attach stack trace, and include the crash signature in the bug summary as well as in the Crash Signature field.

+ +

If you are reporting a memory use or leak bug, please attach the output of about:memory. Ideally, find steps to reproduce an increase in what is shown in about:memory (even after clicking the "Minimize memory usage" button at the bottom). If you have trouble finding steps to reproduce, try the Firefox Support page titled Firefox Uses Too Much Memory (Ram) - How to Fix. If you are a C++ developer, more precise tools are available.

+ +

If you are reporting a bug about slowness or high CPU usage, please provide a link to the performance profile in the bug.

+ +

If you are reporting a hang (beachball on OS X or "not responding" on Windows), please follow the instructions in How to Report a Hung Firefox.

+ +

If you are reporting a bug involving a Flash hang, please visit https://wiki.mozilla.org/Flash/Hang_Debugging to learn how to provide useful information for developers.

+ +

If you are reporting a bug involving a specific web page, please try to make a reduced testcase and attach it to the bug report. If you don't have time or expertise, please report the issue to webcompat.com instead, where our volunteers will do this for you.

+ +

If the bug was recently introduced, finding a regression window can help identify the cause of the bug.

+ +

What if my bug seems "random" or "intermittent"?

+ +

For most Firefox bugs

+ +

You should provide the following information for most Firefox bugs.

+ + + + + + + + + + + + + + + + + + + + +
What should you include in a bug report?Example
Indicate if the problem can be reproduced using a new Firefox profile and any changes you need to make in order to reproduce.The problem can be reproduced in a new profile, but only if Preferences -> Privacy & Security -> Tracking Protection is selected.
If you can only reproduce with an existing profile try to figure out what settings, extensions, or files in your profile are needed to reproduce the bug. If you skip the step, save the troubleshooting information from about:support to a file and attach it to the bug report.I can't reproduce in a new profile, about:support information from the offending profile is attached.
+

Indicate if the problem can be reproduced using the latest Nightly build. Include the Build ID from about:support.

+ +

If possible, test using the new Firefox profile you created. If you need to test the Nightly build with your regular profile, you might want to back up the profile first, since the pre-release build may corrupt your data.

+ 		The problem can be reproduced on the latest Nightly (Build ID 20170416100136).
+ +

 

+ +
+

Original document information

+ +
    +
  • Author(s): Jesse Ruderman, Gervase Markham
    • +
  • Other Contributors: Eli Goldberg, Claudius Gayle, Jan Leger, Felix Miata, Peter Mock, Chris Pratt, Chris Yeh, and others.
    • +
+
+ +

 

+ +
+

Advanced

+ +

Finding the correct product and component

+ +

You will be asked to categorize your bug into a "product" and a "component" within that product, in order to direct your report to the correct developers.

+ +

If you're using Firefox, the bug is most likely in "Firefox", "Toolkit", or "Core".

+ + + +

When in doubt, search for similar bugs and see which component they are in.

+ +

If none of the components seem appropriate, look for a "General" component in the most appropriate product.

+ +

General Outline of a Bug Report

+ +
+

Most of the following article has been merged into this page from QMO: How to write a proper bug

+
+ + + +

 

+ +
+

Original document information

+ +
    +
  • Author(s): Aakash Desai
    • +
  • Date last modified: June 3, 2013 at 2:41 am PST
    • +
+
diff --git a/files/it/mozilla/qa/index.html b/files/it/mozilla/qa/index.html new file mode 100644 index 0000000000..99a8a38dd2 --- /dev/null +++ b/files/it/mozilla/qa/index.html @@ -0,0 +1,251 @@ +--- +title: 'QA: Quality assurance at Mozilla' +slug: Mozilla/QA +tags: + - Landing + - NeedsTranslation + - QA + - Testing + - TopicStub +translation_of: Mozilla/QA +--- +

The Mozilla Quality Assurance (QA) team drives software quality assurance activities across Mozilla and plays a key role in releasing a diverse range of software products on schedule. Within each project in Mozilla, we work to explore new features, write and execute tests, uncover and file bugs, build and maintain tools, collect and analyze metrics, and support the release world-class products that promote the open Web.

+ +

Here you'll find articles and tools to help you gear up to join the QA team testing Firefox to ensure that each release is as good as it can be.

+ +

Get started

+ + + +

Bugs

+ +
+
+

Reporting bugs

+ +
+
Bugzilla
+
All Mozilla projects use Bugzilla to track bugs. You will need to create an account with Bugzilla in order to report bugs and triage them.
+
Bug writing guidelines
+
The more effectively a bug is reported, the more likely that an engineer will actually fix it. By following these guidelines, you can help ensure that your bugs stay at the top of the Mozilla engineers' heap, and get fixed.
+
A Bug's Life
+
This tutorial will give an overview of what happens in the states that a bug will go through as well as how it will go from one to the next within its total life. It also explains the meaning of flags/keywords used in QA.
+
Filing Crash Bugs
+
This document lists guidelines and tips on how to file bug reports for crashes in a way that helps in debugging and fixing the reported issue.
+
+
+ +
+

Triaging bugs

+ +
+
Confirming unconfirmed bugs
+
Identify useful bug reports and close the rest.
+
Triaging Bugs for Firefox
+
Information about the entire bug triaging process – from processing incoming bugs to narrowing down the steps to reproducing bugs.
+
Screening duplicate bugs
+
Help get bugs fixed faster by screening incoming reports for duplicates.
+
General Guidelines
+
What to do and what not to do in Bugzilla.
+
+
+
+ +
+

Manual testing

+ +
+
+
+
Manual Test Case Writing Primer
+
How to write proper manual test cases
+
+
+ +
+
+
TestRail
+
Mozilla QA's manual test cases reside in TestRail. You will need an LDAP account in order to login and execute test cases. Learn more on the TestRail wiki page.
+
+
+
+ +
+

Automated testing

+ +
+
+
+
Automated testing at Mozilla
+
Documentation about creating and using automated tests for Mozilla code.
+
Running automated tests
+
+

This page lists the steps required to run Mozilla's automated test suites.

+
+
Developing tests
+
Ensure that future changes to Mozilla don't break things that currently work correctly.
+
Avoiding intermittent test failures
+
Suggestions for ways to make your tests more reliable, thereby helping to avoid random, intermittent test failures.
+
Test Verification
+
When a changeset adds a new test, or modifies an existing test, the test verification (TV) test suite performs additional testing to help find intermittent failures in the modified test as quickly as possible.
+
Mozharness FAQ
+
Answers to common questions about Mozharness.
+
+
+ +
+
+
Robocop
+
Robocop is the automated testing system used for Firefox for Android. Learn its code style guidelines
+
Marionette
+
Get started with Marionette UI testing.
+
web-platform-tests
+
Learn how to use the industry standard, cross-browser, cross-platform Web runtime testing system from the W3C used by Mozilla and others to ensure browser interoperability.
+
External Media Tests
+
Get started testing HTML5-based video elements using VideoPuppeteer, a Marionette- -based test suite used to test sites like YouTube and Netflix.
+
Chrome tests
+
A chrome test is basically a Mochitest running with chrome privileges.
+
+
+
+ +
+

Firefox QE

+ +
+
+
+
Triaging Bugs for Firefox
+
Information about the entire bug triaging process – from processing incoming bugs to narrowing down the steps to reproduce a bug.
+
+ +
+
Tips and Tricks
+
These tips and tricks will make your life easier when you are testing.
+
+Downloading Nightly or Trunk Builds + +
+
Every 24 hours, a "nightly" build is created that testers all over the world download and test, reporting as they go along on any bugs that hit them.
+
+
+ +
+
+
Command Line Options
+
Command line options are used to specify various startup options for Firefox.
+
Reporting a Performance Problem
+
This article will guide you in reporting a performance problem using the Gecko Profiler extension.
+
Crash reporting
+
Firefox ships with an open-source crash reporting system.
+
+
+
+ +
+

Firefox for Android

+ +
+
+
+
Mobile Firefox
+
Firefox for Android is the mobile version of Firefox with a native Android look and feel.
+
Compatibility Testing
+
Help us identify websites that do not work well in Firefox by reporting the specific issues that you find in your investigation.
+
+
+ +
+
+
Logging with the Android Debug Bridge and Logcat
+
This article will provide a walkthrough in downloading and setting up an environment to which one can gain access to and view Android system logs.
+
Enabling the Error Console
+
See the Mozilla Hacks article on Remote Debugging on Firefox for Android for web content. If you need to debug the Firefox browser itself use Android's adb logcat.
+
+
+
+ +
+

Firefox OS

+ +
+
+

Manual testing

+ +
+
Simulator vs Emulator vs Device
+
These are three basic options when it comes to getting a Firefox OS environment in order to work on, or developing for, Firefox OS.
+
Debugging
+
Discover the different tools at your disposal to debug your Firefox OS code.
+
Reporting Bugs
+
This article provides a guide to filing bugs against the Firefox OS project, including Gaia and B2G.
+
+
+ +
+

Platform (Gecko)

+ +
+
Automated Testing
+
Learn various aspects of testing Firefox OS, including running different tests, automation, and result reporting and tracking.
+
Gaia Performance Tests
+
This article provides information about running performance tests on Gaia, as well as how to create new tests.
+
Feature Support Chart
+
There are several different builds of Firefox OS you can download or build for yourself, and there are some differences between the types of features available on each device.
+
+
+
+ +
+

Web QA

+ +
+
+
+
Reducing testcases
+
Improve bug reports by turning broken web pages into simple testcases, which can help developers understand the bug and can also be used for creating automated tests.
+
Managing XFails
+
One of the ongoing tasks of the Web QA department is managing xfails. This document will explain what xfails are, and describe the steps one can take to investigate and update them.
+
+
+ +
+
+
Running Automated Tests
+
So you’re interested in contributing to Mozilla Web QA automation projects but don’t know where to start? This doc will help you get up and running a set of tests locally.
+
+
+
+ +
+

Glossary

+ +
+
+
Smoke Test
+
+
+
+ +

See also

+ + diff --git a/files/it/mozilla/tech/index.html b/files/it/mozilla/tech/index.html new file mode 100644 index 0000000000..f9682e62e1 --- /dev/null +++ b/files/it/mozilla/tech/index.html @@ -0,0 +1,14 @@ +--- +title: Mozilla technologies +slug: Mozilla/Tech +tags: + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XUL +translation_of: Mozilla/Tech +--- +

Mozilla has several technologies used as components of its projects. These are documented here. (flesh out this text).

+

{{LandingPageListSubpages}}

diff --git a/files/it/nspr/index.html b/files/it/nspr/index.html new file mode 100644 index 0000000000..4f3290d763 --- /dev/null +++ b/files/it/nspr/index.html @@ -0,0 +1,16 @@ +--- +title: NSPR +slug: NSPR +tags: + - NSPR +translation_of: Mozilla/Projects/NSPR +--- +

+

Netscape Portable Runtime (NSPR) fornisce una API multipiattaforma per funzioni di sistema e funzioni libc. La API viene usata nei client Mozilla, molte delle applicazioni server Red Hat e Sun, e da altri produttori software. +

+

Riferimenti

+ +{{ languages( { "ja": "ja/NSPR", "en": "en/NSPR" } ) }} diff --git a/files/it/nuove_tabelle_di_compatibilita_in_beta/index.html b/files/it/nuove_tabelle_di_compatibilita_in_beta/index.html new file mode 100644 index 0000000000..5ee004d6c9 --- /dev/null +++ b/files/it/nuove_tabelle_di_compatibilita_in_beta/index.html @@ -0,0 +1,26 @@ +--- +title: Nuove tabelle di compatibilità in beta +slug: Nuove_tabelle_di_compatibilita_in_beta +translation_of: Archive/MDN/New_Compatibility_Tables_Beta +--- +

Ti trovi qui probabilmente perché hai seguito il link di informativa della beta da una delle nostre nuove tabelle di compatibilità. (Non è così? Vuoi provare le nuove tabelle? Diventa anche tu un beta tester.)

+ +

Grazie per aiutarci a testarle. Sono parte di un progetto ancora più grande. Stiamo migrando tutti i nostri dati di compatibilità browser in formato JSON strutturato.

+ +

Le nuove tabelle apparirano nelle pagine non appena i dati sono stati convertiti al nuovo formato.

+ +

Contribuire

+ +

I dati di compatibilità sono stati migrati in file JSON nel repository browser-compat-data su GitHub.

+ +

Per contribuire dati di compatibilità puoi ora proporre una pull request o aprire una issue nel repository.

+ +

Come aiutare

+ +

Se trovi un problema nei dati per cortesia apri una issue nel repository GitHub.

+ +

Se qualcosa è andato storto nell’aspetto o nella funzionalità della tabella stessa, per cortesia fai click sul bottone con la dicitura “Segnala un errore” (o “Report an error” in inglese) dal menu a tendina sopra alla tabella.

+ +

Se hai un momento, apprezzeremmo se tu potessi prendere parte al nostro questionario.

+ +
{{MDNSidebar}}{{IncludeSubnav("/it-IT/docs/MDN")}}
diff --git a/files/it/plug-in/index.html b/files/it/plug-in/index.html new file mode 100644 index 0000000000..b6c23742d2 --- /dev/null +++ b/files/it/plug-in/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/python/index.html b/files/it/python/index.html new file mode 100644 index 0000000000..11edf5cb11 --- /dev/null +++ b/files/it/python/index.html @@ -0,0 +1,105 @@ +--- +title: Python +slug: Python +translation_of: Learn/Server-side/Django +--- +

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/rdf/index.html b/files/it/rdf/index.html new file mode 100644 index 0000000000..bbf3afa1a5 --- /dev/null +++ b/files/it/rdf/index.html @@ -0,0 +1,53 @@ +--- +title: RDF +slug: RDF +tags: + - RDF + - Tutte_le_categorie +translation_of: Archive/Web/RDF +--- +

+


+Resource Description Framework (RDF) è una famiglia di specifiche per un modello di metadati generalmente implementati come applicazioni XML. E' mantenuto dal World Wide Web Consortium (W3C). +

Il modello di metadati RDF si basa sull'idea di scrivere delle frasi sulle risorse nella forma "soggetto-predicato-oggetto", che nella terminologia specifica si definisce triple (tripletta). Il soggetto è la risorsa, cioè ciò che viene descritto. Il predicato è un aspetto di quella risorse, spesso esprime una relazione fra il soggetto e l'oggetto. Quest'ultimo è l'oggetto della relazione. +

+ + +
+

Documentazione

+
Presentazioni all'XTech 2005: Direzioni del motore RDF di Mozilla +
Questa presentazione mostra i nuovi sviluppi del motore RDF di Mozilla. Ciò comprende i piani per esporre l'API RDF al contenuto web, oltre ai miglioramenti di performance e alla maggiore aderenza agli standard. +
+
What is RDF (EN) +
Un'introduzione di Tim Braya a RDF, su XML.com. +
+
RDF in Mozilla FAQ +
Domande frequenti sull'RDF in Mozilla. +
+
RDF in cinquanta parole o meno +
Una rapida introduzione al Resource Description Framework. +
+
RDF Datasource How-To +
Un documento stile libro di ricette, che descrive come creare una fonte dati nativa lato client che funzioni con l'implementazione RDF di Mozilla. +
+
Aggregare fonti dati in-memory +
Usare le aggregazioni XPCOM con le fonti dati in-memory. +
+		 +

Community

+
  • Vedi i forum Mozilla... +
+

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

+ +

Strumenti

+ +

Argomenti correlati

+ +
+

Interwiki Language Links +

{{ languages( { "en": "en/RDF", "fr": "fr/RDF", "ja": "ja/RDF", "pl": "pl/RDF", "pt": "pt/RDF" } ) }} diff --git a/files/it/rhino/index.html b/files/it/rhino/index.html new file mode 100644 index 0000000000..d2a5c03fcb --- /dev/null +++ b/files/it/rhino/index.html @@ -0,0 +1,17 @@ +--- +title: Rhino +slug: Rhino +tags: + - JavaScript + - Rhino +translation_of: Mozilla/Projects/Rhino +--- +

Image:rhino.jpg

+

Rhino è un'implementazione open-source di JavaScript scritta interamente in Java. Solitamente è incorporato nelle applicazioni Java per fornire lo scripting agli utenti finali. È stato inserito nel J2SE 6 come motore predefinito di scripting.

+

Scaricare Rhino

+

Come ottentere i sorgenti e i binari. 

+

Documentazione su Rhino

+

Informazioni su Rhino.

+

Aiuto su Rhino

+

Alcune risorse se rimani bloccato.

+

{{ languages( { "ja": "ja/Rhino" } ) }}

diff --git a/files/it/rhino/scarica_rhino/index.html b/files/it/rhino/scarica_rhino/index.html new file mode 100644 index 0000000000..06ceceeb70 --- /dev/null +++ b/files/it/rhino/scarica_rhino/index.html @@ -0,0 +1,108 @@ +--- +title: Scarica Rhino +slug: Rhino/Scarica_Rhino +tags: + - Rhino +translation_of: Mozilla/Projects/Rhino/Download_Rhino +--- +

È possibile scaricare sia i sorgenti che la versione compilata di Rhino.

+ +

Binari

+ +

Rhino 1.7R4 è l'ultima release.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ReleaseData rilascioChange logDownload link
Rhino 1.7R42012-06-18New in Rhino 1.7R4rhino1_7R3.zip
Rhino 1.7R52015-01-29Note di rilasciorhino1_7R5.zip
Rhino 1.7.62015-04-15Note di rilasciorhino1.7.6.zip
Rhino 1.7.72015-06-17Note di rilasciorhino1.7.7.zip
Rhino 1.7.7.12016-02-01Note di rilasciorhino1.7.7.1.zip
Rhino 1.7.7.22017-08-24Note di rilasciorhino1.7.7.2.zip
Rhino 1.7.82018-01-22Note di rilasciorhino1.7.8.zip
Rhino 1.7.92018-03-15Note di rilasciorhino1.7.9.zip
Rhino 1.7.102018-04-09Note di rilasciorhino1.7.10.zip
Rhino 1.7.112019-05-30Note di rilasciorhino1.7.11.zip
Rhino 1.7.122020-01-13Note di rilasciorhino1.7.12.zip
+ +

Per scaricare le versioni precedenti, controlla l'archivio.

+ +

Licenza

+ +

Rhino è open source. Dalla versione 1.7R4 Rhino è disponibile sotto la licenza MPL 2.0.

+ +

Le versioni precedenti erano rilasciate sotto licenza MPL 1.1/GPL 2.0.

+ +

Per maggiori informazioni controlla la licenza di Rhino.

+ +

Sorgenti

+ +

I sorgenti di Rhino sono inoltre disponibili su github all'indirizzo https://github.com/mozilla/rhino. Per ottenere i sorgenti usa il comando:

+ +
git clone https://github.com/mozilla/rhino.git
+
+ +

Rhino utilizza Ant come build system.

diff --git a/files/it/spidermonkey/index.html b/files/it/spidermonkey/index.html new file mode 100644 index 0000000000..5f22fc2353 --- /dev/null +++ b/files/it/spidermonkey/index.html @@ -0,0 +1,50 @@ +--- +title: SpiderMonkey +slug: SpiderMonkey +translation_of: Mozilla/Projects/SpiderMonkey +--- +

SpiderMonkey è il motore JavaScript di Gecko, scritto in C. Viene utilizzato in vari programmi Mozilla ed è disponibile sotto tre licenze: MPL/GPL/LGPL.

+ + + + + + + + +
+

Documentazione

+ +
+
JSAPI Reference
+
La reference per l'API di SpiderMonkey.
+
+ +
+
Guida per l'embedding del motore C di JavaScript
+
Questa guida fornisce una panoramica di SpiderMonkey e descrive come incorporare le chiamate al motore in altre applicazione per fare in modo che supportino JavaScript.
+
+ +
+
How to embed the JavaScript engine (EN)
+
Un asciutto tutorial su come incorporare SpiderMonkey.
+
+ +
+
SpiderMonkey Garbage Collection Tips (EN)
+
Suggerimenti per evitare problemi con il garbage collector.
+
+ +
+
Introduction to the JavaScript shell (EN)
+
Come ottenere, compilare e utilizzare la shell JavaScript.
+
+ 		+

Argomenti correlati

+ +
+
JavaScript
+
+
+ +

Interwiki Language Links

diff --git a/files/it/stringhe_user_agent_di_gecko/index.html b/files/it/stringhe_user_agent_di_gecko/index.html new file mode 100644 index 0000000000..d95ef4bd45 --- /dev/null +++ b/files/it/stringhe_user_agent_di_gecko/index.html @@ -0,0 +1,52 @@ +--- +title: Stringhe User Agent di Gecko +slug: Stringhe_User_Agent_di_Gecko +tags: + - Sviluppo_Cross-browser + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/HTTP/Headers/User-Agent/Firefox +--- +

Lista di user agent rilasciati da Netscape e AOL basati su Gecko™.

+ +

Uso appropriato

+ +

Non raccomandiamo di usare le stringhe User Agent come strumento principale per il riconoscimento del browser. Vedere Riconoscimento di Browser supporto cross-browser per una panoramica più dettagliata dui varia approcci per il riconoscimento di browser con raccomandazioni.

+ +

In particolare, raccomandiamo il riconoscimento di browser mediante stringa User Agent solo per il lato server. Se il vostro codice lato client di riconoscimento ne fa utilizzo, è sufficente cercare la stringa "Gecko" nella stringa per rilevare browser basati su Gecko.

+ +

Per tutti i problemi di identificazione di Gecko che hanno a che fare con specifici bug o che richiedono la conoscenza di stringhe vendor o di date di build, usare l'oggetto navigator.

+ +

Listadi riferimento delle stringhe User Agent di Netscape Gecko

+ +

Consultare la lista di riferimento di mozilla.org per i valori specifici diPiattaforma,Sicurezza,OS-o-CPU eLocalizzazione.

+ + + +

Per informazioni dettagliate sulle release Netscape e Mozilla, consultare mozilla.org cvstags reference.

+ +
+

Original Document Information

+ +
    +
  • Author: Bob Clary
    • +
  • Last Updated Date: June 30th, 2003
    • +
  • Copyright © 2001-2003 Netscape. All rights reserved.
    • +
+
diff --git a/files/it/strumenti_di_sviluppo_aderenti_agli_standard/index.html b/files/it/strumenti_di_sviluppo_aderenti_agli_standard/index.html new file mode 100644 index 0000000000..50513b4650 --- /dev/null +++ b/files/it/strumenti_di_sviluppo_aderenti_agli_standard/index.html @@ -0,0 +1,37 @@ +--- +title: Strumenti di sviluppo aderenti agli standard +slug: Strumenti_di_sviluppo_aderenti_agli_standard +tags: + - 'CSS:Strumenti' + - HTML + - 'HTML:Strumenti' + - Strumenti + - Tutte_le_categorie + - XHTML + - 'XHTML:Strumenti' +translation_of: Archive/Web/Standards-Compliant_Authoring_Tools +--- +

Creare codice che funzioni su tutti i browser è utile per ridurre il tempo necessario al test di qualità dei propri contenuti web. I seguenti strumenti di sviluppo aderiscono agli standard del W3C. Se si sta utilizzando versioni più vecchie di questi strumenti che fanno affidamento sui bug dei vecchi browser o che generano codice specifico per un dato browser, forse è ora di aggiornarli:

+ +

Aggiornamenti alle versioni più vecchie per l'aderenza agli standard:

+ +

Sembra che gli strumenti attualmente disponibili da Namo generino codice specifico per IE o Netscape 4, il che potrebbe richiedere un ulteriore debug per verificare la compatibilità con i browser basati sugli standard. Le versioni più recenti di Microsoft FrontPage sono state migliorate, ma si consiglia di non affidarsi ad esse per le funzionalità o i contenuti critici dei siti web. Alcune versioni di Microsoft Word creano codice HTML non valido che funziona esclusivamente con Internet Explorer. Assicurarsi sempre di validare le proprie pagine.

+

Vedi anche

+ +

 

diff --git a/files/it/svg/index.html b/files/it/svg/index.html new file mode 100644 index 0000000000..4fcdc7a78d --- /dev/null +++ b/files/it/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/sviluppare_mozilla/index.html b/files/it/sviluppare_mozilla/index.html new file mode 100644 index 0000000000..ddde4904ef --- /dev/null +++ b/files/it/sviluppare_mozilla/index.html @@ -0,0 +1,75 @@ +--- +title: Sviluppare Mozilla +slug: Sviluppare_Mozilla +translation_of: Archive/Mozilla/Developing_New_Mozilla_Features +--- +

 

+

Vuoi contribuire a risolvere qualche bug e non sai da dove cominciare? Questo e' il punto di partenza per tutto cio' che riguarda l'hacking. Scoprirai come trovare il codice, svilupparlo, creare patch, e tutto l'essenziale che ogni hacker Mozilla dovrebbe conoscere.

+ + + + + + + +
+

Documentazione

+
+
+ Documentazione Hacking su mozilla.org
+
+ Un'altra pagina web con documentazione relativa all'hacking.
+
+
+
+ Hacking Firefox
+
+ fatti coinvolgere nello sviluppo.
+
+
+
+ Documentazione per lo sviluppo
+
+ Questa sezione contiene la documentazione del sistema di sviluppo di Mozilla. Tra le altre cose, imparerai dove trovare il codice sorgente e come svilupparlo.
+
+
+
+ Debugging FAQs
+
+ Consigli sul debugging, sono le specifiche della piattaforma. Puoi scegliere tra: Windows, Linux, oppure Mac OS X.
+
+
+
+ Creare patch
+
+ Consigli su come creare patch per ottenere cambiamenti nel modello.
+
+

Mostra tutti...

+ 		+

Community

+
    +
  • Mostra i forum su Mozilla...
    • +
+

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

+ +

Strumenti

+ +

Vedi Tutti...

+

Argomenti Corelati

+
+
+ Controllo di Qualità
+
+
+

Categorie *

+

Interwiki Language Links

+

 

+

{{ languages( { "fr": "fr/D\u00e9veloppement_de_Mozilla", "ja": "ja/Developing_Mozilla", "zh-cn": "cn/\u5f00\u53d1Mozilla", "pl": "pl/Programowanie_Mozilli" } ) }}

diff --git a/files/it/sviluppo_web/index.html b/files/it/sviluppo_web/index.html new file mode 100644 index 0000000000..ecdd032677 --- /dev/null +++ b/files/it/sviluppo_web/index.html @@ -0,0 +1,51 @@ +--- +title: Sviluppo Web +slug: Sviluppo_Web +tags: + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/Guide +--- +

+

+
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/temi/background/index.html b/files/it/temi/background/index.html new file mode 100644 index 0000000000..0e52fbc07e --- /dev/null +++ b/files/it/temi/background/index.html @@ -0,0 +1,100 @@ +--- +title: Background Themes +slug: Temi/Background +tags: + - Documentazione +translation_of: Mozilla/Add-ons/Themes/Lightweight_themes +--- +

Come creare il vostro Tema di sfondo

+ +
+

I temi sono costituiti da un file grafico(immagine) "intestazione", che ricopre lo sfondo dell'interfaccia utente (UI) Firefox.

+ +

Hai finito il tuo disegno? Puoi inviarlo immediatamente!

+ +

Creare un'immagine Intestazione per il Tema

+ +

L'immagine di intestazione viene visualizzata come sfondo della parte alta della finestra del browser e si innesta dietro le barre degli strumenti, la barra degli indirizzi, la barra di ricerca e la barra delle schede. Verrà ancorata nell'angolo in alto a destra della finestra del browser.

+ +

+ + + +

Requisiti per l'immagine

+ +
    +
  • Le dimensioni devono essere: 3000px larghezza × 200px altezza
    • +
  • formato file: PNG o JPG
    • +
  • L'immagine non deve superare i 300 KB in dimensione
    • +
+ +

Suggerimenti

+ +
    +
  • Immagini piccole, a debole contrasto e gradienti funzionano meglio; immagini ad alta risoluzione faticheranno ad andare d'accordo con la UI del browser.
    • +
  • Firefox può visualizzare una porzione maggiore della parte bassa dell'immagine se altre barre strumenti o elementi dell'interfaccia grafica vengono aggiunti nella parte alta della finestra.
    • +
  • La parte in alto a destra dell'immagine dovrebbe contenere le informazioni più importanti-dal momento che, aumentando la larghezza della finestra, il browser lascia vedere di più sul lato sinistro dell'immagine.
    • +
+ +

Elaborazione di Immagini Online

+ +
    +
  • Pixlr — Pixlr offre strumenti per creazione ed elaborazione di immagini incorporati in un browser a livello professionale e facili da usare.
    • +
  • Photoshop — Ritaglia, ruota e ritocca fotografie con Photoshop® Express, un elaboratore di fotografie gratis online.
    • +
+ +

Creare un'immagine Piè di pagina per il Tema

+ +

Nelle versioni più vecchie di Firefox, o nelle versioni più recenti con determinati add-ons installati, l'immagine piè di pagina si vede come sfondo della parte bassa della finestra del browser, dietro le barre degli add-on e di ricerca. Verrà ancorata nell'angolo in basso a sinistra della finestra del browser. Le immagini piè di pagina sono opzionali.

+ +

+ + + +

Requisiti per l'immagine

+ +
    +
  • Le dimensioni devono essere: 3000px larghezza × 100px altezza
    • +
  • formato file: PNG o JPG
    • +
  • L'immagine non deve superare i 300 KB in dimensione
    • +
+ +

Suggerimenti

+ +
    +
  • Immagini piccole, a debole contrasto e gradienti funzionano meglio; immagini ad alta risoluzione faticheranno ad andare d'accordo con la UI del browser.
    • +
  • Firefox può visualizzare una porzione maggiore della parte alta dell'immagine se la barra di ricerca è aperta o se una delle estensioni aumenta l'altezza della parte bassa della finestra.
    • +
  • La parte sinistra dell'immagine dovrebbe contenere le informazioni più importanti-dal momento che, aumentando la larghezza della finestra, il browser lascia vedere di più sul lato destro dell'immagine.
    • +
+ +

Presentazione dei tuoi temi personalizzati

+ +

Per iniziare a presentare le tue immagini, vai alla pagina di Presentazione Temi:

+ +
    +
  1. Dai un nome al tuo tema — assegna un nome unico per il tuo tema. Nomi duplicati non sono ammessi, pertanto potresti aver bisogno di tentare alcune volta prima di trovarne uno.
    2. +
  2. Assegna una categoria e parole-chiave — seleziona una categoria e inserisci alcune parole-chiave che meglio descrivano il tuo tema. Tieni in mente che un revisore potrebbe rifiutare il tuo tema se risultasse che categoria e/o parole chiave non c'entrano molto con il tuo tema.
    3. +
  3. Descrivi il tuo tema — scrivi una breve descrizione del tuo tema. Tieni in mente che un revisore potrebbe rifiutare il tuo tema se risultasse che la tua descrizione non rappresenta accuratamente il tuo tema.
    4. +
  4. Sciegli un tipo di licenza per il tuo tema — decidi il tipo di licenza copyright per la tua creazione. Approfondisci il tema del tipo licenze Creative Common. +
      +
    • Importante: Assicurati di avere il diritto di utilizzare l'immagine nel tuo tema!
      • +
    +
    5. +
  5. Carica le tue immagini — assicurati che siano in formato JPG or PNG e che non eccedano i 300 KB!
    6. +
  6. Scegli i colori di testo e schede — puoi scegliere il colore di scheda("sfondo") e di testo in primo piano che meglio si adatta alla tua immagine di intestazione.
    7. +
  7. Anteprima del tuo tema — sei pronto per un'anteprima del tuo tema! Semplicemente passa il mouse sull'immagine sopra il pulsante "Inoltra il tema" e vedi all'istante come appare.
    8. +
  8. Inoltra il tuo tema — se ti sembra tutto a posto, premi il bottone "Inoltra il tema" e hai finito! Puoi vedere tutti i temi pubblicati da te sulla pagina del tuo profilo. +
      +
    • Suggerimento: per assicurarti che il tuo tema venga approvato, controlla bene che sia risppondente con le linee guida dei contenuti e con i termini di servizio!
      • +
    +
    9. +
+ +

+ +

Submit Your Theme Now

+
diff --git a/files/it/temi/index.html b/files/it/temi/index.html new file mode 100644 index 0000000000..c6bdeb3894 --- /dev/null +++ b/files/it/temi/index.html @@ -0,0 +1,8 @@ +--- +title: Temi +slug: Temi +translation_of: Mozilla/Add-ons/Themes +--- +

I Temi sono delle Skin (pelli) per le differenti applicazioni di Mozilla. Permettono di cambiare l'aspetto dell'interfaccia utente rendendola personale al vostro gusto. Un Tema può cambiare semplicemente i colori dell'interfaccia utente o cambiarne l'intero aspetto.

+

Documentazione

+

Creare Skin per Firefox

diff --git a/files/it/toolkit_api/index.html b/files/it/toolkit_api/index.html new file mode 100644 index 0000000000..701e5db3fb --- /dev/null +++ b/files/it/toolkit_api/index.html @@ -0,0 +1,32 @@ +--- +title: Toolkit API +slug: Toolkit_API +translation_of: Mozilla/Tech/Toolkit_API +--- +

+

Il Mozilla Toolkit è un insieme di interfacce di programmazione (API), costruite su Gecko, che forniscono servizi avanzati per le applicazioni XUL. Qualche esempio: +

+ +

Guide di riferimento ufficiali

+

....in costruzione +

+

Ulteriori informazioni

+

Le pagine seguenti contengono esempi e spiegazioni riguardo agli argomenti specifici: +

+ +{{ languages( { "en": "en/Toolkit_API", "fr": "fr/API_du_toolkit", "pl": "pl/Toolkit_API" } ) }} diff --git a/files/it/tools/add-ons/index.html b/files/it/tools/add-ons/index.html new file mode 100644 index 0000000000..53b7924169 --- /dev/null +++ b/files/it/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/tools/debugger/how_to/disable_breakpoints/index.html b/files/it/tools/debugger/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..d98d34e98f --- /dev/null +++ b/files/it/tools/debugger/how_to/disable_breakpoints/index.html @@ -0,0 +1,20 @@ +--- +title: Disable breakpoints +slug: Tools/Debugger/How_to/Disable_breakpoints +translation_of: Tools/Debugger/How_to/Disable_breakpoints +--- +
+
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+
+ +

Per disabilitare un singolo punto di interruzione, deseleziona il checkbox relativo nella lista dei pnti di interruzione.

+ +

Per disabilitare tutti i punti di interruzione, click sull' icona:  sulla barra dei comandi.

+ +

{{EmbedYouTube("ULoZ70XPd90")}}

diff --git a/files/it/tools/debugger/how_to/index.html b/files/it/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..d77ec65938 --- /dev/null +++ b/files/it/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

diff --git a/files/it/tools/debugger/how_to/open_the_debugger/index.html b/files/it/tools/debugger/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..0e9dcba1df --- /dev/null +++ b/files/it/tools/debugger/how_to/open_the_debugger/index.html @@ -0,0 +1,28 @@ +--- +title: Open the debugger +slug: Tools/Debugger/How_to/Open_the_debugger +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +
+

 

+ +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+
+ +

Ci sono due modi per aprire il debbugger:

+ + + +

{{EmbedYouTube("yI5SlVQiZtI")}}

+ +

 

diff --git a/files/it/tools/debugger/how_to/set_a_breakpoint/index.html b/files/it/tools/debugger/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..9180de2a40 --- /dev/null +++ b/files/it/tools/debugger/how_to/set_a_breakpoint/index.html @@ -0,0 +1,31 @@ +--- +title: Set a breakpoint +slug: Tools/Debugger/How_to/Set_a_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+ +

Puoi fissare un punto di interruzione in uno dei modi seguenti:

+ + + +

Il video seguente usa il context menu per fissare un punto di interruzione :

+ +

{{EmbedYouTube("P7b98lEijF0")}}

+ +

Ogni punto di interruzione viene visualizzato in due posizioni nel debugger:

+ + diff --git a/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html b/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html new file mode 100644 index 0000000000..2e70147e49 --- /dev/null +++ b/files/it/tools/debugger/how_to/set_a_conditional_breakpoint/index.html @@ -0,0 +1,22 @@ +--- +title: Set a conditional breakpoint +slug: Tools/Debugger/How_to/Set_a_conditional_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_conditional_breakpoint +--- +
+

This page describes the JavaScript Debugger as it appears in Firefox 52 and above, in Firefox Nightly and Firefox Developer Edition.

+ +

To see what it's like in earlier versions of Firefox or in Firefox Beta and Release, see Debugger (before Firefox 52).

+ +

If you are getting this version of the Debugger and need to switch back to the old version, you can do so by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to false.

+
+ +

Un normale punto di interruzione è associato solo ad una riga di codice: quando l'esecuzione raggiunge qualla linea il debbuger si ferma. Un punto di interruzione condizionale ha anche una condizione associata, che è rrappresentata da un'espressione. quando l'esecuzione raggiunge qualla linea, il debugger si ferma solo se l' espressione è   vera.

+ +

{{EmbedYouTube("pVPlMhfrMwM")}}

+ +

Per impostare un punto di interruzione condizionale, nel panel sorgente, sulla linea dove vuoi il un punto di interruzione, premi tasto destro e seleziona "Aggiungi punto di interruzione condizionale". Apparirà un textbox dove digitare l'espressione. premiReturn per finire.

+ +

I punti di interruzione condizionali vengono visualizzati come frecce arancioni sul numewro di riga.

+ +

Se clicchi su uno dei punti di interruzione, apparirà la voce di menù "Edit Breakpoint". Puoi usarla per modificare una condizione oppure per aggiungere una condizione ad un brakpoint esistente.

diff --git a/files/it/tools/debugger/how_to/step_through_code/index.html b/files/it/tools/debugger/how_to/step_through_code/index.html new file mode 100644 index 0000000000..33a2305f21 --- /dev/null +++ b/files/it/tools/debugger/how_to/step_through_code/index.html @@ -0,0 +1,31 @@ +--- +title: Step through code +slug: Tools/Debugger/How_to/Step_through_code +translation_of: Tools/Debugger/How_to/Step_through_code +--- +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+ +

Quando il debugger è fermo su un punto di interruzione, puoi proseguire usando i bottoni della barra dei comandi:

+ +

+ +

Nell'ordine, ii bottoni sono:

+ + + +

{{EmbedYouTube("RQBwEk0-xe0")}}

+ +

Quando è in pausa, il bottone "attiva/disattiva console divisa"  può essere usato per attivare(aprire) o disattivare (chiudere) la console web per indagare gli errori e le variabili:

+ +

diff --git a/files/it/tools/debugger/index.html b/files/it/tools/debugger/index.html new file mode 100644 index 0000000000..76dafea0fa --- /dev/null +++ b/files/it/tools/debugger/index.html @@ -0,0 +1,69 @@ +--- +title: Debugger +slug: Tools/Debugger +tags: + - Debugger + - Debugging + - Dev Tools + - Firefox OS + - JS Debug + - Strumenti di Sviluppo + - febugging +translation_of: Tools/Debugger +--- +
+

Questa pagina descrive il debugger JavaScript così come appare in Firefox versione 52 o successive, nelle versioni build notturne e in Firefox Developer Edition

+ +

Per vedere come era nelle versioni precedenti di Firefox oppure nelle versioni Beta, guarda qui: Debugger (prima di Firefox 52).

+ +

Se hai attenuto questa versione del debugger e desisderi tornare alla versione precedente, basta andare alla pagina about:config e imposta la voce "devtools.debugger.new-debugger-frontend" a false.

+
+ +

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

Il debugger JavaScript ti permette di eseguire il codice passo passo ed esaminare o modificare il suo stato, aiutandoti così a scovare eventuali bugs.

+ +

E' possibile usare il debugger sia per il codice eseguito localmente in Firefox, sia per il codice che viene eseguito in remoto, per esempio su un terminale Android che usa Firefox per Android. Vedi remote debugging per sapere come come connettere il debugger ad un terminale remoto.

+ +

Il debugger è compreso in Firefox, e queste pagine descrivono come utilizzare la versione che è incorporata in Firefox. Comunque è anche possibile farlo funzionare come applicazione web indipendente, e quindi usarlo per eseguire il debug di codice eseguito in altri browser o in Node. Per ulteriori dettagli su questa funzione, vedere il contenitore GitHub del progetto.

+ +

Il nuovo debugger non supporta - ancora - tutte le funzionalità del vecchio debugger. Vedi Limitazioni del nuovo debugger.

+ +
+

Panoramica dell'interfaccia utente

+ +

Per avere una generale idea del debugger, questo è il link: veloce panoramica dell'Interfaccia Utente.

+ +
+

Come fare

+ +

Per sapere quello che è possibile fare col debugger, questi sono i link alle guide disponibili:

+ +
+ +
+ +
+

Reference

+ +
+ +
diff --git a/files/it/tools/index.html b/files/it/tools/index.html new file mode 100644 index 0000000000..0fa06dcda3 --- /dev/null +++ b/files/it/tools/index.html @@ -0,0 +1,214 @@ +--- +title: Strumenti di Sviluppo di Firefox +slug: Tools +tags: + - Developing Mozilla + - NeedsMarkupWork + - NeedsTechnicalReview + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +

Firefox Developer Tools è un insieme di strumenti di sviluppo web integrati in Firefox. È possibile utilizzarli per esaminare, modificare ed eseguire il debug di HTML, CSS e JavaScript

+ +

Se stai cercando informazioni sull'utilizzo degli strumenti di sviluppo web disponibili in Firefox, sei arrivato nel posto giusto - questa pagina fornisce collegamenti a informazioni dettagliate su tutti gli strumenti principali e strumenti aggiuntivi, e ulteriori informazioni come come connettersi e eseguire il debug di Firefox per Android, come estendere gli strumenti di sviluppo e come eseguire il debug del browser nel suo complesso.

+ +

Si prega di esplorare i link che si trovano nella barra laterale, e più in basso nella pagina. Se hai commenti o domande sui devtools, inviaci messaggi sulla nostra mailing list o sul canale IRC (vedi i link della community in fondo alla pagina). Se hai commenti o domande specifiche sulla documentazione, la community DevTools di MDN è un buon posto per pubblicare.

+ +
+

Nota: se hai appena iniziato con lo sviluppo Web e l'uso degli strumenti di sviluppo, i nostri documenti sullo sviluppo Web per l'apprendimento ti aiuteranno: vedi Introduzione al Web e Che cosa sono gli strumenti di sviluppo del browser? per ottenere buoni punti di partenza.

+
+ +

Gli strumenti di base

+ +

È possibile aprire gli strumenti di sviluppo di Firefox dal menu selezionando Strumenti > Sviluppo Web > Attiva/disattiva strumenti o utilizzare la scorciatoia  da tastiera Ctrl + Shift + I or F12 in Windows e Linux, o Cmd + Opt + I in macOS.

+ +

Il menu con i farlips sul lato destro di Strumenti di sviluppo contiene diversi comandi che consentono di eseguire azioni o modificare le impostazioni dello strumento.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Questo bottone appare soltanto quando ci sono iframes multipli in una pagina. Premilo per visualizzare la lista degli iframes nella pagina corrente e seleziona quello con cui vuoi lavorare.
Premi questo bottone per ottenere uno screenshot della pagina corrente. (Nota: Questa funzionalità non è attiva di default e deve essere abilitata nelle impostazioni prima che venga visualizzata.)
Attiva/disattiva la modalità di progettazione Responsive.
Apre il menu che include le opzioni di ancoraggio, la possibilità di mostrare o nascondere la console divisa, e le impostazioni degli strumenti di sviluppo. Il menu include anche collegamenti alla documentazione di Firefox Web Tools e Mozilla Community.
Chiude gli strumenti per sviluppatori
+ +
+
+

Page Inspector

+ +

The all-new Inspector panel in Firefox 57.

+ +

Osserva e modifica il contenuto e il design della pagina. Visualizza e interagisci con le caratteristiche degli elementi come: box model, animazioni e grid layouts.

+
+ +
+

Web Console

+ +

The all-new Console in Firefox 57.

+ +

Guarda i messaggi inviati in console dalla pagina web e comunica con essa utilizzando Javascript.

+
+
+ +
+
+

Debugger

+ +

The all-new Firefox 57 Debugger.html

+ +

Stoppa, avanza, esamina e modifica passo a passo il codice Javascript in esecuzione nella pagina.

+
+ +
+

Network Monitor

+ +

The Network panel in Firefox 57 DevTools.

+ +

Visualizza le richieste di rete effettuate quando una pagina viene caricata.

+
+
+ +
+
+

Performance Tools

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Analizza la reattività generale del sito, le performance di layout e Javascript.

+
+ +
+

Responsive Design Mode

+ +

Responsive Design mode in Firefox 57.

+ +

Osserva come il tuo sito web o la tua applicazione apparirebbero su dispositivi e reti differenti.

+
+
+ +
+
+

Accessibility inspector

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Fornisce uno strumento di controllo dell'accessibilità del sito da parte di tutti, permettendoti di controllare cosa manca o dove c'è necessità di più attenzione.

+
+ +
+
+ +
+

Note: The collective term for the UI inside which the DevTools all live is the Toolbox.

+
+ +

Altri Strumenti

+ +

Anche questi strumenti sono a disposizione tramite l'analisi della pagina. Diversamente dagli "Strumenti Chiave" descritti sopra, potresti non usarli tutti i giorni.

+ +
+
+
Memoria.
+
Ti permette di capire come viene gestita la memoria nelle varie schede di navigazione.
+
Archiviazione
+
Ispeziona cookies, archiviazione locale, indexedDB, e archiviazione sessioni presenti nella pagina.
+
DOM Property Viewer
+
Ispeziona tutto quello che riguarda il DOM della pagina.
+
Eyedropper
+
Seleziona un colore dalla pagina.
+
Editor Stili
+
Visualizza e modifica il CSS and della pagina corrente.
+
Cattura Schermata
+
Ottieni uno screenshot dell'intera pagina o di un singolo elemento.
+
Strumento di misurazione
+
Misura un area della pagina web
+
Rulers
+
Sovrascrivi le regole verticali e orizzontali
+
+
+ +
+
+

+ +

Per gli ultimi strumenti di sviluppo e funzionalità, prova Firefox Developer Edition.

+ +

Download Firefox Developer Edition

+
+ +
+
+ +

Connecting the Developer Tools

+ +

If you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.

+ +
+
+
about:debugging
+
Debug add-ons, content tabs, and workers running in the browser.
+
Connecting to Firefox for Android
+
Connect the developer tools to an instance of Firefox running on an Android device.
+
Connecting to iframes
+
Connect the developer tools to a specific iframe in the current page.
+
Connecting to other browsers
+
Connect the developer tools to Chrome on Android and Safari on iOS.
+
+
+ +

Debugging the browser

+ +

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

+ +
+
+
Browser Console
+
See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.
+
Browser Toolbox
+
Attach the Developer Tools to the browser itself.
+
+
+ +

Extending the devtools

+ +

For information on extending the Firefox DevTools, see Extending the developer tools over in the Browser Extensions section of MDN.

+ +

Migrating from Firebug

+ +

Firebug has come to the end of its lifespan (see Firebug lives on in Firefox DevTools for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — Migrating from Firebug.

+ +

Contribute

+ +

If you want to help improve the developer tools, these resources will get you started.

+ +
+
+
Get Involved
+
Our developer documentation explains how to get involved.
+
bugs.firefox-dev.tools
+
A tool helping to find bugs to work on.
+
+
diff --git a/files/it/tools/page_inspector/index.html b/files/it/tools/page_inspector/index.html new file mode 100644 index 0000000000..56133a05a0 --- /dev/null +++ b/files/it/tools/page_inspector/index.html @@ -0,0 +1,48 @@ +--- +title: Page Inspector +slug: Tools/Page_Inspector +translation_of: Tools/Page_Inspector +--- +

Usa Page Inspector per esaminare e modificare il codice HTML e CSS della pagina.

+ +

Puoi esaminare pagine caricate in una copia locale di Firefox o in remoto, come su devices Firefox OS o Firefox per Android. Guarda la guida sul debugging remoto per imparare a connettere gli strumenti di sviluppo ad un dispositivo remoto.

+ +
+

Interfaccia Utente

+ +

To find your way around the Inspector, here's a quick tour of the UI.

+ +
+

How to

+ +

To find out what you can do with the Inspector, see the following how to guides:

+ +
+ +
+ +
+

Reference

+ +
+ +
diff --git a/files/it/tools/prestazioni/index.html b/files/it/tools/prestazioni/index.html new file mode 100644 index 0000000000..30117d7c02 --- /dev/null +++ b/files/it/tools/prestazioni/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/remote_debugging/index.html b/files/it/tools/remote_debugging/index.html new file mode 100644 index 0000000000..dfee871612 --- /dev/null +++ b/files/it/tools/remote_debugging/index.html @@ -0,0 +1,47 @@ +--- +title: Remote Debugging +slug: Tools/Remote_Debugging +translation_of: Tools/Remote_Debugging +--- +

Puoi usare gli strumenti di sviluppo Firefox sul tuo computer per migliorare siti Web o applicazioni Web che funzionano con altri browser o con altre modalità di esecuzione. Gli altri browser potrebbero essere sullo stesso dispositivo come gli strumenti di sviluppo stessi o su un altro dispositivo, come un telefono cellulare collegato con una porta USB.

+ +

Le istruzioni dettagliate per connettere gli strumenti di sviluppo sono specificate nelle seguenti spiegazioni.

+ +

Modalità Gecko-based

+ +

Per prima cosa, puoi connettere gli strumenti di sviluppo alla modalità Gecco-base a piacere con Firefox Desktop, Firefox per Android, Firefox OS e Thunderbird.

+ +

 

+ +

 

+ +

 

+ +

 

+ +

Per fare questo puoi usare Firefox per aggiungere il Toolbox nel preocesso remoto, e il Toolbox verrà eseguito nella tua finestra. In questo momento il tools implementa le seguenti funzioni da remoto:

+ + + +

Firefox per Android

+ +

Remotely debugging Firefox for Android spiega come collegare Firefox, tramite USB, su un dispositivo Android.

+ +

Firefox per Metro

+ +

Remotely debugging Firefox for Metro spiega come usare Firefox per provare il codice in esecuzione su Windows 8 (Metro-style) Firefox.

+ +

Firefox OS

+ +

Using the App Manager spiega come collegare Firefox developer tools a Firefox OS simulator o a Firefox OS device.

+ +

Thunderbird

+ +

Remotely debugging Thunderbird spiega come Firefox eThunderbird possono essere usati per provare il codice in esecuzione su Thunderbird.

diff --git a/files/it/tools/visualizzazione_flessibile/index.html b/files/it/tools/visualizzazione_flessibile/index.html new file mode 100644 index 0000000000..09fd2cb08c --- /dev/null +++ b/files/it/tools/visualizzazione_flessibile/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/web_console/helpers/index.html b/files/it/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..d64e42e6ec --- /dev/null +++ b/files/it/tools/web_console/helpers/index.html @@ -0,0 +1,79 @@ +--- +title: Web Console Helpers +slug: Tools/Web_Console/Helpers +translation_of: Tools/Web_Console/Helpers +--- +

I comandi

+ +

la riga di comando JavaScript fornito dalla console web offre alcune funzioni di supporto built-in che rendono più semplici determinate attivita

+ +
+
$()
+
Sembra una stringa selettore CSS, restituendo il primo elemento che corrisponde. Equivalente a {{domxref ("document.querySelector ()")}} o chiama la funzione $ nella pagina, se esiste
+
$$()
+
Sembra una stringa selettore CSS, restituendo una serie di nodi DOM quella partita. Questo è come per {{domxref ("document.querySelectorAll ()")}}, ma restituisce un array invece di un {{domxref ("NodeList")}}.
+
$0
+
L'elemento attualmente ispezionato nella pagina.
+
$_
+
Memorizza il risultato dell'ultima espressione eseguito nella linea di comando console. Ad esempio, se si digita "2 + 2 <Enter>", quindi "$ _ <invio>", la console stampare 4.
+
$x()
+
Valuta un'espressione XPath e restituisce un array di nodi corrispondenti.
+
keys()
+
Dato un oggetto, restituisce un elenco dei tasti (o nomi di proprietà) su tale oggetto. Questa è una scorciatoia per Object.keys.
+
values()
+
Dato un oggetto, restituisce una lista dei valori di tale oggetto; serve come un compagno di chiavi ().
+
clear()
+
Cancella l'area di uscita della console.
+
inspect()
+
Dato un oggetto, si apre la finestra di ispezione oggetto per quell'oggetto.
+
pprint()
+
Formatta il valore specificato in modo leggibile; questo è utile per lo scarico del contenuto di oggetti e array.
+
help()
+
Visualizza la guida del testo. In realtà, in un delizioso esempio di ricorsione, che vi porterà a questa pagina.
+
cd()
+
+

Interruttore contesto di valutazione JavaScript per un iframe diversa all'interno della pagina. Questo helper accetta più modi diversi di identificazione del telaio per passare. È possibile fornire una delle seguenti:

+ +
    +
  • una stringa selettore che verrà passato al document.querySelector per individuare l'elemento iframe
    • +
  • l'elemento iframe stesso
    • +
  • la finestra di contenuto all'interno del iframe
    • +
+ +

Vedere lavorare con iframe

+
+
copy()
+
Nuovo in Firefox 38. Copia l'argomento negli appunti. Se l'argomento è una stringa, viene copiato così com'è. Se l'argomento è un nodo DOM, la sua outerHTML viene copiato. In caso contrario, JSON.stringify sarà chiamato sull'argomento, e il risultato sarà copiata negli appunti.
+
clearHistory()
+
.Nuovo in Firefox 39. Proprio come una normale linea di comando, la riga di comando della console ricorda i comandi che avete digitato. Utilizzare questa funzione per cancellare la cronologia dei comandi della console.
+
+ +

Si prega di fare riferimento alla API Console per maggiori informazioni sulla connessione dal contenuto.

+ +

variabili

+ +
+
tempN
+
L'opzione "Use in Console" in Impostazioni genera una variabile per un nodo denominato temp0, temp1, temp2, ecc riferimento al nodo.
+
+ +

esempi

+ +

Guardando il contenuto di un nodo DOM

+ +

Diciamo che hai un nodo DOM con il "titolo" ID. In realtà, questa pagina che stai leggendo in questo momento ha uno, in modo da poter aprire la console Web e provare questo momento.

+ +

Diamo uno sguardo ai contenuti di quel nodo utilizzando il $ () e ispezionare () funzioni:

+ +
inspect($("#title"))
+ +

Questo apre automaticamente l'ispettore oggetto, che mostra il contenuto del nodo DOM che corrisponde al selettore CSS "#title", che è ovviamente l'elemento con ID "titolo".

+ +

Dumping il contenuto di un nodo DOM

+ +

Questo è molto bello, se vi capita di essere seduti al browser esporre qualche problema, ma diciamo che stai debug remoto per un utente, e hanno bisogno di uno sguardo il contenuto di un nodo. Si può avere l'utente aprire la console Web e scaricare il contenuto del nodo nel registro, quindi copiare e incollare in una e-mail a voi, utilizzando la funzione pprint ():

+ +
pprint($("#title"))
+
+ +

Questo sputa fuori il contenuto del nodo in modo da poter dare un'occhiata. Naturalmente, questo può essere più utile con altri oggetti che un nodo DOM, ma si ottiene l'idea.

diff --git a/files/it/tools/web_console/index.html b/files/it/tools/web_console/index.html new file mode 100644 index 0000000000..1be4e7942e --- /dev/null +++ b/files/it/tools/web_console/index.html @@ -0,0 +1,37 @@ +--- +title: Web Console +slug: Tools/Web_Console +translation_of: Tools/Web_Console +--- +

La console web

+ +
    +
  1. Registra informazioni associate con la pagina web: richieste in rete, JavaScript, CSS, erori generici ed errori relativi alla sicurezza, warning e addizionali messaggi generati dal codice JavaScript che viene eseguito nel contesto della pagina
    2. +
  2. Abilita l'interazione con la pagina web eseguendo le istruzioni JavaScript nel contesto della pagina
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Aprire la console web
+
Come iniziare ad usare la console web
+
L'interprete della riga di comando
+
Come interagine con un documento usando la console web.
+
Dividere la console web
+
Usare console web insieme con altri strumenti.
+
+
+ +
+
+
Messagi della console web
+
Dettagli dei messaggi registrati nella console web.
+
Output arrichito
+
Vedi e interagisci con gli oggetti .
+
Scorciatoie da tastiera
+
Elenco delle scorciatoie da tastiera.
+
+
+
diff --git a/files/it/tools/webide/index.html b/files/it/tools/webide/index.html new file mode 100644 index 0000000000..2e2bad73d0 --- /dev/null +++ b/files/it/tools/webide/index.html @@ -0,0 +1,333 @@ +--- +title: WebIDE +slug: Tools/WebIDE +translation_of: Archive/WebIDE +--- +
+

WebIDE è disponibile da Firefox 34 in poi.

+ +

Puoi attivare WebIDE anche in Firefox 33, semplicemente cambiando una preferenza: digita about:config nella barra degli indirizzi e imposta come vero il parametro di devtools.webide.enabled.

+
+ +
+

WebIDE è il sostituto di App Manager. Come App Manager,  ti permette di usare e fare il debug delle app di Firefox OS usando Firefox OS Simulator oppure un normale dispositivo con Firefox OS.

+ +

WebIDE include un ambiente di editing che ti permette di creare e sviluppare app per Firefox OS, fornisce una visione ad albero di tutti i file presenti nella tua app con la possibilità di modificarli e salvarli, e in più due template per aiutarti a iniziare.

+ +

Inoltre, WebIDE ti permette di connetere i Firefox Developer Tools ad altri browser, come Firefox per Android, Chrome per Android e Safari su iOS. Dai un'occhiata alla pagina Debug Remoto per ottenere informazioni su come connetterti ad un browser specifico.

+
+ +

Con WebIDE, per prima cosa devi impostare una o più runtime. Una runtime, è l'ambiente in cui testerai ed eseguirai il debug di un App. La runtime potrebbe essere un device con a bordo Firefox OS connesso tramite cavo USB, oppure Firefox OS Simulator installato sul computer.

+ +

Adesso, puoi creare un app, o aprire un app esistente. Se stai creando una nuova app, puoi partire da un template che include la struttura base delle cartelle e un modello contenente il minimo indispensabile per iniziare a sviluppare, oppure usare un template più corposo che mostra come usare una API privilegiata. Con WebIDE puoi modificare e salvare i file della tua app, che vengono mostratti in una struttura ad albero, attraverso un editor incorporato. Ovviamente non sei obbligato ad usare l'editor incorporato, puoi sviluppare l'app esternamente ed usare WebIDE solamente per eseguire il debug.

+ +

Infine, puoi installare l'app in  una delle runtime ed eseguirla. Durante l'esecuzione dell'app puoi osservarla e modificarla tramite gli strumenti per lo sviluppo come l'Inspector, la Console, Il Debugger Javascript e molto altro.

+ +

Requisiti di sistema

+ +

Per sviluppare ed eseguire il debug delle app utilizzando WebIDE, tutto ciò che ti serve è Firefox 23 o versioni successive.  Per testare l'app su un dispositivo vero e proprio, hai bisogno di un device che abbia Firefox OS 1.2 o versioni successive.

+ +

Puoi usare WebIDE solamente se il tuo sviluppo riguarda Firefox OS 1.2 o versioni successive.

+ +

Aprire WebIDE

+ +

WebIDE può essere aperto in tre modi:

+ + + +

+ +

Ecco WebIDE in azione:Il menu a cascata sulla sinistra denominato "Apri App", ti permette di aprire un app esistente o di crearne una nuova, mentre il menu sulla destra ti permette di scegliere una runtime o crearne una nuova.

+ +

I tasti esegui, stop e debug: appaiono solamente dopo aver aperto un app e selezionato una runtime.

+ +

Da Firefox 36, puoi modificare la grandezza del font in WebIDE utilizzando le seguenti scorciatoie da tastiera (usa il tasto Command al posto Control se stai usando OS X):

+ + + +

Impostare le runtime

+ +

Nel menu "Seleziona Runtime", le runtime sono raggruppate in tre tipi:

+ + + +

La prima volta che clicchi il menu, probabilmente non vedrai alcuna runtime:

+ +

Il resto di questa sezione mostra come fare per aggiungere delle runtime.

+ +

Connettersi ad un device Firefox OS

+ +

Prima di connetterti ad un device, ci sono alcune cose da fare:

+ + + +
+

Linux only:

+ +
    +
  • add a udev rules file, as documented in step 3 of this guide to setting up an Android device. The idVendor attribute to use for the Geeksphone is "05c6", and this page lists other idVendor values.
    • +
+
+ +
+

Windows only:

+ + +
+ +

If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":

+ +

+ +

If you don't see your device, see the Troubleshooting page.

+ +

Connecting to Firefox for Android

+ +

From Firefox 36 onwards Android devices connected over USB and running Firefox for Android appear as a runtime under "USB devices". See the article on connecting to Firefox for Android from WebIDE.

+ +

Before Firefox 36, you can connect to Firefox for Android without using WebIDE at all, or can use WebIDE by setting up a custom remote runtime.

+ +

Adding a Simulator

+ +

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

+ +

This means that in many cases, you don't need a real device to test and debug your app.

+ +

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

+ +

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

+ +

To learn more about the Simulator, see its documentation page.

+ +

Custom runtimes

+ +

Remote runtime

+ +

With a custom remote runtime you can use an arbitrary hostname and port to connect to the remote device.

+ +

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

+ +

This is convenient in most cases, but sometimes you might want to use ADB outside of WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command (example: adb forward tcp:6000 localfilesystem:/data/local/debugger-socket).
+
+ If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward (example: localhost:6000).

+ +

Also, before Firefox 36, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB prior to Firefox 36.

+ +

Valence-enabled runtimes

+ +

If you have the Valence add-on installed, you'll see three additional runtimes:

+ + + +

For instructions on how to connect to these runtimes, see the relevant entry in the Remote Debugging page.

+ +

Selecting a runtime

+ +

Once you've set up a runtime you can select it using the "Select Runtime" menu.

+ + + +

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

+ +

Runtime actions

+ +

When a runtime is selected, the Runtimes dropdown menu has three extra items:

+ + + +

+ +

+ +

Creating and opening apps

+ +

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

+ +

+ +

Create a new app

+ +

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

+ +

+ +

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

+ +

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

+ +

Open a packaged app

+ +

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

+ +

Open a hosted app

+ +

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

+ +

Editing apps

+ +

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

+ +

The app summary page

+ +

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

+ +

+ +

You can always get back to the app summary page by clicking on the root of the tree on the left.

+ +

Manifest validation

+ +

WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

+ +

+ +

Of course, you can edit the manifest.webapp file right in the project editor as well.

+ +

The source editor

+ +

WebIDE uses the CodeMirror source editor.

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

Code completion

+ +

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

+ +

To display autocomplete suggestions in JavaScript press Control + Space:

+ +

+ +

Inline documentation

+ +

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

+ +

+ +

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

+ +

Saving files

+ +

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

+ +

Removing projects

+ +

To remove an app from WebIDE, go to the app summary page and click "Remove Project".

+ +

Running and debugging apps

+ +

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

+ +

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

+ +

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

+ +

+ +
+

From Firefox 36 onwards, the "Pause" button is replaced with a wrench icon.

+
+ +

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

+ +

Unrestricted app debugging (including certified apps, main process, etc.)

+ +

You can run the debugger against the simulator, b2g desktop, or a real device.

+ +

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:

+ +

+ +


+ However, when connecting to a real device we have a security policy in force:

+ + + +

To remove this restriction:

+ + + +

To disable DevTools restricted privileges, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. The path then differs depending on what you are debugging against:

+ + + +

Now (or after a restart of the B2G desktop client) in WebIDE you should see all the apps on the device.

+ +

Monitoring performance

+ +

If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:

+ + + +

Troubleshooting

+ +

If you have any problems working with WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

diff --git a/files/it/tools/webide/monitor/index.html b/files/it/tools/webide/monitor/index.html new file mode 100644 index 0000000000..a883cac837 --- /dev/null +++ b/files/it/tools/webide/monitor/index.html @@ -0,0 +1,160 @@ +--- +title: Monitor +slug: Tools/WebIDE/Monitor +tags: + - italiano tags +translation_of: Archive/WebIDE/Monitor +--- +
+

The WebIDE Monitor is a general-purpose data tool designed to help you track the performance of Firefox OS apps and devices.

+
+ +

The WebIDE Monitor

+ +

The Monitor is able to display live, interactive graphs to visualize time series.

+ +

Available graphs

+ +

The Monitor comes with several different graphs. They usually show up once WebIDE is connected to a Firefox OS runtime.

+ +

Unique Set Size

+ +

Unique Set Size

+ +

This graph shows the memory footprint of all Firefox OS processes over time. If you are interested in the memory consumption of a Firefox OS app, launch it, and the private memory used by its process will be displayed here.

+ +

Displaying your own data

+ +

It's relatively easy to display any kind of data in the Monitor, because it accepts loosely-formatted updates from many different sources.

+ +

From a Firefox OS device

+ +

You can send data from a connected device by sending observer notifications.

+ +

Note: If you would like to do this in a certified app, please follow these instructions.

+ +

JavaScript

+ +

Services.obs.notifyObservers(null, 'devtools-monitor-update', data);

+ +

You can send data from any JS code with chrome privileges. Here is a complete example measuring the run time of some JS code:

+ +

const Services = require('Services');
+
+ var start = Date.now();
+ // code to benchmark
+ var stop = Date.now();
+
+ var data = { graph: 'Performance', myFeature: stop-start, time: stop };
+ Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));

+ +

C++

+ +

observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);

+ +

You can send data from anywhere in Gecko. Here is a complete example measuring the run time of some code:

+ +

#include <time.h>
+ #include "nsPrintfCString.h"
+ #include "nsIObserverService.h"
+
+ clock_t start = clock();
+ // code to benchmark
+ clock_t stop = clock();
+ double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);
+
+ nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();
+ if (observerService) {
+   nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);
+   nsAutoString data = NS_ConvertUTF8toUTF16(str);
+   observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());
+ }

+ +

From your computer

+ +

You can easily send data to the Monitor over a WebSockets server. This can be useful if you're writing a Firefox extension, a command-line tool or a web service.

+ +

By default, the Monitor looks for a server running on the port 9000 of you computer. You can change this by updating the devtools.webide.monitorWebSocketURL preference.

+ +

You can even make it accept data from your local network, or from anywhere on the Internet.

+ +

Node.js

+ +

TODO

+ +

Python

+ +

TODO

+ +

Supported formats

+ +

The Monitor accepts data in the form of JSON objects that generally look like this:

+ +

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "value": 42,
+   "time": 1234567890
+ }

+ +

That format is meant to be very flexible. If a specified graph or curve doesn't exist, it will be created automatically.

+ +

Arbitrary names

+ +

Unrecognized entries will be considered as curve name and value.

+ +

The smallest data packet you can send is something like:

+ +

{ "myCurve": 42 }

+ +

This will add a data point to "myCurve" in a graph with no name. The missing time will default to when the Monitor received the packet.

+ +

For better precision, it's probably better to always specify a timestamp for your data:

+ +

{
+   "current": 60,
+   "voltage": 500,
+   "time": 1234567890
+ }

+ +

Multiple values

+ +

In a single update, you can send data for multiple curves:

+ +

{
+   "graph": "myGraph",
+   "myCurve1": 50,
+   "myCurve2": 300,
+   "myCurve3": 9000,
+   "time": 1234567890
+ }

+ +

Or several data points for a single curve:

+ +

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "values": [
+     { "time": 1234567890, "value": 42 },
+     { "time": 1234567981, "value": 51 }
+   ]
+ }

+ +

Multiple updates

+ +

And you can also send multiple data updates as an Array:

+ +

[
+   { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },
+   { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }
+ ]

+ +

Punctual events

+ +

To mark special events in a graph with a vertical bar, add an event key to your update:

+ +

{
+   "graph": "myGraph",
+   "event": "myEvent",
+   "time": 1234567980
+ }

diff --git a/files/it/tools/webide/troubleshooting/index.html b/files/it/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..462bb661d2 --- /dev/null +++ b/files/it/tools/webide/troubleshooting/index.html @@ -0,0 +1,106 @@ +--- +title: 'WebIDE, risoluzione dei problemi' +slug: Tools/WebIDE/Troubleshooting +tags: + - 'etichette{locale}' +translation_of: Archive/WebIDE/Troubleshooting +--- +

Connettere un dispositivo Firefox OS tramite USB

+ +

Se stai tentando di connettere un dispositivo con Firefox Os al WebIDE e non viene mostrato, ecco alcuni consigli che puoi provare a mettere in atto.

+ + + +

Connettere un dispositivo Firefox OS tramite Wi-Fi

+ + + +

Connettersi a Firefox per Android

+ +

Se stai cercando di connettere il WebIDE con un dispositivo Android su cui esegui Firefox e questo non viene mostrato nel WebIDE ecco alcuni consigli che puoi provare a mettere in atto:

+ + + +

Connettersi ad altri browser (Chrome, Safari)

+ +

Il WebIDE usa il progetto Valence (conosciuto come Firefox Tools Adapter) per comunicare con altri browser, come  Chrome e  Safari. 

+ +

Se ha problemi a connettersi ad altri browser controlla i passaggi per impostare il tuo dispositivo per quel browser sulla pagina del progetto Valence.

+ +

Problemi con il debug delle app

+ +

Se non riesci a effettuare il debug di app certificate, di sistema o precedentemente installate potresti essere incappato in un problema di insufficenti permessi. Per saperne di più leggi la sezione debug senza restrizioni (app certificate, di sistema, processi, etc.).

+ +

Impossibile caricare la lista dei progetti

+ +

Se usi il WebIDE ed effettui il downgrade di Firefox ad una versione precedente e continui ad utilizzare lo stesso profilo potresti incontrare l'errore "Impossibile carica la lista dei progetti" quando apri il WebIDE nella versione precedente.

+ +

Questo problema può accadere quando il sistema di salvataggio dei progetti del WebIDE (IndexedDB) ha aggiornato o cambiato i suoi file durante l'uso della versione più recente di Firefox. La lista dei progetti è a tutti gli effetti inaccessibile alle versioni più vecchie di Firefox.

+ +

Non è stata persa nessuna informazione ma dovrai necessariamente continuare ad utilizzare la versione più recente di Firefox per recuperare la lista dei progetti.

+ +

Se vuoi veramente utilizzare la versione meno recente di Firefox puoi provare a cancelleare la lista dei progetti nel seguente modo, ma questa procedura non è supportata e potresti incorrere in altri problemi o altre perdite di informazioni.

+ +
    +
  1. Chiudi Firefox
    2. +
  2. Trova la tua cartella dei profili
    3. +
  3. Trova la cartella storage dentro alla cartella del tuo profilo
    4. +
  4. Nel contenuto della cartella ci saranno dei file o cartelle il cui nome comincia per4268914080AsptpcPerjo (una hash del nome del database)
    5. +
  5. Rimuovi tutte le cartelle ed i file in questione
    6. +
  6. Avvia Firefox ed il WebIDE nuovamente
    7. +
+ +

Abilitare i log

+ +

Puoi inoltre abilitare un logging senza filtri per raccogliere informazioni diagnostiche:

+ +
    +
  1. Apri about:config, aggiunti una nuova preferenza chiamata extensions.adbhelper@mozilla.org.sdk.console.logLevel, con il valore in forma di Stringa impostato ad all, ed imposta la proprietà extensions.adbhelper@mozilla.org.debug al valore true.
    2. +
  2. Nella pagina Add-ons Manager, disabilita e abilita nuovamente l'add-on ADB Helper.
    3. +
  3. Apri la Console del Browser e vedrai dei messaggi che hanno come prefisso la stringa adb. Se i messaggi non sono comprensibili per te  chiedi aiuto.
    4. +
+ +

Chiedere aiuto

+ +

Vai alla stanza #devtools su IRC e proveremo ad aiutarti.

diff --git a/files/it/tutorial_sulle_canvas/index.html b/files/it/tutorial_sulle_canvas/index.html new file mode 100644 index 0000000000..577a620cb7 --- /dev/null +++ b/files/it/tutorial_sulle_canvas/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/venkman/index.html b/files/it/venkman/index.html new file mode 100644 index 0000000000..cdebf87b65 --- /dev/null +++ b/files/it/venkman/index.html @@ -0,0 +1,42 @@ +--- +title: Venkman +slug: Venkman +tags: + - Estensioni + - 'Estensioni:Strumenti' + - 'JavaScript:Strumenti' + - Strumenti + - Sviluppo_Web + - 'Sviluppo_Web:Strumenti' + - Tutte_le_categorie + - Venkman +translation_of: Archive/Mozilla/Venkman +--- +

+Venkman è un debugger JavaScript basato su Mozilla. +

+

Articoli in MDC su Venkman

+ + +

Ottenere Venkman

+ +

Risorse

+

Visitare i link seguenti per ulteriori informazioni su Venkman: +

+ + +{{ languages( { "es": "es/Venkman", "en": "en/Venkman", "fr": "fr/Venkman", "ja": "ja/Venkman", "ko": "ko/Venkman", "pl": "pl/Venkman" } ) }} diff --git a/files/it/visualizzare_e_cercare_il_sorgente_di_mozilla_online/index.html b/files/it/visualizzare_e_cercare_il_sorgente_di_mozilla_online/index.html new file mode 100644 index 0000000000..79aedc8bb9 --- /dev/null +++ b/files/it/visualizzare_e_cercare_il_sorgente_di_mozilla_online/index.html @@ -0,0 +1,32 @@ +--- +title: Visualizzare e cercare il sorgente di Mozilla online +slug: Visualizzare_e_cercare_il_sorgente_di_Mozilla_online +translation_of: Mozilla/Tech/Viewing_and_searching_Mozilla_source_code_online +--- +

Il codice sorgente per tutti i progetti mozilla, ospitato nei repository Mercurial e CVS può essere cercato e visualizzato online utilizzando  MXR. È una variante  migliorata dell'originale Linux Cross Reference Tool.

+ +

Una nuova pagina di ricerca chiamata DXR è oltretutto disponibile - non offre tutte le radici che MXR fornisce, ma i suoi risultati possono essere anche più complicati.

+ +

Non scaricare il codice sorgente facendo crawling su MXR; scarica un tarball oppure usa Mercurial o CVS.

+ +

MXR indicizza multiple branches CVS e moduli; la radice MXR più interessante per un contributore è comm-central, la quante contiene l'ultimo sorgente per la maggior parte dei prodotti Mozilla (incluso Firefox, Thunderbird, SeaMonkey, Sunbird/Lighting, Chatzilla, Dot Inspector e Venkam Javascript Debugger) ed è aggiornato frequentemente.

+ +

Alcune radici MXR d'interesse sono:

+ + + +

Struttura della directory del codice sorgente Mozilla ha una corta descrizione del codice che risiede in ciascuna sorgente.

+ +

Risorse

+ +

CVS Tags

diff --git a/files/it/web/accessibility/index.html b/files/it/web/accessibility/index.html new file mode 100644 index 0000000000..2e786c4fb1 --- /dev/null +++ b/files/it/web/accessibility/index.html @@ -0,0 +1,56 @@ +--- +title: Accessibilità +slug: Web/Accessibility +tags: + - Accessibilità +translation_of: Web/Accessibility +--- +

L'accessibilità nello sviluppo web indica il fatto di permettere a quante più persone possibile l'utilizzo dei siti web, anche se le capacità di quelle persone sono in qualche modo limitate. In questo articolo vengono riportate alcune informazioni sullo sviluppo di contenuti accessibili.

+ +

"Il termine 'accessibile' è più spesso utilizzato per descrivere strutture o servizi per l'assistenza delle persone disabili, ad esempio una struttura 'accessibile alle sedie a rotelle'. Tuttavia questa definizione può essere estesa alla scrittura Braille, ai segnali audio sugli attraversamenti pedonali, alle rampe per sedie a rotelle, al design dei siti web, ecc." Articolo di Wikipedia sull'accessibilità

+ +

"Fondamentalmente, il Web è progettato per funzionare per tutti, indipendentemente dall'hardware o dal software utilizzati, dalla lingua, dalla cultura, dalla posizione geografica o dalle capacità fisiche e mentali. Quando il Web raggiunge questo scopo, è accessibile alle persone con diverse capacità di udito, movimento, vista e abilità cognitive." W3C - Accessibility

+ +
+
+

Documentazione

+ +

L'Area di Apprendimento dell'Accessibilità di Mozilla Developer Network contiene guide aggiornate che spiegano gli elementi essenziali dell'accessibilità:

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

Vedi tutti gli articoli sull'Accessibilità...

+
+ +
+

Strumenti per gli sviluppatori Web

+ + + +

Vedi tutti...

+ +

Altri siti utili

+ + +
+
diff --git a/files/it/web/accessibility/sviluppo_web/index.html b/files/it/web/accessibility/sviluppo_web/index.html new file mode 100644 index 0000000000..6388da389a --- /dev/null +++ b/files/it/web/accessibility/sviluppo_web/index.html @@ -0,0 +1,66 @@ +--- +title: Sviluppo Web +slug: Web/Accessibility/Sviluppo_Web +translation_of: Web/Accessibility +--- +

 

+ + + + + + + +
+

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/canvasrenderingcontext2d/canvas/index.html b/files/it/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..bb453e4419 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,101 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +
{{APIRef}}
+ +

La proprietà CanvasRenderingContext2D.canvas è un riferimento di sola lettura verso il canvas {{domxref("HTMLCanvasElement")}} che contiene il context corrente. Può essere {{jsxref("null")}} se non vi è un elemento {{HTMLElement("canvas")}} associato.

+ +

Sintassi

+ +
ctx.canvas;
+ +

Esempi

+ +

Dato il seguente elmento  {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas"></canvas>
+
+ +

È possibile ottenere un riferimento all'elemento canvas da cui è ottenuto questo CanvasRenderingContext2D utilizzando la property canvas:

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html new file mode 100644 index 0000000000..2f905a5241 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -0,0 +1,209 @@ +--- +title: CanvasRenderingContext2D.fillStyle +slug: Web/API/CanvasRenderingContext2D/fillStyle +tags: + - API + - CamvasRenderingContext2D + - Canvas + - Proprietà + - Riferimento +translation_of: Web/API/CanvasRenderingContext2D/fillStyle +--- +
{{APIRef}}
+ +

La proprietà CanvasRenderingContext2D.fillStyle delle Canvas 2D API specifica il colore o lo stile da usare all'interno delle forme. Il colore preimpostato è #000 (nero).

+ +

Vedi anche i capitoli Applicare stili e colori nel Canvas Tutorial.

+ +

Sintassi

+ +
ctx.fillStyle = color;
+ctx.fillStyle = gradient;
+ctx.fillStyle = pattern;
+
+ +

Opzioni

+ +
+
color
+
Una {{domxref("DOMString")}} letta come valore CSS {{cssxref("<color>")}}.
+
gradient
+
Un oggetto {{domxref("CanvasGradient")}} (gradiente lineare o radiale).
+
pattern
+
Un oggetto {{domxref("CanvasPattern")}} (immagine ripetuta).
+
+ +

Esempi

+ +

Usare la proprietà fillStyle per impostare un colore diverso

+ +

In questa semplice porzione di codice viene usata la proprietù fillStyle per impostare un colore diverso.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Modifica il codice qui sotto e vedi i cambiamenti in tempo reale nel canvas:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Un esempio di fillStyle con i cicli for

+ +

In questo esempio, useremo due cicli for per disegnare una griglia di rettangoli, ognuno di un colore differente. Il risultato finale dovrebbe assomigliare allo screenshot. Niente di particolarmente spettacolare. Usiamo due variabili i e j per generare un colore RGB unico per ogni quadrato, questo modificando soltanto i valori del rosso e del verde. Il canale del blu ha un valore fisso. Modificando i canali, puoi generare ogni tipo di palette. Aumentando le ripetizioni del ciclo, puoi ottenere qualcosa di assomigliante alle palette usate da Photoshop.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+for (var i=0;i<6;i++){
+  for (var j=0;j<6;j++){
+    ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                     Math.floor(255-42.5*j) + ',0)';
+    ctx.fillRect(j*25,i*25,25,25);
+  }
+}
+
+ +

Il risultato assomiglia a questo:

+ +

{{EmbedLiveSample("Un_esempio_di_fillStyle_con_i_cicli_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ + + + + +

Vedi anche

+ + diff --git a/files/it/web/api/canvasrenderingcontext2d/index.html b/files/it/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..e6b2eb7167 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,448 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Games + - Graphics + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CanvasRenderingContext2D +--- +
{{APIRef}}
+ +The CanvasRenderingContext2D interface provides the 2D rendering context for the drawing surface of a {{ HTMLElement("canvas") }} element. + +

To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <canvas>, supplying "2d" as the argument:

+ +
var canvas = document.getElementById('mycanvas');
+var ctx = canvas.getContext('2d');
+
+ +

Once you have the 2D rendering context for a canvas, you can draw within it. For example:

+ +
ctx.fillStyle = "rgb(200,0,0)";
+ctx.fillRect(10, 10, 55, 50);
+
+ +

See the properties and methods in the sidebar and below. The canvas tutorial has more information, examples, and resources as well.

+ +

Drawing rectangles

+ +

There are three methods that immediately draw rectangles to the bitmap.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Draws a filled rectangle at (x, y) position whose size is determined by width and height.
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.
+
+ +

Drawing text

+ +

The following methods are provided for drawing text. See also the {{domxref("TextMetrics")}} object for text properties.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Draws (fills) a given text at the given (x,y) position.
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Draws (strokes) a given text at the given (x, y) position.
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Returns a {{domxref("TextMetrics")}} object.
+
+ +

Line styles

+ +

The following methods and properties control how lines are drawn.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Width of lines. Default 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Type of endings on the end of lines. Possible values: butt (default), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Miter limit ratio. Default 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Returns the current line dash pattern array containing an even number of non-negative numbers.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Sets the current line dash pattern.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Specifies where to start a dash array on a line.
+
+ +

Text styles

+ +

The following properties control how text is laid out.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Font setting. Default value 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
Text alignment setting. Possible values: start (default), end, left, right or center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic (default), ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
Directionality. Possible values: ltr, rtl, inherit (default).
+
+ +

Fill and stroke styles

+ +

Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Color or style to use inside shapes. Default #000 (black).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Color or style to use for the lines around shapes. Default #000 (black).
+
+ +

Gradients and patterns

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
Creates a linear gradient along the line given by the coordinates represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
Creates a radial gradient along the line given by the coordinates represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.
+
+ +

Shadows

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Specifies the blurring effect. Default 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Color of the shadow. Default fully-transparent black.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Horizontal distance the shadow will be offset. Default 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Vertical distance the shadow will be offset. Default 0.
+
+ +

Paths

+ +

The following methods can be used to manipulate paths of objects.

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
Moves the starting point of a new sub-path to the (x, y) coordinates.
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
Connects the last point in the subpath to the x, y coordinates with a straight line.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the Bézier curve.
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
Adds a quadratic Bézier curve to the current path.
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
Adds an ellipse to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
+
+ +

Drawing paths

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
Fills the subpaths with the current fill style.
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
Strokes the subpaths with the current stroke style.
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
If a given element is focused, this method draws a focus ring around the current path.
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
Scrolls the current path or a given path into the view.
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
Reports whether or not the specified point is contained in the current path.
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
Reports whether or not the specified point is inside the area contained by the stroking of a path.
+
+ +

Transformations

+ +

Objects in the CanvasRenderingContext2D rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}}
+
Current transformation matrix ({{domxref("SVGMatrix")}} object).
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
Multiplies the current transformation matrix with the matrix described by its arguments.
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments.
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
Resets the current transform by the identity matrix.
+
+ +

Compositing

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.
+
+ +

Drawing images

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
+
+ +

Pixel manipulation

+ +

See also the {{domxref("ImageData")}} object.

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
+
+ +

Image smoothing

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Image smoothing mode; if disabled, images will not be smoothed if scaled.
+
+ +

The canvas state

+ +

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Restores the drawing style state to the last element on the 'state stack' saved by save().
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
+ +

Hit regions

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Adds a hit region to the canvas.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Removes the hit region with the specified id from the canvas.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Removes all hit regions from the canvas.
+
+ +

Non-standard APIs

+ + + +

Most of these APIs are deprecated and will be removed in the future.

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
+
Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
This is redundant with an equivalent overload of drawImage.
+
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
+
Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
+
Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
+
Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
+
Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
+
Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
+
Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
+
Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.getContextAttributes()
+
Inspired by the same WebGLRenderingContext method it returns an Canvas2DContextAttributes object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (true by default) to indicate that transparency is used in the canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
+
+ +

WebKit only

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
The backing store size in relation to the canvas element. See High DPI Canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
+ +
+
+ +

Gecko only

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDash
+
An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDashOffset
+
Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}
+
Renders a region of a XUL element into the canvas.
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1")}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatOpera("9")}}{{CompatSafari("2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Compatibility notes

+ + + +

See also

+ + diff --git a/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html new file mode 100644 index 0000000000..bcb314845c --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html @@ -0,0 +1,208 @@ +--- +title: CanvasRenderingContext2D.isPointInPath() +slug: Web/API/CanvasRenderingContext2D/isPointInPath +translation_of: Web/API/CanvasRenderingContext2D/isPointInPath +--- +
{{APIRef}}
+ +

Il metodo CanvasRenderingContext2D.isPointInPath() delle API Canvas 2D controlla se un punto specificato cade all'interno del path corrente.

+ +

Sintassi

+ +
boolean ctx.isPointInPath(x, y);
+boolean ctx.isPointInPath(x, y, algorithmo);
+
+boolean ctx.isPointInPath(path, x, y);
+boolean ctx.isPointInPath(path, x, y, algoritmo);
+
+ +

Parametri

+ +
+
x
+
La coordinata X del punto da controllare
+
y
+
La coordinata Y del punto da controllare
+
Algoritmo
+
La'lgoritmo con cui viene verificato se il punto cade all'interno del path.
+ Valori possibili: +
    +
  • "nonzero": La regola non-zero ,  valore predefinito.
    • +
  • "evenodd": La regola even-odd .
    • +
+
+
path
+
Il {{domxref("Path2D")}} path da usare come path corrente.
+
+ +

Restituisce

+ +
+
{{jsxref("Boolean")}}
+
+

Un Boolean, che sarà true (vero) se il punto cade all'interno della forma, altrimenti restitiusce false (falso).

+
+
+ +

Esempi

+ +

Uso del metodo isPointInPath

+ +

Questa è una semplice snippet che usa il metodo isPointInPath per controllare se un punto cade o no sulla forma corrente.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true
+
+ +

Modifica il codice qui sotto, e guarda live come cambia il canvas: per guardare i log apri la tua console

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Parametro path{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(31) }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Parametro path{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile(31) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Note di compatibilità

+ + + +

Vedi anche

+ + diff --git a/files/it/web/api/closeevent/index.html b/files/it/web/api/closeevent/index.html new file mode 100644 index 0000000000..4d534f6858 --- /dev/null +++ b/files/it/web/api/closeevent/index.html @@ -0,0 +1,197 @@ +--- +title: CloseEvent +slug: Web/API/CloseEvent +translation_of: Web/API/CloseEvent +--- +

{{APIRef("Websockets API")}}

+ +

Un evento di tipo CloseEvent viene inviato al client tramite WebSockets in fase di chiusura della connessione. Questo viene ricevuto dal listener registrato sull'attributo onclose dell'oggetto di tipo WebSocket.

+ +

Costruttore

+ +
+
{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}
+
Crea un nuovo CloseEvent.
+
+ +

Proprietà

+ +
+
{{domxref("CloseEvent.code")}} {{readOnlyInline}}
+
Restituisce un unsigned short che contiene il codice di chiusura inviato dal server. Questi sono i valori ammessi. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Status codeNameDescription
0–999 Riservati e non usati.
1000CLOSE_NORMALChiusura normale; la connessione si è conclusa normalmente, qualsiasi fosse il suo scopo.
1001CLOSE_GOING_AWAYL'endpoint se ne è andato, o per un errore del server oppure perché la pagina che ha aperto la connessione non è più attiva.
1002CLOSE_PROTOCOL_ERRORL'endpoint ha terminato la connessione per un errore di protocollo.
1003CLOSE_UNSUPPORTEDLa connessione è stata terminata perché l'endpoint ha ricevuto dei dati che non può accettare (per esempio, dati binari a fronte di un endpoint che consuma solo testo).
1004 Riservato. In futuro potrebbe esserne rivelato l'uso.
1005CLOSE_NO_STATUSRiservato. Indica che non è stato ricevuto nessuno stato di chiusura sebbene fosse atteso.
1006CLOSE_ABNORMALRiservato. Usato per indicare che la connessione è stata chiusa in modo anomalo (cioè, cioè senza l'invio del frame di chiusura) dove invece era atteso un codice di chiusura.
1007 L'endpoint ha terminato la connessione perché ha ricevuto un messaggio con dati inconsistenti (per esempio, dati non-UTF-8 all'interno di un messaggio testuale).
1008 L'endpoint ha terminato la connessione perché ha ricevuto un messaggio che viola la sua politica. E' un codice generico, quando 1003 e 1009 non sono adatti.
1009CLOSE_TOO_LARGEL'endpoint ha terminato la connessione perché ha ricevuto un frame di dati troppo grande.
1010 Il client ha terminato la connessione perché era attesa una negoziazione di una o più "estensioni" del protocollo che però non è avvenuta.
1011 Il server ha terminato la connessione perché ha incontrato una condizione inattesa che gli ha impedito di completare la richiesta.
1012–1014 Riservati per usi futuri dallo standard WebSocket.
1015 Riservato. Indica che la connessione è stata chiusa a causa di un fallimento dell'handshake TLS (per esempio, il certificato del server non può essere verificato).
1016–1999 Riservati per usi futuri dallo standard WebSocket.
2000–2999 Riservati per estensioni WebSocket.
3000–3999 Disponibili per librerie e framework. Meglio non usarli nelle applicazioni.
4000–4999 Disponibili per essere utilizzati dalle applicazioni.
+
+
{{domxref("CloseEvent.reason")}} {{readOnlyInline}}
+
Restituisce un {{ domxref("DOMString") }} che indica la ragione per cui il server ha chiuso la connessione. Questo dipende dal particolare server e sotto-protocollo.
+
{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}
+
Restituisce un {{jsxref("Boolean")}} che indica se la connessione è stata chiusa senza problemi o meno.
+
+ +

 

+ +

Compatibilità con i browser

+ +

 

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}{{ CompatGeckoDesktop("8.0") }} [1][2]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Prima di Gecko 8.0 {{ geckoRelease("8.0") }}, Gecko inviava l'evento WebSocket {{event("close")}} come semplice evento. Il supporto al CloseEvent è stato implementato in Gecko 8.0.

+ +

[2] Prima di Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko restituiva il codice di chiusura CLOSE_NORMAL anche quando il canale veniva chiuso a causa di un errore inatteso, o anche a causa di un errore non coperto dalla specifica. Adesso viene restituito CLOSE_GOING_AWAY.

+ +

Vedi anche

+ + + +

 

diff --git a/files/it/web/api/console/index.html b/files/it/web/api/console/index.html new file mode 100644 index 0000000000..61521af0f3 --- /dev/null +++ b/files/it/web/api/console/index.html @@ -0,0 +1,294 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - Debugging + - Interface + - NeedsTranslation + - Reference + - TopicStub + - console + - web console +translation_of: Web/API/Console +--- +
{{APIRef("Console API")}}
+ +

The Console object provides access to the browser's debugging console (e.g. the Web Console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.

+ +

The Console object can be accessed from any global object. {{domxref("Window")}} on browsing scopes and {{domxref("WorkerGlobalScope")}} as specific variants in workers via the property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply console. For example:

+ +
console.log("Failed to open the specified link")
+ +

This page documents the {{anch("Methods")}} available on the Console object and gives a few {{anch("Usage")}} examples.

+ +

{{AvailableInWorkers}}

+ +

Methods

+ +
+
{{domxref("Console.assert()")}}
+
Log a message and stack trace to console if the first argument is false.
+
{{domxref("Console.clear()")}}
+
Clear the console.
+
{{domxref("Console.count()")}}
+
Log the number of times this line has been called with the given label.
+
{{domxref("Console.countReset()")}}
+
Resets the value of the counter with the given label.
+
{{domxref("Console.debug()")}}
+
Outputs a message to the console with the log level "debug". +
Note: Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected.
+
+
{{domxref("Console.dir()")}}
+
Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.
+
{{domxref("Console.dirxml()")}}
+
+

Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.

+
+
{{domxref("Console.error()")}}
+
Outputs an error message. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
An alias for error().
+
{{domxref("Console.group()")}}
+
Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().
+
{{domxref("Console.groupCollapsed()")}}
+
Creates a new inline group, indenting all following output by another level. However, unlike group() this starts with the inline group collapsed requiring the use of a disclosure button to expand it. To move back out a level, call groupEnd().
+
{{domxref("Console.groupEnd()")}}
+
Exits the current inline group.
+
{{domxref("Console.info()")}}
+
Informative logging of information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.log()")}}
+
For general output of logging information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.profile()")}} {{Non-standard_inline}}
+
Starts the browser's built-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile.
+
{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
+
Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the Firefox performance tool).
+
{{domxref("Console.table()")}}
+
Displays tabular data as a table.
+
{{domxref("Console.time()")}}
+
Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
+
{{domxref("Console.timeEnd()")}}
+
Stops the specified timer and logs the elapsed time in seconds since it started.
+
{{domxref("Console.timeLog()")}}
+
Logs the value of the specified timer to the console.
+
{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
+
Adds a marker to the browser's Timeline or Waterfall tool.
+
{{domxref("Console.trace()")}}
+
Outputs a stack trace.
+
{{domxref("Console.warn()")}}
+
Outputs a warning message. You may use string substitution and additional arguments with this method.
+
+ +

Usage

+ +

Outputting text to the console

+ +

The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods respectively. Each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.

+ +

There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them.

+ +

Outputting a single object

+ +

The simplest way to use the logging methods is to output a single object:

+ +
var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+
+ +

The output looks something like this:

+ +
[09:27:13.475] ({str:"Some text", id:5})
+ +

Outputting multiple objects

+ +

You can also output multiple objects by simply listing them when calling the logging method, like this:

+ +
var car = "Dodge Charger";
+var someObject = { str: "Some text", id: 5 };
+console.info("My first car was a", car, ". The object is:", someObject);
+ +

This output will look like this:

+ +
[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})
+
+ +

Using string substitutions

+ +

Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Substitution stringDescription
%o or %OOutputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
%d or %iOutputs an integer. Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01
%sOutputs a string.
%fOutputs a floating-point value. Formatting is supported, for example  console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10
+ +
+

Note: Precision formatting doesn't work in Chrome

+
+ +

Each of these pulls the next argument after the format string off the parameter list. For example:

+ +
for (var i=0; i<5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+
+ +

The output looks like this:

+ +
[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+
+ +

Styling console output

+ +

You can use the %c directive to apply a CSS style to console output:

+ +
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+ +
The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.
+ +
 
+ +
+ +
 
+ +
+

Note: Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.

+
+ +
 
+ +
{{h3_gecko_minversion("Using groups in the console", "9.0")}}
+ +

You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call console.group(). The console.groupCollapsed() method is similar but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.

+ +
Note: Collapsed groups are not supported yet in Gecko; the groupCollapsed() method is the same as group() at this time.
+ +

To exit the current group, simply call console.groupEnd(). For example, given this code:

+ +
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+
+ +

The output looks like this:

+ +

nesting.png

+ +
{{h3_gecko_minversion("Timers", "10.0")}}
+ +

In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the console object. To start a timer, call the console.time() method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

+ +

For example, given this code:

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");
+
+ +

Will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console:

+ +

timerresult.png

+ +

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

+ +
Note: It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.
+ +

Stack traces

+ +

The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:

+ +
function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+
+ +

The output in the console looks something like this:

+ +

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Console")}}

+ +

Notes

+ + + +

See also

+ + + +

Other implementations

+ + diff --git a/files/it/web/api/console/log/index.html b/files/it/web/api/console/log/index.html new file mode 100644 index 0000000000..4229185824 --- /dev/null +++ b/files/it/web/api/console/log/index.html @@ -0,0 +1,88 @@ +--- +title: console.log() +slug: Web/API/Console/log +translation_of: Web/API/Console/log +--- +
{{APIRef("Console API")}}
+ +

Il metodo  log() di {{domxref("Console")}} stampa un messaggio sulla web console. Il messaggio può essere una semplice stringa (opzionalmente, anche con valori sostituibili), o può essere uno qualsiasi o più oggetti JavaScript.

+ +

{{AvailableInWorkers}}

+ +

Sintassi

+ +
console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+
+ +

Parametri

+ +
+
obj1 ... objN
+
Una lista di oggetti JavaScript da stampare. La rappresentazione sotto forma di stringa di ciascuno di questi oggetti sarà messa in coda nell'ordine presentato e stampata. Perfavore fai attenzione che se tu stampi degli oggetti nelle ultime versioni si Chrome e Firefox quello che otterrai sarà un riferimento all'oggetto, che non necessariamente è il 'valore' dell'oggetto nel momento della chiamata di console.log(), ma è il valore dell'oggetto al momento in cui tu apri la console.
+
msg
+
Una stringa JavaScript contenente zero o più stringhe da sostituire.
+
subst1 ... substN
+
Oggetti JavaScript con i quali verranno sostituite le stringhe da sostituire in msg. Questo ti offre controlli aggiuntivi sul formato dell'output
+
+ +

Vedi Stampare del testo sulla Console nella documentazione di {{domxref("console")}} per maggiori dettagli.

+ +

Differenza tra log() e dir()

+ +

Ti potresti esser chiesto qual è la differenza tra {{domxref("console.dir()")}} e console.log().

+ +

Un'altra utile differenza esiste in Chrome quando invii elementi DOM alla console.

+ +

+ +

Nota bene:

+ + + +

Specificamente, console.log offre un trattamento speciale agli elementi del DOM, mentre console.dir non lo fa. Ė spesso utile quando si prova a vedere la rappresentazione completa degli oggetti JS del DOM.

+ +

Ulteriori informazioni si possono trovare sulle Chrome Console API reference su questa e altre funzioni.

+ +

Registrare (loggare) gli oggetti

+ +

Non usare console.log(obj), usa console.log(JSON.parse(JSON.stringify(obj))).

+ +

In questo modo sarai sicuro di visulizzare il valore di obj al momento in cui lo stai registrando (loggando). Altrimenti, svariati browser offrono una vista live che aggiorna costantemente i valori non appena cambiano. Potrebbe non essere quel che cerchi.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName("Console API", "#log", "console.log()")}}{{Spec2("Console API")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Console.log")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/console/table/index.html b/files/it/web/api/console/table/index.html new file mode 100644 index 0000000000..d2ae5bbce2 --- /dev/null +++ b/files/it/web/api/console/table/index.html @@ -0,0 +1,143 @@ +--- +title: Console.table() +slug: Web/API/Console/table +translation_of: Web/API/Console/table +--- +
 {{APIRef("Console API")}}
+ +

Visualizza dati tabulari come una tabella.

+ +

Questa funzione richiede un argomento obbligatorio data, che deve essere un array di oggetti, ed un parametro opzionale columns.

+ +

La funzione visualizza data come una tabella ed ogni elemento dell'array (o ogni sua proprietà numerabile se data è un oggetto) sarà una riga della tabella.

+ +

La prima colonna della tabella rappresenta l'etichetta (index). Se data è un array allora il valore sarà il suo indice nell'array. Se, invece, data è un oggetto, il suo valore sarà il nome della proprietà. Nota che (in Firefox) console.table limita a 1000 la visualizzazione delle righe (la prima riga contiene i nomi delle etichette).

+ +

{{AvailableInWorkers}}

+ +

Collezioni di tipi di primitive

+ +

L'argomento data può essere un array o un oggetto.

+ +
// array di stringhe
+
+console.table(["apples", "oranges", "bananas"]);
+ +

+ +
// un oggetto le cui proprietà sono stringhe
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);
+ +

+ +

Collezioni di tipi composti

+ +

Se l'elemento nell'array o le proprietà nell'oggetto sono a loro volta array o oggetti, allora i loro elementi o proprietà sono enumerati nella riga, uno per colonna:

+ +
// un array di arrays
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);
+ +

Table displaying array of arrays

+ +
// un array di oggetti
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);
+ +

Nota che se l'array contiene oggetti, allora le colonne sono etichettate con il nome della proprietà.

+ +

Table displaying array of objects

+ +
// un oggetto le cui proprietà sono oggetti
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);
+ +

Table displaying object of objects

+ +

Restringimento delle colonne visualizzate

+ +

Di default, console.table() visualizza la lista di elementi in ogni riga. Puoi usare il parametro opzionale columns per selezionare un sottoinsieme delle colonne da visualizzare:

+ +
// un array di oggetti, visualizzando solo firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);
+ +

Table displaying array of objects with filtered output

+ +

Ordinamento delle colonne

+ +

Puoi ordinare la tabella in base ad una particolare colonna cliccando sulla sua etichetta.

+ +

Sintassi

+ +
console.table(data [, columns]);
+
+ +

Parametri

+ +
+
data
+
Il dato da visualizzare. Deve essere un oggetto o un array.
+
columns
+
Un array contenente i nomi delle colonne da includere nell'output.
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommenti
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Initial definition
+ +

Compatibilità dei browser

+ +
+ + +

{{Compat("api.Console.table")}}

+
diff --git a/files/it/web/api/crypto/index.html b/files/it/web/api/crypto/index.html new file mode 100644 index 0000000000..0add9721d2 --- /dev/null +++ b/files/it/web/api/crypto/index.html @@ -0,0 +1,68 @@ +--- +title: Crypto +slug: Web/API/Crypto +tags: + - API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/Crypto +--- +

{{APIRef("Web Crypto API")}}

+ +

The Crypto interface represents basic cryptography features available in the current context. It allows access to a cryptographically strong random number generator and to cryptographic primitives.

+ +

An object with this interface is available on Web context via the {{domxref("Window.crypto")}} property.

+ +

Properties

+ +

This interface implements properties defined on {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}
+
Returns a {{domxref("SubtleCrypto")}} object providing access to common cryptographic primitives, like hashing, signing, encryption or decryption.
+
+ +

Methods

+ +

This interface implements methods defined on {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.getRandomValues()")}}
+
Fills the passed {{ jsxref("TypedArray") }} with cryptographically sound random values.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}{{Spec2("Web Crypto API")}}Initial definition
+ +

Browser Compatibility

+ +
+ + +

{{Compat("api.Crypto")}}

+
+ +

See Also

+ + diff --git a/files/it/web/api/crypto/subtle/index.html b/files/it/web/api/crypto/subtle/index.html new file mode 100644 index 0000000000..ae850ea329 --- /dev/null +++ b/files/it/web/api/crypto/subtle/index.html @@ -0,0 +1,52 @@ +--- +title: Crypto.subtle +slug: Web/API/Crypto/subtle +tags: + - API + - Crittografia + - D + - Proprietà + - Riferimenti + - Sola lettura + - Web Crypto API +translation_of: Web/API/Crypto/subtle +--- +

{{APIRef("Web Crypto API")}}

+ +

La proprietà in sola lettura Crypto.subtle restituisce un oggetto {{domxref("SubtleCrypto")}}, rendendo disponibili le funzioni crittografiche.

+ +

Syntax

+ +
var crypto = crypto.subtle;
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}{{ Spec2('Web Crypto API') }}Definizione iniziale.
+ +

Browser compatibility

+ + + +

{{Compat("api.Crypto.subtle")}}

+ +

See also

+ + diff --git a/files/it/web/api/datatransfer/getdata/index.html b/files/it/web/api/datatransfer/getdata/index.html new file mode 100644 index 0000000000..635da432ed --- /dev/null +++ b/files/it/web/api/datatransfer/getdata/index.html @@ -0,0 +1,161 @@ +--- +title: DataTransfer.getData() +slug: Web/API/DataTransfer/getData +translation_of: Web/API/DataTransfer/getData +--- +
+

 

+{{APIRef("HTML DOM")}}
+ +

Il metodo DataTransfer.getData() recupera i dati del trascinamento  (come {{domxref("DOMString")}}) per il data type specificato. Se l'operazione di trascinamento non include dati, questo metodo restituisce una stringa vuota.

+ +

Esempi di tipi di data types sono text/plain e text/uri-list.

+ +

Sintassi

+ +
DOMString dataTransfer.getData(format);
+
+ +

Argomenti

+ +
+
formato
+
Una {{domxref("DOMString")}} rappresentante il  tipo di dato da recuperare.
+
+ +

Valore restituito

+ +
+
{{domxref("DOMString")}}
+
Una {{domxref("DOMString")}} rappresentante i dati trascinati per il formato specificato. Se l'operazione di trascinamento non ha dati o l'operazione non ha dati per il formato specificato, questo metodo restituisce una stringa vuota.
+
+ +

Esempio

+ +

Questo esempio mostra l'uso dell'oggetto {{domxref("DataTransfer")}} e dei metodi {{domxref("DataTransfer.getData()","getData()")}} e {{domxref("DataTransfer.setData()","setData()")}} .

+ +

HTML

+ +
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
+    <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span>
+</div>
+<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+
+ +

CSS

+ +
#div1, #div2 {
+    width:100px;
+    height:50px;
+    padding:10px;
+    border:1px solid #aaaaaa;
+}
+
+ +

JavaScript

+ +
function allowDrop(allowdropevent) {
+    allowdropevent.target.style.color = 'blue';
+    allowdropevent.preventDefault();
+}
+
+function drag(dragevent) {
+    dragevent.dataTransfer.setData("text", dragevent.target.id);
+    dragevent.target.style.color = 'green';
+}
+
+function drop(dropevent) {
+    dropevent.preventDefault();
+    var data = dropevent.dataTransfer.getData("text");
+    dropevent.target.appendChild(document.getElementById(data));
+    document.getElementById("drag").style.color = 'black';
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Esempio', 600, '', '', 'Web/API/DataTransfer/getData') }}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-getdata", "getData()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-getdata", "getData()")}}{{Spec2("HTML5.1")}}definizione iniziale
+ +

Compatibilità dei browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support43.5{{CompatGeckoDesktop(10)}} [1]123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(10)}}[1]{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] in versioni di Firefox precedenti alla 49, questo metodo restituisce sempre una lista vuota se il tipo mime non è in una white list.

+ +

Vedere anche

+ +

{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}

diff --git a/files/it/web/api/datatransfer/index.html b/files/it/web/api/datatransfer/index.html new file mode 100644 index 0000000000..a821dabb6a --- /dev/null +++ b/files/it/web/api/datatransfer/index.html @@ -0,0 +1,183 @@ +--- +title: DataTransfer +slug: Web/API/DataTransfer +tags: + - API + - NeedsMarkupWork + - NeedsTranslation + - Reference + - TopicStub + - Web Development + - drag and drop +translation_of: Web/API/DataTransfer +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see HTML Drag and Drop API.

+ +

This object is available from the {{domxref("DragEvent.dataTransfer","dataTransfer")}} property of all {{domxref("DragEvent","drag events")}}. It cannot be created separately (i.e. there is no constructor for this object).

+ +

Properties

+ +

Standard properties

+ +
+
{{domxref("DataTransfer.dropEffect")}}
+
Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be none copy link or move.
+
{{domxref("DataTransfer.effectAllowed")}}
+
Provides all of the types of operations that are possible. Must be one of none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized.
+
{{domxref("DataTransfer.files")}}
+
Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.
+
{{domxref("DataTransfer.items")}} {{readonlyInline}}
+
Gives a {{domxref("DataTransferItemList")}} object which is a list of all of the drag data.
+
{{domxref("DataTransfer.types")}} {{readonlyInline}}
+
An array of {{domxref("DOMString","string")}} giving the formats that were set in the {{event("dragstart")}} event.
+
+ +

Gecko properties

+ +

{{SeeCompatTable}}

+ +
Note: All of the properties in this section are Gecko-specific.
+ +
+
{{domxref("DataTransfer.mozCursor")}}
+
Gives the drag cursor's state. This is primarily used to control the cursor during tab drags.
+
{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}}
+
Gives the number of items in the drag operation.
+
{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}
+
The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is null for external drags or if the caller can't access the node.
+
{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}
+
This property applies only to the dragend event, and is true if the user canceled the drag operation by pressing escape. It will be false in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location.
+
+ +

Methods

+ +

Standard methods

+ +
+
{{domxref("DataTransfer.clearData()")}}
+
Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.
+
{{domxref("DataTransfer.getData()")}}
+
Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.
+
{{domxref("DataTransfer.setData()")}}
+
Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.
+
{{domxref("DataTransfer.setDragImage()")}}
+
Set the image to be used for dragging if a custom one is desired.
+
+ +

Gecko methods

+ +

{{SeeCompatTable}}

+ +
Note: All of the methods in this section are Gecko-specific.
+ +
+
{{domxref("DataTransfer.addElement()")}}
+
Sets the drag source to the given element.
+
{{domxref("DataTransfer.mozClearDataAt()")}}
+
Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.
+
{{domxref("DataTransfer.mozGetDataAt()")}}
+
Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.
+
{{domxref("DataTransfer.mozSetDataAt()")}}
+
A data transfer may store multiple items, each at a given zero-based index. mozSetDataAt() may only be called with an index argument less than mozItemCount in which case an existing item is modified, or equal to mozItemCount in which case a new item is added, and the mozItemCount is incremented by one.
+
{{domxref("DataTransfer.mozTypesAt()")}}
+
Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.
+
+ +

Example

+ +

Every method and property listed in this document has its own reference page and each reference page either directly includes an example of the interface or has a link to an example.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#datatransfer','DataTransfer')}}{{Spec2('HTML WHATWG')}}mozCursor, mozItemCount, mozSourceNode, mozUserCancelled, addElement(), mozClearDataAt(), mozGetDataAt(), mozSetDataAt() and mozTypesAt are Gecko specific.
{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}{{Spec2('HTML5.1')}}Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support43.5 [2]10 [1] [2]123.1 [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1]Partial support refers to not supporting {{domxref("DataTransfer.setDragImage()")}} [CanIUse.com]

+ +

[2]Does not support {{domxref("DataTransfer.items")}} property

+ +

See also

+ + diff --git a/files/it/web/api/document/anchors/index.html b/files/it/web/api/document/anchors/index.html new file mode 100644 index 0000000000..2b7261420d --- /dev/null +++ b/files/it/web/api/document/anchors/index.html @@ -0,0 +1,31 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +translation_of: Web/API/Document/anchors +--- +
{{APIRef("DOM")}}
+ +

anchors restituisce un Array contenente tutte le ancore presenti nel documento.

+ +

Sintassi

+ +
nodeList = document.anchors
+
+ +

Esempio

+ +
if ( document.anchors.length >= 5 ) {
+    dump("Ho trovato troppe ancore");
+    window.location = "http://www.google.com";
+}
+
+ +

Note

+ +

Per ragioni di compatibilità all'indietro, l'array restituito contiene solo le ancore che hanno un attributo name e non quelle che hanno solo l'attributo id.

+ +

Specifiche

+ +

DOM Level 2 HTML: anchors

+ +

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

diff --git a/files/it/web/api/document/applets/index.html b/files/it/web/api/document/applets/index.html new file mode 100644 index 0000000000..47328fbe65 --- /dev/null +++ b/files/it/web/api/document/applets/index.html @@ -0,0 +1,25 @@ +--- +title: document.applets +slug: Web/API/Document/applets +translation_of: Web/API/Document/applets +--- +
{{APIRef("DOM")}}
+ +

applets restituisce un array contenente le applet presenti nel documento.

+ +

Sintassi

+ +
nodeList = document.applets
+
+ +

Esempio

+ +
// ( voglio la seconda applet )
+la_mia_applet_java = document.applets[1];
+
+ +

Specifiche

+ +

DOM Level 2 HTML: applets

+ +

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

diff --git a/files/it/web/api/document/body/index.html b/files/it/web/api/document/body/index.html new file mode 100644 index 0000000000..e13f8e1400 --- /dev/null +++ b/files/it/web/api/document/body/index.html @@ -0,0 +1,88 @@ +--- +title: Document.body +slug: Web/API/Document/body +tags: + - API + - DOM + - HTML DOM + - Proprietà + - Referenza +translation_of: Web/API/Document/body +--- +
{{APIRef("DOM")}}
+ +

La proprietà Document.body rappresenta il nodo {{HTMLElement("body")}} o {{HTMLElement("frameset")}} del documento corrente, o null se non esiste alcun elemento di questo tipo.

+ +

Sintassi

+ +
var objRef = document.body;
+document.body = objRef;
+ +

Esempio

+ +
// Dato questo HTML: <body id="oldBodyElement"></body>
+alert(document.body.id); // "oldBodyElement"
+
+var aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+
+ +

Appunti

+ +

document.body è l'elemento che contiene il contenuto per il documento. Nei documenti con contenuto <body> restituisce l'elemento <body>, e nei documenti frameset, restituisce l'elemento <frameset> più esterno.

+ +

Anche se body è settabile, l'impostazione di un nuovo corpo su un documento rimuoverà efficacemente tutti i figli attuali dell'elemento <body>.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +
{{Compat("api.Document.body")}}
+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/characterset/index.html b/files/it/web/api/document/characterset/index.html new file mode 100644 index 0000000000..e2062ac971 --- /dev/null +++ b/files/it/web/api/document/characterset/index.html @@ -0,0 +1,32 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +translation_of: Web/API/Document/characterSet +--- +
{{APIRef("DOM")}}
+ +

Restituisce la codifica dei caratteri utilizzata per il documento corrente.

+ +

Sintassi

+ +
stringa = document.characterSet
+
+ +

Esempio

+ +
<button onclick="alert(document.characterSet);"
+>Mostra il set di caratteri</button>
+// restituisce il set di caratteri, come "ISO-8859-1" o "UTF-8"
+
+ +

Note

+ +

La codifica dei caratteri è il set di caratteri utilizzato per visualizzare il documento, che potrebbe essere differente dalla codifica specificata nella pagina (l'utente può reimpostare la codifica da utilizzare).

+ +

Per un elenco completo delle codifiche, si veda: http://www.iana.org/assignments/character-sets.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

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

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

document.close() termina la scrittura su un documento che è stato aperto con document.open().

+ +

Sintassi

+ +
document.close();
+
+ +

Esempio

+ +
// apro un documento per scrivervi sopra;
+// scrivo il contenuto sul documento;
+// chiudo il documento.
+document.open();
+document.write("<p>Testo da inserire...</p>");
+document.close();
+
+ +

Specifiche

+ +

DOM Level 2 HTML: close() Method

diff --git a/files/it/web/api/document/createelement/index.html b/files/it/web/api/document/createelement/index.html new file mode 100644 index 0000000000..649ba72fb3 --- /dev/null +++ b/files/it/web/api/document/createelement/index.html @@ -0,0 +1,139 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Referenza + - createElement + - metodo +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

In un documento HTML, il metodo document.createElement() crea l'elemento HTML specificato da tagName o un {{domxref("HTMLUnknownElement")}} se tagName non viene riconosciuto.

+ +
+

Note: In un documento XUL, crea l'elemento XUL specificato. In altri documenti, crea un elemento con un URI namespace null.

+
+ +

Sintassi

+ +
var element = document.createElement(tagName[, options]);
+
+ +

Parametri

+ +
+
tagName
+
Una stringa che specifica il tipo di elemento da creare. Il {{domxref("Node.nodeName", "nodeName")}} dell'elemento creato viene inizializzato con il valore di tagName. Non utilizzare nomi qualificati (come "html:a") con questo metodo. Quando chiamato su un documento HTML, createElement() converte tagName in minuscolo prima di creare l'elemento. In Firefox, Opera e Chrome, createElement(null) funziona come createElement("null").
+
options{{optional_inline}}
+
Un oggetto ElementCreationOptions opzionale contenente una singola proprietà denominata is, il cui valore è il nome del tag per un elemento personalizzato precedentemente definito utilizzando customElements.define(). Vedi {{anch("Esempio di componente Web")}} per ulteriori dettagli.
+
+ +

Valore di ritorno

+ +

Il nuovo {{domxref("Element")}}.

+ +

Esempi

+ +

Esempio basilare

+ +

Questo crea un nuovo <div> e lo inserisce prima dell'elemento con l'ID "div1".

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Lavorare con gli elementi||</title>
+</head>
+<body>
+  <div id="div1">Il testo sopra è stato creato dinamicamente.</div>
+</body>
+</html>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement() {
+  // crea un nuovo elemento div
+  var newDiv = document.createElement("div");
+  // ed assegnargli un contenuto
+  var newContent = document.createTextNode("Hi there and greetings!");
+  // aggiungi il nodo di testo al div appena creato
+  newDiv.appendChild(newContent);
+
+  // aggiungi l'elemento appena creato e il suo contenuto nel DOM
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

{{EmbedLiveSample("Esempio_basilare", 500, 50)}}

+ +

Esempio di componente Web

+ +

Il seguente frammento di esempio è tratto dal nostro esempio di componente di espansione list-web (vedi anche live). In questo caso, il nostro elemento personalizzato estende {{domxref("HTMLUListElement")}}, che rappresenta l'elemento {{htmlelement("ul")}}.

+ +
// Crea una classe per l'elemento
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Chiama sempre super prima nel costruttore
+    super();
+
+    // definizione del costruttore lasciata fuori per brevità
+    ...
+  }
+}
+
+// Definisce il nuovo elemento
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

Se volessimo creare un'istanza di questo elemento a livello di codice, utilizzeremmo una chiamata seguendo le linee seguenti:

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

Al nuovo elemento verrà assegnato un attributo is il cui valore è il nome del tag dell'elemento personalizzato.

+ +
+

Note: Per la retrocompatibilità con le versioni precedenti della specifica Elementi personalizzati, alcuni browser ti permetteranno di passare una stringa qui invece di un oggetto, dove il valore della stringa è il nome del tag dell'elemento personalizzato.

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.createElement")}}

+ +

Vedi anche

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

Restituisce un nuovo oggetto Range.

+ +

Sintassi

+ +
range = document.createRange();
+
+ +

range è l'oggetto range creato.

+ +

Esempio

+ +
var range = document.createRange();
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+
+ +

Note

+ +

Una volta che un Range è stato creato, occorre impostare il punto iniziale e quello finale prima di poter utilizzare la maggior parte dei suoi metodi.

+ +

Specifiche

+ +

DOM Level 2 Range: DocumentRange.createRange

diff --git a/files/it/web/api/document/defaultview/index.html b/files/it/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..46f9ef20c0 --- /dev/null +++ b/files/it/web/api/document/defaultview/index.html @@ -0,0 +1,27 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +translation_of: Web/API/Document/defaultView +--- +
{{APIRef("DOM")}}
+ +

document.defaultView restituisce un riferimento all'AbstractView predefinita del documento, oppure null se non ne esiste una.

+ +

Sintassi

+ +
var vista = document.defaultView;
+
+ +

Questa proprietà è di sola lettura.

+ +

Note

+ +

document.defaultView fa parte dell'interfaccia DocumentView del DOM Level 2.

+ +

document.defaultView generalmente è un riferimento all'oggetto window del documento, però questo non è definito nella specifica è non può essere dato per scontato in ogni tipo di ambiente, o più precisamente in ogni browser.

+ +

Specifiche

+ +

DOM Level 2 defaultView

+ +

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

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

Restituisce la dichiarazione di tipo di documento (DTD) associata al documento corrente. L'oggetto restituito implementa l'interfaccia DocumentType.

+ +

Sintassi

+ +
doctype = document.doctype
+
+ +

doctype è un proprietà di sola lettura

+ +

Note

+ +

Questa proprietà restituisce null se non vi è alcun DTD associato al documento corrente.

+ +

Lo standard DOM level 2 non permette modifiche alla DTD.

+ +

Specifiche

+ +

DOM Level 2 Core: doctype

+ +

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

diff --git a/files/it/web/api/document/documentelement/index.html b/files/it/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..e48895b7a0 --- /dev/null +++ b/files/it/web/api/document/documentelement/index.html @@ -0,0 +1,68 @@ +--- +title: Document.documentElement +slug: Web/API/Document/documentElement +translation_of: Web/API/Document/documentElement +--- +
{{ApiRef("DOM")}}
+ +

Document.documentElement ritorna l'{{domxref("Element")}} che è l'elemento principale di {{domxref("document")}} (per esempio, l'elemento {{HTMLElement("html")}} per i documenti HTML).

+ +

Sintassi

+ +
var element = document.documentElement;
+
+ +

Esempio

+ +
var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+
+// firstTier è la NodeList dei figli diretti dell'elemento root
+for (var i = 0; i < firstTier.length; i++) {
+   // fare qualcosa con ogni child diretto dell'elemento radice
+   // come firstTier[i]
+}
+ +

Appunti

+ +

Per qualsiasi documento HTML non vuoto, document.documentElement sarà sempre un elemento {{HTMLElement("html")}}. Per qualsiasi documento XML non vuoto, document.documentElement sarà sempre qualunque elemento sia l'elemento radice del documento.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM3 Core')}} 
{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM2 Core')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.documentElement")}}

diff --git a/files/it/web/api/document/firstchild/index.html b/files/it/web/api/document/firstchild/index.html new file mode 100644 index 0000000000..ed5a34a883 --- /dev/null +++ b/files/it/web/api/document/firstchild/index.html @@ -0,0 +1,40 @@ +--- +title: document.firstChild +slug: Web/API/Document/firstChild +translation_of: Web/API/Node/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/forms/index.html b/files/it/web/api/document/forms/index.html new file mode 100644 index 0000000000..cda3146a42 --- /dev/null +++ b/files/it/web/api/document/forms/index.html @@ -0,0 +1,128 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - API + - DOM + - Document + - Forms + - HTML DOM + - HTML forms + - Proprietà + - Referenza +translation_of: Web/API/Document/forms +--- +

La proprietà di sola lettura forms dell'interfaccia {{domxref("Document")}} restituisce una {{domxref("HTMLCollection")}} che elenca tutti gli elementi {{HTMLElement("form")}} contenuti nel documento.

+ +
+

Note: Allo stesso modo, è possibile accedere a un elenco di elementi di input utente di un modulo utilizzando la proprietà {{domxref("HTMLFormElement.elements")}}.

+
+ +

Sintassi

+ +
collection = document.forms;
+ +

Valore

+ +

Un oggetto {{domxref("HTMLCollection")}} che elenca tutti i form del documento. Ogni elemento della collezione è un {{domxref("HTMLFormElement")}} che rappresenta un singolo elemento <form>.

+ +

Se il documento non ha moduli, la raccolta restituita è vuota, con una lunghezza pari a zero.

+ +

Esempi

+ +

Ottenere informazioni sul modulo

+ +
<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<title>document.forms example</title>
+</head>
+
+<body>
+
+<form id="robby">
+  <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
+</form>
+
+<form id="dave">
+  <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
+</form>
+
+<form id="paul">
+  <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
+</form>
+
+</body>
+</html>
+
+ +

Ottenere un elemento all'interno di un modulo

+ +
var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+
+ +

Accesso al modulo con nome

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>document.forms example</title>
+</head>
+
+<body>
+
+<form name="login">
+  <input name="email" type="email">
+  <input name="password" type="password">
+  <button type="submit">Log in</button>
+</form>
+
+<script>
+  var loginForm = document.forms.login; // Or document.forms['login']
+  loginForm.elements.email.placeholder = 'test@example.com';
+  loginForm.elements.password.placeholder = 'password';
+</script>
+</body>
+</html>
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}{{ Spec2('DOM2 Events') }}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.forms")}}

+ +

Vedi anche

+ + + +
{{APIRef("DOM")}}
diff --git a/files/it/web/api/document/getelementbyid/index.html b/files/it/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..bdcfac73a5 --- /dev/null +++ b/files/it/web/api/document/getelementbyid/index.html @@ -0,0 +1,149 @@ +--- +title: Document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elementi + - Referenza + - Web + - getElementById + - id + - metodo +translation_of: Web/API/Document/getElementById +--- +
{{ ApiRef("DOM") }}
+ +

Il metodo {{domxref("Document")}} getElementById() restituisce un oggetto {{domxref("Element")}} che rappresenta l'elemento la cui proprietà {{domxref("Element.id", "id")}} corrisponde alla stringa specificata. Poiché gli ID degli elementi devono essere univoci se specificati, sono un modo utile per accedere rapidamente a un elemento specifico.

+ +

Se hai bisogno di accedere a un elemento che non ha un ID, puoi usare {{domxref("Document.querySelector", "querySelector()")}} per trovare l'elemento usando un qualsiasi {{Glossary("CSS selector", "selettore")}}.

+ +

Sintassi

+ +
var element = document.getElementById(id);
+
+ +

Parametri

+ +
+
id
+
L'ID dell'elemento da localizzare. L'ID è una stringa sensibile al maiuscolo/minuscolo, che è univoca all'interno del documento; solo un elemento può avere un dato ID.
+
+ +

Valore di ritorno

+ +

Un oggetto {{domxref("Element")}} che descrive l'oggetto elemento DOM che corrisponde all'ID specificato o null se nel documento non è stato trovato alcun elemento corrispondente.

+ +

Esempio

+ +

HTML

+ +
<html>
+<head>
+  <title>getElementById example</title>
+</head>
+<body>
+  <p id="para">text here</p>
+  <button onclick="changeColor('blue');">blue</button>
+  <button onclick="changeColor('red');">red</button>
+</body>
+</html>
+ +

JavaScript

+ +
function changeColor(newColor) {
+  var elem = document.getElementById('para');
+  elem.style.color = newColor;
+}
+ +

Risultato

+ +

{{ EmbedLiveSample('Esempio', 250, 100) }}

+ +

Note di utilizzo

+ +

La maiuscola di "Id" nel nome di questo metodo deve essere corretta affinché il codice funzioni; getElementByID() non è valido e non funzionerà, per quanto naturale possa sembrare.

+ +

A differenza di altri metodi di ricerca degli elementi come {{domxref("Document.querySelector()")}} e {{domxref("Document.querySelectorAll()")}}, getElementById() è disponibile solo come metodo per l'oggetto globale document, e non è disponibile come metodo su tutti gli oggetti elemento nel DOM. Poiché gli ID devono essere univoci nell'intero documento, non sono necessarie versioni "locali" della funzione.

+ +

Esempio

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p id="test1">hello word2</p>
+        <p>hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById('parent-id');
+        var test1 = parentDOM.getElementById('test1');
+        // throw error
+        // Uncaught TypeError: parentDOM.getElementById is not a function
+    </script>
+</body>
+</html>
+ +

Se non ci sono elementi con l'id fornito, questa funzione restituisce null. Nota che il parametro id è case-sensitive, quindi document.getElementById("Main") restituirà null invece dell'elemento <div id="main"> perché "M" e "m" sono diversi per gli scopi di questo metodo.

+ +

Gli elementi non presenti nel documento non vengono cercati da getElementById(). Quando crei un elemento ed assegni un ID ad esso, devi inserire l'elemento nell'albero del documento con {{domxref("Node.insertBefore()")}} o un metodo simile prima di poterlo ottenere con getElementById():

+ +
var element = document.createElement('div');
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el sarà nullo!
+
+ +

Documenti non HTML. L'implementazione del DOM deve avere informazioni che indicano quali attributi sono di tipo ID. Gli attributi con il nome "id" non sono di tipo ID a meno che non siano definiti nella DTD del documento. L'attributo id è definito come di tipo ID nei casi comuni di XHTML, XUL, e altri. Si prevede che le implementazioni che non sanno se gli attributi siano di tipo ID o non restituiscano null.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}Definizione iniziale per l'interfaccia
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}Sostituisce DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}Sostituisce DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}{{Spec2('DOM WHATWG')}}Intende rimpiazzare DOM 3
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.getElementById")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/getelementsbyclassname/index.html b/files/it/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..c752bd665d --- /dev/null +++ b/files/it/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,82 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +translation_of: Web/API/Document/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

Il metodo getElementsByClassName dell'interfaccia {{domxref("Document")}} restituisce un array-like object di tutti gli elementi figli che hanno le classi specificate. Quando viene richiamato sull'oggetto {{domxref("document")}}, viene eseguita la ricerca del documento completo, incluso il nodo radice. Puoi anche usare {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} su qualsiasi elemento; restituirà solo gli elementi che sono discendenti dell'elemento radice specificato con le classi fornite.

+ +

Sintassi

+ +
var elementi = document.getElementsByClassName(nomi); // oppure:
+var elementi = rootElement.getElementsByClassName(nomi);
+ + + +

Esempi

+ +

Ottenere tutti gli elementi che hanno una come classe 'test':

+ +
document.getElementsByClassName('test')
+ +

Ottenere tutti gli elementi che hanno entrambe le classi 'red' e 'test':

+ +
document.getElementsByClassName('red test')
+ +

Ottenere tutti gli elementi che hanno una classe di 'test', all'interno di un elemento che ha l'ID di 'main':

+ +
document.getElementById('main').getElementsByClassName('test')
+ +

Ottenere il primo elemento con classe 'test' o indefinito se non ci sono elementi corrispondenti:

+ +
document.getElementsByClassName('test')[0]
+
+ +

Possiamo anche utilizzare il metodo Array.prototype su qualsiasi {{domxref("HTMLCollection")}} passando la HTMLCollection come il valore this. Qui troveremo tutti gli elementi div che hanno come classe 'test':

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

Ottenere il primo elemento la cui classe è 'test'

+ +

Questo è il metodo di operazione più comunemente usato.

+ +
<html>
+<body>
+    <div id="parent-id">
+        <p>hello world 1</p>
+        <p class="test">hello world 2</p>
+        <p>hello world 3</p>
+        <p>hello world 4</p>
+    </div>
+
+    <script>
+        var parentDOM = document.getElementById("parent-id");
+
+        var test = parentDOM.getElementsByClassName("test"); // una lista di elementi corrispondenti, *non* l'elemento stesso
+        console.log(test); //HTMLCollection[1]
+
+        var testTarget = parentDOM.getElementsByClassName("test")[0]; // il primo elemento, come volevamo
+        console.log(testTarget); //<p class="test">hello world 2</p>
+    </script>
+</body>
+</html>
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.getElementsByClassName")}}

+ +

Specifiche

+ + diff --git a/files/it/web/api/document/getelementsbyname/index.html b/files/it/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..f39fdf8ef7 --- /dev/null +++ b/files/it/web/api/document/getelementsbyname/index.html @@ -0,0 +1,97 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +tags: + - API + - DOM + - Document + - HTML + - Referenza + - metodo +translation_of: Web/API/Document/getElementsByName +--- +
{{APIRef("DOM")}}
+ +

Il metodo getElementsByName() dell'oggetto {{domxref("Document")}} ritorna una raccolta di elementi {{domxref("NodeList")}} con un determinato {{domxref("element.name","name")}} nel documento.

+ +

Sintassi

+ +
var elements = document.getElementsByName(name);
+
+ + + +

Esempio

+ +
<!DOCTYPE html>
+<html lang="en">
+<title>Example: using document.getElementsByName</title>
+
+<input type="hidden" name="up">
+<input type="hidden" name="down">
+
+<script>
+  var up_names = document.getElementsByName("up");
+  console.log(up_names[0].tagName); // ritorna "INPUT"
+</script>
+</html>
+
+ +

Appunti

+ +

L'attributo {{domxref("element.name","name")}} può essere applicato solo nei documenti (X)HTML.

+ +

La raccolta {{domxref("NodeList")}} restituita contiene tutti gli elementi con il parametro name dato, come {{htmlelement("meta")}}, {{htmlelement("object")}}, e persino elementi che non supportano affatto l'attributo name.

+ +
+

Il metodo getElementsByName funziona in modo diverso in IE10 e versioni precedenti. Lì, getElementsByName() restituisce anche gli elementi che hanno un attributo id con il valore specificato. Fai attenzione a non usare la stessa stringa sia di un name che di un id.

+
+ +
+

Il metodo getElementsByName funziona in modo diverso in IE. Lì, getElementsByName() non restituisce tutti gli elementi che potrebbero non avere un attributo name (come <span>).

+
+ +
+

Sia IE che Edge restituiscono una {{domxref("HTMLCollection")}}, non una {{domxref("NodeList")}}

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}{{Spec2("DOM2 HTML")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.getElementsByName")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/getelementsbytagname/index.html b/files/it/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..e5ad9540fb --- /dev/null +++ b/files/it/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,116 @@ +--- +title: Document.getElementsByTagName() +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - Referenza + - metodo +translation_of: Web/API/Document/getElementsByTagName +--- +
{{APIRef("DOM")}}
+ +

Il metodo getElementsByTagName dell'interfaccia {{domxref("Document")}} ritorna una {{domxref("HTMLCollection")}} di elementi con il tag specificato. Viene cercato il documento completo, incluso il nodo radice. L'HTMLCollection è dinamica, il che significa che si aggiorna automaticamente per rimanere sincronizzato con l'albero del DOM senza dover chiamare di nuovo document.getElementsByTagName().

+ +

Sintassi

+ +
var elementi = document.getElementsByTagName(nome);
+ + + +
Le ultime specifiche W3C dicono che gli elementi sono una HTMLCollection; tuttavia, questo metodo restituisce una {{domxref("NodeList")}} nei browser WebKit. Vedi {{bug(14869)}} per i dettagli.
+ +

Esempio

+ +

Nell'esempio seguente, getElementsByTagName() inizia da un particolare elemento padre e ricerca dall'alto verso il basso ricorsivamente attraverso il DOM da quell'elemento padre, una raccolta di tutti i discendenti che corrispondono al parametro nome del tag. Questo documento mostra sia document.getElementsByTagName() che l'identico funzionale {{domxref("Element.getElementsByTagName()")}}, che avvia la ricerca su un elemento specifico all'interno dell'albero del DOM.

+ +

Facendo click sui pulsanti viene utilizzato getElementsByTagName() per contare gli elementi del paragrafo discendente di un particolare genitore (il documento stesso o uno dei due elementi {{HTMLElement("div")}}).

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>esempio di getElementsByTagName</title>
+  <script>
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName('p');
+      var num = allParas.length;
+      alert('Ci sono ' + num + ' paragrafi in questo documento');
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById('div1');
+      var div1Paras = div1.getElementsByTagName('p');
+      var num = div1Paras.length;
+      alert('Ci sono ' + num + ' paragrafi in #div1');
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById('div2');
+      var div2Paras = div2.getElementsByTagName('p');
+      var num = div2Paras.length;
+      alert('Ci sono ' + num + ' paragrafi in #div2');
+    }
+  </script>
+</head>
+<body style="border: solid green 3px">
+  <p>Qualche testo esterno</p>
+  <p>Qualche testo esterno</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Qualche testo div1</p>
+    <p>Qualche testo div1</p>
+    <p>Qualche testo div1</p>
+
+    <div id="div2" style="border: solid red 3px">
+      <p>Qualche testo div2</p>
+      <p>Qualche testo div2</p>
+    </div>
+  </div>
+
+  <p>Qualche testo esterno/p>
+  <p>Qualche testo esterno</p>
+
+  <button onclick="getAllParaElems();">
+    mostra tutti gli elementi p nel documento</button><br />
+
+  <button onclick="div1ParaElems();">
+    mostra tutti gli elementi p nell'elemento div1</button><br />
+
+  <button onclick="div2ParaElems();">
+   mostra tutti gli elementi p nell'elemento div2</button>
+
+</body>
+</html>
+
+ +

Note

+ +

Quando chiamato su un documento HTML, getElementsByTagName() converte in minuscolo il suo argomento prima di procedere. Ciò non è desiderabile quando si cerca di far corrispondere gli elementi SVG di camelCase in una sottostruttura in un documento HTML. {{Domxref("document.getElementsByTagNameNS()")}} è utile in questo caso. Vedi anche {{Bug(499656)}}.

+ +

document.getElementsByTagName() è simile a {{domxref("Element.getElementsByTagName()")}}, ad eccezione del fatto che la sua ricerca comprende l'intero documento.

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.getElementsByTagName")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/head/index.html b/files/it/web/api/document/head/index.html new file mode 100644 index 0000000000..941a533431 --- /dev/null +++ b/files/it/web/api/document/head/index.html @@ -0,0 +1,84 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - API + - Document + - HTML DOM + - Proprietà + - Referenza +translation_of: Web/API/Document/head +--- +
{{APIRef("DOM")}}
+ +

La proprietà head di sola lettura dell'interfaccia {{domxref("Document")}} restituisce l'elemento {{HTMLElement("head")}} del documento corrente.

+ +

Sintassi

+ +
var objRef = document.head;
+
+ +

Valore

+ +

Un {{domxref("HTMLHeadElement")}}.

+ +

Esempio

+ +
<!doctype html>
+<head id="my-document-head">
+  <title>Esempio: usare document.head</title>
+</head>
+
+<script>
+  var theHead = document.head;
+
+  console.log(theHead.id); // "my-document-head";
+
+  console.log( theHead === document.querySelector("head") ); // true
+</script>
+
+ +

Appunti

+ +

document.head è di sola lettura. Cercare di assegnare un valore a questa proprietà fallirà silenziosamente o, in Strict Mode, genera un {{jsxref("TypeError")}} .

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Document.head")}}

+ +

Vedi anche

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

Restituisce l'altezza in pixel dell'elemento body del documento corrente.

+ +

Syntax

+ +
height_value = document.height
+
+ +

Parametri

+ + + +

Esempio

+ +
// visualizza l'altezza del documento
+alert(document.height);
+
+ +

Note

+ +

Si veda document.width.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di uno standard.

+ +

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

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

document.images restituisce una collezione delle immagini nel documento HTML corrente.

+ +

Sintassi

+ +
var htmlCollection = document.images;
+ +

Esempio

+ +
var ilist = document.images;
+
+for(var i = 0; i < ilist.length; i++) {
+    if(ilist[i].src == "banner.gif") {
+        // found the banner
+    }
+}
+ +

Note

+ +

document.images.length – proprietà che restituisce il numero di immagini della pagina.

+ +

document.images è parte del DOM HTML, e funziona solo per documenti HTML.

+ +

Specifiche tecniche

+ + + + + + + + + + + + + + + + + + + + + +
Specifiche tecnicheStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-images', 'Document.images')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-90379117', 'Document.images')}}{{ Spec2('DOM2 Events') }}Initial definition.
diff --git a/files/it/web/api/document/importnode/index.html b/files/it/web/api/document/importnode/index.html new file mode 100644 index 0000000000..354db3c0c8 --- /dev/null +++ b/files/it/web/api/document/importnode/index.html @@ -0,0 +1,45 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +translation_of: Web/API/Document/importNode +--- +
{{APIRef("DOM")}}
+ +

Restituisce un clone di un nodo preso da un documento esterno.

+ +

Sintassi

+ +
nodo =
+document.importNode(
+nodoEsterno,
+bool)
+
+ + + +

Esempio

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var vecchioNodo = iframe.contentDocument.getElementById("mioNodo");
+var nuovoNodo = document.importNode(vecchioNodo,true);
+document.getElementById("contenitore").appendChild(nuovoNodo);
+
+ +

Note

+ +

Il nodo non viene rimosso dal documento originale. Il nodo importato è un clone dell'originale. I nodi presi dai documenti esterni devono essere importati prima di poter essere inseriti nel documento corrente.

+ +

http://www.w3.org/DOM/faq.html#ownerdoc

+ +

Specifiche

+ +

DOM Level 2 Core: Document.importNode

+ +

{{ languages( { "fr": "fr/DOM/document.importNode" } ) }}

diff --git a/files/it/web/api/document/index.html b/files/it/web/api/document/index.html new file mode 100644 index 0000000000..108f317cc3 --- /dev/null +++ b/files/it/web/api/document/index.html @@ -0,0 +1,308 @@ +--- +title: Document +slug: Web/API/Document +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Document +--- +

{{ ApiRef("DOM") }}

+ +

Introduzione

+ +

L'oggetto document fornisce un modo generico di rappresentare documenti HTML, XHTML, e XML. Implementa l'interfaccia DOM Core document.

+ +

In aggiunta all'interfaccia generalizzata DOM core document, i documenti HTML implementano pure l'interfaccia DOM HTMLDocument, che è un'interfaccia più specializzata per interagire con i documenti HTML (contiene ad esempio document.cookie). In questa pagina, le proprietà e i metodi che fanno parte di questa interfaccia più specializzata sono seguite da un asterisco.

+ +

L'oggetto document è contenuto nell'oggetto window e può contenere un numero qualsiasi di elementi.

+ +

L'interfaccia di document fornisce accesso a informazioni come il tipo di documento, i plugin e le applet, e fornisce metodi per creare e manipolare i suoi nodi figli.

+ +

Proprietà

+ +
+
document.alinkColor*{{ Deprecated_inline() }}
+
Restituisce o setta il colore dei link attivi nel corpo del documento.
+
+ +
+
document.anchors*
+
Restituisce una collezione delle ancore presenti nel documento.
+
+ +
+
document.applets*
+
Restituisce una collezione delle applet presenti nel documento.
+
+ +
+
document.bgColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore di sfondo dell'elemento body del documento.
+
+ +
+
document.body*
+
Restituisce il nodo BODY del documento.
+
+ +
+
document.characterSet
+
Restituisce il set di caratteri usato nel documento.
+
+ +
+
document.compatMode*
+
Indica se il documento viene letto dal browser in modalità standard o in modalità compatibile.
+
+ +
+
document.cookie*
+
Restituisce una stringa contenente la lista dei cookie(separati da un punto e virgola) usati dal documento o setta un singolo cookie.
+
+ +
+
document.contentWindow*
+
Restituisce l'oggetto window in cui è contenuto il documento.
+
+ +
+
document.defaultView
+
Restituisce un riferimento all'oggetto window.
+
+ +
+
document.designMode
+
Restituisce/setta lo stato di attivazione del Rich Text Editor di firefox, Midas.
+
+ +
+
document.doctype
+
Restituisce la Dichiarazione del Tipo di Documento(DTD) del documento corrente.
+
+ +
+
document.documentElement
+
Restituisce l'elemento che è figlio diretto di document, cioè nella maggior parte dei casi l'elemento HTML.
+
+ +
+
document.domain*
+
Restituisce il dominio del documento corrente.
+
+ +
+
document.embeds*
+
Restituisce una lista degli elementi object contenuti nel documento.
+
+ +
+
document.fgColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore di default per il testo del documento corrente.
+
+ +
+
document.firstChild
+
Restituisce il primo nodo figlio di document. (Guarda anche firstChild presente nell'intefaccia element).
+
+ +
+
document.forms*
+
Restituisce una collezione degli elementi FORM contenuti nel documento.
+
+ +
+
document.height*
+
Restituisce/setta l'altezza del documento corrente.
+
+ +
+
document.images*
+
Restituisce una collezione delle immagini contenute nel documento corrente.
+
+ +
+
document.implementation*
+
Restituisce l'implementazione DOM associata al documento corrente.
+
+ +
+
document.lastModified*
+
Restituisce la data in cui il documento è stato modificato l'ultima volta.
+
+ +
+
document.linkColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore dei collegamenti nel documento.
+
+ +
+
document.links*
+
Restituisce una collezione dei collegamenti presenti nel documento.
+
+ +
+
document.location*
+
Restituisce l'URI del documento corrente.
+
+ +
+
document.namespaceURI
+
Restituisce lo spazio dei nomi XML del documento corrente.
+
+ +
+
document.plugins*
+
Restituisce una lista dei plugin disponibili.
+
+ +
+
document.referrer*
+
Restituisce l'URI della pagina che ha portato al documento corrente.
+
+ +
+
document.styleSheets*
+
Restituisce una collezione degli oggetti stylesheet presenti nel documento corrente.
+
+ +
+
document.title*
+
Restituisce il titolo del documento corrente.
+
+ +
+
document.URL
+
Restituisce una stringa che rappresenta l'URI del documento corrente.
+
+ +
+
document.vlinkColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore dei collegamenti visitati.
+
+ +
+
document.width*
+
Restituisce la larghezza del documento corrente.
+
+ +

Metodi

+ +
+
document.clear {{ Deprecated_inline() }}
+
Cancella i contenuti del documento.
+
+ +
+
document.close
+
Chiude lo stream per la scrittura del documento.
+
+ +
+
document.createAttribute
+
Crea (e restituisce) un nuovo nodo attributo.
+
+ +
+
document.createDocumentFragment
+
Crea un frammento.
+
+ +
+
document.createElement*
+
Crea un elemento a partire dal nome di tag dato. Non funziona con documenti xml.
+
+ +
+
document.createElementNS
+
Crea un elmento col nome di tag e l'URI per lo spazio dei nomi dati.
+
+ +
+
document.createTextNode
+
Crea un nodo testuale.
+
+ +
+
document.createEvent
+
Crea un oggetto di classe Event.
+
+ +
+
document.createRange
+
Crea un oggetto di classe Range.
+
+ +
+
document.execCommand
+
Esegue un comando Midas.
+
+ +
+
document.evaluate
+
Valuta una espressione XPath.
+
+ +
+
document.getElementById
+
Restituisce un riferimento a oggetto per l'elemento che ha il dato id.
+
+ +
+
document.getElementsByName
+
Restituisce una collezione di elementi con il dato attributo name.
+
+ +
+
document.getElementsByTagName
+
Restituisce una collezione degli elementi con il dato nome di tag.
+
+ +
+
document.importNode
+
Restituisce un clone di un nodo preso da un documento esterno.
+
+ +
+
document.loadOverlay
+
Carica un overlay XUL dinamicamente. Funziona solo con i documenti XUL.
+
+ +
+
document.open
+
Apre uno stream di documento per la scrittura.
+
+ +
+
document.queryCommandEnabled
+
Restituisce true se il comando Midas può essere eseguito sul range corrente.
+
+ +
+
document.queryCommandIndeterm
+
Restituisce true se il comando Midas è in uno stato indeterminato per il range corrente.
+
+ +
+
document.queryCommandState
+
Restituisce true se il comando Midas è stato eseguito sul range corrente.
+
+ +
+
document.queryCommandValue
+
Restituisce il valore corrente del range corrente per il comando Midas.
+
+ +
+
document.write*
+
Scrive del codice all'interno del documento.Non funziona con i documenti xml.
+
+ +
+
document.writeln
+
Scrive una linea di codice all'interno del documento. Non funziona con i documenti xml.
+
+ +

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

diff --git a/files/it/web/api/document/lastmodified/index.html b/files/it/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..4e56851ee4 --- /dev/null +++ b/files/it/web/api/document/lastmodified/index.html @@ -0,0 +1,31 @@ +--- +title: document.lastModified +slug: Web/API/Document/lastModified +translation_of: Web/API/Document/lastModified +--- +
{{APIRef("DOM")}}
+ +

Restituisce una stringa contenente la data e l'ora dell'utlima modifica apportata al documento corrente.

+ +

Sintassi

+ +
stringa = document.lastModified
+
+ +

Esempio

+ +
dump(document.lastModified);
+// restituisce: Tuesday, July 10, 2001 10:19:42
+
+ +

Note

+ +

Si noti che essendo una stringa, lastModified non può essere utilizzata facilmente per le comparazioni tra le date di modifica di un altro documento.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

MSDN: proprietà lastModified

+ +

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

diff --git a/files/it/web/api/document/links/index.html b/files/it/web/api/document/links/index.html new file mode 100644 index 0000000000..fff02b997f --- /dev/null +++ b/files/it/web/api/document/links/index.html @@ -0,0 +1,100 @@ +--- +title: document.links +slug: Web/API/Document/links +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Document/links +--- +
+

{{ APIRef("DOM") }}

+ +

La proprietà links restituisce una collezione di tutti gli elementi {{HTMLElement("area")}} e di tutti gli elementi {{HTMLElement("a")}} in un documento con un valore per l'attributo href .

+ +

Sintassi

+ +
nodeList = document.links
+ +

Esempio

+ +
var links = document.links;
+for(var i = 0; i < links.length; i++) {
+  var linkHref = document.createTextNode(links[i].href);
+  var lineBreak = document.createElement("br");
+  document.body.appendChild(linkHref);
+  document.body.appendChild(lineBreak);
+}
+ +

Specifiche tecniche

+ + + + + + + + + + + + + + + + + + + +
Specifiche tecnicheStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}{{Spec2("DOM2 HTML")}}Definizione iniziale
+ +

Compatibilità browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
diff --git a/files/it/web/api/document/namespaceuri/index.html b/files/it/web/api/document/namespaceuri/index.html new file mode 100644 index 0000000000..704185463f --- /dev/null +++ b/files/it/web/api/document/namespaceuri/index.html @@ -0,0 +1,29 @@ +--- +title: document.namespaceURI +slug: Web/API/Document/namespaceURI +translation_of: Web/API/Node/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/open/index.html b/files/it/web/api/document/open/index.html new file mode 100644 index 0000000000..7f4c1eb77a --- /dev/null +++ b/files/it/web/api/document/open/index.html @@ -0,0 +1,46 @@ +--- +title: document.open +slug: Web/API/Document/open +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Document/open +--- +
{{APIRef("DOM")}}
+ +

Il metodo document.open() apre un documento in scrittura (document.write()).

+ +

Sintassi

+ +
document.open();
+
+ +

Esempio

+ +
// In questo esempio, i contenuti del documento
+// vengono sovrascritti quando il documento
+// viene reinizializzato con open().
+document.write("<html><p>eliminami</p></html>");
+document.open();
+// il documento è vuoto
+
+ +

Note

+ +

Se un documento esiste, questo metodo lo svuota (si veda l'esempio sopra).

+ +

Inoltre document.open() viene chiamato implicitamente quando si chiama document.write() dopo che la pagina è stata caricata, nonostante ciò non sia richiesto dalle specifiche del W3C.

+ +

Non confondere questo metodo con window.open(). document.open() permette di sovrascrivere il documento corrente o aggiungere testo allo stesso, mentre window.open fornisce un modo per apreire una finestra, lasciando intatto il documento. Poiché window è l'oggetto globale, scrivere solamente open(...) fa la stessa cosa

+ +

Puoi chiudere il documento aperto usando document.close().

+ +

Specificazioni

+ +

DOM Level 2 HTML: open() Method

+ +
 
+ +

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

diff --git a/files/it/web/api/document/queryselector/index.html b/files/it/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..6d8000818d --- /dev/null +++ b/files/it/web/api/document/queryselector/index.html @@ -0,0 +1,121 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +translation_of: Web/API/Document/querySelector +--- +
{{ApiRef("DOM")}}
+ +

Il metodo {{domxref("Document")}} querySelector() ritorna il primo {{domxref("Element")}} all'interno del documento che corrisponde al selettore specificato o al gruppo di selettori. Se non vengono trovate corrispondenze, viene restituito null.

+ +
+

Note: Il matching viene eseguito utilizzando il deep-pre-order traversal dei nodi del documento partendo dal primo elemento nel markup del documento e iterando attraverso i nodi sequenziali per ordine del numero di nodi figli.

+
+ +

Sintassi

+ +
element = document.querySelector(selectors);
+
+ +

Parametri

+ +
+
selectors
+
Una {{domxref("DOMString")}} contenente uno o più selettori da trovare. Questa stringa deve essere una stringa di selettore CSS valida; se non lo è, viene generata un'eccezione SYNTAX_ERR. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sui selettori e su come gestirli.
+
+ +
+

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.

+
+ +

Valore di ritorno

+ +

Un oggetto {{domxref ("Element")}} che rappresenta il primo elemento nel documento che corrisponde al set specificato di CSS selectors, o null viene restituito se non ci sono corrispondenze.

+ +

Se hai bisogno di un elenco di tutti gli elementi che corrispondono ai selettori specificati, dovresti usare {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.

+ +

Eccezioni

+ +
+
SYNTAX_ERR
+
La sintassi dei selettori specificati non è valida.
+
+ +

Note di utilizzo

+ +

Se il selettore specificato corrisponde a un ID erroneamente utilizzato più di una volta nel documento, viene restituito il primo elemento con quell'ID.

+ +

Gli pseudo-elementi CSS non restituiranno mai alcun elemento, come specificato nelle API dei selettori.

+ +

Escaping caratteri speciali

+ + + +

Per eseguire la corrispondenza con un ID o selettori che non seguono la sintassi CSS standard (ad esempio utilizzando due punti o uno spazio in modo inappropriato), è necessario eseguire l'escape del carattere con un backslash ("\"). Poiché il backslash è anche un carattere di escape in JavaScript, se si immette una stringa letterale, è necessario eseguire l'escape due volte (una per la stringa JavaScript e un'altra per querySelector ()):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b è il carattere di controllo backspace)
+  document.querySelector('#foo\bar');    // Non corrisponde a nulla
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // Seleziona il primo div
+
+  document.querySelector('#foo:bar');    // Non corrisponde a nulla
+  document.querySelector('#foo\\:bar');  // Seleziona il secondo div
+ +

Esempi

+ +

Trovare il primo elemento che corrisponde a una classe

+ +

In questo esempio, viene restituito il primo elemento del documento con la classe "myclass":

+ +
var el = document.querySelector(".myclass");
+
+ +

Un selettore più complesso

+ +

I selettori possono anche essere molto potenti, come dimostrato nel seguente esempio. Qui, il primo elemento {{HTMLElement("input")}} con il nome "login" (<input name="login"/>) situato all'interno di un {{HTMLElement("div")}} la cui classe è "user-panel main" (<div class="user-panel main">) nel documento viene restituito:

+ +
var el = document.querySelector("div.user-panel.main input[name='login']");
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}}
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +
{{Compat("api.Document.querySelector")}}
+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/queryselectorall/index.html b/files/it/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..a8e614ce9e --- /dev/null +++ b/files/it/web/api/document/queryselectorall/index.html @@ -0,0 +1,180 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - Cercare elementi + - Document + - Localizzare Elementi + - Referenza + - Selettori + - Selettori CSS + - Selezionare Elementi + - Trovare elementi + - metodo + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Il metodo {{domxref("Document")}} querySelectorAll() ritorna una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi del documento che corrispondono al gruppo specificato di selettori.

+ +
+

Note: This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.

+
+ +

Sintassi

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parametri

+ +
+
selectors
+
Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve contenere dei selettori CSS validi; se non lo sono, viene generata un'eccezione SyntaxError. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sull'uso dei selettori per cercare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.
+
+ +
+

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.

+
+ +

Valore di ritorno

+ +

Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ogni elemento che corrisponde ad almeno uno dei selettori specificati o una {{domxref("NodeList")}} vuota in caso di assenza di corrispondenze.

+ +
+

Note: Se i selectors specificati includono uno pseudo-elemento CSS, l'elenco restituito è sempre vuoto.

+
+ +

Eccezioni

+ +
+
SyntaxError
+
La sintassi della stringa selectors specificata non è valida.
+
+ +

Esempi

+ +

Ottenere un elenco di elementi

+ +

Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} nel documento:

+ +
var matches = document.querySelectorAll("p");
+ +

Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} all'interno del documento con la classe "note" o "alert":

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

Qui, otteniamo un elenco di elementi <p> il cui elemento padre immediato è un {{domxref("div")}} con la classe "highlighted" e che si trovano all'interno di un contenitore il cui ID è "test".

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Questo esempio utilizza un selettore tramite attributo per restituire un elenco degli elementi {{domxref("iframe")}} nel documento che contengono un attributo denominato "data-src":

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è "userlist" con l'attributo "data-active" il cui valore è "1":

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

Accedere ai risultati

+ +

Una volta che viene restituita la {{domxref("NodeList")}} degli elementi corrispondenti, è possibile esaminarla come qualsiasi array. Se l'array è vuoto (ovvero la sua proprietà length è 0), non è stato trovato alcun elemento.

+ +

Altrimenti, puoi semplicemente usare la notazione array standard per accedere ai contenuti della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Note dell'utente

+ +

querySelectorAll() si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.

+ +

HTML

+ +

Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} nidificati.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

In questo esempio, quando si seleziona ".outer .inner" nel contesto <div> con la classe "select", si trova ancora l'elemento con la classe ".inner" anche se .outer non è un discendente dell'elemento base su cui viene eseguita la ricerca (".select"). Per impostazione predefinita, querySelectorAll() verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.

+ +

La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, trova solo i selettori corrispondenti sui discendenti dell'elemento base:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Standard di vita
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Nessun cambiamento
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Definizione iniziale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definizione originale
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Document.querySelectorAll")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/referrer/index.html b/files/it/web/api/document/referrer/index.html new file mode 100644 index 0000000000..8cefd3c9ac --- /dev/null +++ b/files/it/web/api/document/referrer/index.html @@ -0,0 +1,23 @@ +--- +title: document.referrer +slug: Web/API/Document/referrer +translation_of: Web/API/Document/referrer +--- +
{{APIRef("DOM")}}
+ +

Restituisce l'URI della pagina che l'utente ha visitato e che conteneva il link al documento corrente.

+ +

Sintassi

+ +
stringa = document.referrer
+
+ +

Note

+ +

Il valore è una stringa vuota se l'utente si è recato alla pagina corrente digitando l'indirizzo direttamente o attraverso un bookmark. Siccome questa proprietà restituisce solo una stringa, non fornisce un accesso al DOM della pagina a cui si riferisce.

+ +

Specifiche

+ +

DOM Level 2: referrer

+ +

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

diff --git a/files/it/web/api/document/stylesheets/index.html b/files/it/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..9de0ad0fc5 --- /dev/null +++ b/files/it/web/api/document/stylesheets/index.html @@ -0,0 +1,43 @@ +--- +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 +--- +

{{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/title/index.html b/files/it/web/api/document/title/index.html new file mode 100644 index 0000000000..5e93fa8318 --- /dev/null +++ b/files/it/web/api/document/title/index.html @@ -0,0 +1,32 @@ +--- +title: document.title +slug: Web/API/Document/title +translation_of: Web/API/Document/title +--- +

{{APIRef("DOM")}}document.title restituisce il titolo del documento.

+ +

Sintassi

+ +
sTitle = document.title
+
+ +

Parametri

+ + + +

Esempio

+ +
<html>
+  <title>Ciao mondo!</title>
+  <body>
+...
+// document.title restituisce "Ciao mondo!"
+
+ +

Specifiche

+ +

DOM Level 2: title

+ +

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

diff --git a/files/it/web/api/document/url/index.html b/files/it/web/api/document/url/index.html new file mode 100644 index 0000000000..e3a04cf953 --- /dev/null +++ b/files/it/web/api/document/url/index.html @@ -0,0 +1,29 @@ +--- +title: document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +
{{APIRef("DOM")}}
+ +

Restituisce l'URL del documento corrente.

+ +

Sintassi

+ +
stringa = document.URL
+
+ +

Esempio

+ +
var currentURL = document.URL;
+alert(currentURL);
+
+ +

Notesù

+ +

URL è un sostituto della proprietà non standard document.location.href. Tuttavia document.URL è di sola lettura, diversamente da document.location.href.

+ +

Specifiche

+ +

DOM Level 2 HTML: URL

+ +

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

diff --git a/files/it/web/api/document/width/index.html b/files/it/web/api/document/width/index.html new file mode 100644 index 0000000000..82756dbbc7 --- /dev/null +++ b/files/it/web/api/document/width/index.html @@ -0,0 +1,32 @@ +--- +title: document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +
{{APIRef("DOM")}}
+ +

Restituisce la larghezza in pixel dell'elemento body del documento corrente.

+ +

Non supportato da IE.

+ +

Sintassi

+ +
pixels = document.width;
+
+ +

Esempio

+ +
function init() {
+  alert("La larghezza del documento è di " + document.width + " pixel.");
+}
+
+ +

Note

+ +

Si veda document.height.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di uno standard.

+ +

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

diff --git a/files/it/web/api/document/write/index.html b/files/it/web/api/document/write/index.html new file mode 100644 index 0000000000..0337177181 --- /dev/null +++ b/files/it/web/api/document/write/index.html @@ -0,0 +1,74 @@ +--- +title: Document.write() +slug: Web/API/Document/write +translation_of: Web/API/Document/write +--- +

{{ ApiRef("DOM") }}

+ +

Riassunto

+ +

Scrive una stringa di testo in un flusso di documento aperto da document.open().

+ +

Sintassi

+ +
document.write(markup);
+
+ + + +

Example

+ +
<html>
+
+<head>
+<title>write example</title>
+
+<script type="text/javascript">
+
+function newContent()
+{
+alert("load new content");
+document.open();
+document.write("<h1>Out with the old - in with the new!</h1>");
+document.close();
+}
+
+</script>
+</head>
+
+<body onload="newContent();">
+<p>Some original document content.</p>
+</body>
+</html>
+
+ +

Note

+ +

La scrittura di un documento che è gia stato caricato senza document.open() eseguirà automaticamente document.open. Una volta che hai finito di scrivere, si consiglia di chiamare document.close(), per dire al browser di completare il caricamento della pagina. Il testo che si scrive viene analizzato nel modello struttura del documento. Nell'esempio precedente, l'h1 diventa nodo del documento.

+ +

Se il document.write() viene incorporato direttamente nel codice HTML, allora non chiamerà il document.open(). Per esempio:

+ +
 <div>
+  <script type="text/javascript">
+    document.write("<h1>Main title</h1>")
+  </script>
+ </div>
+
+ +
Nota: document.write (come document.writeln) non lavora in documenti XHTML (si otterrà "Operazione non ammessa" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) nella console). Questo è il caso se l'apertura di un file locale con estensione .xhtml, o per qualsiasi documento servito con un tipo MIME application/xhtml+xml . Ulteriori informazioni sono disponibili nel W3C XHTML FAQ.
+ +

Specificazioni

+ + + +

Vedi anche

+ + diff --git a/files/it/web/api/document/writeln/index.html b/files/it/web/api/document/writeln/index.html new file mode 100644 index 0000000000..080eb49c4e --- /dev/null +++ b/files/it/web/api/document/writeln/index.html @@ -0,0 +1,34 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +

{{ ApiRef("DOM") }}

+ +

Scrive una stringa di testo seguita da un carattere di accapo nel documento.

+ +

Sintassi

+ +
document.writeln(riga);
+
+ +

Parametri

+ + + +

Esempio

+ +
document.writeln("<p>inserisci una password:</p>");
+
+ +

Note

+ +

document.writeln è uguale a document.write, in più aggiunge una nuova riga.

+ +
Nota: document.writeln (come document.write) non funziona nei documenti XHTML (restituisce un errore "Operation is not supported" (Operazione non supportata) (NS_ERROR_DOM_NOT_SUPPORTED_ERR) sulla console degli errori). Questo può capitare per esempio aprendo un file locale con estensione .xhtml o qualsiasi documento da un server che abbia MIME type application/xhtml+xml. Altre informazioni sono disponibili nelle W3C XHTML FAQ.
+ +

Specifiche

+ +

writeln

diff --git a/files/it/web/api/document_object_model/index.html b/files/it/web/api/document_object_model/index.html new file mode 100644 index 0000000000..c1877f3642 --- /dev/null +++ b/files/it/web/api/document_object_model/index.html @@ -0,0 +1,435 @@ +--- +title: Document Object Model (DOM) +slug: Web/API/Document_Object_Model +tags: + - API + - DOM + - DOM Reference + - Intermediate + - Reference +translation_of: Web/API/Document_Object_Model +--- +
{{DefaultAPISidebar("DOM")}}
+ +

Il Document Object Model (DOM) rappresenta una pagina web come un documento con un albero logico di oggetti.

+ +

Ogni ramo dell'albero termina in un nodo, e ogni nodo contiene oggetti. Il modello DOM collega le pagine web agli script o ai linguaggi di programmazione. Usualmente significa usare JavaScript, anche se modellare documenti HTML, SVG o XML come oggetti non è parte del linguaggio JavaScript.

+ +

I metodi del DOM permettono un accesso programmatico all'albero; tramite i metodi e le proprietà del DOM è possibile modificare la struttura del documento stesso, lo stile e/o il contenuto.

+ +

I nodi possono avere degli eventi aggangiati ad essi e quando un evento viene scatenato, l'handler dell'evento viene eseguito.

+ +

E' disponibile una introduzione al DOM.

+ +

Interfacce DOM

+ +
+
    +
  • {{domxref("Attr")}}
    • +
  • {{domxref("CharacterData")}}
    • +
  • {{domxref("ChildNode")}} {{experimental_inline}}
    • +
  • {{domxref("Comment")}}
    • +
  • {{domxref("CustomEvent")}}
    • +
  • {{domxref("Document")}}
    • +
  • {{domxref("DocumentFragment")}}
    • +
  • {{domxref("DocumentType")}}
    • +
  • {{domxref("DOMError")}}
    • +
  • {{domxref("DOMException")}}
    • +
  • {{domxref("DOMImplementation")}}
    • +
  • {{domxref("DOMString")}}
    • +
  • {{domxref("DOMTimeStamp")}}
    • +
  • {{domxref("DOMSettableTokenList")}}
    • +
  • {{domxref("DOMStringList")}}
    • +
  • {{domxref("DOMTokenList")}}
    • +
  • {{domxref("Element")}}
    • +
  • {{domxref("Event")}}
    • +
  • {{domxref("EventTarget")}}
    • +
  • {{domxref("HTMLCollection")}}
    • +
  • {{domxref("MutationObserver")}}
    • +
  • {{domxref("MutationRecord")}}
    • +
  • {{domxref("NamedNodeMap")}}
    • +
  • {{domxref("Node")}}
    • +
  • {{domxref("NodeFilter")}}
    • +
  • {{domxref("NodeIterator")}}
    • +
  • {{domxref("NodeList")}}
    • +
  • {{domxref("NonDocumentTypeChildNode")}}
    • +
  • {{domxref("ParentNode")}}
    • +
  • {{domxref("ProcessingInstruction")}}
    • +
  • {{domxref("Selection")}}{{experimental_inline}}
    • +
  • {{domxref("Range")}}
    • +
  • {{domxref("Text")}}
    • +
  • {{domxref("TextDecoder")}} {{experimental_inline}}
    • +
  • {{domxref("TextEncoder")}} {{experimental_inline}}
    • +
  • {{domxref("TimeRanges")}}
    • +
  • {{domxref("TreeWalker")}}
    • +
  • {{domxref("URL")}}
    • +
  • {{domxref("Window")}}
    • +
  • {{domxref("Worker")}}
    • +
  • {{domxref("XMLDocument")}} {{experimental_inline}}
    • +
+
+ +

Interfacce DOM obsolete {{obsolete_inline}}

+ +

The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still not very clear whether some may be reintroduced or not, but for the time being they have to be considered as obsolete and should be avoided:

+ +
+
    +
  • {{domxref("CDATASection")}}
    • +
  • {{domxref("DocumentTouch")}}
    • +
  • {{domxref("DOMConfiguration")}}
    • +
  • {{domxref("DOMErrorHandler")}}
    • +
  • {{domxref("DOMImplementationList")}}
    • +
  • {{domxref("DOMImplementationRegistry")}}
    • +
  • {{domxref("DOMImplementationSource")}}
    • +
  • {{domxref("DOMLocator")}}
    • +
  • {{domxref("DOMObject")}}
    • +
  • {{domxref("DOMUserData")}}
    • +
  • {{domxref("ElementTraversal")}}
    • +
  • {{domxref("Entity")}}
    • +
  • {{domxref("EntityReference")}}
    • +
  • {{domxref("NamedNodeMap")}}
    • +
  • {{domxref("NameList")}}
    • +
  • {{domxref("Notation")}}
    • +
  • {{domxref("TypeInfo")}}
    • +
  • {{domxref("UserDataHandler")}}
    • +
+
+ +

HTML interfaces

+ +

A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.

+ +

An HTMLDocument object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}}. Eventually, {{domxref("Selection")}} is done on the document.

+ +

HTML element interfaces

+ +
+
    +
  • {{domxref("HTMLAnchorElement")}}
    • +
  • {{domxref("HTMLAppletElement")}}
    • +
  • {{domxref("HTMLAreaElement")}}
    • +
  • {{domxref("HTMLAudioElement")}}
    • +
  • {{domxref("HTMLBaseElement")}}
    • +
  • {{domxref("HTMLBodyElement")}}
    • +
  • {{domxref("HTMLBRElement")}}
    • +
  • {{domxref("HTMLButtonElement")}}
    • +
  • {{domxref("HTMLCanvasElement")}}
    • +
  • {{domxref("HTMLDataElement")}}
    • +
  • {{domxref("HTMLDataListElement")}}
    • +
  • {{domxref("HTMLDialogElement")}}
    • +
  • {{domxref("HTMLDirectoryElement")}}
    • +
  • {{domxref("HTMLDivElement")}}
    • +
  • {{domxref("HTMLDListElement")}}
    • +
  • {{domxref("HTMLElement")}}
    • +
  • {{domxref("HTMLEmbedElement")}}
    • +
  • {{domxref("HTMLFieldSetElement")}}
    • +
  • {{domxref("HTMLFontElement")}}
    • +
  • {{domxref("HTMLFormElement")}}
    • +
  • {{domxref("HTMLFrameElement")}}
    • +
  • {{domxref("HTMLFrameSetElement")}}
    • +
  • {{domxref("HTMLHeadElement")}}
    • +
  • {{domxref("HTMLHeadingElement")}}
    • +
  • {{domxref("HTMLHtmlElement")}}
    • +
  • {{domxref("HTMLHRElement")}}
    • +
  • {{domxref("HTMLIFrameElement")}}
    • +
  • {{domxref("HTMLImageElement")}}
    • +
  • {{domxref("HTMLInputElement")}}
    • +
  • {{domxref("HTMLKeygenElement")}}
    • +
  • {{domxref("HTMLLabelElement")}}
    • +
  • {{domxref("HTMLLegendElement")}}
    • +
  • {{domxref("HTMLLIElement")}}
    • +
  • {{domxref("HTMLLinkElement")}}
    • +
  • {{domxref("HTMLMapElement")}}
    • +
  • {{domxref("HTMLMediaElement")}}
    • +
  • {{domxref("HTMLMenuElement")}}
    • +
  • {{domxref("HTMLMetaElement")}}
    • +
  • {{domxref("HTMLMeterElement")}}
    • +
  • {{domxref("HTMLModElement")}}
    • +
  • {{domxref("HTMLObjectElement")}}
    • +
  • {{domxref("HTMLOListElement")}}
    • +
  • {{domxref("HTMLOptGroupElement")}}
    • +
  • {{domxref("HTMLOptionElement")}}
    • +
  • {{domxref("HTMLOutputElement")}}
    • +
  • {{domxref("HTMLParagraphElement")}}
    • +
  • {{domxref("HTMLParamElement")}}
    • +
  • {{domxref("HTMLPreElement")}}
    • +
  • {{domxref("HTMLProgressElement")}}
    • +
  • {{domxref("HTMLQuoteElement")}}
    • +
  • {{domxref("HTMLScriptElement")}}
    • +
  • {{domxref("HTMLSelectElement")}}
    • +
  • {{domxref("HTMLSourceElement")}}
    • +
  • {{domxref("HTMLSpanElement")}}
    • +
  • {{domxref("HTMLStyleElement")}}
    • +
  • {{domxref("HTMLTableElement")}}
    • +
  • {{domxref("HTMLTableCaptionElement")}}
    • +
  • {{domxref("HTMLTableCellElement")}}
    • +
  • {{domxref("HTMLTableDataCellElement")}}
    • +
  • {{domxref("HTMLTableHeaderCellElement")}}
    • +
  • {{domxref("HTMLTableColElement")}}
    • +
  • {{domxref("HTMLTableRowElement")}}
    • +
  • {{domxref("HTMLTableSectionElement")}}
    • +
  • {{domxref("HTMLTextAreaElement")}}
    • +
  • {{domxref("HTMLTimeElement")}}
    • +
  • {{domxref("HTMLTitleElement")}}
    • +
  • {{domxref("HTMLTrackElement")}}
    • +
  • {{domxref("HTMLUListElement")}}
    • +
  • {{domxref("HTMLUnknownElement")}}
    • +
  • {{domxref("HTMLVideoElement")}}
    • +
+
+ +

Other interfaces

+ +
+
    +
  • {{domxref("CanvasRenderingContext2D")}}
    • +
  • {{domxref("CanvasGradient")}}
    • +
  • {{domxref("CanvasPattern")}}
    • +
  • {{domxref("TextMetrics")}}
    • +
  • {{domxref("ImageData")}}
    • +
  • {{domxref("CanvasPixelArray")}}
    • +
  • {{domxref("NotifyAudioAvailableEvent")}}
    • +
  • {{domxref("HTMLAllCollection")}}
    • +
  • {{domxref("HTMLFormControlsCollection")}}
    • +
  • {{domxref("HTMLOptionsCollection")}}
    • +
  • {{domxref("HTMLPropertiesCollection")}}
    • +
  • {{domxref("DOMStringMap")}}
    • +
  • {{domxref("RadioNodeList")}}
    • +
  • {{domxref("MediaError")}}
    • +
+
+ +

Obsolete HTML interfaces {{obsolete_inline}}

+ +
+
    +
  • {{domxref("HTMLBaseFontElement")}}
    • +
  • {{domxref("HTMLIsIndexElement")}}
    • +
+
+ +

SVG interfaces

+ +

SVG element interfaces

+ +
+
    +
  • {{domxref("SVGAElement")}}
    • +
  • {{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGAnimationElement")}}
    • +
  • {{domxref("SVGAnimateElement")}}
    • +
  • {{domxref("SVGAnimateColorElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGAnimateMotionElement")}}
    • +
  • {{domxref("SVGAnimateTransformElement")}}
    • +
  • {{domxref("SVGCircleElement")}}
    • +
  • {{domxref("SVGClipPathElement")}}
    • +
  • {{domxref("SVGColorProfileElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGComponentTransferFunctionElement")}}
    • +
  • {{domxref("SVGCursorElement")}}
    • +
  • {{domxref("SVGDefsElement")}}
    • +
  • {{domxref("SVGDescElement")}}
    • +
  • {{domxref("SVGElement")}}
    • +
  • {{domxref("SVGEllipseElement")}}
    • +
  • {{domxref("SVGFEBlendElement")}}
    • +
  • {{domxref("SVGFEColorMatrixElement")}}
    • +
  • {{domxref("SVGFEComponentTransferElement")}}
    • +
  • {{domxref("SVGFECompositeElement")}}
    • +
  • {{domxref("SVGFEConvolveMatrixElement")}}
    • +
  • {{domxref("SVGFEDiffuseLightingElement")}}
    • +
  • {{domxref("SVGFEDisplacementMapElement")}}
    • +
  • {{domxref("SVGFEDistantLightElement")}}
    • +
  • {{domxref("SVGFEDropShadowElement")}}
    • +
  • {{domxref("SVGFEFloodElement")}}
    • +
  • {{domxref("SVGFEFuncAElement")}}
    • +
  • {{domxref("SVGFEFuncBElement")}}
    • +
  • {{domxref("SVGFEFuncGElement")}}
    • +
  • {{domxref("SVGFEFuncRElement")}}
    • +
  • {{domxref("SVGFEGaussianBlurElement")}}
    • +
  • {{domxref("SVGFEImageElement")}}
    • +
  • {{domxref("SVGFEMergeElement")}}
    • +
  • {{domxref("SVGFEMergeNodeElement")}}
    • +
  • {{domxref("SVGFEMorphologyElement")}}
    • +
  • {{domxref("SVGFEOffsetElement")}}
    • +
  • {{domxref("SVGFEPointLightElement")}}
    • +
  • {{domxref("SVGFESpecularLightingElement")}}
    • +
  • {{domxref("SVGFESpotLightElement")}}
    • +
  • {{domxref("SVGFETileElement")}}
    • +
  • {{domxref("SVGFETurbulenceElement")}}
    • +
  • {{domxref("SVGFilterElement")}}
    • +
  • {{domxref("SVGFilterPrimitiveStandardAttributes")}}
    • +
  • {{domxref("SVGFontElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGFontFaceElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGForeignObjectElement")}}
    • +
  • {{domxref("SVGGElement")}}
    • +
  • {{domxref("SVGGeometryElement")}}
    • +
  • {{domxref("SVGGlyphElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGGlyphRefElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGGradientElement")}}
    • +
  • {{domxref("SVGGraphicsElement")}}
    • +
  • {{domxref("SVGHatchElement")}} {{experimental_inline}}
    • +
  • {{domxref("SVGHatchpathElement")}} {{experimental_inline}}
    • +
  • {{domxref("SVGHKernElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGImageElement")}}
    • +
  • {{domxref("SVGLinearGradientElement")}}
    • +
  • {{domxref("SVGLineElement")}}
    • +
  • {{domxref("SVGMarkerElement")}} {{experimental_inline}}
    • +
  • {{domxref("SVGMaskElement")}}
    • +
  • {{domxref("SVGMeshElement")}} {{experimental_inline}}
    • +
  • {{domxref("SVGMeshGradientElement")}} {{experimental_inline}}
    • +
  • {{domxref("SVGMeshpatchElement")}} {{experimental_inline}}
    • +
  • {{domxref("SVGMeshrowElement")}} {{experimental_inline}}
    • +
  • {{domxref("SVGMetadataElement")}}
    • +
  • {{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGMPathElement")}}
    • +
  • {{domxref("SVGPathElement")}}
    • +
  • {{domxref("SVGPatternElement")}}
    • +
  • {{domxref("SVGPolylineElement")}}
    • +
  • {{domxref("SVGPolygonElement")}}
    • +
  • {{domxref("SVGRadialGradientElement")}}
    • +
  • {{domxref("SVGRectElement")}}
    • +
  • {{domxref("SVGScriptElement")}}
    • +
  • {{domxref("SVGSetElement")}}
    • +
  • {{domxref("SVGSolidcolorElement")}} {{experimental_inline}}
    • +
  • {{domxref("SVGStopElement")}}
    • +
  • {{domxref("SVGStyleElement")}}
    • +
  • {{domxref("SVGSVGElement")}}
    • +
  • {{domxref("SVGSwitchElement")}}
    • +
  • {{domxref("SVGSymbolElement")}}
    • +
  • {{domxref("SVGTextContentElement")}}
    • +
  • {{domxref("SVGTextElement")}}
    • +
  • {{domxref("SVGTextPathElement")}}
    • +
  • {{domxref("SVGTextPositioningElement")}}
    • +
  • {{domxref("SVGTitleElement")}}
    • +
  • {{domxref("SVGTRefElement")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGTSpanElement")}}
    • +
  • {{domxref("SVGUseElement")}}
    • +
  • {{domxref("SVGUnknownElement")}} {{experimental_inline}}
    • +
  • {{domxref("SVGViewElement")}}
    • +
  • {{domxref("SVGVKernElement")}} {{deprecated_inline}}
    • +
+
+ +

SVG data type interfaces

+ +

Here are the DOM API for data types used in the definitions of SVG properties and attributes.

+ +
+

Note: Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.

+
+ +

Static type

+ +
+
    +
  • {{domxref("SVGAngle")}}
    • +
  • {{domxref("SVGColor")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGICCColor")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGElementInstance")}}
    • +
  • {{domxref("SVGElementInstanceList")}}
    • +
  • {{domxref("SVGLength")}}
    • +
  • {{domxref("SVGLengthList")}}
    • +
  • {{domxref("SVGMatrix")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGNameList")}}
    • +
  • {{domxref("SVGNumber")}}
    • +
  • {{domxref("SVGNumberList")}}
    • +
  • {{domxref("SVGPaint")}}
    • +
  • {{domxref("SVGPathSeg")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegClosePath")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegArcRel")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPathSegList")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPoint")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPointList")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGPreserveAspectRatio")}}
    • +
  • {{domxref("SVGRect")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGStringList")}}
    • +
  • {{domxref("SVGTransform")}}
    • +
  • {{domxref("SVGTransformList")}}
    • +
+
+ +

Animated type

+ +
+
    +
  • {{domxref("SVGAnimatedAngle")}}
    • +
  • {{domxref("SVGAnimatedBoolean")}}
    • +
  • {{domxref("SVGAnimatedEnumeration")}}
    • +
  • {{domxref("SVGAnimatedInteger")}}
    • +
  • {{domxref("SVGAnimatedLength")}}
    • +
  • {{domxref("SVGAnimatedLengthList")}}
    • +
  • {{domxref("SVGAnimatedNumber")}}
    • +
  • {{domxref("SVGAnimatedNumberList")}}
    • +
  • {{domxref("SVGAnimatedPathData")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGAnimatedPoints")}}
    • +
  • {{domxref("SVGAnimatedPreserveAspectRatio")}}
    • +
  • {{domxref("SVGAnimatedRect")}}
    • +
  • {{domxref("SVGAnimatedString")}}
    • +
  • {{domxref("SVGAnimatedTransformList")}}
    • +
+
+ + + +
+
    +
  • {{domxref("ElementTimeControl")}}
    • +
  • {{domxref("TimeEvent")}}
    • +
+
+ +

Other SVG interfaces

+ +
+
    +
  • {{domxref("GetSVGDocument")}}
    • +
  • {{domxref("ShadowAnimation")}}
    • +
  • {{domxref("SVGColorProfileRule")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGCSSRule")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGDocument")}}
    • +
  • {{domxref("SVGException")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGFitToViewBox")}}
    • +
  • {{domxref("SVGLangSpace")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGLocatable")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGRenderingIntent")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGStylable")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGTests")}}
    • +
  • {{domxref("SVGTransformable")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGUnitTypes")}}
    • +
  • {{domxref("SVGUseElementShadowRoot")}}
    • +
  • {{domxref("SVGURIReference")}}
    • +
  • {{domxref("SVGViewSpec")}} {{deprecated_inline}}
    • +
  • {{domxref("SVGZoomAndPan")}}
    • +
  • {{domxref("SVGZoomEvent")}} {{deprecated_inline}}
    • +
+
+ +

See also

+ + diff --git a/files/it/web/api/document_object_model/introduzione/index.html b/files/it/web/api/document_object_model/introduzione/index.html new file mode 100644 index 0000000000..328caa0c5c --- /dev/null +++ b/files/it/web/api/document_object_model/introduzione/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/locating_dom_elements_using_selectors/index.html b/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..7e82547d5d --- /dev/null +++ b/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,46 @@ +--- +title: Individuazione degli elementi DOM mediante selettori +slug: Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +

L'API dei selettori fornisce metodi che consentono di recuperare in modo rapido e semplice i nodi {{domxref("Element")}} dal DOM confrontando una serie di selettori. Questo è molto più rapido rispetto alle tecniche passate, in cui era necessario, ad esempio, utilizzare un loop nel codice JavaScript per individuare gli elementi specifici che dovevi trovare.

+ +

L'interfaccia NodeSelector

+ +

Questa specifica aggiunge due nuovi metodi a qualsiasi oggetto che implementa le interfacce {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}}:

+ +
+
querySelector
+
Restituisce il primo nodo {{domxref("Element")}} corrispondente nella sottostruttura del nodo. Se non viene trovato alcun nodo corrispondente, viene restituito null.
+
querySelectorAll
+
Restituisce una {{domxref("NodeList")}} contenente tutti i nodi Element corrispondenti all'interno della sottostruttura del nodo o una NodeList vuota se non vengono trovate corrispondenze.
+
+ +
Note: La {{domxref("NodeList")}} restituita da {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} non è dinamica, il che significa che le modifiche nel DOM non si riflettono nella collezione. Questo è diverso dagli altri metodi di DOM querying che restituiscono gli elenchi dei nodi dinamici.
+ +

È possibile trovare esempi e dettagli leggendo la documentazione per i metodi {{domxref("Element.querySelector()")}} e {{domxref("Element.querySelectorAll()")}}, nonché nell'articolo Code snippets for querySelector.

+ +

Selettori

+ +

I metodi di selezione accettano uno o più selettori separati da virgola per determinare quale elemento o elementi devono essere restituiti. Ad esempio, per selezionare tutti gli elementi paragrafo (p)  in un documento la cui classe CSS è warning o note, è possibile effettuare le seguenti operazioni:

+ +
var special = document.querySelectorAll("p.warning, p.note");
+ +

Puoi anche effettuare una query per ID. Per esempio:

+ +
var el = document.querySelector("#main, #basic, #exclamation");
+ +

Dopo aver eseguito il codice sopra, el contiene il primo elemento nel documento il cui ID è uno di main, basic, o exclamation.

+ +

Puoi usare qualsiasi selettore CSS con i metodi querySelector() e querySelectorAll().

+ +

Vedi anche

+ + diff --git a/files/it/web/api/domapplicationsregistry/getinstalled/index.html b/files/it/web/api/domapplicationsregistry/getinstalled/index.html new file mode 100644 index 0000000000..24657e5900 --- /dev/null +++ b/files/it/web/api/domapplicationsregistry/getinstalled/index.html @@ -0,0 +1,49 @@ +--- +title: DOMApplicationsRegistry.getInstalled() +slug: Web/API/DOMApplicationsRegistry/getInstalled +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/getInstalled +--- +

 

+ +

 

+ +

{{ ApiRef("Apps") }}

+ +

{{ non-standard_header() }}

+ +

Summary

+ +

Get a list of all installed apps from this origin. For example, if you call this on the Firefox Marketplace, you will get the list of apps installed by the Firefox Marketplace.

+ +
+

Note: Installable open web apps used to have a "single app per origin" security policy, but this was lifted as of Firefox 34/Firefox OS 2.1 (read this FAQ entry for more information). If you still need to support older versions, consider hosting your apps at separate origins; one strategy is to create different subdomains for your apps.

+
+ +

Syntax

+ +
var request = window.navigator.mozApps.getInstalled();
+
+ +

Errors

+ +

The string ERROR can be returned in DOMRequest.error.

+ +

Example

+ +
var request = window.navigator.mozApps.getInstalled();
+request.onerror = function(e) {
+  alert("Error calling getInstalled: " + request.error.name);
+};
+request.onsuccess = function(e) {
+  alert("Success, number of apps: " + request.result.length);
+  var appsRecord = request.result;
+};
+ +

Callers are expected to set the onsuccess and onerror callback properties of the returned object, as shown in this example. If the call is successful an array of App objects is returned in the result property of the returned object. In the example this is request.result.

+ + + + diff --git a/files/it/web/api/domapplicationsregistry/index.html b/files/it/web/api/domapplicationsregistry/index.html new file mode 100644 index 0000000000..4effc6546e --- /dev/null +++ b/files/it/web/api/domapplicationsregistry/index.html @@ -0,0 +1,89 @@ +--- +title: DOMApplicationsRegistry +slug: Web/API/DOMApplicationsRegistry +tags: + - API + - Apps + - Apps API + - NeedsTranslation + - Non-standard + - TopicStub +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry +--- +

{{ ApiRef("Apps") }}

+ +

{{ non-standard_header() }}

+ +

Provides support for installing, managing, and controlling Open Web apps in a browser. Currently implemented as {{ domxref('window.navigator.mozApps') }}.

+ +

Property

+ +
+
{{domxref("DOMApplicationsRegistry.mgmt")}}
+
A mgmt object that exposes functions that let dashboards manage and launch apps on a user's behalf.
+
+ +

Methods

+ +
+
{{ domxref("DOMApplicationsRegistry.checkInstalled()") }}
+
Checks whether an app has already been installed, taking its manifest as parameter.
+
{{ domxref("DOMApplicationsRegistry.install()") }}
+
Triggers the installation of an app. During the installation process, the app is validated and the user is prompted to approve the installation.
+
{{ domxref("DOMApplicationsRegistry.getSelf()") }}
+
Returns an object that contains an {{ domxref('app') }} object for the app.
+
{{ domxref("DOMApplicationsRegistry.getInstalled()") }}
+
Gets a list of all installed apps.
+
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatUnknown() }}16.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}16.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/it/web/api/domstring/index.html b/files/it/web/api/domstring/index.html new file mode 100644 index 0000000000..625d5762d3 --- /dev/null +++ b/files/it/web/api/domstring/index.html @@ -0,0 +1,56 @@ +--- +title: DOMString +slug: Web/API/DOMString +tags: + - API + - DOM + - Referenza + - String +translation_of: Web/API/DOMString +--- +
{{APIRef("DOM")}}
+ +

DOMString è una stringa UTF-16. Poiché JavaScript utilizza già tali stringhe, DOMString viene mappato direttamente su {{jsxref("String")}}.

+ +

Passare {{jsxref("null")}} ad un metodo o parametro che accetta una DOMString tipicamente si trasforma in "null".

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}Riformulazione della definizione per rimuovere casi di bordo strani.
{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Vedi anche

+ + diff --git a/files/it/web/api/domtokenlist/index.html b/files/it/web/api/domtokenlist/index.html new file mode 100644 index 0000000000..dab0967959 --- /dev/null +++ b/files/it/web/api/domtokenlist/index.html @@ -0,0 +1,115 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +tags: + - API + - DOM + - DOMTokenList + - Interfaccia + - Referenza +translation_of: Web/API/DOMTokenList +--- +
{{APIRef("DOM")}}
+ +

L'interfaccia DOMTokenList rappresenta un insieme di token separati dallo spazio. Tale insieme viene restituito da {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}}, {{domxref("HTMLAreaElement.relList")}}, {{domxref("HTMLIframeElement.sandbox")}}, o {{domxref("HTMLOutputElement.htmlFor")}}. Viene indicizzato a partire da 0 come con gli JavaScript {{jsxref("Array")}} oggetti. DOMTokenList è sempre case-sensitive.

+ +

Proprietà

+ +
+
{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
+
È un integer che rappresenta il numero di oggetti memorizzati nell'oggetto.
+
{{domxref("DOMTokenList.value")}}
+
Il valore della lista come una {{domxref("DOMString")}}.
+
+ +

Metodi

+ +
+
{{domxref("DOMTokenList.item()")}}
+
Restituisce un elemento nell'elenco per il suo indice (restituisce undefined se il numero è maggiore o uguale alla lunghezza dell'elenco).
+
{{domxref("DOMTokenList.contains()")}}
+
Restituisce true se la lista contiene il token dato, altrimenti false.
+
{{domxref("DOMTokenList.add()")}}
+
Aggiunge il token indicato alla lista.
+
{{domxref("DOMTokenList.remove()")}}
+
Rimuove il token specificato dall'elenco.
+
{{domxref("DOMTokenList.replace()")}}
+
Sostituisce un token esistente con un nuovo token.
+
{{domxref("DOMTokenList.supports()")}}
+
Restituisce true se un determinato token si trova nei token supportati dell'attributo associato.
+
{{domxref("DOMTokenList.toggle()")}}
+
Rimuove un determinato token dall'elenco e restituisce false. Se il token non esiste viene aggiunto e la funzione restituisce true.
+
{{domxref("DOMTokenList.entries()")}}
+
Restituisce un {{jsxref("Iteration_protocols","iterator")}} consentendoti di passare attraverso tutte le coppie chiave/valore contenute in questo oggetto.
+
{{domxref("DOMTokenList.forEach()")}}
+
Esegue una funzione fornita una volta per elemento DOMTokenList.
+
{{domxref("DOMTokenList.keys()")}}
+
Restituisce un {{jsxref("Iteration_protocols", "iterator")}} consentendo di esaminare tutte le chiavi delle coppie chiave/valore contenute in questo oggetto.
+
{{domxref("DOMTokenList.values()")}}
+
Restituisce un {{jsxref("Iteration_protocols", "iterator")}} consentendo di esaminare tutti i valori delle coppie chiave/valore contenute in questo oggetto.
+
+ +

Esempi

+ +

Nel seguente semplice esempio, recuperiamo l'elenco di classi impostato su un elemento {{htmlelement("p")}} come una DOMTokenList usando {{domxref("Element.classList")}}, aggiungi una classe usando {{domxref("DOMTokenList.add()")}}, quindi aggiorna il {{domxref("Node.textContent")}} di <p> per uguagliare DOMTokenList.

+ +

Innanzitutto, l'HTML:

+ +
<p class="a b c"></p>
+ +

Ora JavaScript:

+ +
var para = document.querySelector("p");
+var classes = para.classList;
+para.classList.add("d");
+para.textContent = 'paragraph classList is "' + classes + '"';
+ +

L'output è simile a questo:

+ +

{{ EmbedLiveSample('Esempi', '100%', 60) }}

+ +

Taglio di spazi bianchi e rimozione di duplicati

+ +

I metodi che modificano DOMTokenList (come {{domxref("DOMTokenList.add()")}}) tagliano automaticamente gli spazi bianchi in eccesso e rimuovono i valori duplicati dall'elenco. Per esempio:

+ +
<span class="    d   d e f"></span>
+ +
var span = document.querySelector("span");
+var classes = span.classList;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';
+ +

L'output è simile a questo:

+ +

{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}

+ +

Specificazioni

+ + + + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}{{Spec2("DOM WHATWG")}}Initial definition
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.DOMTokenList")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/api/domtokenlist/item/index.html b/files/it/web/api/domtokenlist/item/index.html new file mode 100644 index 0000000000..c81eedcbc9 --- /dev/null +++ b/files/it/web/api/domtokenlist/item/index.html @@ -0,0 +1,67 @@ +--- +title: DOMTokenList.item() +slug: Web/API/DOMTokenList/item +translation_of: Web/API/DOMTokenList/item +--- +

{{APIRef("DOM")}}

+ +

Il metodo item() dell'interfaccia {{domxref("DOMTokenList")}} restituisce un elemento nell'elenco per il suo indice.

+ +

Sintassi

+ +
tokenList.item(index);
+ +

Parametri

+ +
+
index
+
Una {{domxref("DOMString")}} che rappresenta l'indice dell'elemento che si desidera restituire.
+
+ +

Valore di ritorno

+ +

Una {{domxref("DOMString")}} che rappresenta l'elemento restituito. Restituisce undefined se il numero è maggiore o uguale alla lunghezza della lista.

+ +

Esempi

+ +

Nel seguente esempio recuperiamo l'elenco di classi impostate su un elemento {{htmlelement("span")}} come DOMTokenList usando {{domxref("Element.classList")}}. Quindi recuperiamo l'ultimo elemento nell'elenco usando item(length-1) e lo scriviamo nel <span>'s {{domxref("Node.textContent")}}.

+ +

Innanzitutto, l'HTML:

+ +
<span class="a b c"></span>
+ +

Ora JavaScript:

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+var item = classes.item(classes.length-1);
+span.textContent = item;
+ +

L'output è simile a questo:

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}{{Spec2('DOM WHATWG')}}Definizione iniziale
+ +

Compatibilità con i Browser

+ +
+ + +

{{Compat("api.DOMTokenList.item")}}

+
diff --git a/files/it/web/api/element/addeventlistener/index.html b/files/it/web/api/element/addeventlistener/index.html new file mode 100644 index 0000000000..6608e69bd3 --- /dev/null +++ b/files/it/web/api/element/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/element/attributes/index.html b/files/it/web/api/element/attributes/index.html new file mode 100644 index 0000000000..5bd14f3e4b --- /dev/null +++ b/files/it/web/api/element/attributes/index.html @@ -0,0 +1,120 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +tags: + - API + - Attributi + - DOM + - Element + - Proprietà + - Referenza +translation_of: Web/API/Element/attributes +--- +

{{ APIRef("DOM") }}

+ +

La proprietà Element.attributes restituisce una raccolta in tempo reale di tutti i nodi di attributo registrati nel nodo specificato. È una {{domxref("NamedNodeMap")}}, non un Array, quindi non ha metodi predefiniti degli {{jsxref("Array")}} e non ha i metodi {{domxref("Attr")}} dei nodi che possono differire tra i browser. Per essere più specifici, attributes è una coppia chiave/valore di stringhe che rappresenta qualsiasi informazione riguardante quell'attributo.

+ +

Sintassi

+ +
var attr = element.attributes;
+
+ +

Esempio

+ +

Esempi basilari

+ +
// Ottenere il primo elemento <p> nel documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

Enumerazione degli attributi degli elementi

+ +

L'indicizzazione numerica è utile per passare attraverso tutti gli attributi di un elemento.
+ L'esempio seguente esegue i nodi dell'attributo per l'elemento nel documento con id "paragraph" e stampa il valore di ciascun attributo.

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // First, let's verify that the paragraph has some attributes
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" style="color: green;">Sample Paragraph</p>
+ <form action="">
+  <p>
+    <input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.attributes")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/childnodes/index.html b/files/it/web/api/element/childnodes/index.html new file mode 100644 index 0000000000..f56bcc4380 --- /dev/null +++ b/files/it/web/api/element/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/element/classlist/index.html b/files/it/web/api/element/classlist/index.html new file mode 100644 index 0000000000..3d86fa8400 --- /dev/null +++ b/files/it/web/api/element/classlist/index.html @@ -0,0 +1,288 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +tags: + - API + - DOM + - Element + - Proprietà + - Read-only + - Referenza +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

La proprietà Element.classList di sola lettura restituisce una raccolta {{domxref("DOMTokenList")}} dinamica delle classi dell'elemento.

+ +

L'utilizzo di classList è una comoda alternativa all'accesso all'elenco di classi di un elemento come stringa delimitata dallo spazio tramite {{domxref("element.className")}}.

+ +

Sintassi

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses è una {{domxref("DOMTokenList")}} che rappresenta l'attributo class di elementNodeReference. Se l'attributo class non è stato impostato o è vuoto elementClasses.length ritorna 0. element.classList è di sola lettura, sebbene sia possibile modificarlo utilizzando i metodi add() e remove().

+ +

Metodi

+ +
+
add( String [, String [, ...]] )
+
Aggiunge le classi specificate. Se queste classi esistono già nell'attributo class dell'elemento, vengono ignorate.
+
remove( String [, String [, ...]] )
+
+

Rimuove le classi specificate.

+ +
Nota: La rimozione di una classe inesistente NON genera un errore.
+
+
item( Number )
+
Restituisce il valore della classe per indice nella collezione.
+
toggle( String [, force] )
+
Quando è presente un solo argomento: aggiunge/rimuove il valore della classe; ad esempio, se la classe esiste, la rimuove e restituisce false, altrimenti, la aggiunge e restituisce true.
+
+ Quando è presente un secondo argomento: Se il secondo argomento restituisce true, aggiunge la classe specificata; se restituisce false, la rimuove.
+
contains( String )
+
Verifica se il valore di classe specificato esiste nell'attributo class dell'elemento.
+
replace( vecchiaClasse, nuovaClasse )
+
Sostituisce una classe esistente con una nuova classe.
+
+ +

Esempi

+ +
const div = document.createElement('div');
+div.className = 'foo';
+
+// il nostro stato iniziale: <div class="foo"></div>
+console.log(div.outerHTML);
+
+// usare l'API classList per rimuovere e aggiungere classi
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// <div class="anotherclass"></div>
+console.log(div.outerHTML);
+
+// se visible è impostato rimuovilo, altrimenti aggiungilo
+div.classList.toggle("visible");
+
+// aggiungi/rimuovi visible, a seconda del test condizionale, i meno di 10
+div.classList.toggle("visible", i < 10 );
+
+console.log(div.classList.contains("foo"));
+
+// aggiungere o rimuovere più classi
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// aggiungere o rimuovere più classi utilizzando la spread syntax
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// sostituire la classe "foo" con la classe "bar"
+div.classList.replace("foo", "bar");
+ +
+

Le versioni di Firefox precedenti alla 26 non implementano l'uso di diversi argomenti nei metodi add/remove/toggle. Vedi https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +
+
+ +

Polyfill

+ +

L'evento legacy onpropertychange può essere utilizzato per creare un mockup dinamico di classList dinamico grazie alla proprietà Element.prototype.className che attiva l'evento specificato una volta modificato.

+ +

Il seguente polyfill sia per classList che per DOMTokenList garantisce la piena conformità (copertura) per tutti i metodi e le proprietà standard di Element.prototype.classList per i browser IE10-IE11 oltre ad un comportamento quasi conforme per IE 6-9. Controlla:

+ +
// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster & cleaner version for IE8 & IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: [nextIndex, that[nextIndex]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: that[nextIndex], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: nextIndex, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+
+ +

Avvertenze

+ +

Il polyfill ha funzionalità limitate. Al momento non è in grado di eseguire il polyfill fuori dagli elementi del documento (ad esempio elementi creati da document.createElement prima di essere appesi su un nodo padre) in IE6-7.

+ +

Tuttavia, dovrebbe funzionare bene in IE9. Una discrepanza maggiore tra la versione polyfilled di classList e le specifiche W3 è che per IE6-8, non esiste un modo per creare un oggetto immutabile (un oggetto le cui proprietà non possono essere modificate direttamente). In IE9, tuttavia, è possibile estendere il prototipo, congelando l'oggetto visibile e sovrascrivendo i metodi di proprietà native. Tuttavia, tali azioni non funzionerebbero in IE6-IE8 e, in IE9, rallenterebbero le prestazioni dell'intera pagina Web fino alla scansione di una lumaca, rendendo queste modifiche completamente impraticabili per questo polyfill.

+ +

Una nota minore è che in IE6-7, questo polyfill usa la proprietà window[" uCL"] sull'oggetto window per comunicare con le espressioni CSS, la proprietà css x-uCLp su tutti gli elementi e la proprietà element[" uCL"] su tutti gli elementi per consentire la raccolta di garbadge e migliorare le prestazioni. In tutti i browser polyfilled (IE6-9), una proprietà aggiuntiva element[" uCLp"] viene aggiunta all'elemento per garantire la prototipazione conforme agli standard e una proprietà DOMTokenList[" uCL"] viene aggiunta ad ogni oggetto element["classList"] per garantire che la DOMTokenList sia limitata al proprio elemento.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Definizione iniziale
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.classList")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/classname/index.html b/files/it/web/api/element/classname/index.html new file mode 100644 index 0000000000..ca463f5f75 --- /dev/null +++ b/files/it/web/api/element/classname/index.html @@ -0,0 +1,84 @@ +--- +title: Element.className +slug: Web/API/Element/className +tags: + - API + - DOM + - Gecko + - Proprietà + - Referenza +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

La proprietà className dell'interfaccia {{domxref("Element")}} ottiene e imposta il valore dell'attributo class dell'elemento specificato.

+ +

Sintassi

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Esempio

+ +
let el = document.getElementById('item');
+
+if (el.className === 'active'){
+  el.className = 'inactive';
+} else {
+  el.className = 'active';
+}
+ +

Appunti

+ +

Il nome className viene utilizzato per questa proprietà anziché class a causa di conflitti con la parola chiave "class" in molti linguaggi che vengono utilizzati per manipolare il DOM.

+ +

className può anche essere un'istanza di {{domxref("SVGAnimatedString")}} se element è un {{domxref("SVGElement")}}. È meglio ottenere/impostare className di un elemento usando {{domxref("Element.getAttribute")}} e {{domxref("Element.setAttribute")}} se si ha a che fare con elementi SVG. Tuttavia, tieni presente che {{domxref("Element.getAttribute")}} ritorna null anzichè "" se element ha un attributo class vuoto.

+ +
elm.setAttribute('class', elm.getAttribute('class'))
+ +
+

class è un Attributo HTML, mentre className è una proprietà del DOM.

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.className")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/clientheight/index.html b/files/it/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..167dd00ca3 --- /dev/null +++ b/files/it/web/api/element/clientheight/index.html @@ -0,0 +1,36 @@ +--- +title: element.clientHeight +slug: Web/API/Element/clientHeight +translation_of: Web/API/Element/clientHeight +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce l'altezza interna di un elemento in pixel, incluso il padding, ed esclusi il bordo, il margine e l'altezza della barra di scorrimento orizzontale.

+

clientHeight può essere calcolato come CSS height + CSS padding - altezza della barra di scorrimento orizzontale(se presente).

+

Sintassi e valori

+
var altezza = elemento.clientHeight;
+
+

altezza è un numero intero che rappresenta l'altezza in pixel di elemento.

+

clientHeight è di sola lettura.

+

Esempio

+
+
+

padding-top

+

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+

Cat image and text coming from http://www.best-cat-art.com/

+

padding-bottom

+
+ LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom
+

Image:clientHeight.png

+

Specifiche

+

Non fa parte di nessuna specifica W3C.

+

Note

+

clientHeight è una proprietà non standard, introdotta dal modello a oggetti di Internet Explorer.

+

Riferimenti

+ +

{{ languages( { "fr": "fr/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "en": "en/DOM/element.clientHeight" } ) }}

diff --git a/files/it/web/api/element/closest/index.html b/files/it/web/api/element/closest/index.html new file mode 100644 index 0000000000..cded9f95bb --- /dev/null +++ b/files/it/web/api/element/closest/index.html @@ -0,0 +1,147 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Method + - Reference +translation_of: Web/API/Element/closest +--- +

{{APIRef('Shadow DOM')}}

+ +
Il metodo closest() dell'interfaccia {{domxref("Element")}} restituisce l'antenato più vicino dell'elemento corrente (o l'elemento corrente stesso) che corrisponde ai selettori dati in un parametro. Se nessun elemento di questo tipo esiste, restituisce null.
+ +

Sintassi

+ +
var closestElement = element.closest(selectors);
+
+ +

Parametri

+ + + +

Valore del risultato

+ + + +

Eccezioni

+ + + +

Esempio

+ +

HTML

+ +
<article>
+  <div id="div-01">Here is div-01
+    <div id="div-02">Here is div-02
+      <div id="div-03">Here is div-03</div>
+    </div>
+  </div>
+</article>
+ +

JavaScript

+ +
var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// returns the element with the id=div-02
+
+var r2 = el.closest("div div");
+// restituisce l'antenato più vicino che è un div in div, qui è div-03 stesso
+
+var r3 = el.closest("article > div");
+// restituisce l'antenato più vicino che è un div e ha un articolo genitore, qui è div-01
+
+var r4 = el.closest(":not(div)");
+// restituisce l'antenato più vicino che non è un div, qui è l'articolo più esterno
+ +

Polyfill

+ +

Per i browser che non supportano Element.closest(),  ma supportano il supporto per element.matches() (o un equivalente prefissato, ovvero IE9 +), esiste un polyfill:

+ +
if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}
+ +

Tuttavia, se davvero si richiede il supporto per IE 8, il seguente polyfill farà il lavoro molto lentamente, ma alla fine. Tuttavia, supporta solo i selettori CSS 2.1 in IE 8 e può causare gravi ritardi nei siti Web di produzione.

+ +
if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
+    return el;
+  };
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.closest")}}

+ +

Note di compatibilità

+ +
    +
  • In Edge document.createElement(element).closest(element) restituirà null se l'elemento non è prima collegato al DOM
    • +
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/firstchild/index.html b/files/it/web/api/element/firstchild/index.html new file mode 100644 index 0000000000..b5052f5dfe --- /dev/null +++ b/files/it/web/api/element/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/element/getattribute/index.html b/files/it/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..e10427e5bd --- /dev/null +++ b/files/it/web/api/element/getattribute/index.html @@ -0,0 +1,48 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +translation_of: Web/API/Element/getAttribute +--- +
{{APIRef("DOM")}}
+ +

getAttribute() restituisce il valore di un attributo specificato sull'elemento. Se l'attributo specificato non esiste, il valore restituito sarà null o "" (la stringa vuota); vedi {{Anch("Appunti")}} per maggiori dettagli.

+ +

Sintassi

+ +
var attributo = element.getAttribute(attributeName);
+
+ +

dove

+ + + +

Esempio

+ +
let div1 = document.getElementById('div1');
+let align = div1.getAttribute('align');
+
+alert(align); // Mostra il valore di "align" per l'elemento con id="div1"
+ +

Appunti

+ +

Quando viene chiamato su un elemento HTML in un DOM contrassegnato come un documento HTML, getAttribute() converte in minuscolo il suo argomento prima di procedere.

+ +

Essenzialmente tutti i browser Web (Firefox, Internet Explorer, versioni recenti di Opera, Safari, Konqueror e iCab, come elenco non esaustivo) restituiscono null quando l'attributo specificato non è presente sull'elemento specificato e questo è quello che l'attuale bozza della specifica DOM specifica. La vecchia specifica del DOM 3 Core, d'altra parte, dice che il valore di ritorno corretto in questo caso è in realtà la stringa vuota, e alcune implementazioni DOM implementano questo comportamento. L'implementazione di getAttribute in XUL (Gecko) segue effettivamente la specifica DOM 3 Core e restituisce una stringa vuota. Di conseguenza, dovresti usare {{domxref("element.hasAttribute()")}} per verificare l'esistenza di un attributo prima di chiamare getAttribute() se è possibile che l'attributo richiesto non esista sull'elemento specificato.

+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.getAttribute")}}

+
+ +

Specifiche

+ + diff --git a/files/it/web/api/element/getelementsbytagname/index.html b/files/it/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..9239135259 --- /dev/null +++ b/files/it/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,80 @@ +--- +title: Element.getElementsByTagName() +slug: Web/API/Element/getElementsByTagName +tags: + - API + - DOM + - Element + - Method + - Referenza +translation_of: Web/API/Element/getElementsByTagName +--- +
{{ APIRef("DOM") }}
+ +

Il metodo Element.getElementsByTagName() ritorna una {{domxref("HTMLCollection")}} dinamica di elementi con il tag name specificato. Vengono cercati tutti i discendenti dell'elemento specificato, ma non l'elemento stesso. L'elenco restituito è dinamico, il che significa che si aggiorna automaticamente con l'albero del DOM. Pertanto, non è necessario chiamare Element.getElementsByTagName() con lo stesso elemento e gli stessi argomenti ripetutamente se il DOM cambia tra le chiamate.

+ +

Quando viene chiamato su un elemento HTML in un documento HTML, getElementsByTagName converte in minuscolo l'argomento prima di cercarlo. Ciò non è desiderabile quando si cerca di abbinare elementi SVG camel-cased (come <linearGradient>) in un documento HTML. Invece, usa {{ domxref("Element.getElementsByTagNameNS()") }}, che preserva la conversione in minuscolo del nome del tag.

+ +

Element.getElementsByTagName è simile a {{domxref("Document.getElementsByTagName()")}}, tranne per il fatto che cerca solo elementi discendenti dell'elemento specificato.

+ +

Sintassi

+ +
elements = element.getElementsByTagName(tagName)
+ + + +

Esempio

+ +
// Controlla lo stato di ogni cella in una tabella
+const table = document.getElementById('forecast-table');
+const cells = table.getElementsByTagName('td');
+
+for (let cell of cells) {
+  let status = cell.getAttribute('data-status');
+  if (status === 'open') {
+    // Prendi i dati
+  }
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}{{Spec2('DOM WHATWG')}}Modificato il valore di ritorno da {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}
{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.getElementsByTagName")}}

diff --git a/files/it/web/api/element/hasattribute/index.html b/files/it/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..4cd6d2a9d2 --- /dev/null +++ b/files/it/web/api/element/hasattribute/index.html @@ -0,0 +1,75 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +translation_of: Web/API/Element/hasAttribute +--- +
{{APIRef("DOM")}}
+ +

Il metodo Element.hasAttribute() restituisce un valore booleano che indica se l'elemento specificato ha o meno l'attributo specificato.

+ +

Sintassi

+ +
var risultato = element.hasAttribute(name);
+
+ +
+
risultato
+
detiene il valore di ritorno true o false.
+
name
+
è una stringa che rappresenta il nome dell'attributo.
+
+ +

Esempio

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // fare qualcosa
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &&
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+
+ +

Appunti

+ +
{{DOMAttributeMethods}}
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.hasAttribute")}}

diff --git a/files/it/web/api/element/hasattributes/index.html b/files/it/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..ca408ca96d --- /dev/null +++ b/files/it/web/api/element/hasattributes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Element/hasAttributes +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un valore booleano: true se l'elemento ha un qualunque numero di attributi, altrimenti false.

+

Sintassi

+

+ + bool + = element.hasAttributes()

+

Esempio

+
t1 = document.getElementById("tabella-dati");
+if (t1.hasAttributes()) {
+    // fai qualcosa con
+    // t1.attributes
+}
+
+

Specifiche

+

hasAttributes

+

{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "pl": "pl/DOM/element.hasAttributes" } ) }}

diff --git a/files/it/web/api/element/index.html b/files/it/web/api/element/index.html new file mode 100644 index 0000000000..f518252bc7 --- /dev/null +++ b/files/it/web/api/element/index.html @@ -0,0 +1,475 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - Element + - Interface + - Referenza + - Referenza del DOM + - Web API +translation_of: Web/API/Element +--- +
{{APIRef("DOM")}}
+ +

Element è la classe base più generale da cui ereditano tutti gli oggetti in un {{DOMxRef("Document")}}. Ha solo metodi e proprietà comuni a tutti i tipi di elementi. Classi più specifiche ereditano da Element. Ad esempio, l'interfaccia {{DOMxRef("HTMLElement")}} è l'interfaccia di base per gli elementi HTML, mentre l'interfaccia {{DOMxRef("SVGElement")}} è la base per tutti gli elementi SVG. La maggior parte delle funzionalità è specificata più in basso nella gerarchia delle classi.

+ +

Le lingue al di fuori del regno della piattaforma Web, come XUL attraverso l'interfaccia XULElement, implementano anche  Element.

+ +

{{InheritanceDiagram}}

+ +

Proprietà

+ +

Eredita le proprietà dalla sua interfaccia genitore, {{DOMxRef("Node")}}, e per estensione l'interfaccia genitore, {{DOMxRef("EventTarget")}}. Implementa le proprietà di {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, e {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("Element.attributes")}} {{readOnlyInline}}
+
Restituisce un oggetto {{DOMxRef("NamedNodeMap")}} contenente gli attributi assegnati dell'elemento HTML corrispondente.
+
{{DOMxRef("Element.classList")}} {{readOnlyInline}}
+
Ritorna un oggetto {{DOMxRef("DOMTokenList")}} contenente la lista delle classi dell'elemento.
+
{{DOMxRef("Element.className")}}
+
È una {{DOMxRef("DOMString")}} che rappresenta la classe dell'elemento.
+
{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
+
Ritorna un {{jsxref("Number")}} che rappresenta l'altezza interna dell'elemento.
+
{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
+
Ritorna un {{jsxref("Number")}} che rappresenta la larghezza del bordo sinistro dell'elemento.
+
{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}
+
Restituisce un {{jsxref("Number")}} che rappresenta la larghezza del bordo superiore dell'elemento.
+
{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
+
Restituisce un {{jsxref("Number")}} che rappresenta la larghezza interna dell'elemento.
+
{{DOMxRef("Element.computedName")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.
+
{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. 
+
{{DOMxRef("Element.id")}}
+
Is a {{DOMxRef("DOMString")}} representing the id of the element.
+
{{DOMxRef("Element.innerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.
+
{{DOMxRef("Element.localName")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.
+
{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
+
The namespace URI of the element, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}

+
+
+
{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}
+
Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or null if there's no sibling node.
+
{{DOMxRef("Element.outerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
+
{{DOMxRef("Element.prefix")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or null if no prefix is specified.
+
{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}
+
Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
+
{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
+
{{DOMxRef("Element.scrollLeft")}}
+
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
+
{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
+
{{DOMxRef("Element.scrollTop")}}
+
A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.
+
{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
+
{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
+
{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
+
Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
+
{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
+
Returns the shadow root that is hosted by the element, regardless if its open or closed. Available only to WebExtensions.
+
{{DOMxRef("Element.slot")}} {{Experimental_Inline}}
+
Returns the name of the shadow DOM slot the element is inserted in.
+
{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.
+
{{DOMxRef("Element.tagName")}} {{readOnlyInline}}
+
Returns a {{jsxref("String")}} with the name of the tag for the given element.
+
{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}
+
Returns the {{DOMxRef("UndoManager")}} associated with the element.
+
{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
+
+ +
+

Note: DOM Level 3 defined namespaceURI, localName and prefix on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to Element.

+ +

This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.

+
+ +

Proprietà incluse da Slotable

+ +

L'interfaccia Element include la seguente proprietà, definita nel  mixin {{DOMxRef("Slotable")}}.

+ +
+
{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}
+
Restituisce un {{DOMxRef("HTMLSlotElement")}} che rappresenta lo {{htmlelement("slot")}} in cui è inserito il nodo.
+
+ +

Gestori di eventi

+ +
+
{{domxref("Element.onfullscreenchange")}}
+
Un gestore di eventi per l'evento {{event("fullscreenchange")}} che viene inviato quando l'elemento entra o esce dalla modalità a schermo intero. Questo può essere usato per guardare sia le transizioni attese con successo, ma anche per osservare cambiamenti inaspettati, come quando l'app è in background.
+
{{domxref("Element.onfullscreenerror")}}
+
Un gestore di eventi per l'evento {{event("fullscreenerror")}} che viene inviato quando si verifica un errore durante il tentativo di passare alla modalità a schermo intero.
+
+ +

Gestori di eventi obsoleti

+ +
+
{{DOMxRef("Element.onwheel")}}
+
Restituisce il codice di gestione degli eventi per l'evento {{Event("wheel")}}. Questo è ora implementato su {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.
+
+ +

Metodi

+ +

Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("EventTarget.addEventListener()")}}
+
Registers an event handler to a specific event type on the element.
+
{{DOMxRef("Element.attachShadow()")}}
+
Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
+
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
+
{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}
+
Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.
+
{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+
Creates a shadow DOM on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
+
Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.
+
{{DOMxRef("EventTarget.dispatchEvent()")}}
+
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.
+
{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
+
Returns an array of Animation objects currently active on the element.
+
{{DOMxRef("Element.getAttribute()")}}
+
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNames()")}}
+
Returns an array of attribute names from the current element.
+
{{DOMxRef("Element.getAttributeNS()")}}
+
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getBoundingClientRect()")}}
+
Returns the size of an element and its position relative to the viewport.
+
{{DOMxRef("Element.getClientRects()")}}
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{DOMxRef("Element.getElementsByClassName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.
+
{{DOMxRef("Element.getElementsByTagName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.
+
{{DOMxRef("Element.getElementsByTagNameNS()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.
+
{{DOMxRef("Element.hasAttribute()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
+
{{DOMxRef("Element.hasAttributeNS()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
+
{{DOMxRef("Element.hasAttributes()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.
+
{{DOMxRef("Element.hasPointerCapture()")}}
+
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
+
{{DOMxRef("Element.insertAdjacentElement()")}}
+
Inserts a given element node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.insertAdjacentHTML()")}}
+
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
+
{{DOMxRef("Element.insertAdjacentText()")}}
+
Inserts a given text node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
+
{{DOMxRef("Element.querySelector()")}}
+
Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.
+
{{DOMxRef("Element.querySelectorAll()")}}
+
Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.
+
{{DOMxRef("Element.releasePointerCapture()")}}
+
Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.
+
{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}
+
Removes the element from the children list of its parent.
+
{{DOMxRef("Element.removeAttribute()")}}
+
Removes the named attribute from the current node.
+
{{DOMxRef("Element.removeAttributeNS()")}}
+
Removes the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}
+
Removes the node representation of the named attribute from the current node.
+
{{DOMxRef("EventTarget.removeEventListener()")}}
+
Removes an event listener from the element.
+
{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
+
Asynchronously asks the browser to make the element full-screen.
+
{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
+
Allows to asynchronously ask for the pointer to be locked on the given element.
+
+ +
+
{{domxref("Element.scroll()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{domxref("Element.scrollBy()")}}
+
Scrolls an element by the given amount.
+
{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
+
Scrolls the page until the element gets into the view.
+
{{domxref("Element.scrollTo()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{DOMxRef("Element.setAttribute()")}}
+
Sets the value of a named attribute of the current node.
+
{{DOMxRef("Element.setAttributeNS()")}}
+
Sets the value of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}
+
Sets the node representation of the named attribute from the current node.
+
{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Sets the node representation of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}
+
Sets up mouse event capture, redirecting all mouse events to this element.
+
{{DOMxRef("Element.setPointerCapture()")}}
+
Designates a specific element as the capture target of future pointer events.
+
{{DOMxRef("Element.toggleAttribute()")}}
+
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
{{domxref("Element/cancel_event", "cancel")}}
+
Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the Esc key or clicks a "Close dialog" button which is part of the browser's UI.
+ Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.
+
error
+
Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.
+
{{domxref("Element/scroll_event", "scroll")}}
+
Fired when the document view or an element has been scrolled.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.
+
{{domxref("Element/select_event", "select")}}
+
Fired when some text has been selected.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.
+
{{domxref("Element/show_event", "show")}}
+
Fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.
+
{{domxref("Element/wheel_event","wheel")}}
+
Fired when the user rotates a wheel button on a pointing device (typically a mouse).
+ Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}
+
+ +

Clipboard events

+ +
+
{{domxref("Element/copy_event", "copy")}}
+
Fired when the user initiates a copy action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.
+
{{domxref("Element/cut_event", "cut")}}
+
Fired when the user initiates a cut action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.
+
{{domxref("Element/paste_event", "paste")}}
+
Fired when the user initiates a paste action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.
+
+ +

Composition events

+ +
+
{{domxref("Element/compositionend_event", "compositionend")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.
+
{{domxref("Element/compositionstart_event", "compositionstart")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.
+
{{domxref("Element/compositionupdate_event", "compositionupdate")}}
+
Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.
+
+ +

Focus events

+ +
+
{{domxref("Element/blur_event", "blur")}}
+
Fired when an element has lost focus.
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.
+
{{domxref("Element/focus_event", "focus")}}
+
Fired when an element has gained focus.
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property
+
{{domxref("Element/focusin_event", "focusin")}}
+
Fired when an element is about to gain focus.
+
{{domxref("Element/focusout_event", "focusout")}}
+
Fired when an element is about to lose focus.
+
+ +

Fullscreen events

+ +
+
{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
+
Sent to a {{domxref("Document")}} or {{domxref("Element")}} when it transitions into or out of full-screen mode.
+ Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}  property.
+
{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
+
Sent to a Document or Element if an error occurs while attempting to switch it into or out of full-screen mode.
+ Also available via the {{domxref("Document.onfullscreenerror", "onfullscreenerror")}} property.
+
+ +

Mouse events

+ +
+
{{domxref("Element/Activate_event", "Activate")}}
+
Occurs when an element is activated, for instance, through a mouse click or a keypress.
+ Also available via the {{domxref("ServiceWorkerGlobalScope/onactivate", "onactivate")}} property.
+
{{domxref("Element/auxclick_event", "auxclick")}}
+
Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.
+
{{domxref("Element/click_event", "click")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.
+
{{domxref("Element/contextmenu_event", "contextmenu")}}
+
Fired when the user attempts to open a context menu.
+ Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.
+
{{domxref("Element/dblclick_event", "dblclick")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.
+
{{domxref("Element/mousedown_event", "mousedown")}}
+
Fired when a pointing device button is pressed on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.
+
{{domxref("Element/mouseenter_event", "mouseenter")}}
+
Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.
+
{{domxref("Element/mouseleave_event", "mouseleave")}}
+
Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.
+
{{domxref("Element/mousemove_event", "mousemove")}}
+
Fired when a pointing device (usually a mouse) is moved while over an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.
+
{{domxref("Element/mouseout_event", "mouseout")}}
+
Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.
+
{{domxref("Element/mouseover_event", "mouseover")}}
+
Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.
+
{{domxref("Element/mouseup_event", "mouseup")}}
+
Fired when a pointing device button is released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.
+
{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
+
Fired each time the amount of pressure changes on the trackpadtouchscreen.
+
{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
+
Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".
+
{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
+
Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.
+
{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
+
Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".
+
+ +

Touch events

+ +
+
{{domxref("Element/touchcancel_event", "touchcancel")}}
+
Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
+ Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.
+
{{domxref("Element/touchend_event", "touchend")}}
+
Fired when one or more touch points are removed from the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property
+
{{domxref("Element/touchmove_event", "touchmove")}}
+
Fired when one or more touch points are moved along the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property
+
{{domxref("Element/touchstart_event", "touchstart")}}
+
Fired when one or more touch points are placed on the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property
+
+ +
+
 
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Aggiunto il metodo getAnimations().
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Aggiunge le proprietà undoScope e undoManager.
{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events 2')}}Aggiunti i seguenti gestori di eventi: ongotpointercapture and onlostpointercapture.
+ Aggiunti i seguenti metodi: setPointerCapture() e releasePointerCapture().
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Aggiunti i seguenti gestori di eventi: ongotpointercapture e onlostpointercapture.
+ Aggiunti i seguenti metodi: setPointerCapture() e releasePointerCapture().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Aggiunti i seguenti metodi: querySelector() e querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Aggiunto il metodo requestPointerLock().
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Aggiunto il metodo requestFullscreen().
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Aggiunte le seguenti proprietà: innerHTML, e outerHTML.
+ Aggiunti i seguenti metodi: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Aggiunte le seguenti proprietà: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
+ Aggiunti i seguenti metodi: getClientRects(), getBoundingClientRect(), scroll(), scrollBy(), scrollTo() and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Aggiunta ereditarietà dell'interfaccia {{DOMxRef("ElementTraversal")}}.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Aggiunti i seguenti metodi: closest(), insertAdjacentElement() and insertAdjacentText().
+ Spostato hasAttributes() dall'interfaccia Node a questa.
{{SpecName("DOM4", "#interface-element", "Element")}}{{Spec2("DOM4")}}Rimossi i seguenti metodi: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
+ Modificato il valore di ritorno di getElementsByTagName() e getElementsByTagNameNS().
+ Rimossa la proprietà schemaTypeInfo.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Aggiunti i seguenti metodi: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). Questi metodi non sono mai stati implementati e sono stati rimossi nelle specifiche successive.
+ Aggiunta la proprietà schemaTypeInfo. Questa proprietà non è mai stata implementata ed è stata rimossa nelle specifiche successive.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}Il metodo normalize() è stato spostato su {{DOMxRef("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element")}}

diff --git a/files/it/web/api/element/innerhtml/index.html b/files/it/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..6fbdb3c47b --- /dev/null +++ b/files/it/web/api/element/innerhtml/index.html @@ -0,0 +1,213 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - DOM Parsing + - Element + - Parsing HTML + - Proprietà + - Referenza + - innerHTML +translation_of: Web/API/Element/innerHTML +--- +
{{APIRef("DOM")}}
+ +

La proprietà {{domxref("Element")}} innerHTML ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.

+ +
Note: Se un {{HTMLElement("div")}}, {{HTMLElement("span")}}, o {{HTMLElement("noembed")}} ha un nodo di testo figlio che include i caratteri (&), (<), o (>), innerHTML restituisce questi caratteri come entità HTML "&amp;", "&lt;" e "&gt;" rispettivamente. Usa {{domxref("Node.textContent")}} per ottenere una copia non elaborata del contenuto di questi nodi di testo.
+ +

Per inserire l'HTML nel documento invece di sostituire il contenuto di un elemento, utilizza il metodo {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.

+ +

Sintassi

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

Valore

+ +

Una {{domxref("DOMString")}} contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore di innerHTML rimuove tutti i discendenti dell'elemento e li sostituisce con i nodi creati analizzando l'HTML fornito nella stringa htmlString.

+ +

Eccezioni

+ +
+
SyntaxError
+
È stato effettuato un tentativo di impostare il valore di innerHTML utilizzando una stringa che non è HTML correttamente formato.
+
NoModificationAllowedError
+
È stato effettuato un tentativo di inserire l'HTML in un nodo il cui padre è {{domxref("Document")}}.
+
+ +

Note di utilizzo

+ +

La proprietà innerHTML può essere utilizzata per esaminare il codice sorgente HTML corrente della pagina, comprese le eventuali modifiche apportate da quando la pagina è stata inizialmente caricata.

+ +

Leggere i contenuti HTML di un elemento

+ +

La lettura di innerHTML fa sì che l'user agent serializzi il fragment HTML o XML composto dai discendenti di elment. La stringa risultante viene restituita.

+ +
let contents = myElement.innerHTML;
+ +

Questo ti permette di guardare il markup HTML dei nodi di contenuto dell'elemento.

+ +
+

Note: Il fragment HTML o XML restituito viene generato in base al contenuto corrente dell'elemento, pertanto è probabile che la marcatura e la formattazione del frammento restituito non corrispondano al markup della pagina originale.

+
+ +

Sostituzione del contenuto di un elemento

+ +

L'impostazione del valore di innerHTML consente di sostituire facilmente i contenuti esistenti di un elemento con nuovi contenuti.

+ +

Ad esempio, è possibile cancellare l'intero contenuto di un documento cancellando il contenuto dell'attributo {{domxref("Document.body", "body")}} del documento:

+ +
document.body.innerHTML = "";
+ +

Questo esempio recupera l'attuale markup HTML del documento e sostituisce i caratteri "<" con l'entità HTML "&lt;", convertendo in tal modo l'HTML in testo non elaborato. Questo è quindi avvolto in un elemento {{HTMLElement("pre")}} element. Quindi il valore di innerHTML viene modificato in questa nuova stringa. Di conseguenza, il contenuto del documento viene sostituito con una visualizzazione dell'intero codice sorgente della pagina.

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+ +

Dettagli operativi

+ +

Cosa succede esattamente quando imposti il valore di innerHTML? In questo modo, l'user agent deve seguire questi passaggi:

+ +
    +
  1. Il valore specificato viene analizzato come HTML o XML (in base al tipo di documento), risultando in un oggetto {{domxref("DocumentFragment")}} che rappresenta il nuovo set di nodi del DOM per i nuovi elementi.
    2. +
  2. Se l'elemento il cui contenuto viene sostituito è un elemento {{HTMLElement("template")}} l'attributo <template> dell'elemento {{domxref("HTMLTemplateElement.content", "content")}} viene sostituito con il nuovo DocumentFragment creato nel passaggio 1.
    3. +
  3. Per tutti gli altri elementi, i contenuti dell'elemento vengono sostituiti con i nodi nel nuovo DocumentFragment.
    4. +
+ +

Considerazioni sulla sicurezza

+ +

Non è raro vedere innerHTML utilizzato per inserire del testo in una pagina web. C'è la possibilità che questo diventi un vettore di attacco su un sito, creando un potenziale rischio per la sicurezza.

+ +
const name = "John";
+// supponiamo che 'el' sia un elemento DOM HTML
+el.innerHTML = name; // innocuo in questo caso
+
+// ...
+
+name = "<script>alert('Sono John in una noiosa allerta!')</script>";
+el.innerHTML = name; // innocuo in questo caso
+ +

Sebbene possa sembrare un attacco {{interwiki("wikipedia", "cross-site scripting")}} il risultato è innocuo. HTML5 specifica che un tag {{HTMLElement("script")}} inserito con innerHTML non deve essere eseguito.

+ +

Tuttavia, ci sono modi per eseguire JavaScript senza utilizzare gli elementi {{HTMLElement("script")}}, quindi c'è ancora un rischio per la sicurezza ogni volta che utilizzi innerHTML per impostare le stringhe su cui non si ha il controllo. Per esempio:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // mostra l'alert
+ +

Per questo motivo, si consiglia di non utilizzare innerHTML quando si inserisce testo normale; invece, usa {{domxref("Node.textContent")}}. Questo non analizza il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

+ +
+

Warning: Se il tuo progetto è uno che subirà alcuna forma di revisione della sicurezza, utilizzando innerHTML molto probabilmente il tuo codice verrà rifiutato. Ad esempio, se utilizzi innerHTML in un'estensione del browser e si invia l'estensione a addons.mozilla.org, non verrà passato il processo di revisione automatica.

+
+ +

Esempio

+ +

In questo esempio viene utilizzato innerHTML per creare un meccanismo per la registrazione dei messaggi in una casella in una pagina Web.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Registrazione degli eventi del mouse in questo contenitore...");
+
+ +

La funzione log() crea l'output del log ottenendo l'ora corrente da un oggetto {{jsxref("Date")}} utilizzando {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, e creando una stringa con il timestamp e il testo del messaggio. Quindi il messaggio viene aggiunto al box con classe "log".

+ +

Aggiungiamo un secondo metodo che registra le informazioni sugli eventi basati su {{domxref("MouseEvent")}} (come ad esempio {{event("mousedown")}}, {{event("click")}}, e {{event("mouseenter")}}):

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Quindi usiamo questo come gestore di eventi per un numero di eventi del mouse sulla casella che contiene il nostro registro:

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

L'HTML è abbastanza semplice per il nostro esempio.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

Il {{HTMLElement("div")}} con la classe "box" è solo un contenitore per scopi di layout, presentando il contenuto con una scatola attorno ad esso. Il <div> la cui classe è "log" è il contenitore per il testo del log stesso.

+ +

CSS

+ +

I seguenti stili CSS del nostro contenuto di esempio.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Risultato

+ +

Il contenuto risultante assomiglia a questo. È possibile visualizzare l'output nel registro spostando il mouse dentro e fuori dalla scatola, facendo click su di esso e così via.

+ +

{{EmbedLiveSample("Esempio", 640, 350)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.innerHTML")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/insertadjacenthtml/index.html b/files/it/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..f69fbb1daf --- /dev/null +++ b/files/it/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,102 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - Cambiare il DOM + - DOM + - Element + - HTML + - Inserire elementi + - Inserire nodi + - Referenza + - insertAdjacentHTML + - metodo +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

Il metodo insertAdjacentHTML() dell'interfaccia {{domxref("Element")}} analizza il testo specificato come HTML o XML e inserisce i nodi risultanti nell'albero DOM in una posizione specificata. Non esegue il reparse dell'elemento su cui viene utilizzato, e quindi non corrompe gli elementi esistenti all'interno di quell'elemento. Questo evita il passaggio extra della serializzazione, rendendolo molto più veloce della manipolazione diretta di {{domxref("Element.innerHTML", "innerHTML")}}.

+ +

Sintassi

+ +
element.insertAdjacentHTML(position, text);
+ +

Parametri

+ +
+
position
+
Una {{domxref("DOMString")}} che rappresenta la posizione relativa ad element; deve essere una delle seguenti stringhe: +
    +
  • 'beforebegin': Davanti ad element stesso.
    • +
  • 'afterbegin': Appena dentro element, prima del suo primo figlio.
    • +
  • 'beforeend': Appena dentro element, prima del suo ultimo figlio.
    • +
  • 'afterend': Dopo ad element stesso.
    • +
+
+
text
+
La stringa da analizzare come HTML o XML e inserita nell'albero.
+
+ +

Visualizzazione dei nomi delle posizioni

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Note: Le posizioni beforebegin e afterend funzionano solo se il nodo si trova nell'albero del DOM e ha un elemento padre.
+ +

Esempio

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// A questo punto, la nuova struttura è:
+// <div id="one">one</div><div id="two">two</div>
+ +

Note

+ +

Considerazioni sulla sicurezza

+ +

Quando si inserisce HTML in una pagina utilizzando insertAdjacentHTML(), fare attenzione a non utilizzare l'input dell'utente che non è stato analizzato.

+ +

Non è consigliabile utilizzare  insertAdjacentHTML() quando si inserisce testo normale; usa invece la proprietà {{domxref("Node.textContent")}} o il metodo {{domxref("Element.insertAdjacentText()")}}. Questo non interpreta il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/nodename/index.html b/files/it/web/api/element/nodename/index.html new file mode 100644 index 0000000000..2030226b37 --- /dev/null +++ b/files/it/web/api/element/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/element/nodetype/index.html b/files/it/web/api/element/nodetype/index.html new file mode 100644 index 0000000000..fba395288a --- /dev/null +++ b/files/it/web/api/element/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/element/nodevalue/index.html b/files/it/web/api/element/nodevalue/index.html new file mode 100644 index 0000000000..547ba77939 --- /dev/null +++ b/files/it/web/api/element/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/element/parentnode/index.html b/files/it/web/api/element/parentnode/index.html new file mode 100644 index 0000000000..03e89aa432 --- /dev/null +++ b/files/it/web/api/element/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/element/prefix/index.html b/files/it/web/api/element/prefix/index.html new file mode 100644 index 0000000000..3371ff1f8d --- /dev/null +++ b/files/it/web/api/element/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/element/queryselector/index.html b/files/it/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..f6455563d9 --- /dev/null +++ b/files/it/web/api/element/queryselector/index.html @@ -0,0 +1,131 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +

Il metodo querySelector() dell'interfaccia {{domxref("Element")}} restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.

+ +

Sintassi

+ +
var element = baseElement.querySelector(selectors);
+
+ +

Parameters

+ +
+
selectors
+
Un gruppo di selettori per abbinare gli elementi discendenti di {{domxref ("Element")}} baseElement contro; questa deve essere una sintassi CSS valida o si verificherà un SyntaxError. Viene restituito il primo elemento trovato che corrisponde a questo gruppo di selettori.
+
+ +

Valore di ritorno

+ +

Il primo elemento discendente di baseElement che corrisponde al gruppo specificato di selectors. L'intera gerarchia di elementi viene considerata durante la corrispondenza, inclusi quelli esterni all'insieme di elementi, incluso baseElement e i suoi discendenti; in altre parole, selectors viene prima applicato all'intero documento, non a baseElement, per generare un elenco iniziale di elementi potenziali. Gli elementi risultanti vengono quindi esaminati per vedere se sono discendenti di baseElement. La prima corrispondenza di questi elementi rimanenti viene restituita dal metodo querySelector().

+ +

Se non vengono trovate corrispondenze, il valore restituito è null.

+ +

Eccezioni

+ +
+
SyntaxError
+
I selectors specificati non sono validi.
+
+ +

Esempi

+ +

Consideriamo alcuni esempi.

+ +

Trova un elemento specifico con valori specifici di un attributo

+ +

In questo primo esempio, viene restituito il primo elemento {{HTMLElement("style")}} che non ha né il tipo né il tipo "text/css" nel corpo del documento HTML:

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

L'intera gerarchia conta

+ +

Questo esempio dimostra che la gerarchia dell'intero documento è considerata quando si applicano i selectors, in modo che i livelli al di fuori di baseElement specificato siano ancora considerati quando si localizzano le corrispondenze.

+ +

HTML

+ +
<div>
+  <h5>Original content</h5>
+  <p>
+    inside paragraph
+    <span>inside span</span>
+    inside paragraph
+  </p>
+</div>
+<div>
+  <h5>Output</h5>
+  <div id="output"></div>
+</div>
+ +

JavaScript

+ +
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+  (baseElement.querySelector("div span").innerHTML);
+ +

Risultato

+ +

Il risultato è simile a questo:

+ +

{{ EmbedLiveSample("L'intera_gerarchia_conta", 600, 160) }}

+ +

Nota come il selettore "div span" corrisponda ancora correttamente all'elemento {{HTMLElement("span")}} anche se il
+ i nodi figli di baseElement non includono l'elemento {{domxref("div")}} (fa ancora parte del selettore specificato).

+ +

More examples

+ +

Vedi {{domxref("Document.querySelector()")}} per ulteriori esempi del formato corretto per i selectors.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}{{Spec2('DOM WHATWG')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.querySelector")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/queryselectorall/index.html b/files/it/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..696b449cb6 --- /dev/null +++ b/files/it/web/api/element/queryselectorall/index.html @@ -0,0 +1,182 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +tags: + - API + - CSS Selectors + - DOM + - Element + - Finding Elements + - Method + - Referenza + - Searching Elements + - Selecting Elements + - Selectors + - querySelector +translation_of: Web/API/Element/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Il metodo {{domxref("Element")}} querySelectorAll() restituisce una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi corrispondenti al gruppo specificato di selettori che sono i discendenti dell'elemento su cui è stato chiamato il metodo.

+ +
+

Note: This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.

+
+ +

Sintassi

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parametri

+ +
+
selectors
+
Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve essere una stringa di un CSS selector valido; se non lo è, viene generata un'eccezione SyntaxError. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sull'uso dei selettori per identificare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.
+
+ +
+

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape del backspace, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.

+
+ +

Valore di ritorno

+ +

Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ciascun nodo discendente che corrisponde ad almeno uno dei selettori specificati.

+ +
+

Note: Se i selectors specificati includono un CSS pseudo-element, l'elenco restituito è sempre vuoto.

+
+ +

Exceptions

+ +
+
SyntaxError
+
La sintassi della stringa selectors specificata non è valida.
+
+ +

Esempi

+ +

Ottenere un elenco di risultati

+ +

Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} contenuti nell'elemento "myBox":

+ +
var matches = myBox.querySelectorAll("p");
+ +

Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} di "myBox" con la classe "note" o "alert":

+ +
var matches = myBox.querySelectorAll("div.note, div.alert");
+
+ +

Qui, otteniamo un elenco degli elementi <p> del documento il cui elemento padre immediato è un {{domxref("div")}} con la classe "highlighted" e che si trovano all'interno di un contenitore il cui ID è "test".

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Questo esempio usa un attribute selector per restituire una lista degli elementi {{domxref("iframe")}} nel documento che contengono un attributo chiamato "data-src":

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è "userlist" che hanno un attributo "data-active" il cui valore è "1":

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

Accedere ai risultati

+ +

Una volta restituita la {{domxref("NodeList")}} degli elementi di corrispondenza, è possibile esaminarlo come qualsiasi array. Se la matrice è vuota (ovvero la sua proprietà length è 0), non è stata trovata alcuna corrispondenza.

+ +

Altrimenti, puoi semplicemente usare la notazione standard per accedere al contenuto della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +
+

Note: NodeList non è un vero array, vale a dire che non ha i metodi dell'array come slice, some, map etc. Per convertirlo in un array, prova Array.from(nodeList).

+
+ +

Note dell'utente

+ +

querySelectorAll() si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.

+ +

HTML

+ +

Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} annidati.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

In questo esempio, quando si seleziona ".outer .inner" nel contesto il <div> con la classe "select", tsi trova ancora l'elemento con la classe ".inner", anche se​​​​​​ .outer non è un discendente dell'elemento base su cui viene eseguita la ricerca (".select"). Per impostazione predefinita, querySelectorAll() verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.

+ +

La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, abbinando solo i selettori sui discendenti dell'elemento base:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Standard di vita
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Nessun cambiamento
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Definizione iniziale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definizione originale
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.querySelectorAll")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/removeattribute/index.html b/files/it/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..2a64205cc3 --- /dev/null +++ b/files/it/web/api/element/removeattribute/index.html @@ -0,0 +1,57 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - DOM + - Elemento + - Riferimento + - metodo +translation_of: Web/API/Element/removeAttribute +--- +
{{ APIRef("DOM") }}
+ +

Il metodo {{domxref("Element")}} removeAttribute() rimuove l'attributo con il nome specificato dall'elemento.

+ +

Sintassi

+ +
element.removeAttribute(attrName);
+
+ +

Parametri

+ +
+
attrName
+
Una {{domxref("DOMString")}} che specifica il nome dell'attributo da rimuovere dall'elemento. Se l'attributo specificato non esiste, removeAttribute() restituisce senza generare un errore.
+
+ +

Valore di ritorno

+ +

undefined.

+ +
+

Note: Poiché removeAttribute() non restituisce un valore, non è possibile concatenare più chiamate contemporaneamente per rimuovere più attributi contemporaneamente.

+
+ +

Note di utilizzo

+ +

Dovresti usare removeAttribute() invece di impostare il valore dell'attributo null direttamente o usando {{domxref("Element.setAttribute", "setAttribute()")}}. Molti attributi non si comportano come previsto se li imposti a null.

+ +

{{ DOMAttributeMethods() }}

+ +

Esempio

+ +
// Prima: <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// Dopo: <div id="div1" width="200px">
+
+ +

Specifica

+ +

DOM Level 2 Core: removeAttribute (introdotta nel DOM Level 1 Core)

+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.removeAttribute")}}

diff --git a/files/it/web/api/element/requestfullscreen/index.html b/files/it/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..624e2da766 --- /dev/null +++ b/files/it/web/api/element/requestfullscreen/index.html @@ -0,0 +1,110 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("Fullscreen API")}}
+ +

Il metodo Element.requestFullscreen() invia una richiesta asincrona per visualizzare l'elemento a schremo intero (full-screen).

+ +

Non c'è garanzia che l'elemento verrà effettivamente visualizzato a schermo intero. Se il permesso di entrare in modalità full-screen è accordato, il documento riceverà un evento di tipo {{event("fullscreenchange")}} che lo informarà dell'avvenuto passaggio in modalità full-screen. Viceversa, se il permesso è negato, il documento riceve un evento di tipo {{event('fullscreenerror')}}.

+ +
+

Soltanto gli elementi nel documento principale o in un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero. Questo signigica che gli elementi all'interno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} non possono.

+
+ +

Sintassi

+ +
elt.requestFullscreen();
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatoNote
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
+ +

Compatibilità browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefoxInternet ExplorerEdgeOperaSafari
Basic support{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatGeckoDesktop("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled		11{{property_prefix("ms")}}[3]{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] implementato anche come webkitRequestFullScreen.

+ +

[2] Implementato come mozRequestFullScreen (notare la letterea S maiuscola per Screen). Prima di Firefox 44, Gecko erroneamente permetteva agli elementi all'inderno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} di richiedere e ottenere il full screen. Da Firefox 44 in poi ciò è stato corretto: solo gli elementi del documento principale o di un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero.

+ +

[3] Vedi documentazione su MSDN.

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/scrollheight/index.html b/files/it/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..05cc48fd15 --- /dev/null +++ b/files/it/web/api/element/scrollheight/index.html @@ -0,0 +1,170 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +translation_of: Web/API/Element/scrollHeight +--- +

{{ APIRef("DOM") }}

+ +

L' Element.scrollHeight è una proprietà di sola lettura e contiene la misura dell'altezza del contenuto di un elemento, incluso il contenuto non visibile sullo schermo a causa dell'overflow. Il valore dello scrollHeight è uguale al minimo valore del clientHeight che l'elemento richiederebbe per adattare tutto il contenuto nel punto di vista, senza usare una barra di scorrimento verticale. Esso include il padding, ma non il bordo dell'elemento.

+ +
+

Questa proprietà ritornerà un numero intero. Se hai bisogno di un numero decimale, invece, usa {{ domxref("Element.getBoundingClientRect()") }}.

+
+ +

Sintassi

+ +
var intElemScrollHeight = document.getElementById("nome dell'id").scrollHeight;
+
+ +

La variabile intElemScrollHeight è una variabile contenente un numero intero che corrisponde allo scrollHeight in pixel dell'elemento. ScrollHeight è una proprietà di sola lettura.

+ +

Esempio

+ +
+
+

padding-top

+ +

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+ +

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+ +

Cat image and text coming from www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: _fckstyle="position: _fckstyle="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

Image:scrollHeight.png

+ +

Problemi e soluzioni

+ +

Determinare se un elemento è arrivato in fondo con lo scroll.

+ +

La seguente funzione ritorna true se l'elemento è in fondo al suo scorrimento, false altrimenti.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

 

+ +

Associato all'evento onscroll, questa equivalenza potrebbe tornare utile per determinare se l'utente ha letto un testo o no (guarda anche le proprietà element.scrollTop e element.clientHeight). Per esempio:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+function checkReading () {
+  if (checkReading.read) { return; }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ?
+    "Thank you." :
+    "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+
+</script>
+<style type="text/css">
+
+#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}
+</style>
+</head>
+
+<body>
+
+  <form name="registration">
+
+    <p>
+      <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim.
+
+Phasellus ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta at arcu.
+
+Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in ligula. Vivamus vitae urna mauris, eget euismod nunc.
+
+Aenean semper gravida enim non feugiat. In hac habitasse platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et a orci. Donec aliquet volutpat scelerisque.
+
+Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.</textarea>
+    </p>
+
+    <p>
+      <input type="checkbox" name="accept" id="agree" />
+      <label for="agree">I agree</label>
+      <input type="submit" id="nextstep" value="Next" />
+    </p>
+
+  </form>
+
+</body>
+</html>
+
+ +

Guarda l'esempio qui sopra

+ +

Specificazioni

+ +

scrollHeight è parte del modello dell'oggetto MSIE's DHTML . scrollHeight funziona su questi browser: {{SpecName("CSSOM View")}}.

+ +

Compatibilità dei Browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersioni
Internet Explorer8.0
Firefox (Gecko)3.0 (1.9)
Opera?
Safari | Chrome | WebKit4.0 | 4.0 | ?
+ +

Nelle versioni più vecchie di FireFox: Qualora un contenuto di un elemento non generasse una barra di scorrimento varticale, allora il suo scrollHeight sarebbe uguale al suo clientHeight . Questo ci può dire che, o il contenuto è talmente corto da non richiedere una barra di scorrimento verticale, o che quell'elemento ha impostato la proprietà CSS overflow su visible (non-scrollabile).

+ +

Guarda anche

+ + diff --git a/files/it/web/api/element/scrolltop/index.html b/files/it/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..52d7520f6f --- /dev/null +++ b/files/it/web/api/element/scrolltop/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +tags: + - API + - Proprietà + - Referenza +translation_of: Web/API/Element/scrollTop +--- +
{{ APIRef("DOM") }}
+ +

La proprietà Element.scrollTop ottiene o imposta il numero di pixel in cui il contenuto di un elemento viene fatto scorrere verticalmente.

+ +

Il valore scrollTop di un elemento è una misura della distanza dalla parte superiore dell'elemento al suo contenuto visibile più in alto. Quando il contenuto di un elemento non genera una barra di scorrimento verticale, il suo valore scrollTop è 0.

+ +
+

Sui sistemi che usano il ridimensionamento del display, scrollTop può darti un valore decimale.

+
+ +

Sintassi

+ +
// Get the number of pixels scrolled.
+var intElemScrollTop = someElement.scrollTop;
+
+ +

Dopo aver eseguito questo codice, intElemScrollTop è un numero intero corrispondente al numero di pixel che il contenuto dell'{{domxref("element")}} è stato fatto scorrere verso l'alto.

+ +
// Set the number of pixels scrolled.
+element.scrollTop = intValue;
+
+ +

scrollTop può essere impostato su qualsiasi valore intero, con alcuni avvertimenti:

+ + + +

Esempio

+ +
+
+

padding-top

+If you can see this, scrollTop = 0 + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+If you can see this, scrollTop is > 0 + +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+If you can see this, scrollTop is maxed-out + +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Specifiche

+ + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.scrollTop")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/setattribute/index.html b/files/it/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..b3644c8bb2 --- /dev/null +++ b/files/it/web/api/element/setattribute/index.html @@ -0,0 +1,83 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +translation_of: Web/API/Element/setAttribute +--- +

{{APIRef("DOM")}}

+ +

Imposta il valore di un attributo sull'elemento specificato. Se l'attributo esiste già, il valore viene aggiornato; in caso contrario viene aggiunto un nuovo attributo con il nome e il valore specificati.

+ +

Per ottenere il valore corrente di un attributo, utilizza il metodo {{domxref("Element.getAttribute", "getAttribute()")}}; per rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Sintassi

+ +
Element.setAttribute(nome, valore);
+
+ +

Parametri

+ +
+
nome
+
Una {{domxref("DOMString")}} specifica il nome dell'attributo il cui valore deve essere impostato. Il nome dell'attributo viene automaticamente convertito in minuscolo quando setAttribute() viene chiamato su un elemento in un documento HTML.
+
valore
+
Una {{domxref("DOMString")}} contenente il valore da assegnare all'attributo. Qualsiasi valore non stringa specificato viene convertito automaticamente in una stringa.
+
+ +

Gli attributi booleani sono considerati true se sono presenti sull'elemento, indipendentemente dal loro valore effettivo; di norma, è necessario specificare la stringa vuota ("") in valore (alcune persone usano il nome dell'attributo, ma funziona in modo non standard). Vedi l'{{anch ("Esempio", "esempio")}} sotto per una dimostrazione pratica.

+ +

Poiché il valore specificato viene convertito in una stringa, specificare null non fa necessariamente ciò che si aspetta. Invece di rimuovere l'attributo o impostarne il valore come {{jsxref("null")}}, imposta invece il valore dell'attributo sulla stringa null. Se vuoi rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Valore di ritorno

+ +

{{jsxref("undefined")}}.

+ +

Eccezioni

+ +
+
InvalidCharacterError
+
L'attributo specificato nome contiene uno o più caratteri che non sono validi nei nomi degli attributi.
+
+ +

Esempio

+ +

Nell'esempio seguente, setAttribute() viene utilizzato per impostare gli attributi su un {{HTMLElement("button")}}.

+ +

HTML

+ +
<button>Hello World</button>
+ +

JavaScript

+ +
var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+
+ +

Questo dimostra due cose:

+ + + +

{{ EmbedLiveSample('Example', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.setAttribute")}}

+ +

Gecko notes

+ +

L'utilizzo di setAttribute() per modificare determinati attributi, in particolare value in XUL, funziona in modo incoerente, in quanto l'attributo specifica il valore predefinito. Per accedere o modificare i valori correnti, è necessario utilizzare le proprietà. Ad esempio, utilizzare Element.value anziché Element.setAttribute().

diff --git a/files/it/web/api/element/tagname/index.html b/files/it/web/api/element/tagname/index.html new file mode 100644 index 0000000000..950a9a17a4 --- /dev/null +++ b/files/it/web/api/element/tagname/index.html @@ -0,0 +1,72 @@ +--- +title: Element.tagName +slug: Web/API/Element/tagName +tags: + - API + - DOM + - Di sola lettura + - Element + - Gecko + - Proprietà + - Referenza + - Referenza del DOM + - tagName +translation_of: Web/API/Element/tagName +--- +
{{ApiRef("DOM")}}
+ +

La proprietà tagName di sola lettura dell'interfaccia {{domxref("Element")}} restituisce il nome del tag dell'elemento su cui è chiamato. Ad esempio, se l'elemento è un {{HTMLElement("img")}}, la sua proprietà tagName è "IMG" (per i documenti HTML, può essere modificata in modo diverso per i documenti XML/XHTML).

+ +

Sintassi

+ +
elementName = Element.tagName;
+
+ +

Valore

+ +

Una stringa che indica il nome del tag dell'elemento. La capitalizzazione di questa stringa dipende dal tipo di documento:

+ + + +

Per gli oggetti {{domxref("Element")}}, il valore di tagName è uguale al valore della proprietà {{domxref("Node.nodeName", "nodeName")}} che l'oggetto elemento eredita da {{domxref("Node")}}.

+ +

Esempio

+ +

HTML

+ +
<span id="born">Quando sono nato...</span>
+
+ +

JavaScript

+ +
var span = document.getElementById("born");
+console.log(span.tagName);
+
+ +

In XHTML (o qualsiasi altro formato XML), il caso originale verrà mantenuto, quindi "span" verrebbe stampato nel caso in cui il nome del tag originale fosse stato creato in minuscolo. In HTML, "SPAN" verrebbe invece stampato indipendentemente dal caso utilizzato durante la creazione del documento originale.

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-tagname', 'Element: tagName')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.tagName")}}

diff --git a/files/it/web/api/element/textcontent/index.html b/files/it/web/api/element/textcontent/index.html new file mode 100644 index 0000000000..137c76a3eb --- /dev/null +++ b/files/it/web/api/element/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/element/toggleattribute/index.html b/files/it/web/api/element/toggleattribute/index.html new file mode 100644 index 0000000000..c997b4efdd --- /dev/null +++ b/files/it/web/api/element/toggleattribute/index.html @@ -0,0 +1,104 @@ +--- +title: Element.toggleAttribute() +slug: Web/API/Element/toggleAttribute +translation_of: Web/API/Element/toggleAttribute +--- +
{{APIRef("DOM")}}
+ +

Il metodo toggleAttribute() dell'interfaccia {{domxref("Element")}} attiva/disattiva un attributo booleano (rimuovendolo se è presente e aggiungendolo se non è presente) sull'elemento specificato.

+ +

Sintassi

+ +
Element.toggleAttribute(name [, force]);
+
+ +

Parametri

+ +
+
name
+
Una {{domxref("DOMString")}} che specifica il nome dell'attributo da attivare. Il nome dell'attributo viene automaticamente convertito in minuscolo quando toggleAttribute() viene chiamato su un elemento HTML in un documento HTML.
+
force {{optional_inline}}
+
Un valore booleano per determinare se l'attributo deve essere aggiunto o rimosso, indipendentemente dal fatto che l'attributo sia presente o meno al momento.
+
+ +

Valore di ritorno

+ +

true se l'attributo name è eventualmente presente, in caso contrario false.

+ +

Exceptions

+ +
+
InvalidCharacterError
+
L'attributo specificato name contiene uno o più caratteri che non sono validi nei nomi degli attributi.
+
+ +

Esempio

+ +

Nell'esempio seguente, toggleAttribute() viene utilizzato per commutare l'attributo  readonly di un {{HTMLElement("input")}}.

+ +

HTML

+ +
<input value="text">
+<button>toggleAttribute("readonly")</button>
+ +

JavaScript

+ +
var button = document.querySelector("button");
+var input = document.querySelector("input");
+
+button.addEventListener("click", function(){
+  input.toggleAttribute("readonly");
+});
+
+ +

Risultato

+ +

{{ EmbedLiveSample('Esempio', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Polyfill

+ +
if (!Element.prototype.toggleAttribute) {
+  Element.prototype.toggleAttribute = function(name, force) {
+    if(force !== void 0) force = !!force
+
+    if (this.getAttribute(name) !== null) {
+      if (force) return true;
+
+      this.removeAttribute(name);
+      return false;
+    } else {
+      if (force === false) return false;
+
+      this.setAttribute(name, "");
+      return true;
+    }
+  };
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-toggleattribute', 'Element.toggleAttribute')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.toggleAttribute")}}

diff --git a/files/it/web/api/event/altkey/index.html b/files/it/web/api/event/altkey/index.html new file mode 100644 index 0000000000..1ab63e4329 --- /dev/null +++ b/files/it/web/api/event/altkey/index.html @@ -0,0 +1,46 @@ +--- +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 +--- +

{{ 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/bubbles/index.html b/files/it/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..e75e385070 --- /dev/null +++ b/files/it/web/api/event/bubbles/index.html @@ -0,0 +1,31 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se un dato evento può emergere attraverso il DOM oppure no.

+

Sintassi

+
bool = event.bubbles
+
+

bool vale true se l'evento può emergere, altrimenti vale false.

+

Note

+

Solo alcuni eventi possono emergere. Tali eventi hanno questa proprietà impostata a true. E' possibile utilizzarla per controllare se un evento può emergere.

+

Esempio

+
 function leggiInput(e) {
+  // controlla se emerge
+  if not e.bubbles {
+     // in caso negativo, passa oltre
+     passaOltre(e);
+  }
+  // altrimenti emerge
+  scriviOutput(e)
+}
+
+

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

diff --git a/files/it/web/api/event/button/index.html b/files/it/web/api/event/button/index.html new file mode 100644 index 0000000000..5862d54439 --- /dev/null +++ b/files/it/web/api/event/button/index.html @@ -0,0 +1,57 @@ +--- +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 +--- +

{{ 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/cancelable/index.html b/files/it/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..3258a2b37d --- /dev/null +++ b/files/it/web/api/event/cancelable/index.html @@ -0,0 +1,23 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/cancelable +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se è possibile cancellare la risposta predefinita di questo evento o meno.

+

Sintassi

+
bool =event.cancelable;
+
+

bool vale true se l'evento è cancellabile, altrimenti false.

+

Note

+

Se un evento possa essere cancellato o meno, viene determinato al momento dell'inizializzazione dell'evento.

+

Per cancellare un evento, si chiami il metodo preventDefault. Questo impedisce al browser di eseguire l'azione di default associata a tale evento.

+

Specification

+

DOM Level 2 Events: cancelable

+

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

diff --git a/files/it/web/api/event/charcode/index.html b/files/it/web/api/event/charcode/index.html new file mode 100644 index 0000000000..fb785e722e --- /dev/null +++ b/files/it/web/api/event/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/event/ctrlkey/index.html b/files/it/web/api/event/ctrlkey/index.html new file mode 100644 index 0000000000..02fe7f82bf --- /dev/null +++ b/files/it/web/api/event/ctrlkey/index.html @@ -0,0 +1,44 @@ +--- +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 +--- +

{{ 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/currenttarget/index.html b/files/it/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..7fcc81f4b3 --- /dev/null +++ b/files/it/web/api/event/currenttarget/index.html @@ -0,0 +1,99 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +translation_of: Web/API/Event/currentTarget +--- +

{{APIRef("DOM")}}

+ +

Identifica l'elemento del DOM a cui è stato assegnato l'event handler diversamente dall' event.target che rappresenta l'elemento da cui è stato generato l'evento.

+ +

Esempio

+ +

L' event.currentTarget risulta utile da usare quando si assegna lo stesso event handler a numerosi elementi.

+ +
function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  // When this function is used as an event handler: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i < ps.length; i++){
+  ps[i].addEventListener('click', hide, false);
+}
+
+// click around and make paragraphs disappear
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

Compatibilità Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Il modello degli eventi implementato dagli Internet Explorer da 6 a 8 è diverso. Gli event listerner sono attaccati attraverso il metodo non standard element.attachEvent. In questo modello non esiste un equivalente dell' event.currentTarget inoltre this è l'oggetto globale. Una possibile soluzione è quella di wrappare la gestione dell' event.currentTarget in una funzione che chiami la funzione di handler attraverso la Function.prototype.call passando come primo parametro l'elemento. In questo modo il valore associato allo this è quello aspettato.

+ +

Vedi anche

+ +

Comparison of Event Targets

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

{{ ApiRef() }}

+

Sommario

+

Indica quale fase del flusso degli eventi è attualmente in elaborazione.

+

Sintassi

+
fase = event.eventPhase
+
+

Specifiche

+

eventPhase

+

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

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

{{ ApiRef() }}

+

Introduzione

+

Questo capitolo descrive il modello degli eventi del DOM Level 2 così come è implementato in Gecko. Viene descritta l'interfaccia Event, così come le interfacce per la registrazione di eventi per i nodi del DOM, i gestori di eventi, i listener e diversi esempi che mostrano come le interfacce dei diversi eventi si relazionano tra loro.

+

Vi è un diagramma eccellente che spiega chiaramente le tre fasi del flusso degli eventi nella bozza di DOM Level 3.

+

L'interfaccia Event

+

I gestori degli eventi possono essere assegnati a vari elementi DOM. Quando un dato evento si verifica, un oggetto evento viene creato dinamicamente e passato agli event listener che permettono di gestirlo. L'interfaccia Event del DOM è quindi accessibile dalla funzione che gestisce l'evento, alla quale viene passato un oggetto evento come primo e unico argomento.

+

Vi sono tre modi di assegnare un listener a un elemento. Con due di queste tecniche, l'oggetto evento viene passato implicitamente alla funzione che gestisce l'evento. Con la terza tecnica, occorre passare esplicitamente l'oggetto evento come parametro.

+

L'esempio seguente mostra come un oggetto evento viene passato a tale funzione e come può essere utilizzato all'interno della funzione.

+

Si noti che nel codice non viene passato alcun parametro "evt". L'oggetto evento viene passato automaticamente a foo. Tutto ciò che occorre fare è definire un parametro nel gestore di eventi che riceva l'oggetto evento.

+
function foo(evt) {
+  // le funzioni per la gestione degli eventi come questa
+  // ricevono un riferimento implicito all'oggetto evento che gestiscono
+  // (in questo caso abbiamo scelto di chiamarlo "evt").
+  alert(evt);
+}
+elementoTabella.onclick = foo;
+
+

Questo esempio è molto semplice, ma mostra una caratteristica importante degli eventi nel DOM di Gecko, cioè che è possibile accedere all'oggetto evento dalla funzione gestore. Una volta che si ha un riferimento a un evento, si può accedere a tutte le proprietà e ai metodi descritti in questo capitolo.

+

Gestori degli eventi DOM

+

Oltre all'oggetto event qui descritto, il DOM di Gecko fornisce anche metodi per la registrazione dei listener sui nodi del DOM, la rimozione di questi listeners ed eliminare gli eventi dal DOM. Questi event listener sugli elementi HTML o XML sono i modi principali per accedere agli eventi. Questi tre metodi sono descritti nella lista sottostante.

+

Si può anche passare un riferimento all'oggetto evento sotto forma di un parametro definito, chiamato event, alla funzione che gestisce l'evento. Il funzionamento è molto simile a quello della parola chiave this.

+
<html>
+<head>
+<title>esempio sul parametro evento</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  alert(
+    "valore clientX: " + evt.clientX + "\n" +
+    "valore clientY: " + evt.clientY + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+<p>Per conoscere le coordinate della posizione del mouse, clicca in qualunque punto di questa pagina.</p>
+</body>
+</html>
+
+

Utilizzando l'oggetto event predefinito è possibile passare altri parametri alla funzione, come mostrato nel seguente esempio:

+
<html>
+<head>
+<title>esempio sul parametro evento + parametri extra</title>
+
+<script type="text/javascript">
+
+var par2 = 'ciao';
+var par3 = 'mondo!';
+
+function mostraCoordinate(evt, p2, p3){
+  alert(
+    "valore clientX: " + evt.clientX + "\n"
+    + "valore clientY: " + evt.clientY + "\n"
+    + "parametro 2: " + p2 + "\n"
+    + "parametro 3: " + p3 + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="mostraCoordinate(event, par2, par3)">
+<p>Per conoscere le coordinate della posizione del mouse e visualizzare un saluto al mondo, clicca in qualunque punto di questa pagina.</p>
+</body>
+</html>
+
+

Proprietà

+
+
+ event.altKey
+
+ Restituisce un booleano che indica se il tasto <alt> è stato premuto durante l'evento.
+
+ event.bubbles
+
+ Restituisce un booleano che indica se l'evento emerge dal DOM.
+
+ event.button
+
+ Restituisce un intero che indica quale tasto del mouse è stato premuto.
+
+ event.cancelBubble
+
+ {{ Deprecated_inline() }} Restituisce un booleano che indica se l'evento è stato cancellato.
+
+ event.cancelable
+
+ Restituisce un booleano che indica se l'evento è cancellabile.
+
+ event.charCode
+
+ Restituisce il tasto carattere che è stato premuto e che ha scatenato l'evento keypress.
+
+ event.clientX
+
+ Restituisce la posizione orizzontale del puntatore del mouse.
+
+ event.clientY
+
+ Restituisce la posizione verticale del puntatore del mouse.
+
+ event.ctrlKey
+
+ Restituisce un booleano che indica se il tasto <ctrl> è stato premuto durante l'evento.
+
+ event.currentTarget
+
+ Restituisce un riferimento all'elemento a cui appartiene l'evento.
+
+ event.detail
+
+ Restituisce alcuni dettagli sull'evento.
+
+ event.eventPhase
+
+ Indica in quale fase si trova il flusso dell'elaborazione degli eventi.
+
+ event.explicitOriginalTarget
+
+ Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).
+
+ event.isChar
+
+ Restituisce un booleano che indica se l'evento è stato causato dalla pressione di un tasto carattere.
+
+ event.keyCode
+
+ Restituisce un valore Unicode per un tasto non carattere che è stato premuto.
+
+ event.layerX
+
+ Restituisce la coordinata orizzontale relativa al layer corrente.
+
+ event.layerY
+
+ Restituisce la coordinata verticale relativa al layer corrente.
+
+ event.metaKey
+
+ Restituisce un booleano che indica se il tasto meta è stato premuto durante l'evento.
+
+ event.originalTarget
+
+ Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).
+
+ event.pageX
+
+ Restituisce la coordinata orizzontale relativa alla pagina.
+
+ event.pageY
+
+ Restituisce la coordinata verticale relativa alla pagina.
+
+ event.relatedTarget
+
+ Identifica un elemento secondario legato all'evento.
+
+ event.screenX
+
+ Restituisce la posizione orizzontale relativa allo schermo.
+
+ event.screenY
+
+ Restituisce la posizione verticale relativa allo schermo.
+
+ event.shiftKey
+
+ Restituisce un booleano che indica se il tasto <shift> è stato premuto durante l'evento.
+
+ event.target
+
+ Restituisce un riferimento all'elemento al quale l'evento era legato originariamente.
+
+ event.timeStamp
+
+ Restituisce il timestamp nel quale l'evento è stato scatenato.
+
+ event.type
+
+ Restituisce il nome dell'evento (case-insensitive).
+
+ event.view
+
+ Identifica l'AbstractView dal quale l'evento è stato generato.
+
+ event.which
+
+ Restituisce il valore Unicode del tasto che è stato premuto, indipendentemente da quale tipo di tasto sia stato premuto.
+
+

Metodi

+
+
+ event.initEvent
+
+ Inizializza il valore di un evento che è stato creato tramite l'interfaccia DocumentEvent.
+
+ event.initKeyEvent
+
+ Inizializza un evento legato alla tastiera (specifico di Gecko).
+
+ event.initMouseEvent
+
+ Inizializza un evento legato al mouse
+
+ event.initUIEvent
+
+ Inizializza un evento legato all'interfaccia utente
+
+ event.preventBubble
+
+ {{ Obsolete_inline() }} Previene l'emergere di un evento. Questo metodo è deprecato in favore dello standard stopPropagation ed è stato rimosso in Gecko 1.9.
+
+ event.preventCapture
+
+ {{ Obsolete_inline() }} Questo metodo è deprecato in favore dello standard stopPropagation ed è stato rimosso in Gecko 1.9.
+
+ event.preventDefault
+
+ Cancella l'evento (se è cancellabile).
+
+ event.stopPropagation
+
+ Arresta un'ulteriore propagazione degli eventi DOM.
+
+
+  
+

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

diff --git a/files/it/web/api/event/ischar/index.html b/files/it/web/api/event/ischar/index.html new file mode 100644 index 0000000000..ae1edd3975 --- /dev/null +++ b/files/it/web/api/event/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/event/keycode/index.html b/files/it/web/api/event/keycode/index.html new file mode 100644 index 0000000000..d1d69dec46 --- /dev/null +++ b/files/it/web/api/event/keycode/index.html @@ -0,0 +1,48 @@ +--- +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 +--- +

{{ 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 new file mode 100644 index 0000000000..80dc20b35b --- /dev/null +++ b/files/it/web/api/event/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/event/layery/index.html b/files/it/web/api/event/layery/index.html new file mode 100644 index 0000000000..9bb4f99947 --- /dev/null +++ b/files/it/web/api/event/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/event/metakey/index.html b/files/it/web/api/event/metakey/index.html new file mode 100644 index 0000000000..b3a22bfa38 --- /dev/null +++ b/files/it/web/api/event/metakey/index.html @@ -0,0 +1,30 @@ +--- +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 +--- +

{{ 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 new file mode 100644 index 0000000000..90cf1beaac --- /dev/null +++ b/files/it/web/api/event/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/event/pagey/index.html b/files/it/web/api/event/pagey/index.html new file mode 100644 index 0000000000..d0d87573cc --- /dev/null +++ b/files/it/web/api/event/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/event/preventdefault/index.html b/files/it/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..040257b4a3 --- /dev/null +++ b/files/it/web/api/event/preventdefault/index.html @@ -0,0 +1,176 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/preventDefault +--- +
{{ ApiRef("DOM") }}
+ +

Il metodo preventDefault() dell'interfaccia {{domxref("Event")}} dice all'{{Glossary("user agent")}} che se l'evento non viene esplicitamente gestito, la sua azione predefinita non dovrebbe essere presa come normalmente. L'evento continua a propagarsi come al solito, a meno che uno dei suoi listener di eventi non chiami {{domxref("Event.stopPropagation", "stopPropagation()")}} o {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}, uno dei due interrompa la propagazione contemporaneamente.

+ +

Sintassi

+ +
Event.preventDefault();
+ +

Parametri

+ +

Nessuno.

+ +

Valore di ritorno

+ +

undefined.

+ +

Esempi

+ +

Blocco della gestione dei click predefinita

+ +

La commutazione di una casella di controllo è l'azione predefinita di fare click su una casella di controllo. Questo esempio mostra come impedire che ciò accada:

+ +

JavaScript

+ +
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+         document.getElementById("output-box").innerHTML += "Mi dispiace! <code>preventDefault()</code> non ti lascerà controllare questo!<br>";
+         event.preventDefault();
+}, false);
+ +

HTML

+ +
<p>Si prega di fare click sul controllo casella di controllo.</p>
+
+<form>
+  <label for="id-checkbox">Checkbox:</label>
+  <input type="checkbox" id="id-checkbox"/>
+</form>
+
+<div id="output-box"></div>
+ +

Risultato

+ +

Puoi vedere questo in azione qui:

+ +

{{EmbedLiveSample("Blocking_default_click_handling")}}

+ +

Interruzione delle sequenze di tasti per raggiungere un campo di modifica

+ +

L'esempio seguente dimostra come interrompere l'input di testo non valido per raggiungere il campo di input con preventDefault(). Al giorno d'oggi, di solito dovresti usare convalida del modulo HTML nativo.

+ +

HTML

+ +

Ecco il modulo:

+ +
<div class="container">
+  <p>Inserisci il tuo nome utilizzando solo lettere minuscole.</p>
+
+  <form>
+    <input type="text" id="my-textbox">
+  </form>
+</div>
+ +

CSS

+ +

Usiamo un po' di CSS per la finestra di avviso che disegneremo quando l'utente preme una chiave non valida:

+ +
.warning {
+  border: 2px solid #f39389;
+  border-radius: 2px;
+  padding: 10px;
+  position: absolute;
+  background-color: #fbd8d4;
+  color: #3b3c40;
+}
+ +

JavaScript

+ +

Ed ecco il codice JavaScript che fa il lavoro. Per prima cosa, ascolta gli eventi {{event("keypress")}}:

+ +
var myTextbox = document.getElementById('my-textbox');
+myTextbox.addEventListener('keypress', checkName, false);
+
+ +

La funzione checkName(), che controlla il tasto premuto e decide se permetterlo:

+ +
function checkName(evt) {
+  var charCode = evt.charCode;
+  if (charCode != 0) {
+    if (charCode < 97 || charCode > 122) {
+      evt.preventDefault();
+      displayWarning(
+        "Per favore usa solo lettere minuscole."
+        + "\n" + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+
+ +

la funzione displayWarning() presenta la notifica di un problema. Non è una funzione elegante ma fa il lavoro ai fini di questo esempio:

+ +
var warningTimeout;
+var warningBox = document.createElement("div");
+warningBox.className = "warning";
+
+function displayWarning(msg) {
+  warningBox.innerHTML = msg;
+
+  if (document.body.contains(warningBox)) {
+    window.clearTimeout(warningTimeout);
+  } else {
+    // inserisci warningBox dopo myTextbox
+    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
+  }
+
+  warningTimeout = window.setTimeout(function() {
+      warningBox.parentNode.removeChild(warningBox);
+      warningTimeout = -1;
+    }, 2000);
+}
+ +

Risultato

+ +

Ecco il risultato del codice precedente:

+ +

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

+ +

Note

+ +

Chiamando preventDefault() durante qualsiasi fase del flusso di eventi annulla l'evento, il che significa che non verrà eseguita alcuna azione predefinita normalmente eseguita dall'implementazione come risultato dell'evento.

+ +
+

A partire da {{Gecko("6.0")}}, chiamare preventDefault()  fa sì che il valore della proprietà {{ domxref("Event.defaultPrevented()") }} diventi true.

+
+ +

Puoi utilizzare {{domxref("Event.cancelable")}} per verificare se l'evento è cancellabile. Chiamare preventDefault() per un evento non cancellabile non ha alcun effetto.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}{{ Spec2('DOM2 Events') }}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Event.preventDefault")}}

diff --git a/files/it/web/api/event/shiftkey/index.html b/files/it/web/api/event/shiftkey/index.html new file mode 100644 index 0000000000..fcc11142ef --- /dev/null +++ b/files/it/web/api/event/shiftkey/index.html @@ -0,0 +1,45 @@ +--- +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 +--- +

{{ 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/stoppropagation/index.html b/files/it/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..1eef27bf30 --- /dev/null +++ b/files/it/web/api/event/stoppropagation/index.html @@ -0,0 +1,60 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/stopPropagation +--- +

{{APIRef("DOM")}}

+ +

Il metodo stopPropagation() dell'interfaccia {{domxref("Event")}} impedisce un'ulteriore propagazione dell'evento corrente nelle fasi di cattura e bubbling.

+ +

Sintassi

+ +
event.stopPropagation();
+ +

Esempio

+ +

Vedi Esempio 5: Propagazione degli eventi nel capitolo degli Esempi per un esempio più dettagliato di questo metodo e la propagazione degli eventi nel DOM.

+ +

Note

+ +

Vedi la specificazione DOM per la spiegazione del flusso di eventi. (La bozza degli eventi di DOM Level 3" ha un'illustrazione.)

+ +

preventDefault è un metodo complementare che può essere utilizzato per impedire l'azione predefinita dall'evento.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}{{Spec2("DOM2 Events")}}Definzione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Event.stopPropagation")}}

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

{{ ApiRef() }}

+

Sommario

+

Restituisce il timestamp (cioè il numero di millisecondi trascorsi dalla Unix Epoch, le ore 00:00:00 del 1/1/1970) corrispondente al momento in cui si è verificato l'evento.

+

Sintassi

+
ts = event.timeStamp
+
+

Esempio

+
<html>
+<head>
+
+<title>esempio di timeStamp</title>
+
+<script type="text/javascript">
+var ora = null;
+
+function leggiOrario(evt) {
+  ora = evt.timeStamp;
+  document.getElementById("time").firstChild.nodeValue = ora;
+}
+</script>
+</head>
+
+<body onkeypress="leggiOrario(event)">
+
+<p>Premi un tasto per conoscere il timestamp corrente grazie all'evento onkeypress.</p>
+<p>timeStamp: <span id="time">-</span></p>
+
+</body>
+</html>
+
+

Note

+

Il sistema di eventi potrebbe non supportare questa proprietà per ogni possibile tipo di evento.

+

Specifiche

+

timestamp

+

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

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

{{ ApiRef() }}

+

Sommario

+

Restituisce il nome dell'evento (case-insensitive).

+

Sintassi

+
stringa = event.type
+
+

Esempio

+
<html>
+<head>
+
+<title>esempio su event.type</title>
+
+<script type="text/javascript">
+var eventoCorrente = null;
+
+function tipoEvento(evt) {
+  eventoCorrente = evt.type;
+  document.getElementById("Etype").firstChild.nodeValue = eventoCorrente;
+}
+
+</script>
+</head>
+
+<body
+  onkeydown="tipoEvento(event)"
+  onkeyup="tipoEvento(event)"
+  onmousedown="tipoEvento(event)"
+  onmouseup="tipoEvento(event)">
+
+<p>Premi un tasto della tastiera o del mouse per visualizzare il nome dell'evento.</p>
+<p>Tipo evento: <span id="Etype">-</span></p>
+
+</body>
+</html>
+
+

Note

+

Il è un nome XML valido.

+

Specifiche

+

type

+

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

diff --git a/files/it/web/api/event/view/index.html b/files/it/web/api/event/view/index.html new file mode 100644 index 0000000000..00d9f88004 --- /dev/null +++ b/files/it/web/api/event/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/event/which/index.html b/files/it/web/api/event/which/index.html new file mode 100644 index 0000000000..0ab544b60c --- /dev/null +++ b/files/it/web/api/event/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/fetch_api/index.html b/files/it/web/api/fetch_api/index.html new file mode 100644 index 0000000000..1a458fb681 --- /dev/null +++ b/files/it/web/api/fetch_api/index.html @@ -0,0 +1,170 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +tags: + - API + - Documentazione + - Fetch + - Response + - Sperimentale + - XMLHttpRequest + - request +translation_of: Web/API/Fetch_API +--- +

{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}

+ +

La Fetch API fornisce un'interfaccia per ottenere risorse (anche attraverso la rete). Sembrerá familiare a tutti coloro che hanno usato {{domxref("XMLHttpRequest")}}, ma la nuova API fornisce un'insieme piú potente e flessibile di funzionalitá.

+ +

Concetti e uso

+ +

Fetch fornisce una definizione generica di oggetti {{domxref("Request")}} e {{domxref("Response")}} (e altri inclusi nelle richieste di rete). Questo permette loro di essere usati ovunque necessari, in futuro, sia che servano per service workers, Cache API e altri oggetti simili che usano o modificano richieste e risposte, sia per qualunque altro caso d'uso che richieda di generare le proprie risposte via codice.

+ +

Esso fornisce anche una definizione per concetti correlati come CORS e la semantica degli header HTTP di tipo origin, ovviando alla necessità di doverli definire separatamente altrove.

+ +

Per effettuare una richiesta e ottenere una risorsa, si usa il metodo {{domxref("GlobalFetch.fetch")}}. Esso è implementato in piú interfacce (specificatamente {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}). Questo lo rende disponibile all'incirca in ogni contesto in cui si puó voler ottenere risorse.

+ +

Il metodo fetch() richiede un parametro obbligatorio, il percorso (path) alla risorsa che si vuole ottenere, e ritorna una {{domxref("Promise")}} che risolve la {{domxref("Response")}} a quella richiesta, sia essa stata eseguita con successo oppure no. Si puó anche passare in via opzionale un oggetto init (per definire opzioni facoltative) come secondo parametro (per l'elenco completo delle opzioni visitare {{domxref("Request")}}).

+ +

Non appena una {{domxref("Response")}} è recuperata, vi è un certo numero di metodi disponibile allo scopo di definire cosa sia il corpo della risposta e come dovrebbe essere gestito (in dettaglio : {{domxref("Body")}}.)

+ +

È possibile creare una richiesta e una risposta direttamente usando i costruttori delle classi {{domxref("Request.Request","Request()")}} e {{domxref("Response.Response","Response()")}}, ma non e' una pratica comune. Invece, e' piu' frequente che essi vengano creati come risultato delle altre azioni della API (ad esempio, {{domxref("FetchEvent.respondWith")}} dei service workers.)

+ +
+

Note: Puoi trovare informazioni aggiuntive riguardo l'uso di fetch sulla pagina Using Fetch, e studiare i concetti sulla pagina Fetch basic concepts.

+
+ +

Annullare un fetch

+ +

I browsers hanno cominciato a supportare in via sperimentale le interfacce {{domxref("AbortController")}} e {{domxref("AbortSignal")}} (meglio note come Abort API), che permettono di annullare operazioni come Fetch e XHR quando non sono ancora state completate. Per maggiori informazioni controlla la pagina con la descrizione delle interfacce.

+ +

Fetch Interfaces

+ +
+
{{domxref("GlobalFetch")}}
+
Contiene il metodo globale fetch() usato per ottenere una risorsa.
+
{{domxref("Headers")}}
+
Rappresenta un header di richiesta/risposta, permettendo di interrogarlo ed eseguire azioni differenti in base ai risultati.
+
{{domxref("Request")}}
+
Rappresenta una richiesta.
+
{{domxref("Response")}}
+
Rappresenta una risposta a una richiesta.
+
+ +

Fetch mixin

+ +
+
{{domxref("Body")}}
+
Fornisce metodi relativi al corpo di una richiesta/risposta permettendo di dichiarare quale sia il tipo di contenuto e come dovrebbe essere gestito.
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Definizione di cui sopra
+ +

Compatibilitá coi Browsers

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)IEOperaSafari (WebKit)
Supporto base{{CompatChrome(42)}}14{{CompatGeckoDesktop(39)}}
+ 34[1]
+ {{ CompatGeckoDesktop(52)}}[2]		{{CompatNo}}29
+ 28[1]		10.1
{{domxref('ReadableStream')}}{{CompatChrome(43)}}14{{CompatNo}}[3]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto base{{CompatChrome(42)}}{{CompatChrome(42)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}10.1
{{domxref('ReadableStream')}}{{CompatChrome(43)}}{{CompatChrome(43)}}{{CompatVersionUnknown}}{{CompatNo}}[3]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +

[1] Questa API è implementata ma dev'essere abilitata da un'opzione di Firefox.

+ +

[2] Per le versioni di Firefox precedenti la 52, get() ottiene solamente il primo valore nell'header specificato, mentre getAll() ottiene tutti i valori. Dalla versione 52 in avanti, get() ottiene tutti i valori e getAll() è stato eliminato.

+ +

[3] La lettura degli streams è disponibile nell'attuale versione di Firefox, ma deve essere abilitata tramite le opzioni dom.streams.enabled e javascript.options.streams.

+ +

Guarda anche

+ + diff --git a/files/it/web/api/file/index.html b/files/it/web/api/file/index.html new file mode 100644 index 0000000000..1d1941d482 --- /dev/null +++ b/files/it/web/api/file/index.html @@ -0,0 +1,101 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - File API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/API/File +--- +
{{APIRef}}
+ +

The File interface provides information about files and allows JavaScript in a web page to access their content.

+ +

File objects are generally retrieved from a {{DOMxRef("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{DOMxRef("DataTransfer")}} object, or from the mozGetAsFile() API on an {{DOMxRef("HTMLCanvasElement")}}.

+ +

A File object is a specific kind of a {{DOMxRef("Blob")}}, and can be used in any context that a Blob can. In particular, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL()")}}, {{DOMxRef("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, and {{DOMxRef("XMLHttpRequest", "", "send()")}} accept both Blobs and Files.

+ +

See Using files from web applications for more information and examples.

+ +

{{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{DOMxRef("File.File", "File()")}}
+
Returns a newly constructed File.
+
+ +

Properties

+ +
+
{{DOMxRef("File.lastModified")}} {{ReadOnlyInline}}
+
Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).
+
{{DOMxRef("File.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}}
+
Returns the last modified {{JSxRef("Date")}} of the file referenced by the File object.
+
{{DOMxRef("File.name")}}{{ReadOnlyInline}}
+
Returns the name of the file referenced by the File object.
+
{{DOMxRef("File.webkitRelativePath")}} {{Non-standard_Inline}} {{ReadOnlyInline}}
+
Returns the path the URL of the {{DOMxRef("File")}} is relative to.
+
+ +

File implements {{DOMxRef("Blob")}}, so it also has the following properties available to it:

+ +
+
{{DOMxRef("File.size")}} {{ReadOnlyInline}}
+
Returns the size of the file in bytes.
+
{{DOMxRef("File.type")}} {{ReadOnlyInline}}
+
Returns the MIME type of the file.
+
+ +

Methods

+ +

The File interface doesn't define any methods, but inherits methods from the {{DOMxRef("Blob")}} interface:

+ +
+
{{DOMxRef("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
Returns a new Blob object containing the data in the specified range of bytes of the source Blob.
+
{{DOMxRef("Blob.stream()")}}
+
Transforms the File into a {{DOMxRef("ReadableStream")}} that can be used to read the File contents.
+
{{DOMxRef("Blob.text()")}}
+
Transforms the File into a stream and reads it to completion. It returns a promise that resolves with a {{DOMxRef("USVString")}} (text).
+
{{DOMxRef("Blob.arrayBuffer()")}}
+
Transforms the File into a stream and reads it to completion. It returns a promise that resolves with an {{DOMxRef("ArrayBuffer")}}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', "#file-section", "The File interface")}}{{Spec2('File API')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.File")}}

+ +

See also

+ + diff --git a/files/it/web/api/file/using_files_from_web_applications/index.html b/files/it/web/api/file/using_files_from_web_applications/index.html new file mode 100644 index 0000000000..00d0b5f28c --- /dev/null +++ b/files/it/web/api/file/using_files_from_web_applications/index.html @@ -0,0 +1,506 @@ +--- +title: Using files from web applications +slug: Web/API/File/Using_files_from_web_applications +translation_of: Web/API/File/Using_files_from_web_applications +--- +
{{APIRef ("File API")}}
+ +

Utilizzando l'API File, che è stata aggiunta al DOM in HTML5, è ora possibile per il contenuto Web chiedere all'utente di selezionare i file locali e quindi leggere il contenuto di tali file. Questa selezione può essere effettuata utilizzando un {{HTMLElement("input/file", '<input type="file">')}}elemento HTML o trascinandolo.

+ +

Se si desidera utilizzare l'API del file DOM da estensioni o altro codice Chrome del browser, è possibile; tuttavia, nota che ci sono alcune funzionalità aggiuntive di cui essere a conoscenza. Per i dettagli, vedi Utilizzo dell'API del file DOM nel codice Chrome .

+ +

Accesso ai file selezionati

+ +

Considera questo HTML:

+ +
<input type = "file" id = "input" multiple>
+ +

L'API File consente di accedere a un {{DOMxRef ("FileList")}} contenente {{DOMxRef ("File")}} oggetti che rappresentano i file selezionati dall'utente.

+ +

L' multipleattributo inputsull'elemento consente all'utente di selezionare più file.

+ +

Accesso al primo file selezionato usando un classico selettore DOM:

+ +
const selectedFile = document.getElementById ('input'). files [0];
+ +

Accesso ai file selezionati su un evento di modifica

+ +

È anche possibile (ma non obbligatorio) accedere a {{DOMxRef ("FileList")}} tramite l' changeevento. È necessario utilizzare {{DOMxRef ("EventTarget.addEventListener ()")}} per aggiungere il changelistener di eventi, in questo modo:

+ +
const inputElement = document.getElementById ("input");
+inputElement.addEventListener ("change", handleFiles, false);
+funzione handleFiles () {
+  const fileList = this.files; / * ora puoi lavorare con l'elenco dei file * /
+}
+ +

Ottenere informazioni sui file selezionati

+ +

L'oggetto {{DOMxRef ("FileList")}} fornito dal DOM elenca tutti i file selezionati dall'utente, ognuno specificato come oggetto {{DOMxRef ("File")}}. È possibile determinare il numero di file selezionato dall'utente controllando il valore dell'attributo dell'elenco file length:

+ +
const numFiles = fileList.length;
+ +

I singoli oggetti {{DOMxRef ("File")}} possono essere recuperati semplicemente accedendo all'elenco come un array:

+ +
for (let i = 0, numFiles = fileList.length; i <numFiles; i ++) {
+  const file = fileList [i];
+  // ...
+}
+
+ +

Questo ciclo scorre su tutti i file nell'elenco dei file.

+ +

Esistono tre attributi forniti dall'oggetto {{DOMxRef ("File")}} che contengono informazioni utili sul file.

+ +
+
name
+
Il nome del file come stringa di sola lettura. Questo è solo il nome del file e non include alcuna informazione sul percorso.
+
size
+
La dimensione del file in byte come numero intero a 64 bit di sola lettura.
+
type
+
Il tipo MIME del file come stringa di sola lettura o ""se il tipo non può essere determinato.
+
+ +

Esempio: visualizzazione delle dimensioni dei file

+ +

L'esempio seguente mostra un possibile utilizzo della sizeproprietà:

+ +
<! DOCTYPE html>
+<Html>
+<Head>
+<meta charset = "UTF-8">
+<title> Dimensioni file </title>
+<Script>
+funzione updateSize () {
+  let nBytes = 0,
+      oFiles = this.files,
+      nFiles = oFiles.length;
+  for (let nFileId = 0; nFileId <nFiles; nFileId ++) {
+    nBytes + = oFiles [nFileId] .size;
+  }
+  let sOutput = nBytes + "bytes";
+  // codice opzionale per l'approssimazione di multipli
+  const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  per (nMultiple = 0, nApprox = nBytes / 1024; nApprox> 1; nApprox / = 1024, nMultiple ++) {
+    sOutput = nApprox.toFixed (3) + "" + aMultiples [nMultiple] + "(" + nBytes + "bytes)";
+  }
+  // fine del codice opzionale
+  document.getElementById ("fileNum"). innerHTML = nFiles;
+  document.getElementById ("fileSize"). innerHTML = sOutput;
+}
+
+document.getElementById ("uploadInput"). addEventListener ("change", updateSize, false);
+</ Script>
+</ Head>
+
+<Body>
+  <form name = "uploadForm">
+    <Div>
+      <input id = "uploadInput" type = "file" name = "myFiles" multiple>
+      file selezionati: <span id = "fileNum"> 0 </span>;
+      dimensione totale: <span id = "fileSize"> 0 </span>
+    </ Div>
+    <div> <input type = "submit" value = "Invia file"> </div>
+  </ Form>
+</ Body>
+</ Html>
+
+ +

Utilizzo di elementi di input di file nascosti utilizzando il metodo click ()

+ +

Puoi nascondere l'elemento file {{HTMLElement ("input")}}, ammesso, brutto e presentare la tua interfaccia per aprire il selettore di file e visualizzare il file o i file selezionati dall'utente. Puoi farlo stilando l'elemento di input con display:nonee chiamando il metodo {{DOMxRef ("HTMLElement.click", "click ()")}} sull'elemento {{HTMLElement ("input")}}.

+ +

Considera questo HTML:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none">
+<button id="fileSelect">Select some files</button>
+ +

The code that handles the click event can look like this:

+ +
const fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+}, false);
+
+ +

You can style the new button for opening the file picker as you wish.

+ +

Using a label element to trigger a hidden file input element

+ +

To allow opening the file picker without using JavaScript (the click() method), a {{HTMLElement("label")}} element can be used. Note that in this case the input element must not be hidden using display: none (nor visibility: hidden), otherwise the label would not be keyboard-accessible. Use the visually-hidden technique instead.

+ +

Consider this HTML:

+ +
<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
+<label for="fileElem">Select some files</label>
+ +

and this CSS:

+ +
.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+/* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+input.visually-hidden:focus-within + label {
+  outline: thin dotted;
+}
+
+ +

There is no need to add JavaScript code to call fileElem.click(). Also in this case you can style the label element as you wish. You need to provide a visual cue for the focus status of the hidden input field on its label, be it an outline as shown above, or background-color or box-shadow. (As of time of writing, Firefox doesn’t show this visual cue for <input type="file"> elements.)

+ +

Selecting files using drag and drop

+ +

You can also let the user drag and drop files into your web application.

+ +

The first step is to establish a drop zone. Exactly what part of your content will accept drops may vary depending on the design of your application, but making an element receive drop events is easy:

+ +
let dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

In this example, we're turning the element with the ID dropbox into our drop zone. This is done by adding listeners for the {{event('dragenter')}}, {{event('dragover')}}, and {{event('drop')}} events.

+ +

We don't actually need to do anything with the dragenter and dragover events in our case, so these functions are both simple. They just stop propagation of the event and prevent the default action from occurring:

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

The real magic happens in the drop() function:

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  const dt = e.dataTransfer;
+  const files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

Here, we retrieve the dataTransfer field from the event, pull the file list out of it, and then pass that to handleFiles(). From this point on, handling the files is the same whether the user used the input element or drag and drop.

+ +

Example: Showing thumbnails of user-selected images

+ +

Let's say you're developing the next great photo-sharing website and want to use HTML to display thumbnail previews of images before the user actually uploads them. You can establish your input element or drop zone as discussed previously and have them call a function such as the handleFiles() function below.

+ +
function handleFiles(files) {
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+
+    if (!file.type.startsWith('image/')){ continue }
+
+    const img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.
+
+    const reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

Here our loop handling the user-selected files looks at each file's type attribute to see if its MIME type begins with the string "image/"). For each file that is an image, we create a new img element. CSS can be used to establish any pretty borders or shadows and to specify the size of the image, so that doesn't need to be done here.

+ +

Each image has the CSS class obj added to it, making it easy to find in the DOM tree. We also add a file attribute to each image specifying the {{DOMxRef("File")}} for the image; this will let us fetch the images for actual upload later. We use {{DOMxRef("Node.appendChild()")}} to add the new thumbnail to the preview area of our document.

+ +

Next, we establish the {{DOMxRef("FileReader")}} to handle asynchronously loading the image and attaching it to the img element. After creating the new FileReader object, we set up its onload function and then call readAsDataURL() to start the read operation in the background. When the entire contents of the image file are loaded, they are converted into a data: URL which is passed to the onload callback. Our implementation of this routine sets the img element's src attribute to the loaded image which results in the image appearing in the thumbnail on the user's screen.

+ +

Using object URLs

+ +

The DOM {{DOMxRef("URL.createObjectURL()")}} and {{DOMxRef("URL.revokeObjectURL()")}} methods let you create simple URL strings that can be used to reference any data that can be referred to using a DOM {{DOMxRef("File")}} object, including local files on the user's computer.

+ +

When you have a {{DOMxRef("File")}} object you'd like to reference by URL from HTML, you can create an object URL for it like this:

+ +
const objectURL = window.URL.createObjectURL(fileObj);
+ +

The object URL is a string identifying the {{DOMxRef("File")}} object. Each time you call {{DOMxRef("URL.createObjectURL()")}}, a unique object URL is created even if you've created an object URL for that file already. Each of these must be released. While they are released automatically when the document is unloaded, if your page uses them dynamically you should release them explicitly by calling {{DOMxRef("URL.revokeObjectURL()")}}:

+ +
URL.revokeObjectURL(objectURL);
+ +

Example: Using object URLs to display images

+ +

This example uses object URLs to display image thumbnails. In addition, it displays other file information including their names and sizes.

+ +

The HTML that presents the interface looks like this:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none">
+<a href="#" id="fileSelect">Select some files</a>
+<div id="fileList">
+  <p>No files selected!</p>
+</div>
+
+ +

This establishes our file {{HTMLElement("input")}} element as well as a link that invokes the file picker (since we keep the file input hidden to prevent that less-than-attractive user interface from being displayed). This is explained in the section {{anch("Using hidden file input elements using the click() method")}}, as is the method that invokes the file picker.

+ +

The handleFiles() method follows:

+ +
const fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+fileElem.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  if (!this.files.length) {
+    fileList.innerHTML = "<p>No files selected!</p>";
+  } else {
+    fileList.innerHTML = "";
+    const list = document.createElement("ul");
+    fileList.appendChild(list);
+    for (let i = 0; i < this.files.length; i++) {
+      const li = document.createElement("li");
+      list.appendChild(li);
+
+      const img = document.createElement("img");
+      img.src = URL.createObjectURL(this.files[i]);
+      img.height = 60;
+      img.onload = function() {
+        URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      const info = document.createElement("span");
+      info.innerHTML = this.files[i].name + ": " + this.files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+
+ +

This starts by fetching the URL of the {{HTMLElement("div")}} with the ID fileList. This is the block into which we'll insert our file list, including thumbnails.

+ +

If the {{DOMxRef("FileList")}} object passed to handleFiles() is null, we simply set the inner HTML of the block to display "No files selected!". Otherwise, we start building our file list, as follows:

+ +
    +
  1. A new unordered list ({{HTMLElement("ul")}}) element is created.
    2. +
  2. The new list element is inserted into the {{HTMLElement("div")}} block by calling its {{DOMxRef("Node.appendChild()")}} method.
    3. +
  3. For each {{DOMxRef("File")}} in the {{DOMxRef("FileList")}} represented by files: +
      +
    1. Create a new list item ({{HTMLElement("li")}}) element and insert it into the list.
      2. +
    2. Create a new image ({{HTMLElement("img")}}) element.
      3. +
    3. Set the image's source to a new object URL representing the file, using {{DOMxRef("URL.createObjectURL()")}} to create the blob URL.
      4. +
    4. Set the image's height to 60 pixels.
      5. +
    5. Set up the image's load event handler to release the object URL since it's no longer needed once the image has been loaded. This is done by calling the {{DOMxRef("URL.revokeObjectURL()")}} method and passing in the object URL string as specified by img.src.
      6. +
    6. Append the new list item to the list.
      7. +
    +
    4. +
+ +

Here is a live demo of the code above:

+ +

{{EmbedLiveSample('Example_Using_object_URLs_to_display_images', '100%', '300px')}}

+ +

Example: Uploading a user-selected file

+ +

Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.

+ +

Creating the upload tasks

+ +

Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class obj with the corresponding {{DOMxRef("File")}} attached in a file attribute. This allows us to select all of the images the user has chosen for uploading using {{DOMxRef("Document.querySelectorAll()")}}, like this:

+ +
function sendFiles() {
+  const imgs = document.querySelectorAll(".obj");
+
+  for (let i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

Line 2 fetches a {{DOMxRef("NodeList")}}, called imgs, of all the elements in the document with the CSS class obj. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new FileUpload instance for each. Each of these handles uploading the corresponding file.

+ +

Handling the upload process for a file

+ +

The FileUpload function accepts two inputs: an image element and a file from which to read the image data.

+ +
function FileUpload(img, file) {
+  const reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  const xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  const self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          const percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          const canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+
+ +

The FileUpload() function shown above creates a throbber, which is used to display progress information, and then creates an {{DOMxRef("XMLHttpRequest")}} to handle uploading the data.

+ +

Before actually transferring the data, several preparatory steps are taken:

+ +
    +
  1. The XMLHttpRequest's upload progress listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.
    2. +
  2. The XMLHttpRequest's upload load event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.
    3. +
  3. The request to upload the image file is opened by calling XMLHttpRequest's open() method to start generating a POST request.
    4. +
  4. The MIME type for the upload is set by calling the XMLHttpRequest function overrideMimeType(). In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.
    5. +
  5. The FileReader object is used to convert the file to a binary string.
    6. +
  6. Finally, when the content is loaded the XMLHttpRequest function send() is called to upload the file's content.
    7. +
+ +

Asynchronously handling the file upload process

+ +

This example, which uses PHP on the server side and JavaScript on the client side, demonstrates asynchronous uploading of a file.

+ +
<?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?><!DOCTYPE html>
+<html>
+<head>
+    <title>dnd binary upload</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="application/javascript">
+        function sendFile(file) {
+            const uri = "/index.php";
+            const xhr = new XMLHttpRequest();
+            const fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            const dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                const filesArray = event.dataTransfer.files;
+                for (let i=0; i<filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+    </div>
+</body>
+</html>
+
+ +

Example: Using object URLs to display PDF

+ +

Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.

+ +

In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference pdfjs.disabled must be set to false {{non-standard_inline()}}.

+ +
<iframe id="viewer">
+
+ +

And here is the change of the src attribute:

+ +
const obj_url = URL.createObjectURL(blob);
+const iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+URL.revokeObjectURL(obj_url);
+ +

Example: Using object URLs with other file types

+ +

You can manipulate files of other formats the same way. Here is how to preview uploaded video:

+ +
const video = document.getElementById('video');
+const obj_url = URL.createObjectURL (blob);
+video.src = obj_url;
+Video.play ();
+URL.revokeObjectURL (obj_url);
+ +

specificazioni

+ + + + + + + + + + + + + + + + + + + + + +
specificazioneStatoCommento
{{SpecName ('HTML WHATWG', 'numero-stato.html # concetto-input-tipo-file-selezionato', 'Stato caricamento file')}}{{Spec2 ('HTML WHATWG')}}
{{SpecName ('File API')}}{{Spec2 ('API file')}}Definizione iniziale
+ +

Guarda anche

+ + diff --git a/files/it/web/api/geolocation/index.html b/files/it/web/api/geolocation/index.html new file mode 100644 index 0000000000..290260cdd6 --- /dev/null +++ b/files/it/web/api/geolocation/index.html @@ -0,0 +1,133 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +translation_of: Web/API/Geolocation +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

L'interfaccia Geolocation rappresenta un oggetto in grado di ottenere tramite codice la posizione del dispositivo utilizzato. Questo permette ai contenuti web di accedere alla posizione del dispositivo: ad esempio un sito web o una applicaziomne possono mostrare risultati personalizzati in base alla posizione del dispositivo.

+ +

Un oggetto con questa interfaccia si ottiene usando la proprietà {{domxref("navigator.geolocation")}}, implementata dall'oggetto {{domxref("Navigator")}}.

+ +
+

Nota: Per ragioni di sicurezza, quando una pagina web cerca di accedere alla posizione, l'utente viene notificato e gli viene chiesto il permesso. Considera che ogni browser ha una propria policy e un modo differente per chiedere il permesso.

+
+ +

Proprietà

+ +

L'interfaccia Geolocation non ha né implementazioni né proprietà.

+ +

Metodi

+ +

L'interfaccia Geolocation non eredita alcun metodo.

+ +
+
{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}
+
Determina la posizione corrente del dispositivo e ritorna un oggetto {{domxref("Position")}} con i dati.
+
{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}
+
Ritorna un valore long che rappresenta l'ultima chiamata alla funzione eseguita, quando la posizione del dispositivo cambia.
+
{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}
+
Rimuove l'handler installato con watchPosition().
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Specifiche iniziali.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base5{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ Rimosso nella 15.0
+ Reintrodotto nella 16.0		5
Secure context-only47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
Secure context-only{{CompatNo}}47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/geolocation/using_geolocation/index.html b/files/it/web/api/geolocation/using_geolocation/index.html new file mode 100644 index 0000000000..303cb4a8bb --- /dev/null +++ b/files/it/web/api/geolocation/using_geolocation/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/geolocation/watchposition/index.html b/files/it/web/api/geolocation/watchposition/index.html new file mode 100644 index 0000000000..e218675cf7 --- /dev/null +++ b/files/it/web/api/geolocation/watchposition/index.html @@ -0,0 +1,166 @@ +--- +title: Geolocation.watchPosition() +slug: Web/API/Geolocation/watchPosition +translation_of: Web/API/Geolocation/watchPosition +--- +

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

+ +

Il metodo watchPosition() viene usato per creare una funzione che viene chiamata automaticamente ogni volta che cambia la posizione del dispositivo. Si può anche specificare una funzione da chiamare in caso di errore.

+ +

Questo metodo ritorna un valore ID che può essere usato per terminare il metodo {{domxref("Geolocation.clearWatch()")}}.

+ +

Sintassi

+ +
id = navigator.geolocation.watchPosition(successo[, errore[, opzioni]])
+ +

Parametri

+ +
+
successo
+
Un funzione che prende come parametro di input un oggetto {{domxref("Position")}}.
+
errore {{optional_inline}}
+
Una funzione che prende come parametro di input un oggetto {{domxref("PositionError")}}.
+
opzioni {{optional_inline}}
+
Un oggetto {{domxref("PositionOptions")}} che permette di configurare la funzione che controlla la posizione.
+
+ +

Esempi

+ +
var id, target, options;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
+    console.log('Congratulazioni, hai raggiunto il target');
+    navigator.geolocation.clearWatch(id);
+  }
+}
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+}
+
+target = {
+  latitude : 0,
+  longitude: 0
+};
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+
+ +
+

Se la tua applicazione gira su Firefox OS, controlla la pagina geolocation wake lock per fare in modo che la posizione del dispositivo venga aggiornata in backgound o quando lo schermo del dispositivo è spento.

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}{{Spec2('Geolocation')}}Specifica iniziale.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base5{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ Rimosso nella 15.0
+ Reintrodotto nella 16.0		5
Secure context-only47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
Secure context-only{{CompatNo}}47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/geolocationposition/index.html b/files/it/web/api/geolocationposition/index.html new file mode 100644 index 0000000000..7498033a57 --- /dev/null +++ b/files/it/web/api/geolocationposition/index.html @@ -0,0 +1,126 @@ +--- +title: Position +slug: Web/API/GeolocationPosition +translation_of: Web/API/GeolocationPosition +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

L'interfaccia Position rappresenta la posizione di un particolare dispositivo in un preciso istante. La posizione, rappresentata da un oggetto {{domxref("Coordinates")}}, comprende la posizione in 2D del dispositivo, su una sfera che rappresenta la Terra, l'altitudine e la velocità.

+ +

Proprietà

+ +

L'interfaccia Position non estende alcuna proprietà.

+ +
+
{{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}
+
Ritorna un oggetto {{domxref("Coordinates")}} che rappresenta la posizione attuale.
+
{{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}
+
Ritorna {{domxref("DOMTimeStamp")}} che rappresenta l'orario in cui è stata calcolata la posizione.
+
+ +

Metodi

+ +

L'interaccia Position non va implementata e non estende alcun metodo.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('Geolocation', '#position', 'Position')}}{{Spec2('Geolocation')}}Specifica iniziale.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatChrome(5)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ Rimosso nella 15.0
+ Reintrodotto nella 16.0		5
Secure context-only{{CompatChrome(47)}}{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
Secure context-only{{CompatNo}}{{CompatChrome(47)}}{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/globaleventhandlers/index.html b/files/it/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..9238474923 --- /dev/null +++ b/files/it/web/api/globaleventhandlers/index.html @@ -0,0 +1,714 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - GlobalEventHandlers + - HTML DOM + - Mixin + - NeedsTranslation + - Reference + - TopicStub + - events +translation_of: Web/API/GlobalEventHandlers +--- +
{{ApiRef("HTML DOM")}}
+ +

The GlobalEventHandlers mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.

+ +
+

Note: GlobalEventHandlers is a mixin and not an interface; you can't actually create an object of type GlobalEventHandlers.

+
+ +

Properties

+ +

This interface doesn't include any properties except for the event handlers listed below.

+ +

Event handlers

+ +

These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running CSS animation has been canceled.
+
{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a CSS animation has stopped playing.
+
{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a CSS animation has begun playing a new iteration of the animation sequence.
+
{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a CSS animation has started playing.
+
{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncuechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrag")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragexit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrop")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondurationchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onemptied")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.
+
{{domxref("GlobalEventHandlers.onended")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.
+
{{domxref("GlobalEventHandlers.ongotpointercapture")}}
+
+

Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.

+
+
{{domxref("GlobalEventHandlers.oninput")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninvalid")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadeddata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)
+
{{domxref("GlobalEventHandlers.onlostpointercapture")}}
+
+

Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.

+
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousewheel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.
+
{{ domxref("GlobalEventHandlers.onwheel") }}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpause")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplaying")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerdown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointermove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointercancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onprogress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onratechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeked")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeking")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselectstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.
+
{{domxref("GlobalEventHandlers.onshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onstalled")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsuspend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontimeupdate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.
+
{{domxref("GlobalEventHandlers.onvolumechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchcancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchmove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontransitioncancel")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a CSS transition has been cancelled.
+
{{domxref("GlobalEventHandlers.ontransitionend")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a CSS transition has finished playing.
+
{{domxref("GlobalEventHandlers.onwaiting")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.
+
+
+ +

Methods

+ +

This interface defines no methods.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectionchange.
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}Adds onpointerlockchange and onpointerlockerror on {{domxref("Document")}}. It is experimentally implemented on GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onsort since the {{SpecName("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of GlobalEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatGeckoDesktop(1.9.1)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsuspend{{CompatGeckoDesktop(1.9.2)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatGeckoDesktop(1.9.1)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmouseenter, onmouseleave{{CompatGeckoDesktop(10)}}{{CompatChrome(30.0)}}{{CompatUnknown}}5.517{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncancel{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onclose{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncuechange{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmousewheel{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsort {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onpointerlockchange, onpointerlockerror{{CompatGeckoDesktop(10)}}[1]{{CompatVersionUnknown}}[2] {{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatVersionUnknown}}[3]{{CompatChrome(55.0)}}{{CompatVersionUnknown}}10{{CompatUnknown}}{{CompatUnknown}}
onselectionchange{{CompatGeckoDesktop(43)}}[4]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
animationstart, animationend, animationcancel, animationiteration{{CompatGeckoDesktop(51)}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ongotpointercapture, onlostpointercapture{{CompatUnknown}}{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
onauxclick{{CompatGeckoDesktop(53)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onwheel{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onmouseenter, onmouseleave{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(10)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onsuspend{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
oncancel{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onclose{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
oncuechange{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onmousewheel{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onsort{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)
onpointerlockchange, onpointerlockerror{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(10)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatChrome(55.0)}}{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatNo}}10{{CompatNo}}{{CompatNo}}{{CompatChrome(55.0)}}
onselectionchange{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(43)}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
animationstart, animationend, animationcancel, animationiteration{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatGeckoMobile(51)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)
ongotpointercapture, onlostpointercapture{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(57.0)}}
onauxclick{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
onwheel{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] In Gecko this is implemented as onmozpointerlockchange, onmozpointerlockerror.

+ +

[2] In Blink this is implemented as onwebkitpointerlockchange, onwebkitpointerlockerror.

+ +

[3] This is implemented behind the dom.w3c_pointer_events.enabled preference, defaulting to false.

+ +

[4] This is implemented behind the dom.select_events.enabled preference, that default to false, except on Nightly.

+ +

See also

+ + diff --git a/files/it/web/api/globaleventhandlers/onresize/index.html b/files/it/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..27e71c3438 --- /dev/null +++ b/files/it/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,77 @@ +--- +title: GlobalEventHandlers.onresize +slug: Web/API/GlobalEventHandlers/onresize +tags: + - API + - DOM + - Proprietà +translation_of: Web/API/GlobalEventHandlers/onresize +--- +

{{ ApiRef() }}

+ +

La proprietà GlobalEventHandlers.onresize contiene un {{domxref("EventHandler")}} il quale viene lanciato quando un evento {{event("resize")}} viene ricevuto.

+ +

Sintassi

+ +
window.onresize = funcRef;
+
+ +

Parameters

+ + + +

Esempio

+ +
window.onresize = doFunc;
+
+ +
<html>
+<head>
+
+<title>onresize test</title>
+
+</head>
+
+<body>
+<p>Ridimensiona la finestra del browser per lanciare l'evento resize.</p>
+
+<p>Altezza finestra: <span id="height"></span></p>
+<p>Larghezza finestra: <span id="width"></span></p>
+
+<script type="text/javascript">
+  var heightOutput = document.querySelector('#height');
+  var widthOutput = document.querySelector('#width');
+
+  function resize() {
+    heightOutput.textContent = window.innerHeight;
+    widthOutput.textContent = window.innerWidth;
+  }
+
+  window.onresize = resize;
+</script>
+</body>
+</html>
+
+ +

Note

+ +

L'evento resize viene scatenato dopo che la finestra è stata ridimensionata.

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/it/web/api/htmlcanvaselement/index.html b/files/it/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..763a2bc7bc --- /dev/null +++ b/files/it/web/api/htmlcanvaselement/index.html @@ -0,0 +1,245 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - API + - Canvas + - HTML DOM + - Interfaccia + - Riferimenti +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+ +
L'interfaccia HTMLCanvasElement fornisce proprietà e metodi per manipolare il layout e la presentazione degli elementi del canvas. L'interfaccia HTMLCanvasElement eredita anche le proprietà ed i metodi della interfaccia {{domxref("HTMLElement")}}.
+
+ +

 

+ +

Proprietà

+ +

Eredita proprietà dalla interfaccia genitore, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Intero positivo che rispecchia l'attributo dell'elemento HTML {{htmlattrxref("height", "canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, come un numero negativo, è usato il valore di default 150.
+
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+
Un {{jsxref("Boolean")}} che rispecchia l'attributo HTML {{htmlattrxref("moz-opaque", "canvas")}} dell'elemento {{HTMLElement("canvas")}}. Permette al canvas di sapere se la traslucenza sarà un fattore. Se il canvas sa che non ci sarà traslucenza, la prestazione del dipingere puo' essere ottimizzata.
+
{{domxref("HTMLCanvasElement.width")}}
+
Intero positivo che rispecchia l'attributo HTML {{htmlattrxref("width", "canvas")}} dell'elemento {{HTMLElement("canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, ad esempio negativo, è usato il valore di default 300.
+
+ +

Metodi

+ +

Eredita dal proprio genitore, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Restituisce un oggetto {{domxref("CanvasCaptureMediaStream")}} che è una capture video in tempo reale della superficie del canvas.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Restituisce un contesto di disegno sul canvas, oppure null se l'identificativo del contesto non ha supporto. Un contesto di disegno permette di disegnare sul canvas. Chiamare getContext con "2d" come parametro restituisce un oggetto {{domxref("CanvasRenderingContext2D")}}, mentre chiamarlo con "experimental-webgl" (o "webgl") restituisce un oggetto {{domxref("WebGLRenderingContext")}}. Questo contesto è disponibile solo su browsers che implementano WebGL.
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Restituisce un URL dati contentente una rappresentazione della immagine nel formato specificato dal parametro tipo (il valore di default è png). L'immagine restituita ha una risoluzione di 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Crea un oggetto {{domxref("Blob")}} che rappresenta l'immagine contenuta nel canvas; questo file puo' essere immagazzinato temporaneamente su disco oppure nella memoria a discrezione dell'agente per l'utente (user agent).
+
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+
Trasferisce il controllo ad un oggetto {{domxref("OffscreenCanvas")}}, o nella thread principale oppure in una worker.
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Restituisce un oggetto {{domxref("File")}} che rappresenta l'immagine contenuta nel canvas; questo è un file immagazzinato nella memoria, col nome indicato. Se il tipo del file non è specificato, il tipo di default per l'immagine è image/png.
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}Aggiunge il metodo captureStream().
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}Il metodo getContext() ora restituisce  {{domxref("RenderingContext")}} invece di un oggetto opaco.
+ Sono stati aggiunti i metodi probablySupportsContext(), setContext() etransferControlToProxy().
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Definizione iniziale.
+ +

Compatibilità coi Browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2D context)4.0{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
toBlob()50{{CompatGeckoDesktop('19')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatGeckoDesktop('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2D context)2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}10.0 [1]3.2
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} as experimental-webgl{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
toBlob(){{CompatNo}} (bug 67587)50{{CompatGeckoMobile('18')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Supporto parziale in Opera Mini 5.0 e successivi.

+ +

[2] Il supporto per il terzo parametro, è stato aggiunto solo con Gecko 25: quando viene usato col tipo "image/jpeg," questo argomento specifica la qualità dell'immagine.

+ +

[3] Da questa funzionalità dipende una impostazione di preferenza di funzionalità. Imposta come true gfx.offscreencanvas.enabled in about:config .

+ +

Vedi anche:

+ + diff --git a/files/it/web/api/htmlcanvaselement/toblob/index.html b/files/it/web/api/htmlcanvaselement/toblob/index.html new file mode 100644 index 0000000000..f0793eb393 --- /dev/null +++ b/files/it/web/api/htmlcanvaselement/toblob/index.html @@ -0,0 +1,262 @@ +--- +title: HTMLCanvasElement.toBlob() +slug: Web/API/HTMLCanvasElement/toBlob +translation_of: Web/API/HTMLCanvasElement/toBlob +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

Il metodoHTMLCanvasElement.toBlob() crea un oggetto {{domxref("Blob")}} rappresentante l'immagine contenuta nel canvas;  questo file potrebbe essere immagazzinato per usi futuri su disco o in memoria a discrezione dell'user agent. Se type non è specificato, il tipo immagine è impostato aimage/png. L'immagine creata ha una risoluzione di 96dpi.
+ Il terzo argomento è usato con immagini di tipoimage/jpeg per specificare la qualità dell'output.

+ +

Sintassi

+ +
void canvas.toBlob(callback, mimeType, qualityArgument);
+
+ +

Parametri

+ +
+
callback
+
Funzione di callback con l'oggetto {{domxref("Blob")}} risultante come singolo argomento.
+
mimeType {{optional_inline}}
+
Un oggetto {{domxref("DOMString")}} indicante il tipo immagine. Quella di default èimage/png.
+
qualityArgument {{optional_inline}}
+
Un oggetto {{jsxref("Number")}} tra0 e1 indicante la qualità immagine se il tipo richiesto è image/jpeg oimage/webp. Se questo argomento è diverso dai due precedenti è utilizzato il valore di qualità immagine di default. Altri argomenti verranno ignorati.
+
+ +

Valore ritornato

+ +

Nessuno.

+ +

Esempi

+ +

Ottenere un file rappresentante il canvas

+ +

Una volta aver disegnato il contenuto in un canvas, è possibile convertirlo in un file di un qualsiasi. Lo snippet di codice in basso, ad esempio, prende l'immagine contenuta nell'elemento {{HTMLElement("canvas")}} avente ID "canvas", ottenendo una sua copia in formato immagine PNG, quindi aggiunge un nuovo elemento {{HTMLElement("img")}} al documento, la cui immagine di origine è quella creata utilizzando il canvas.

+ +
var canvas = document.getElementById('canvas');
+
+canvas.toBlob(function(blob) {
+  var newImg = document.createElement('img'),
+      url = URL.createObjectURL(blob);
+
+  newImg.onload = function() {
+    // no longer need to read the blob so it's revoked
+    URL.revokeObjectURL(url);
+  };
+
+  newImg.src = url;
+  document.body.appendChild(newImg);
+});
+
+ +

Si noti che si sta creando un'immagine PNG; se si specifica un secondo parametro nella chiamata a toBlob(),  si può specificare il formato immagine. Ad esempio, per ottenere l'immagine in formato JPEG:

+ +
 canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality
+ +
+

Convertire un canvas in icona (solo su Mozilla)

+ +

Ora si userà -moz-parse per convertire un canvas in icona. Windows XP non supporta la conversione dal formato PNG ad ICO, quindi usa quello bitmap (BMP) al suo posto. Un link di download è creato impostando l'attributo download. Il valore dello stesso è il nome che verrà utilizzato come nome del file.

+ +
var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var a = document.createElement('a');
+    a.textContent = 'Download';
+    document.body.appendChild(a);
+    a.style.display = 'block';
+    a.download = iconName + '.ico';
+    a.href = window.URL.createObjectURL(b);
+  }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');
+
+ +

Salvare toBlob su disco con OS.File (valido solo per chrome/add-on)

+ +
+

This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.

+
+ +
var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var r = new FileReader();
+    r.onloadend = function () {
+    // r.result contains the ArrayBuffer.
+    Cu.import('resource://gre/modules/osfile.jsm');
+    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+                                 iconName + '.ico');
+    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+                                      {tmpPath:writePath + '.tmp'});
+    promise.then(
+      function() {
+        console.log('successfully wrote file');
+      },
+      function() {
+        console.log('failure writing file')
+      }
+    );
+  };
+  r.readAsArrayBuffer(b);
+  }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5.1')}}No change
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5 W3C')}}Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("50")}}{{CompatGeckoDesktop('19')}}{{CompatIE(10)}}{{property_prefix("ms")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
Image quality parameter{{CompatChrome("50")}}{{CompatGeckoDesktop('25')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome("50")}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatChrome("50")}}
Image quality parameter{{CompatNo}}{{CompatChrome("50")}}{{CompatGeckoMobile("25")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatChrome("50")}}
+
+ +

[1] See {{WebKitBug("71270")}}.

+ +

Polyfill

+ +

A low performance polyfill based on toDataURL.

+ +
if (!HTMLCanvasElement.prototype.toBlob) {
+ Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+  value: function (callback, type, quality) {
+
+    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
+        len = binStr.length,
+        arr = new Uint8Array(len);
+
+    for (var i = 0; i < len; i++ ) {
+     arr[i] = binStr.charCodeAt(i);
+    }
+
+    callback( new Blob( [arr], {type: type || 'image/png'} ) );
+  }
+ });
+}
+
+ +

See also

+ + diff --git a/files/it/web/api/htmlcollection/index.html b/files/it/web/api/htmlcollection/index.html new file mode 100644 index 0000000000..53eb23edd1 --- /dev/null +++ b/files/it/web/api/htmlcollection/index.html @@ -0,0 +1,101 @@ +--- +title: HTMLCollection +slug: Web/API/HTMLCollection +tags: + - API + - DOM + - HTML DOM + - HTMLCollection + - Interfaccia + - Lista di elementi + - Referenza + - Referenza DOM +translation_of: Web/API/HTMLCollection +--- +

{{APIRef("HTML DOM")}}

+ +

L'interfaccia HTMLCollection rappresenta una raccolta generica (array-like object simile agli argomenti) di elementi (nell'ordine del documento) e offre metodi e proprietà per la selezione dall'elenco.

+ +
Note: Questa interfaccia è chiamata HTMLCollection per ragioni storiche (prima del DOM moderno, le raccolte che implementano questa interfaccia potevano avere solo elementi HTML come elementi).
+ +

Una HTMLCollection nell'HTML DOM è attiva; viene aggiornata automaticamente quando viene modificato il documento sottostante.

+ +

Proprietà

+ +
+
{{domxref("HTMLCollection.length")}} {{readonlyInline}}
+
Restituisce il numero di elementi nella raccolta.
+
+ +

Metodi

+ +
+
{{domxref("HTMLCollection.item()")}}
+
Restituisce il nodo specifico al dato index a base zero nella lista. Restituisce null se index non è compreso nell'intervallo
+
{{domxref("HTMLCollection.namedItem()")}}
+
Restituisce il nodo specifico il cui ID o, come nome di fallback, corrisponde alla stringa specificata da nome. La corrispondenza per nome viene eseguita solo come ultima risorsa, solo in HTML, e solo se l'elemento di riferimento supporta l'attributo name. Restituisce null se nessun nodo corrisponde con il nome specificato.
+
+ +

Utilizzo in JavaScript

+ +

HTMLCollection espone anche i suoi membri direttamente come proprietà sia per nome che per indice. Gli ID HTML possono contenere : e . come caratteri validi, che richiederebbero l'uso della notazione della parentesi per l'accesso alla proprietà. Attualmente HTMLCollections non riconosce gli ID puramente numerici, il che causerebbe un conflitto con l'accesso in stile array, sebbene HTML5 li autorizzi.

+ +

Ad esempio, supponendo che esista un elemento <form> nel documento e il suo id sia "myForm":

+ +
var elem1, elem2;
+
+// document.forms è una HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // ritorna: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // ritorna: "true"
+
+elem1 = document.forms["named.item.with.periods"];
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM2 HTML') }} 
{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM1') }}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.HTMLCollection")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/htmlcollection/item/index.html b/files/it/web/api/htmlcollection/item/index.html new file mode 100644 index 0000000000..f53047ffbc --- /dev/null +++ b/files/it/web/api/htmlcollection/item/index.html @@ -0,0 +1,50 @@ +--- +title: HTMLCollection.item +slug: Web/API/HTMLCollection/item +translation_of: Web/API/HTMLCollection/item +--- +
{{APIRef("HTML DOM")}}
+ +

Il metodo {{domxref("HTMLCollection")}} item() restituisce il nodo situato nell'offset specificato nella raccolta.

+ +
+

Note: Poiché il contenuto di una HTMLCollection è attivo, le modifiche al DOM sottostante possono e causano la modifica della posizione dei singoli nodi nella raccolta, pertanto il valore dell'indice non resterà necessariamente costante per un determinato nodo.

+
+ +

Sintassi

+ +
var elemento = HTMLCollection.item(index)
+ +

Parametri

+ +
+
index
+
La posizione del {{domxref("Node")}} da restituire. Gli elementi appaiono in una HTMLCollection nello stesso ordine in cui appaiono nella fonte del documento.
+
+ +

Valore di ritorno

+ +

Il {{domxref("Node")}} nell'indice specificato, o null se index è minore di zero o maggiore o uguale alla proprietà length.

+ +

Note di utilizzo

+ +

Il metodo item() estituisce un elemento numerato da una HTMLCollection. In JavaScript, è più semplice trattare HTMLCollection come una matrice e indicizzarla mediante la notazione degli array. Vedi l'{{anch ("Esempio", "esempio")}} sotto.

+ +

Esempio

+ +
var c = document.images;  // Questa è una HTMLCollection
+var img0 = c.item(0);     // Puoi usare il metodo item() in questo modo
+var img1 = c[1];          // Ma questa notazione è più facile e più comune
+
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.HTMLCollection.item")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/api/htmlelement/index.html b/files/it/web/api/htmlelement/index.html new file mode 100644 index 0000000000..a1b53a7528 --- /dev/null +++ b/files/it/web/api/htmlelement/index.html @@ -0,0 +1,481 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface + - NeedsNewLayout + - Referenza +translation_of: Web/API/HTMLElement +--- +
{{ApiRef("HTML DOM")}}
+ +

L'interfaccia HTMLElement rappresenta un qualsiasi elemento HTML. Alcuni elementi implementano direttamente questa interfaccia, altri la implementano attraverso un'interfaccia che la eredita.

+ +

Proprietà

+ +

Eredita le proprietà dai propri genitori, da {{domxref("Element")}} e da {{domxref("GlobalEventHandlers")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomeTipoDescrizione
{{domxref("HTMLElement.accessKey")}}{{domxref("DOMString")}}La chiave d'accesso assegnata all'elemento.
{{domxref("HTMLElement.accessKeyLabel")}}{{domxref("DOMString")}}Una stringa che rappresenta la chiave d'accesso assegnata all'elemento.
{{domxref("HTMLElement.contentEditable")}}{{domxref("DOMString")}}Ritorna o assegna la modificabilità dell'elemento.
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}{{domxref("Boolean")}}Indica se il contenuto dell'elemento sia modificabile.
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}{{domxref("DOMStringMap")}}Permette di leggere e scrivere attributi personalizzati (data-*) nell'elemento.
{{domxref("HTMLElement.dir")}}{{domxref("DOMString")}}Ritorna o assegna la direzione dell'elemento
{{domxref("HTMLElement.draggable")}}{{domxref("Boolean")}} 
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.hidden")}}{{domxref("Boolean")}} 
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}{{domxref("Boolean")}} 
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}{{domxref("DOMString")}} 
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}any 
{{domxref("HTMLElement.lang")}}{{domxref("DOMString")}}Ritorna o assegna la lingua di un attributo, di un elemento, del testo e del contenuto di un elemento.
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}doubleL'altezza di un elemento, relativa al layout.
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}doubleLa distanza tra il bordo sinistro dell'elemento e il bordo sinistro del suo offsetParent.
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}{{domxref("Element")}}L'elemento a partire dal quale tutti i calcoli dell'offset sono effettuati.
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}doubleLa distanza tra il bordo superiore dell'elemento e il bordo superiore del suo offsetParent.
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}doubleLa larghezza di un elemento, relativa al layout.
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}{{domxref("HTMLPropertiesCollection")}} 
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}{{domxref("Boolean")}}Controlla il controllo ortografico (presente in tutti gli elementi HTML)
{{domxref("HTMLElement.style")}}{{domxref("CSSStyleDeclaration")}}Un oggetto che rappresenta la dichiarazione degli attributi di stile di un elemento.
{{domxref("HTMLElement.tabIndex")}}longRitorna o assegna la posizione di un elemento nell'ordine di tabbing.
{{domxref("HTMLElement.title")}}{{domxref("DOMString")}}Una stringa che appare in un popup quando il mouse si trova sopra all'elemento.
{{domxref("HTMLElement.translate")}} {{experimental_inline}}{{domxref("Boolean")}} 
+ +

Gestori degli eventi

+ +

Le proprietà degli eventi, nella forma onXYZ, sono definite nei {{domxref("GlobalEventHandlers")}} implementati da HTMLElement. Alcune altre sono specifiche per HTMLElement.

+ +
+
{{domxref("HTMLElement.onTouchStart")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchstart")}}.
+
{{domxref("HTMLElement.onTouchEnd")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchend")}}.
+
{{domxref("HTMLElement.onTouchMove")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchmove")}}.
+
{{domxref("HTMLElement.onTouchEnter")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchenter")}}.
+
{{domxref("HTMLElement.onTouchLeave")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchleave")}}.
+
{{domxref("HTMLElement.onTouchCancel")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchcancel")}}.
+
+ +

Metodi

+ +

Eredita i metodi dal genitore, {{domxref("Element")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome e argomentiRestituisceDescrizione
{{domxref("HTMLElement.blur()")}}voidRimuove il focus della tastiera dall'elemento attualmente in focus.
{{domxref("HTMLElement.click()")}}voidInvia un evento di clic del mouse all'elemento.
{{domxref("HTMLElement.focus()")}}voidPorta il focus della tastiera sull'elemento.
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}void 
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Aggiunge le seguenti proprietà: offsetParent, offsetTop, offsetLeft, offsetWidth, e offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Aggiunge le seguenti proprietà: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, e itemValue.
+ Aggiunti i seguenti metodi: forceSpellcheck().
+ Spostati gli attributi onXYZ all'interfaccia {{domxref("GlobalEventHandlers")}} e aggiunta la sua ereditarietà.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Aggiunge le seguenti proprietà: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, e tutte le proprietà onXYZ.
+ Spostate le proprietà id e className all'interfaccia {{domxref("Element")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}Nessun cambiamento da {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Supporto di base{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}17.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.10)
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.24)
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}9.0{{CompatUnknown}}11.105.1
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.contentEditable", "contentEditable")}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}5.59{{CompatVersionUnknown}}
{{domxref("HTMLElement.spellcheck", "spellcheck")}}{{CompatGeckoDesktop("1.8.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}8.01111.106
{{domxref("HTMLElement.draggable", "draggable")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}12.0{{CompatUnknown}}
{{domxref("HTMLElement.dropzone", "dropzone")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}12.0{{CompatNo}}
{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatNo}}11.60
+ (Removed in Opera 15)		{{CompatNo}}
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Supporto di base +

{{CompatGeckoMobile("1.0")}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/htmlelement/offsetheight/index.html b/files/it/web/api/htmlelement/offsetheight/index.html new file mode 100644 index 0000000000..46b7232b50 --- /dev/null +++ b/files/it/web/api/htmlelement/offsetheight/index.html @@ -0,0 +1,123 @@ +--- +title: HTMLElement.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +translation_of: Web/API/HTMLElement/offsetHeight +--- +
{{ APIRef("HTML DOM") }}
+ +

La proprietà HTMLElement.offsetHeight è una proprietà di tipo read-only e rappresenta l'altezza dell'elemento incluso padding verticale e magini, in pixels, come intero.

+ +

Di solito, l'offsetHeight di un elemento è una misura che include i bordi dell'elemento, il padding verticale dell'elemento, la scrollbar orizzontale dell'elemento  (se presente , se renderizzata) e l'altezza nel css dell'elemento.

+ +

Per l'oggetto body, la misua include la totale altezza lineare invece dell'altezza CSS. Elementi floattati sotto altri contenuti lineari sono ignorati.

+ +
+

Questa proprietà arrotonderà il valore ad un intero. Se vi serve un valore decimale usate {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintassi

+ +
var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;
+
+ +

intElemOffsetHeight è una variabile che associa un intero corrispondente al valore dell'offsetHeight in pixel dell'elemento. La proprietà offsetHeight è di tipo readonly.

+ +

Esempio

+ +

 

+ +

             Image:Dimensions-offset.png

+ + +

L'immagine nell'esempio sopra mosta una scrollbar e un offsetHeigh che si adatta alla finestra. Comunque, elementi non scrollabili potrebbero avere un offsetHeights largo, molto più largo del contenuto visibile. Questi elemnti sono tipicamente contenuti in un elemento scrollabile; di conseguenza questi elementi non scrollabili possono essere invisibili completamente o parzialmente, dipende dal settaggio dello scrollTop del contenitore scrollabile.

+ +

 

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatusCommenti
{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}{{Spec2('CSSOM View')}} 
+ +

Note

+ +

offsetHeight è una proprietà del DHTML object model la quale era stata introdotta precedentemente da MSIE. Questa si riferisce a volte alla dimensione fisica/grafica di un elemento, o all'altezza del border-box di un elemento.

+ +

Compatibilità Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vedi Anche

+ + diff --git a/files/it/web/api/htmlformelement/acceptcharset/index.html b/files/it/web/api/htmlformelement/acceptcharset/index.html new file mode 100644 index 0000000000..5100a8d7f4 --- /dev/null +++ b/files/it/web/api/htmlformelement/acceptcharset/index.html @@ -0,0 +1,22 @@ +--- +title: HTMLFormElement.acceptCharset +slug: Web/API/HTMLFormElement/acceptCharset +translation_of: Web/API/HTMLFormElement/acceptCharset +--- +
{{APIRef("HTML DOM")}}
+ +

acceptCharset restituisce una lista delle codifiche dei caratteri supportate per un dato elemento form. Questa lista è una stringa e gli elementi possono essere separati da virgole o da spazi.

+ +

Sintassi

+ +
stringa = form.acceptCharset;
+
+ +

Esempio

+ +
inputs = document.forms["myform"].acceptCharset
+
+ +

Specifiche

+ +

DOM Level 2 HTML: acceptCharset

diff --git a/files/it/web/api/htmlformelement/action/index.html b/files/it/web/api/htmlformelement/action/index.html new file mode 100644 index 0000000000..8b55910259 --- /dev/null +++ b/files/it/web/api/htmlformelement/action/index.html @@ -0,0 +1,30 @@ +--- +title: HTMLFormElement.action +slug: Web/API/HTMLFormElement/action +translation_of: Web/API/HTMLFormElement/action +--- +
{{APIRef("HTML DOM")}}
+ +

action legge o imposta l'attributo action dell'elemento FORM.

+ +

Sintassi

+ +
stringa = form.action
+form.action =
+stringa
+
+ +

Esempio

+ +
form.action = "/cgi-bin/publish";
+
+ +

Note

+ +

L'attributo action di un form è il programma che viene eseguito sul server quando il form viene inviato. Questa proprietà può essere letta o impostata.

+ +

Specifiche

+ +

DOM Level 2 HTML: action

+ +

{{ languages( { "ja": "ja/DOM/form.action" } ) }}

diff --git a/files/it/web/api/htmlformelement/elements/index.html b/files/it/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..3ea2a2aa32 --- /dev/null +++ b/files/it/web/api/htmlformelement/elements/index.html @@ -0,0 +1,34 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/HTMLFormElement/elements +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Restituisce una HTMLCollection contenente tutti i controlli dell'elemento form a cui si riferisce.

+ +

Puoi accedere un elemento della collezione sia usando l'indice che usando l'id o il name.

+ +

Sintassi

+ +
nodeList =
+HTMLFormElement.elements
+
+ +

Esempio

+ +
var input = document.getElementById("form1").elements;
+var inputByIndex = inputs[2]; //indice
+var inputByName = inputs["login"]; //id oppure name
+
+ +

Specifiche

+ +

Specifica W3C DOM 2 HTML Specifica elements

diff --git a/files/it/web/api/htmlformelement/enctype/index.html b/files/it/web/api/htmlformelement/enctype/index.html new file mode 100644 index 0000000000..082db19303 --- /dev/null +++ b/files/it/web/api/htmlformelement/enctype/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.enctype +slug: Web/API/HTMLFormElement/enctype +translation_of: Web/API/HTMLFormElement/enctype +--- +
{{APIRef("HTML DOM")}}
+ +

enctype legge o imposta il tipo di contenuto del form.

+ +

Sintassi

+ +
stringa = form.enctype
+form.enctype =
+stringa
+
+ +

Esempio

+ +
form.enctype = "application/x-www-form-urlencoded";
+
+ +

Note

+ +

Il tipo di codifica predefinito è "application/x-www-form-urlencoded".

+ +

Specifiche

+ +

DOM Level 2 HTML: enctype

diff --git a/files/it/web/api/htmlformelement/index.html b/files/it/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..35ef7bcb58 --- /dev/null +++ b/files/it/web/api/htmlformelement/index.html @@ -0,0 +1,125 @@ +--- +title: form +slug: Web/API/HTMLFormElement +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/HTMLFormElement +--- +

{{ ApiRef() }}

+

HTML Form Element Interface

+

L'elemento FORM possiede tutte le proprietà e i metodi di qualunque element, e inoltre ha un'interfaccia specializzata: HTMLFormElement.

+

Questa interfaccia fornisce i metodi per creare e modificare gli elementi del FORM. L'esempio seguente mostra come creare un nuovo elemento form, modificare i suoi attributi e inviarlo.

+
// Crea un form
+var f = document.createElement("form");
+
+// Lo aggiungere come ultimo nodo all'interno dell'elemento Body
+document.body.appendChild(f);
+
+// Setta l'attributo action e l'attributo method
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Invia il form tramite il metodo submit
+f.submit();
+
+

Il seguente esempio di pagina HTML mostra come estrarre informazioni da un form e come settare alcuni dei suoi attributi.

+
</html>
+<head>
+<title>Esempio di Form</title>
+<script type="text/javascript">
+  function getFormInfo() {
+    var info;
+
+    // Ricava un riferimento al form usando la collezione di form disponibile in document
+    var f = document.forms["formA"];
+    info = "f.elements: " + f.elements + "\n"
+         + "f.length: " + f.length + "\n"
+         + "f.name: " + f.elements + "\n"
+         + "f.acceptCharset: " + f.acceptCharset + "\n"
+         + "f.action: " + f.action + "\n"
+         + "f.enctype: " + f.enctype + "\n"
+         + "f.encoding: " + f.encoding + "\n"
+         + "f.method: " + f.method + "\n"
+         + "f.target: " + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+
+  // Un riferimento al form viene passato
+  //  dall'attributo onclick del button usando 'this.form'
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+</script>
+</head>
+<body>
+<h1>Form  example</h1>
+
+<form id="formA"
+ action="/cgi-bin/test" method="POST">
+ <p>Clicca "Info" per vedere delle info sul form.
+    Cllica set per cambiare i settaggi,quindi di nuovo info per vedere l'effetto</p>
+ <p>
+  <input type="button" value="info"
+   onclick="getFormInfo();">
+  <input type="button" value="set"
+   onclick="setFormInfo(this.form);">
+  <input type="reset" value="reset">
+  <br>
+  <textarea id="tex" style="height:15em; width:20em">
+ </p>
+</form>
+</body>
+</html>
+
+

Proprietà

+
+
+ form.elements
+
+ Restituisce una collezione dei controlli contenuti form corrente.
+
+ form.length
+
+ Restituisce il numero di controlli contenuti nel form corrente.
+
+ form.name
+
+ Restituisce una stringa con con il valore dell'attributo name del form corrente.
+
+ form.acceptCharset
+
+ Restituisce una lista dei set di caratteri supportati per il form corrente.
+
+ form.action
+
+ Restituisce/setta l'URI a cui verranno spediti i dati del form.
+
+ form.enctype
+
+ Restituisce/setta il tipo di contenuto che il form corrente invierà al server.
+
+ form.method
+
+ Restituisce/setta il metodo con cui inviare le informazioni al server.
+
+ form.target
+
+ Restituisce/setta il nome del frame in cui rendere la pagina di risposta del server.
+
+

Metodi

+
+
+ form.submit
+
+ Invia il form.
+
+ form.reset
+
+ Riporta il form al suo stato iniziale.
+
+

{{ languages( { "fr": "fr/DOM/form", "pl": "pl/DOM/form", "en": "en/DOM/form" } ) }}

diff --git a/files/it/web/api/htmlformelement/length/index.html b/files/it/web/api/htmlformelement/length/index.html new file mode 100644 index 0000000000..34f1e82ef3 --- /dev/null +++ b/files/it/web/api/htmlformelement/length/index.html @@ -0,0 +1,26 @@ +--- +title: HTMLFormElement.length +slug: Web/API/HTMLFormElement/length +translation_of: Web/API/HTMLFormElement/length +--- +
{{APIRef("HTML DOM")}}
+ +

length restituisce il numero di controlli contenuti dall'elemento FORM.

+ +

Sintassi

+ +
integer = form.length
+
+ +

Esempio

+ +
if (document.getElementById("form1").length > 1) {
+  // vi è più di un controllo
+}
+
+ +

Specification

+ +

DOM Level 2: length

+ +

{{ languages( { "ja": "ja/DOM/form.length" } ) }}

diff --git a/files/it/web/api/htmlformelement/method/index.html b/files/it/web/api/htmlformelement/method/index.html new file mode 100644 index 0000000000..bffd4f7faf --- /dev/null +++ b/files/it/web/api/htmlformelement/method/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.method +slug: Web/API/HTMLFormElement/method +translation_of: Web/API/HTMLFormElement/method +--- +
{{APIRef("HTML DOM")}}
+ +

method legge o imposta il metodo HTTP utilizzato per l'invio del form.

+ +

+

Sintassi

+

+ +
stringa = form.method
+form.method =
+stringa
+
+ +

Esempio

+ +
document.forms["myform"].method = "POST";
+
+ +

Specifiche

+ +

DOM Level 2 HTML: method

+ +

{{ languages( { "ja": "ja/DOM/form.method" } ) }}

diff --git a/files/it/web/api/htmlformelement/name/index.html b/files/it/web/api/htmlformelement/name/index.html new file mode 100644 index 0000000000..1e6c741329 --- /dev/null +++ b/files/it/web/api/htmlformelement/name/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.name +slug: Web/API/HTMLFormElement/name +translation_of: Web/API/HTMLFormElement/name +--- +
{{APIRef("HTML DOM")}}
+ +

name restituisce il nome dell'elemento FORM corrente come stringa.

+ +

Sintassi

+ +
stringa = form.name
+form.name =
+stringa
+
+ +

Esempio

+ +
form1 = document.getElementById("form1").name;
+if (form1 != document.form.form1) {
+   // il browser non supporta questo tipo di riferimenti
+}
+
+ +

Note

+ +

Si noti che questa proprietà può essere letta o impostata, il chè significa che è possibile modificare o impostare il nome del form.

+ +

Se l'elemento FORM contiene un elemento chiamato "name", questo elemento coprirà la proprietà form.name, quindi non sarà possibile utilizzarla.

+ +

Internet Explorer (IE) non permette di modificare l'attributo name di un elemento che è stato creato con createElement() utilizzando la proprietà name.

+ +

Specifiche

+ +

DOM Level 2 HTML: name

diff --git a/files/it/web/api/htmlformelement/reset/index.html b/files/it/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..0d373e6938 --- /dev/null +++ b/files/it/web/api/htmlformelement/reset/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.reset +slug: Web/API/HTMLFormElement/reset +translation_of: Web/API/HTMLFormElement/reset +--- +
{{APIRef("HTML DOM")}}
+ +

reset resetta il form al suo stato iniziale.

+ +

Sintassi

+ +
HTMLForm.reset()
+
+ +

Esempio

+ +
document.forms["mioForm"].reset();
+
+ +

Note

+ +

Questo metodo simula ciò che accadrebbe se l'utente cliccasse il bottone reset.

+ +

Se un controllo di un form (come il bottone reset) ha come nome reset, questo coprirà il metodo reset.

+ +

Specifiche

+ +

DOM Level 2 HTML: reset

diff --git a/files/it/web/api/htmlformelement/submit/index.html b/files/it/web/api/htmlformelement/submit/index.html new file mode 100644 index 0000000000..b762349b6c --- /dev/null +++ b/files/it/web/api/htmlformelement/submit/index.html @@ -0,0 +1,30 @@ +--- +title: HTMLFormElement.submit() +slug: Web/API/HTMLFormElement/submit +translation_of: Web/API/HTMLFormElement/submit +--- +
{{APIRef("HTML DOM")}}
+ +

submit invia il form.

+ +

Sintassi

+ +
HTMLForm.submit()
+
+ +

Esempio

+ +
document.forms["mioForm"].submit()
+
+ +

Note

+ +

Questo metodo simula ciò che accadrebbe se l'utente cliccasse sul bottone "invia".

+ +

Se il controllo di un form (come il bottone di invio) ha come nome o un id submit, questo coprirà il metodo submit.

+ +

Specifiche

+ +

DOM Level 2 HTML: submit

+ +

{{ languages( { "ja": "ja/DOM/form.submit" } ) }}

diff --git a/files/it/web/api/htmlformelement/target/index.html b/files/it/web/api/htmlformelement/target/index.html new file mode 100644 index 0000000000..c94b8a78f9 --- /dev/null +++ b/files/it/web/api/htmlformelement/target/index.html @@ -0,0 +1,24 @@ +--- +title: HTMLFormElement.target +slug: Web/API/HTMLFormElement/target +translation_of: Web/API/HTMLFormElement/target +--- +
{{APIRef("HTML DOM")}}
+ +

target legge o imposta il contenuto dell'attributo target (per esempio, il frame dove verrà visualizzato l'output del form).

+ +

Sintassi

+ +
stringa = form.target
+form.target =
+stringa
+
+ +

Esempio

+ +
myForm.target = document.frames[1].name;
+
+ +

Specifiche

+ +

DOM Level 2 HTML: target

diff --git a/files/it/web/api/htmliframeelement/index.html b/files/it/web/api/htmliframeelement/index.html new file mode 100644 index 0000000000..4138970a78 --- /dev/null +++ b/files/it/web/api/htmliframeelement/index.html @@ -0,0 +1,455 @@ +--- +title: HTMLIFrameElement +slug: Web/API/HTMLIFrameElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLIFrameElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLIFrameElement interface provides special properties and methods (beyond those of the {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that specifies the alignment of the frame with respect to the surrounding context.
+
{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}
+
Is a {{domxref("Boolean")}} indicating whether the inline frame is willing to be placed into full screen mode. See Using full-screen mode for details.
+
{{domxref("HTMLIFrameElement.allowPaymentRequest")}}
+
Is a {{domxref("Boolean")}} indicating whether the Payment Request API may be invoked inside a cross-origin iframe.
+
{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}
+
Returns a {{domxref("Document")}}, the active document in the inline frame's nested browsing context.
+
{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}
+
Returns a {{domxref("WindowProxy")}}, the window proxy for the nested browsing context.
+
{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that indicates whether to create borders between frames.
+
{{domxref("HTMLIFrameElement.height")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "iframe")}} HTML attribute, indicating the height of the frame.
+
{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that contains the URI of a long description of the frame.
+
{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} being the height of the frame margin.
+
{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} being the width of the frame margin.
+
{{domxref("HTMLIFrameElement.name")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("name", "iframe")}} HTML attribute, containing a name by which to refer to the frame.
+
{{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerPolicy", "iframe")}} HTML attribute indicating which referrer to use when fetching the linked resource.
+
{{domxref("HTMLIFrameElement.sandbox")}}
+
Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sandbox", "iframe")}} HTML attribute, indicating extra restrictions on the behavior of the nested content.
+
{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that indicates whether the browser should provide scrollbars for the frame.
+
{{domxref("HTMLIFrameElement.src")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.
+
{{domxref("HTMLIFrameElement.srcdoc")}}
+
Is a {{domxref("DOMString")}} that represents the content to display in the frame.
+
{{domxref("HTMLIFrameElement.width")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.
+
+ +

Methods

+ +

Inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +

Browser API methods

+ +

To support the requirement of a browser {{HTMLElement("iframe")}}, HTMLIFrameElement has been extended with new methods that give the {{HTMLElement("iframe")}} some super powers. These are non-standard (see {{anch("Browser compatibility")}}.)

+ + + +

The following navigation methods allow navigation through the browsing history of the {{HTMLElement("iframe")}}. They are necessary to be able to implement back, forward, stop, and reload buttons.

+ +
+
{{domxref("HTMLIFrameElement.reload()")}}
+
Allows reloading of the {{HTMLElement("iframe")}} element content.
+
{{domxref("HTMLIFrameElement.stop()")}}
+
Allows stopping of the {{HTMLElement("iframe")}}'s content loading.
+
{{domxref("HTMLIFrameElement.getCanGoBack()")}}
+
Indicates whether it's possible to navigate backwards.
+
{{domxref("HTMLIFrameElement.goBack()")}}
+
Changes the location of the {{HTMLElement("iframe")}} for the previous location in its browsing history.
+
{{domxref("HTMLIFrameElement.getCanGoForward()")}}
+
Indicates whether it's possible to navigate forward.
+
{{domxref("HTMLIFrameElement.goForward()")}}
+
Changes the location of the {{HTMLElement("iframe")}} for the next location in its browsing history.
+
+ +

Management methods

+ +

The next set of methods manage the resources used by a browser {{HTMLElement("iframe")}}. These are especially useful for implementing tabbed browser application.

+ +
+
{{domxref("HTMLIFrameElement.executeScript()")}}
+
Allows a specified script to be executed against a page loaded in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.purgeHistory()")}}
+
Clears all the resources (cookies, localStorage, cache, etc.) associated with the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.setVisible()")}}
+
Changes the visibility state of a browser {{HTMLElement("iframe")}}. This can influence resource allocation and some function usage such as {{domxref("window.requestAnimationFrame","requestAnimationFrame")}}.
+
{{domxref("HTMLIFrameElement.getVisible()")}}
+
Indicates the current visibility state of the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.setActive()")}}
+
Sets the current {{HTMLElement("iframe")}} as the active frame, which has an effect on how it is prioritized by the process manager.
+
{{domxref("HTMLIFrameElement.getActive()")}}
+
Indicates whether the current browser {{htmlelement("iframe")}} is the currently active frame.
+
+ + + +

The following methods allow direct control of sound in the browser element.

+ +
+
{{domxref("HTMLIFrameElement.getVolume()")}}
+
Gets the current volume of the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.setVolume()")}}
+
Sets the current volume of the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.mute()")}}
+
Mutes any audio playing in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.unmute()")}}
+
Unmutes any audio playing in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.getMuted()")}}
+
Indicates whether the browser {{HTMLElement("iframe")}} is currently muted.
+
+ +

Search methods

+ +

New methods are provided to allow programmatic searches of browser {{HTMLElement("iframe")}}s to be carried out.

+ +
+
{{domxref("HTMLIFrameElement.findAll()")}}
+
Searches for a string in a browser {{HTMLElement("iframe")}}'s content; if found, the first instance of the string relative to the caret position will be highlighted.
+
{{domxref("HTMLIFrameElement.findNext()")}}
+
Highlights the next or previous instance of a search result after a {{domxref("HTMLIFrameElement.findAll","findAll()")}} search has been carried out.
+
{{domxref("HTMLIFrameElement.clearMatch()")}}
+
Clears any content highlighted by {{domxref("HTMLIFrameElement.findAll","findAll()")}} or {{domxref("HTMLIFrameElement.findNext","findNext()")}}.
+
+ + + +

In order to manage the browser {{HTMLElement("iframe")}}'s content, many new events were added (see below). The following methods are used to deal with those events:

+ +
+
The {{HTMLElement("iframe")}} gains support for the methods of the {{domxref("EventTarget")}} interface
+
{{domxref("EventTarget.addEventListener","addEventListener()")}}, {{domxref("EventTarget.removeEventListener","removeEventListener()")}}, and {{domxref("EventTarget.dispatchEvent","dispatchEvent()")}}.
+
{{domxref("HTMLIFrameElement.sendMouseEvent()")}}
+
Sends a {{domxref("MouseEvent")}} to the {{HTMLElement("iframe")}}'s content.
+
{{domxref("HTMLIFrameElement.sendTouchEvent()")}}
+
Sends a {{domxref("TouchEvent")}} to the {{HTMLElement("iframe")}}'s content. Note that this method is available for touch enabled devices only.
+
{{domxref("HTMLIFrameElement.addNextPaintListener()")}}
+
Defines a handler to listen for the next {{event("MozAfterPaint")}} event in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.removeNextPaintListener()")}}
+
Removes a handler previously set with {{domxref("HTMLIFrameElement.addNextPaintListener","addNextPaintListener()")}}.
+
+ +

Utility methods

+ +

Last, there are some utility methods, useful for apps that host a browser {{HTMLElement("iframe")}}.

+ +
+
{{domxref("HTMLIFrameElement.download()")}}
+
Downloads a specified URL, storing it at the specified filename/path.
+
{{domxref("HTMLIFrameElement.getContentDimensions()")}}
+
Retrieves the X and Y dimensions of the content window.
+
{{domxref("HTMLIFrameElement.getManifest()")}}
+
Retrieves the manifest of an app loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.
+
{{domxref("HTMLIFrameElement.getScreenshot()")}}
+
Takes a screenshot of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful to get thumbnails of tabs in a tabbed browser app.
+
{{domxref("HTMLIFrameElement.getStructuredData()")}}
+
Retrieves any structured microdata (and hCard and hCalendar microformat data) contained in the HTML loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.
+
{{domxref("HTMLIFrameElement.zoom()")}}
+
Changes the zoom factor of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful for zooming in/out on non-touch-enabled devices.
+
+ +
+
+ + + + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Payment','#paymentrequest-and-iframe-elements','allowPaymentRequest')}}{{Spec2('Payment')}}Adds allowPaymentRequest property.
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrerPolicy property.
{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML WHATWG')}}The following property has been added: allowFullscreen.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML5 W3C')}}The following properties are now obsolete: scrolling, marginWidth, marginHeight, longDesc, frameBorder, and align.
+ The following properties have been added: srcdoc, sandbox, and contentWindow.
{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM2 HTML')}}The contentDocument property has been added.
{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcdoc{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
sandbox{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(17)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contentDocument{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}8.0[3]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contentWindow{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
allowFullScreen {{experimental_inline}}{{CompatChrome(17)}} {{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{CompatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}
+ {{CompatGeckoDesktop(18.0)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
referrerPolicy {{experimental_inline}}{{CompatChrome(51)}}{{CompatNo}}{{compatGeckoDesktop(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Browser API methods{{CompatNo}}{{CompatNo}}{{CompatNo}}[5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
allowPaymentRequest{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcdoc{{CompatChrome(4)}}{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoMobile(25)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
sandbox{{CompatChrome(4)}}{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoMobile(17)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
seamless {{experimental_inline}}{{CompatChrome(4)}}{{CompatChrome(4)}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contentDocument{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contentWindow{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
allowFullScreen {{experimental_inline}}{{CompatChrome(17)}} {{property_prefix("-webkit")}}[4]{{CompatChrome(17)}} {{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{CompatGeckoMobile(9.0)}} {{property_prefix("-moz")}}
+ {{CompatGeckoMobile(18.0)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
referrerPolicy {{experimental_inline}}{{CompatChrome(51)}}{{CompatChrome(51)}}{{CompatNo}}{{compatGeckoMobile(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Browser API methods{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
allowPaymentRequest{{CompatNo}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ + + +

See also

+ + diff --git a/files/it/web/api/htmliframeelement/mute/index.html b/files/it/web/api/htmliframeelement/mute/index.html new file mode 100644 index 0000000000..ca7e44107e --- /dev/null +++ b/files/it/web/api/htmliframeelement/mute/index.html @@ -0,0 +1,93 @@ +--- +title: HTMLIFrameElement.mute() +slug: Web/API/HTMLIFrameElement/mute +translation_of: Mozilla/Gecko/Chrome/API/Browser_API/mute +--- +

{{APIRef("HTML DOM")}}{{non-standard_header}}

+ +

Il metodo mute() del {{domxref("HTMLIFrameElement")}} muta qualsiasi audio in riproduzione nel browser {{HTMLElement("iframe")}}.

+ +

Sintassi

+ +
instanceOfHTMLIframeElement.mute();
+ +

Ritorna

+ +

Nulla.

+ +

Parametri

+ +

Nessuno.

+ +

Esempio

+ +
var browser = document.querySelector('iframe');
+
+browser.mute();
+
+ +

Specifica

+ +

Non è parte di nessuna specifica.

+ +

Compatibilità browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Supporto base{{CompatNo}}{{CompatGeckoDesktop(47)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Supporto base{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Supportato solo in codice chrome.

+ +

Vedi anche

+ + diff --git a/files/it/web/api/htmlunknownelement/index.html b/files/it/web/api/htmlunknownelement/index.html new file mode 100644 index 0000000000..079de3d82d --- /dev/null +++ b/files/it/web/api/htmlunknownelement/index.html @@ -0,0 +1,58 @@ +--- +title: HTMLUnknownElement +slug: Web/API/HTMLUnknownElement +tags: + - API + - HTML DOM + - Interfaccia + - Referenza +translation_of: Web/API/HTMLUnknownElement +--- +

{{APIRef("HTML DOM")}}

+ +

L'interfaccia HTMLUnknownElement rappresenta un elemento HTML non valido e deriva dall'interfaccia {{DOMxRef("HTMLElement")}}, ma senza implementare ulteriori proprietà o metodi.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Proprietà

+ +

Nessuna proprietà specifica; eredita proprietà dal suo genitore, {{DOMxRef("HTMLElement")}}.

+ +

Metodi

+ +

Nessuna proprietà specifica; eredita proprietà dal suo genitore, {{DOMxRef("HTMLElement")}}.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML WHATWG")}}Nessun cambiamento da {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML5 W3C")}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.HTMLUnknownElement")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/index.html b/files/it/web/api/index.html new file mode 100644 index 0000000000..e5b4b1b744 --- /dev/null +++ b/files/it/web/api/index.html @@ -0,0 +1,17 @@ +--- +title: Riferimento Web API +slug: Web/API +tags: + - API + - Landing + - Riferimento + - Web +translation_of: Web/API +--- +

Le APIs sono dispositivi pronti per coloro che scrivono codice per il Web in JavaScript. Di seguito è riportato un elenco di tutte le interfacce (ovvero tipi di oggetti) che potresti essere in grado di utilizzare durante lo sviluppo della tua app o sito Web. API è l'acronimo di Application Programming Interface, nonché di Application Program Interface. Come parzialmente intuibile dai termini che compongono l'acronimo, le API rappresentano un'interfaccia di programmazione.

+ +
+
{{APIListAlpha}}
+
+ +

 

diff --git a/files/it/web/api/indexeddb_api/index.html b/files/it/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..8512b030bd --- /dev/null +++ b/files/it/web/api/indexeddb_api/index.html @@ -0,0 +1,243 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +translation_of: Web/API/IndexedDB_API +--- +
+

IndexedDB è una API per la memorizzazione client-side di una considerevole quantità di dati strutturati (inclusi file e blob) e per una ricerca performante su questi dati mediante gli indici. Se Web Storage è utile per memorizzare piccole quantità di dati, non lo è invece per memorizzare grandi quantità di dati strutturati. IndexedDB fornisce la soluzione. Questa è la pagina principale su IndexedDB di MDN — qui vengono forniti link a tutti i riferimenti API e guide all'uso, dettagli di supporto al browser ed alcune spiegazioni dei concetti chiave.

+
+ +

Concetti chiave ed uso

+ +

IndexedDB è un sistema di database transazionale, che inizialmente potrebbe creare confusione se si è abituati a lavorare solo con i database relazionali, ma presto diverrà abbastanza chiaro. IndexedDB permette di memorizzare e recuperare oggetti indicizzati con una chiave. E' necessario specificare lo schema del database, aprire una connessione al proprio database e poi recuperare ed aggiornare i dati attraverso una serie di transazioni.

+ + + +
+

Nota: Come molte soluzioni web storage, IndexedDB segue una same-origin policy. Quindi mentre si può accedere ai dati memorizzati sotto un dominio, non è possibile accedere ai dati attraverso domini differenti.

+
+ +

Sincrono e asincrono

+ +

IndexedDB include sia una API asincrona che una API sincrona. La API asincrona può essere usata in molti casi, incluso WebWorkers, mentre la API sincrona è designata ad essere utilizzata solo con Web Workers e sarà usata molto raramente.

+ +
+

Nota: Attualmente, nessuno dei principali browser supporta la API sincrona.

+
+ +

Limiti di memorizzazione

+ +

Non c'è alcun limite alla dimensione di un singolo elemento del database, tuttavia ci potrebbe essere un limite ad ogni dimensione complessiva del database IndexedDB. Questo limite (ed il modo con cui l'interfaccia utente lo supporterà) potrebbe variare da un browser ad un altro:

+ + + +

Asynchronous API

+ +

The asynchronous API methods return without blocking the calling thread. To get asynchronous access to a database, call open() on the indexedDB attribute of a window object. This method returns an {{domxref("IDBRequest")}} object; asynchronous operations communicate to the calling application by firing events on {{domxref("IDBRequest")}} objects.

+ +

Connecting to a database

+ +
+
{{domxref("IDBEnvironment")}}
+
Provides access to a client-side database. It is implemented by the {{ domxref("window") }} and {{ domxref("worker") }} objects.
+
{{domxref("IDBFactory")}}
+
Provides access to a database. This is the interface implemented by the global object indexedDB and is therefore the entry point for the API.
+
{{domxref("IDBOpenDBRequest")}}
+
Represents a request to open a database.
+
{{domxref("IDBDatabase")}}
+
Represents a connection to a database. It's the only way to get a transaction on the database.
+
+ +

Accessing results of database requests

+ +
+
{{domxref("IDBRequest")}}
+
Provides access to results of asynchronous requests to databases and database objects. It is what you get when you call an asynchronous method.
+
+ +

Retrieving and modifying data

+ +
+
{{domxref("IDBTransaction")}}
+
Represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or write) that you want.
+
{{domxref("IDBObjectStore")}}
+
Represents an object store.
+
{{domxref("IDBIndex")}}
+
Provides access to the metadata of an index.
+
{{domxref("IDBCursor")}}
+
Iterates over object stores and indexes.
+
{{domxref("IDBCursorWithValue")}}
+
Iterates over object stores and indexes and returns the cursor's current value.
+
{{domxref("IDBKeyRange")}}
+
Defines a range of keys.
+
+ +

Deprecated interfaces

+ +

An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:

+ +
+
{{domxref("IDBVersionChangeRequest")}}
+
Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling {{domxref("IDBFactory.open")}} without also calling {{domxref("IDBDatabase.setVersion")}}), and the interface {{domxref("IDBOpenDBRequest")}} now has the functionality of the removed {{domxref("IDBVersionChangeRequest")}}.
+
{{domxref("IDBDatabaseException")}}  {{ obsolete_inline() }}
+
Represents exception conditions that can be encountered while performing database operations.
+
+ +

Synchronous API

+ +
+

Important: This is a reminder that the synchronous version of IndexedDB is not yet implemented in any browser.

+
+ +

To get synchronous access to a database, call open() on the Unimplemented indexedDBSync attribute of a worker object. This returns an IDBDatabaseSync object, which enables you to create, open, and remove object stores and indexes, set the version of the database, and create transactions.

+ + + +

Examples

+ + + +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Asynchronous API +

11.0 {{ property_prefix("webkit") }}
+ 24

+ 		{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1017{{ CompatNo() }}
Synchronous API
+ (used with WebWorkers)		{{ CompatNo() }}{{ CompatNo() }}
+ See {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Asynchronous API4.4{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1017{{ CompatNo() }}
+
+ +
+

Note: Some browsers don't yet support IndexedDB but do support WebSQL, most notably Safari/Webkit on desktop and iOS. One way around this problem is to use an IndexedDB Polyfill or Shim that falls back to WebSQL or even localStorage for non-supporting browsers. The best available polyfill at present is localForage.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}{{Spec2('IndexedDB')}} 
+ + diff --git a/files/it/web/api/mutationobserver/index.html b/files/it/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..6c15916a56 --- /dev/null +++ b/files/it/web/api/mutationobserver/index.html @@ -0,0 +1,102 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - Cambiamenti del DOM + - DOM + - DOM Reference + - Mutation Observer + - Mutation Observer e resize + - resize + - resize listener +translation_of: Web/API/MutationObserver +--- +
{{APIRef("DOM WHATWG")}}
+ +

L'interfaccia {{domxref("MutationObserver")}} offre la possibilità di monitorare le mutazioni subite dall'alberatura del DOM. È stata progettata per sostituire i Mutation Events che fanno parte del DOM3 Events specification.

+ +

Costruttore

+ +
+
{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}
+
Crea e restituisce un nuovo MutationObserver che invocherà una funzione di callback specificata alla mutazione del DOM.
+
+ +

Metodi

+ +
+
{{domxref("MutationObserver.disconnect", "disconnect()")}}
+
Interrompe la ricezione da parte dell'istanza MutationObserver di notifiche sulla mutazione del DOM fino a quando verrà nuovamente invocato {{domxref("MutationObserver.observe", "observe()")}}
+
{{domxref("MutationObserver.observe", "observe()")}}
+
Configura il MutationObserver affinché possa ricevere notifiche attraverso la funzione di callback specificata quando avviene una mutazione del DOM che corrisponda alle opzioni impostate.
+
{{domxref("MutationObserver.takeRecords", "takeRecords()")}}
+
Rimuove tutte le notifiche in coda sul MutationObserver e le restituisce come nuovo  {{jsxref("Array")}} di oggetti {{domxref("MutationRecord")}}
+
+ +

Mutation Observer & customizzazione del resize event & demo

+ +

https://codepen.io/webgeeker/full/YjrZgg/

+ +

Esempio

+ +

L'esempio seguente è un adattamento di questo post

+ +
// Seleziona il nodo di cui monitare la mutazione
+var targetNode = document.getElementById('some-id');
+
+// Opzioni per il monitoraggio (quali mutazioni monitorare)
+var config = { attributes: true, childList: true, subtree: true };
+
+// Funzione di callback da eseguire quando avvengono le mutazioni
+var callback = function(mutationsList, observer) {
+    for(var mutation of mutationsList) {
+        if (mutation.type == 'childList') {
+            console.log('A child node has been added or removed.');
+        }
+        else if (mutation.type == 'attributes') {
+            console.log('The ' + mutation.attributeName + ' attribute was modified.');
+        }
+    }
+};
+
+// Creazione di un'istanza di monitoraggio collegata alla funzione di callback
+var observer = new MutationObserver(callback);
+
+// Inizio del monitoraggio del nodo target riguardo le mutazioni configurate
+observer.observe(targetNode, config);
+
+// Successivamente si può interrompere il monitoraggio
+observer.disconnect();
+ +

Leggi pure

+ + + +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilità dei Browser

+ + + +

{{Compat("api.MutationObserver")}}

diff --git a/files/it/web/api/navigator/cookieenabled/index.html b/files/it/web/api/navigator/cookieenabled/index.html new file mode 100644 index 0000000000..4905b8deb8 --- /dev/null +++ b/files/it/web/api/navigator/cookieenabled/index.html @@ -0,0 +1,83 @@ +--- +title: Navigator.cookieEnabled +slug: Web/API/Navigator/cookieEnabled +translation_of: Web/API/Navigator/cookieEnabled +--- +

{{ ApiRef("HTML DOM") }}

+ +

Riassunto

+ +

Restituisce un valore booleano che indica se i cookie abilitati o meno (sola lettura).

+ +

Sintassi

+ +
var cookieEnabled = navigator.cookieEnabled;
+
+ + + +

Example

+ +
if (!navigator.cookieEnabled) {
+  // dire all'utente che l'attivazione dei cookie rende le pagine web più utile}
+
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic supportYes{{ CompatGeckoDesktop(1.0) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile(1.0) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Note di Gecko

+ +

Prima di Gecko 8.0 {{ geckoRelease("8.0") }}, window.navigator.cookieEnabled potrebbe segnalare il risultato errato se un'eccezione del sito è stata in vigore per la pagina in cui è stato eseguito il controllo. Questo è stato risolto.

+ +

Specifications

+ +

HTML WHATWG

diff --git a/files/it/web/api/navigator/credentials/index.html b/files/it/web/api/navigator/credentials/index.html new file mode 100644 index 0000000000..107fe4a123 --- /dev/null +++ b/files/it/web/api/navigator/credentials/index.html @@ -0,0 +1,57 @@ +--- +title: credentials +slug: Web/API/Navigator/credentials +tags: + - API + - CredentialContainer + - Proprietà + - Riferimento + - credentials +translation_of: Web/API/Navigator/credentials +--- +

{{SeeCompatTable}}{{APIRef("")}}

+ +

La proprietà credentials dell'interfaccia {{domxref("Navigator")}} restituisce un interfaccia {{domxref("CredentialsContainer")}}, la quale espone metodi utili per fare request-credentials. L'interfaccia {{domxref("CredentialsContainer")}} inoltre notifica louser agent quando un avviene un evento di interesse, come, ad esempio, un sign-in o un sign-out avvenuto con successo. Questa interfaccia può essere utilizzata per scoprire la presenza della funzionalità.

+ +

Sintassi

+ +
var credentialsContainer = navigator.credentials
+ +

Value

+ +

Un'interfaccia {{domxref("CredentialsContainer")}}.

+ +

Esempio

+ +
if ('credentials' in navigator) {
+  navigator.credentials.get({password: true})
+  .then(function(creds) {
+    // Usa le credenziali.
+  });
+} else {
+  // Gestisci il sign-in alternativo, senza credentials.
+};
+
+ +

Specifica

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Definizione iniziale.
+ +

Browser compatibili

+ + + +

{{Compat("api.Navigator.credentials")}}

diff --git a/files/it/web/api/navigator/index.html b/files/it/web/api/navigator/index.html new file mode 100644 index 0000000000..6ef2055b7a --- /dev/null +++ b/files/it/web/api/navigator/index.html @@ -0,0 +1,119 @@ +--- +title: Navigator +slug: Web/API/Navigator +translation_of: Web/API/Navigator +--- +

{{ apiref() }}

+ +

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

+ +

A Navigator object can be retrieved using the read-only {{domxref("Window.navigator")}} property.

+ +

Properties

+ +

Doesn't inherit any property, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorGeolocation")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NetworkInformation")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.
+
{{domxref("Navigator.battery")}} {{readonlyInline}}
+
Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.
+
{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}
+
Provides a {{domxref("Connection")}} with information about the network connection of a device.
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
{{domxref("Navigator.oscpu")}}
+
Returns a string that represents the current operating system.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}
+
Always returns 'Gecko', on any browser. This property is kept only for compatibility purpose.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Returns the user agent string for the current browser.
+
{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}
+
Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the associated document.
+
+ +

Non-standard

+ +
+
{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}
+
Returns the build identifier of the browser (e.g., "2006090803").
+
{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}
+
Returns a boolean indicating whether cookies are enabled in the browser or not.
+
{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}
+
Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.
+
{{domxref("navigator.id")}} {{non-standard_inline}}
+
Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for BrowserID to your web site.
+
{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}
+
Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control Open Web apps.
+
{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}
+
The navigator.mozAudioChannelManager object provides access to the {{domxref("mozAudioChannelManager")}} interface, which is used to manage your Firefox OS device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.
+
{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}
+ {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}
+
Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.
+
{{domxref("navigator.mozSocial")}} {{non-standard_inline}}
+
The Object, returned by the navigator.mozSocial property, is available within the social media provider's panel to provide functionality it may need.
+
{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}
+
Returns the build number of the current browser (e.g., "20060909").
+
{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}
+
Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".
+
{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}
+
Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.
+
{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}
+
Returns the vendor name of the current browser (e.g., "Netscape6").
+
{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}
+
Returns the vendor version number (e.g. "6.1").
+
navigator.webkitPointer {{non-standard_inline}}
+
Returns a PointerLock object for the Mouse Lock API.
+
+ +

Methods

+ +

Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NavigatorStorageUtils")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorUserMedia.getUserMedia()")}}
+
After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.
+
{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}
+
Allows web sites to register themselves as a possible handler for a given MIME type.
+
{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}
+
Allows web sites to register themselves as a possible handler for a given protocol.
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}
+
Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2.
+
{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}
+
Causes vibration on devices with support for it. Does nothing if vibration support isn't available.
+
+ +

Non standard

+ +
+
{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}
+
Lets code check to see if the document at a given URI is available without using the network.
+
{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}
+
Allows in-app payment.
+
{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}
+
Sets a user preference. This method is only available to privileged code and is obsolete; you should use the XPCOM Preferences API instead.
+
{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}
+
Request a wake lock for a resource. A wake lock prevents a specific part of a device from being turned off automatically.
+
diff --git a/files/it/web/api/navigatorconcurrenthardware/index.html b/files/it/web/api/navigatorconcurrenthardware/index.html new file mode 100644 index 0000000000..10fb1576ca --- /dev/null +++ b/files/it/web/api/navigatorconcurrenthardware/index.html @@ -0,0 +1,56 @@ +--- +title: NavigatorConcurrentHardware +slug: Web/API/NavigatorConcurrentHardware +translation_of: Web/API/NavigatorConcurrentHardware +--- +

 

+ +

Il NavigatorConcurrentHardware aggiunge all'interfaccia delle caratteristiche che permettono ai contenuti Web di determinare quanti processori logici sono a disposizione dell'utente, in modo tale da ottimizzare le operazioni di contenuti e Web apps che possano usufruire al meglio la CPU dell'utente.

+ +

Il numero dei processori logici del core serve a misurare il numero di threads che possono essere di fatto eseguiti per volta, senza che questi condividano la stesse CPU. Oggigiorno i computer hanno diversi core nella loro CPU(2 o 4 cores). Ogni core è in grado di eseguire più di un thread per volta, avvalendosi di tecniche avanzate di scheduling. Una CPU a 4 cores può restituire dunque 8 threads. Tuttavia, il browser può scegliere di ridurre questo numero in modo tale da rappresentare in maniera più accurata il numero di Worker eseguiti per volta.

+ +

Proprietà

+ +
+
NavigatorConcurrentHardware.hardwareConcurrency 
+
Restituisce il numero di processori logici disponibili allo user agent. Il valore sarà sempre almeno pari a 1 e restituirà 1 se non è possibile determinare il numero di processori logici. 
+
+ +

Metodi

+ +

Il mixin di NavigatorConcurrentHardware non ha metodi.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
HTML Living Standard
+ The definition of 'NavigatorConcurrentHardware' in that specification.		Living Standard +

Definizione Iniziale

+
+ +

Browser compatibility

+ + + +

{{Compat("api.NavigatorConcurrentHardware")}}

+ +

Vedi anche

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

Il metodo Node.appendChild() aggiunge un nodo alla fine dell'elenco di figli di un nodo genitore specificato. Se il figlio dato è un riferimento a un nodo esistente nel documento, appendChild() lo sposta dalla sua posizione corrente alla nuova posizione (non è necessario rimuovere il nodo dal suo nodo padre prima di aggiungerlo ad un altro nodo).

+ +

Ciò significa che un nodo non può essere in due punti del documento contemporaneamente. Quindi se il nodo ha già un genitore, il nodo viene prima rimosso, quindi aggiunto alla nuova posizione. Il metodo {{domxref("Node.cloneNode()")}} può essere usato per fare una copia del nodo prima di aggiungerlo sotto il nuovo genitore. Si noti che le copie eseguite con cloneNode non verranno automaticamente mantenute sincronizzate.

+ +

Se il figlio dato è un {{domxref("DocumentFragment")}}, l'intero contenuto di {{domxref("DocumentFragment")}} viene spostato nell'elenco secondario del nodo genitore specificato.

+ +

Sintassi

+ +
element.appendChild(aChild);
+ +

Parametri

+ +
+
aChild
+
Il nodo da aggiungere al nodo genitore dato (comunemente un elemento).
+
+ +

Valore di ritorno

+ +

Il valore restituito è il figlio aggiunto tranne quando il figlio dato è un {{domxref("DocumentFragment")}}, nel qual caso viene restituito il {{domxref("DocumentFragment")}}.

+ +

Appunti

+ +

Il concatenamento potrebbe non funzionare come previsto a causa di appendChild() che restituisce l'elemento figlio:

+ +
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+ +

Sets aBlock to <b></b> only, which is probably not what you want.

+ +

Esempio

+ +
// Crea un nuovo elemento di paragrafo e aggiungilo alla fine del corpo del documento
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento da {{SpecName("DOM3 Core")}}.
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}Definizione inziale.
+ +

Compatibilità con i browser

+ +
+ + +

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

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/node/index.html b/files/it/web/api/node/index.html new file mode 100644 index 0000000000..97fdc9ed89 --- /dev/null +++ b/files/it/web/api/node/index.html @@ -0,0 +1,368 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - DOM Reference + - Interface + - NeedsTranslation + - Node + - Reference + - TopicStub +translation_of: Web/API/Node +--- +
{{APIRef("DOM")}}
+ +

Node is an interface from which a number of DOM API object types inherit. It allows those types to be treated similarly; for example, inheriting the same set of methods, or being tested in the same way.

+ +

The following interfaces all inherit from Node’s methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Attr")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}

+ +

These interfaces may return null in certain cases where the methods and properties are not relevant. They may throw an exception — for example when adding children to a node type for which no children can exist.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

Inherits properties from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last '/'.
+
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}
+
(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.
+
{{domxref("Node.childNodes")}} {{readonlyInline}}
+
Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the Node change, the {{domxref("NodeList")}} object is automatically updated.
+
{{domxref("Node.firstChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the first direct child node of the node, or null if the node has no child.
+
{{domxref("Node.isConnected")}} {{readonlyInline}}
+
Returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.
+
{{domxref("Node.lastChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the last direct child node of the node, or null if the node has no child.
+
{{domxref("Node.nextSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the next node in the tree, or null if there isn't such node.
+
{{domxref("Node.nodeName")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the name of the Node. The structure of the name will differ with the node type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the '#text' string, or a {{domxref("Document")}} node will have the '#document' string.
+
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}
+
A {{ Interface("nsIPrincipal") }} representing the node principal.
+
{{domxref("Node.nodeType")}}{{readonlyInline}}
+
Returns an unsigned short representing the type of the node. Possible values are: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
+
+
{{domxref("Node.nodeValue")}}
+
Returns / Sets the value of the current node
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
Returns the {{domxref("Document")}} that this node belongs to. If the node is itself a document, returns null.
+
{{domxref("Node.parentNode")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.
+
{{domxref("Node.parentElement")}} {{readonlyInline}}
+
Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns null.
+
{{domxref("Node.previousSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the previous node in the tree, or null if there isn't such node.
+
{{domxref("Node.textContent")}}
+
Returns / Sets the textual content of an element and all its descendants.
+
+ +

Deprecated properties

+ +
+
{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}
+
Returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{domxref("Node.getRootNode()")}}.
+
+ +

Obsolete properties

+ +
+
{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. +
+

Note: In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{gecko_minversion_inline("1.9.2")}}

+
+
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
The namespace URI of this node, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml/ namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}

+
+
+
{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.appendChild()")}}
+
Adds the specified childNode argument as the last child to the current node.
+ If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
+
{{domxref("Node.cloneNode()")}}
+
Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
+
{{domxref("Node.compareDocumentPosition()")}}
+
Compares the position of the current node against another node in any other document.
+
{{domxref("Node.contains()")}}
+
Returns a {{jsxref("Boolean")}} value indicating whether a node is a descendant of a given node or not.
+
{{domxref("Node.getRootNode()")}}
+
Returns the context object's root which optionally includes the shadow root if it is available. 
+
{{domxref("Node.hasChildNodes()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.
+
{{domxref("Node.insertBefore()")}}
+
Inserts a {{domxref("Node")}} before the reference node as a child of a specified parent node.
+
{{domxref("Node.isDefaultNamespace()")}}
+
Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of true if the namespace is the default namespace on the given node or false if not.
+
{{domxref("Node.isEqualNode()")}}
+
Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.
+
{{domxref("Node.isSameNode()")}}
+
Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).
+
{{domxref("Node.lookupPrefix()")}}
+
Returns a {{domxref("DOMString")}} containing the prefix for a given namespace URI, if present, and null if not. When multiple prefixes are possible, the result is implementation-dependent.
+
{{domxref("Node.lookupNamespaceURI()")}}
+
Accepts a prefix and returns the namespace URI associated with it on the given node if found (and null if not). Supplying null for the prefix will return the default namespace.
+
{{domxref("Node.normalize()")}}
+
Clean up all the text nodes under this element (merge adjacent, remove empty).
+
{{domxref("Node.removeChild()")}}
+
Removes a child node from the current element, which must be a child of the current node.
+
{{domxref("Node.replaceChild()")}}
+
Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.
+
+ +

Obsolete methods

+ +
+
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
+
 
+
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
+
Allows a user to get some {{domxref("DOMUserData")}} from the node.
+
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.
+
+ +

Examples

+ +

Remove all children nested within a node

+ +
Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};
+ +

Sample usage

+ +
/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();
+ +

Recurse through child nodes

+ +

The following function calls a function recursively for each node contained by a root node (including the root itself):

+ +
function eachNode(rootNode, callback){
+	if(!callback){
+		var nodes = [];
+		eachNode(rootNode, function(node){
+			nodes.push(node);
+		});
+		return nodes;
+	}
+
+	if(false === callback(rootNode))
+		return false;
+
+	if(rootNode.hasChildNodes()){
+		var nodes = rootNode.childNodes;
+		for(var i = 0, l = nodes.length; i < l; ++i)
+			if(false === eachNode(nodes[i], callback))
+				return;
+	}
+}
+ +

Syntax

+ +
eachNode(rootNode, callback);
+ +

Description

+ +

Recursively calls a function for each descendant node of rootNode (including the root itself).

+ +

If callback is omitted, the function returns an {{jsxref("Array")}} instead, which contains rootNode and all nodes contained therein.

+ +

If callback is provided, and it returns {{jsxref("Boolean")}} false when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node that contains a certain string).

+ +

Parameters

+ +
+
rootNode
+
The Node object whose descendants will be recursed through.
+
callback
+
An optional callback function that receives a Node as its only argument. If omitted, eachNode returns an {{jsxref("Array")}} of every node contained within rootNode (including the root itself).
+
+ +

Sample usage

+ +

The following example prints the textContent properties of each <span> tag in a <div> element named "box":

+ +
<div id="box">
+	<span>Foo</span>
+	<span>Bar</span>
+	<span>Baz</span>
+</div>
+ +
var box = document.getElementById("box");
+eachNode(box, function(node){
+	if(null != node.textContent){
+		console.log(node.textContent);
+	}
+});
+ +

The following strings will be displayed in the user's console:

+ +
"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"
+ +
+

Note: Whitespace forms part of a {{domxref("Text")}} node, meaning indentation and newlines form separate Text between the Element nodes.

+
+ +

Realistic usage

+ +

The following demonstrates a real-world use of the eachNode function: searching for text on a web-page. We use a wrapper function named grep to do the searching:

+ +
function grep(parentNode, pattern){
+	var matches = [];
+	var endScan = false;
+
+	eachNode(parentNode, function(node){
+		if(endScan)
+			return false;
+
+		// Ignore anything which isn't a text node
+		if(node.nodeType !== Node.TEXT_NODE)
+			return;
+
+		if("string" === typeof pattern){
+			if(-1 !== node.textContent.indexOf(pattern))
+				matches.push(node);
+		}
+		else if(pattern.test(node.textContent)){
+			if(!pattern.global){
+				endScan = true;
+				matches = node;
+			}
+			else matches.push(node);
+		}
+	});
+
+	return matches;
+}
+ +

For example, to find {{domxref("Text")}} nodes that contain typos:

+ +
var typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"];
+var pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi");
+var mistakes = grep(document.body, pattern);
+console.log(mistakes);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
+ Removed the following methods: isSupported(), hasAttributes(), getFeature(), setUserData(), and getUserData().
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{domxref("Document")}}.
+ The normalize() method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.
+ Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
+ Added the following properties: baseURI and textContent.
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}The ownerDocument property was slightly modified so that {{domxref("DocumentFragment")}} also returns null.
+ Added the following properties: namespaceURI, prefix, and localName.
+ Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

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

La proprietà di sola lettura Node.lastChild restituisce l'ultimo figlio del nodo. Se il suo genitore è un elemento, allora il bambino è generalmente un nodo di elemento, un nodo di testo o un nodo di commento. Restituisce null se non ci sono elementi figli.

+ +

Sintassi

+ +
var childNode = node.lastChild;
+
+ +

Esempio

+ +
var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+
+ +

Specifiche

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

Compatibilità con i browser

+ + + +

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

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

La proprietà di sola lettura Node.nextSibling restituisce il nodo immediatamente successivo a quello specificato nei {{domxref("Node.childNodes","childNodes")}}, del loro genitore o restituisce null se il nodo specificato è l'ultimo figlio nell'elemento genitore.

+ +

Sintassi

+ +
nextNode = node.nextSibling
+
+ +

Appunti

+ +
+

I browser basati su Gecko inseriscono nodi di testo in un documento per rappresentare gli spazi bianchi nel codice sorgente. Pertanto, un nodo ottenuto, ad esempio, utilizzando Node.firstChild o Node.previousSibling può fare riferimento a un nodo di testo di spazi bianchi piuttosto che all'elemento effettivo che l'autore intendeva ottenere.

+ +

Vedi Whitespace in the DOM e W3C DOM 3 FAQ: Why are some Text nodes empty? per maggiori informazioni.

+
+ +

{{domxref("Element.nextElementSibling")}} può essere usato per ottenere l'elemento successivo saltando eventuali nodi di spazi vuoti, altro testo tra elementi o commenti.

+ +

Esempio

+ +
<div id="div-1">Here is div-1</div>
+<div id="div-2">Here is div-2</div>
+
+<script>
+var el = document.getElementById('div-1').nextSibling,
+    i = 1;
+
+console.group('Siblings of div-1:');
+
+while (el) {
+  console.log(i, '. ', el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+console.groupEnd();
+</script>
+
+/**************************************************
+  The console displays the following:
+
+     Siblings of div-1
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+
+ +

Nell'esempio precedente, i nodi, #text sono inseriti nel DOM in cui si verifica lo spazio bianco tra i tag (ad esempio dopo il tag di chiusura di un elemento e prima del tag di apertura del successivo).

+ +

La possibile inclusione di nodi di testo deve essere consentita quando si attraversa il DOM utilizzando nextSibling. Vedi le risorse nella sezione Appunti.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-nextsibling', 'Node.nextSibling')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-6AC54C2F', 'Node.nextSibling')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#attribute-nextSibling', 'Node.nextSibling')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

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

+ +

Vedi anche

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

La proprietà di sola lettura Node.previousSibling restituisce il nodo immediatamente precedente a quello specificato nell'elenco {{domxref("Node.childNodes", "childNodes")}} del genitore, o null se il nodo specificato è il primo in tale elenco.

+ +

Sintassi

+ +
previousNode = node.previousSibling;
+
+ +

Esempio

+ +
<img id="b0">
+<img id="b1">
+<img id="b2">
+ +
console.log(document.getElementById("b1").previousSibling); // <img id="b0">
+console.log(document.getElementById("b2").previousSibling.id); // "b1"
+
+ +

Appunti

+ +
+

I browser basati su Gecko inseriscono nodi di testo in un documento per rappresentare gli spazi bianchi nel codice sorgente. Pertanto, un nodo ottenuto, ad esempio, utilizzando Node.firstChild o Node.previousSibling può fare riferimento a un nodo di testo di spazi bianchi piuttosto che all'elemento effettivo che l'autore intendeva ottenere.

+ +

Vedi Whitespace in the DOM e W3C DOM 3 FAQ: Why are some Text nodes empty? per maggiori informazioni.

+
+ +

Per navigare nella direzione opposta attraverso l'elenco dei nodi secondari usa Node.nextSibling.

+ +

Specifiche

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

Compatibilità con i browser

+ + + +

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

+ +

Vedi anche

+ + diff --git a/files/it/web/api/nodelist/foreach/index.html b/files/it/web/api/nodelist/foreach/index.html new file mode 100644 index 0000000000..5d8f5d0088 --- /dev/null +++ b/files/it/web/api/nodelist/foreach/index.html @@ -0,0 +1,125 @@ +--- +title: NodeList.prototype.forEach() +slug: Web/API/NodeList/forEach +tags: + - DOM + - Iterabile + - NodeList + - Referenza + - Web + - metodo +translation_of: Web/API/NodeList/forEach +--- +

{{APIRef("DOM")}}

+ +

Il metodo forEach() dell'interfaccia {{domxref("NodeList")}} chiama il callback fornito nel parametro una volta per ogni coppia di valori nell'elenco, in ordine di inserimento.

+ +

Sintassi

+ +
NodeList.forEach(callback[, thisArg]);
+
+ +

Parametri

+ +
+
callback
+
Funzione da eseguire per ciascun elemento, eventualmente con 3 argomenti: +
+
currentValue
+
L'elemento corrente in elaborazione nella NodeList.
+
currentIndex
+
L'indice dell'elemento corrente in fase di elaborazione nella NodeList.
+
listObj
+
La NodeList a cui viene applicato forEach().
+
+
+
thisArg {{Optional_inline}}
+
Valore da utilizzare come {{jsxref("this")}} quando viene eseguito callback.
+
+ +

Valore di ritorno

+ +

{{jsxref('undefined')}}.

+ +

Eccezioni

+ +

Nessuna.

+ +

Esempio

+ +
var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'myThisArg'
+);
+ +

ritorna:

+ +
[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg
+ +

Polyfill

+ +

Questo {{Glossary("Polyfill","polyfill")}} aggiunge compatibilità a tutti i browser che supportano ES5:

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (var i = 0; i < this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}
+ +

OPPURE

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}
+ +

Il comportamento sopra riportato indica il numero di browser che implementa effettivamente NodeList.prototype.forEach (Chrome, ad esempio).

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("WebIDL", "#es-forEach", "forEach")}}{{Spec2("WebIDL")}}Definisce forEach sulle dichiarazioni iterable
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.NodeList.forEach")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/nodelist/index.html b/files/it/web/api/nodelist/index.html new file mode 100644 index 0000000000..4b18f62d63 --- /dev/null +++ b/files/it/web/api/nodelist/index.html @@ -0,0 +1,124 @@ +--- +title: NodeList +slug: Web/API/NodeList +tags: + - API + - DOM + - Interfaccia + - NodeList +translation_of: Web/API/NodeList +--- +
{{APIRef("DOM")}}
+ +

Gli oggetti NodeList sono un insieme di nodi, di solito restituiti da proprietà come {{domxref("Node.childNodes")}} ed il metodo {{domxref("document.querySelectorAll()")}}.

+ +
+

Nonostante NodeList non sia un Array, è possibile iterare su esso usando forEach(). Può anche essere convertito in un vero Array usando Array.from().

+ +

Tuttavia, alcuni browser meno recenti non hanno implementato NodeList.forEach() né Array.from(). Questo può essere aggirato usando {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} — vedi l'esempio di questo documento.

+
+ +

In alcuni casi, la NodeList è dinamica, ciò significa che i cambiamenti nel DOM si riflettono sulla collezione. Per esempio, {{domxref("Node.childNodes")}} è dinamico:

+ +
var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // assume "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // dovrebbe produrre "3"
+
+ +

In altri casi, la NodeList è statica, ciò vuol dire che il contenuto della collezione non è influenzato da quelli nel DOM. {{domxref("document.querySelectorAll()")}} restituisce una NodeList statica.

+ +

È bene tenere in mente questa distinzione quando si sceglie di iterare sugli elementi nella NodeList, ed in particolare al modo in cui si salva la lunghezza della lista.

+ +

Proprietà

+ +
+
{{domxref("NodeList.length")}}
+
Il numero dei nodi nella NodeList.
+
+ +

Metodi

+ +
+
{{domxref("NodeList.item()")}}
+
Restituisce un elemento nell'elenco per il suo indice, o null se l'indice è fuori misura.
+
Un'alternativa all'accesso a nodeList[i] (che invece restituisce undefined quando i è fuori dai limiti). Ciò è utile soprattutto per le implementazioni DOM di linguaggi non JavaScript.
+
{{domxref("NodeList.entries()")}}
+
Ritorna un {{jsxref("Iteration_protocols","iterator")}} che permette al codice di passare attraverso tutte le coppie chiave/valore contenute nella collezione. (In questo caso, le chiavi sono numeri che iniziano da 0 e i valori sono nodi.)
+
{{domxref("NodeList.forEach()")}}
+
Esegue una funzione fornita una volta per elemento NodeList passando l'elemento come argomento alla funzione.
+
{{domxref("NodeList.keys()")}}
+
Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutte le chiavi delle coppie chiave/valore contenute nella collezione. (In questo caso, i tasti sono numeri che iniziano da 0).
+
{{domxref("NodeList.values()")}}
+
Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutti i valori (nodi) delle coppie chiave/valore contenute nella collezione.
+
+ +

Esempio

+ +

È possibile iterare sugli elementi in una NodeList usando un for loop:

+ +
for (var i = 0; i < myNodeList.length; i++) {
+  var item = myNodeList[i];  // La chiamata myNodeList.item(i) non è necessaria in JavaScript
+}
+
+ +

Non utilizzare for...in o for each...in per enumerare gli elementi nelle NodeList, poiché enumereranno anche le proprietà length e item e causeranno errori se il tuo script presume che debba occuparsi solo di oggetti {{domxref("element")}}. Inoltre, for..in non garantisce la visita delle proprietà in un particolare ordine.

+ +

for...of itererà sugli oggetti NodeList correttamente:

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}
+ +

I browser recenti supportano anche metodi iteratori, {{domxref("NodeList.forEach()", "forEach()")}}, come {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, e {{domxref("NodeList.keys()", "keys()")}}.

+ +

Esiste anche un modo compatibile con Internet Explorer {{jsxref("Array.forEach()", "Array.prototype.forEach")}} per l'iterazione.

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+  item.checked = true;
+});
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM3 Core') }} 
{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM2 Core') }} 
{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM1') }} +

Definizione iniziale.

+
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.NodeList")}}

diff --git a/files/it/web/api/notifiche/dir/index.html b/files/it/web/api/notifiche/dir/index.html new file mode 100644 index 0000000000..c1e16410d6 --- /dev/null +++ b/files/it/web/api/notifiche/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/notifiche/index.html b/files/it/web/api/notifiche/index.html new file mode 100644 index 0000000000..ae8300aa01 --- /dev/null +++ b/files/it/web/api/notifiche/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/parentnode/children/index.html b/files/it/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..7bedb73eed --- /dev/null +++ b/files/it/web/api/parentnode/children/index.html @@ -0,0 +1,95 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +tags: + - API + - Child + - Child Nodes + - DOM + - HTMLCollection + - Node + - ParentNode + - Proprietà + - children +translation_of: Web/API/ParentNode/children +--- +
{{ APIRef("DOM") }}
+ +

La proprietà {{domxref("ParentNode")}} children è una proprietà di sola lettura che restituisce una {{domxref("HTMLCollection")}} dinamica che contiene tutti gli {{domxref("Element","elements")}} figli del nodo su cui è stato chiamato.

+ +

Sintassi

+ +
var children = node.children;
+ +

Valore

+ +

Una {{ domxref("HTMLCollection") }} che è dimanica, raccolta ordinata degli elementi DOM che sono figli di node. È possibile accedere ai singoli nodi figlio nella raccolta utilizzando il metodo {{domxref("HTMLCollection.item", "item()")}} nella collezione o utilizzando la notazione in stile array JavaScript.

+ +

Se il nodo non ha elementi figli, children è una lista vuota con una length di 0.

+ +

Esempio

+ +
var foo = document.getElementById('foo');
+for (var i = 0; i < foo.children.length; i++) {
+    console.log(foo.children[i].tagName);
+}
+
+ +

Polyfill

+ +
// Sovrascrive il prototipo nativo di "children".
+// Aggiunge il supporto Document e DocumentFragment per IE9 & Safari.
+// Restituisce un array invece di una HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.children == null) {
+        Object.defineProperty(constructor.prototype, 'children', {
+            get: function() {
+                var i = 0, node, nodes = this.childNodes, children = [];
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        children.push(node);
+                    }
+                }
+                return children;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.ParentNode.children")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/parentnode/firstelementchild/index.html b/files/it/web/api/parentnode/firstelementchild/index.html new file mode 100644 index 0000000000..472b7737a3 --- /dev/null +++ b/files/it/web/api/parentnode/firstelementchild/index.html @@ -0,0 +1,99 @@ +--- +title: ParentNode.firstElementChild +slug: Web/API/ParentNode/firstElementChild +tags: + - API + - DOM + - ParentNode + - Proprietà +translation_of: Web/API/ParentNode/firstElementChild +--- +

{{ APIRef("DOM") }}

+ +

La proprietà ParentNode.firstElementChild di sola lettura restituisce il primo figlio {{domxref("Element")}} dell'oggetto, oppure null se non ha elementi figli.

+ +
+

Questa proprietà era inizialmente definita nell'interfaccia pura {{domxref("ElementTraversal")}} pure interface. Poiché questa interfaccia conteneva due distinti set di proprietà, una diretta al {{domxref("Node")}} che ha figli, una a quelli che sono figli, sono stati spostati in due interfacce pure separate, {{domxref("ParentNode")}} e {{domxref("ChildNode")}}. In questo caso, firstElementChild è stato spostato su {{domxref("ParentNode")}}. Questa è una modifica abbastanza tecnica che non dovrebbe influire sulla compatibilità.

+
+ +

Sintassi

+ +
var element = node.firstElementChild;
+
+ +

Esempio

+ +
<ul id="foo">
+  <li>First  (1)</li>
+  <li>Second (2)</li>
+  <li>Third  (3)</li>
+</ul>
+
+<script>
+var foo = document.getElementById('foo');
+// yields: First  (1)
+console.log(foo.firstElementChild.textContent);
+</script>
+
+ +

Polyfill per IE8, IE9 e Safari

+ +
// Overwrites native 'firstElementChild' prototype.
+// Adds Document & DocumentFragment support for IE9 & Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.firstElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'firstElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = 0;
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Diviso l'interfaccia ElementTraversal in {{domxref("ChildNode")}} e ParentNode. Questo metodo è ora definito su quest'ultimo.
+ Il {{domxref("Document")}} e {{domxref("DocumentFragment")}} implementato le nuove interfacce.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Aggiunta la sua definizione iniziale all'interfaccia pura ElementTraversal e usarla su {{domxref("Element")}}.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.ParentNode.firstElementChild")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/parentnode/index.html b/files/it/web/api/parentnode/index.html new file mode 100644 index 0000000000..2cbf79f11c --- /dev/null +++ b/files/it/web/api/parentnode/index.html @@ -0,0 +1,90 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API + - DOM + - Finding Elements + - Finding Nodes + - Interface + - Locating Elements + - Locating Nodes + - Managing Elements + - Managing Nodes + - Mixin + - NeedsTranslation + - Node + - ParentNode + - Reference + - Selectors + - TopicStub +translation_of: Web/API/ParentNode +--- +
{{APIRef("DOM")}}
+ +

The ParentNode mixin contains methods and properties that are common to all types of {{domxref("Node")}} objects that can have children. It's implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.

+ +

See Locating DOM elements using selectors to learn how to use CSS selectors to find nodes or elements of interest.

+ +

Properties

+ +
+
{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}
+
Returns the number of children of this ParentNode which are elements.
+
{{domxref("ParentNode.children")}} {{readonlyInline}}
+
Returns a live {{domxref("HTMLCollection")}} containing all of the {{domxref("Element")}} objects that are children of this ParentNode, omitting all of its non-element nodes.
+
{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}
+
Returns the first node which is both a child of this ParentNode and is also an Element, or null if there is none.
+
{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}
+
Returns the last node which is both a child of this ParentNode and is an Element, or null if there is none.
+
+ +

Methods

+ +
+
{{domxref("ParentNode.append()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the ParentNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child of the ParentNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ParentNode.querySelector()")}}
+
Returns the first {{domxref("Element")}} with the current element as root that matches the specified group of selectors.
+
{{domxref("ParentNode.querySelectorAll()")}}
+
Returns a {{domxref("NodeList")}} representing a list of elements with the current element as root that matches the specified group of selectors.
+
+ +

Specification

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and used it on {{domxref("Element")}}.
+ +

Browser compatibility

+ + + +

{{Compat("api.ParentNode")}}

+ +

See also

+ + diff --git a/files/it/web/api/parentnode/lastelementchild/index.html b/files/it/web/api/parentnode/lastelementchild/index.html new file mode 100644 index 0000000000..006a3a316d --- /dev/null +++ b/files/it/web/api/parentnode/lastelementchild/index.html @@ -0,0 +1,98 @@ +--- +title: ParentNode.lastElementChild +slug: Web/API/ParentNode/lastElementChild +tags: + - API + - DOM + - ParentNode + - Proprietà +translation_of: Web/API/ParentNode/lastElementChild +--- +

{{ APIRef("DOM") }}

+ +

La proprietà ParentNode.LastElementChild di sola lettura restituisce l'ultimo figlio Element dell'oggetto, oppure null se non ha elementi figli.

+ +
+

Questa proprietà era inizialmente definita nell'interfaccia pura {{domxref("ElementTraversal")}} pure interface. Poiché questa interfaccia conteneva due distinti set di proprietà, una diretta al {{domxref("Node")}} che ha figli, una a quelli che sono figli, sono stati spostati in due interfacce pure separate, {{domxref("ParentNode")}} e {{domxref("ChildNode")}}. In questo caso, lastElementChild è stato spostato su {{domxref("ParentNode")}}. Questa è una modifica abbastanza tecnica che non dovrebbe influire sulla compatibilità.

+
+ +

Sintassi

+ +
var element = node.lastElementChild;
+ +

Esempio

+ +
<ul id="foo">
+  <li>First  (1)</li>
+  <li>Second (2)</li>
+  <li>Third  (3)</li>
+</ul>
+
+<script>
+var foo = document.getElementById('foo');
+// yields: Third  (3)
+console.log(foo.lastElementChild.textContent);
+</script>
+
+ +

Polyfill per IE8, IE9 e Safari

+ +
// Overwrites native 'lastElementChild' prototype.
+// Adds Document & DocumentFragment support for IE9 & Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Diviso l'interfaccia ElementTraversal in {{domxref("ChildNode")}} e ParentNode. Questo metodo è ora definito su quest'ultimo.
+ Il {{domxref("Document")}} e {{domxref("DocumentFragment")}} implementato le nuove interfacce.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Aggiunta la sua definizione iniziale all'interfaccia pura ElementTraversal e usarla su {{domxref("Element")}}.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.ParentNode.firstElementChild")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/performance/index.html b/files/it/web/api/performance/index.html new file mode 100644 index 0000000000..fde24fddb4 --- /dev/null +++ b/files/it/web/api/performance/index.html @@ -0,0 +1,135 @@ +--- +title: Performance +slug: Web/API/Performance +tags: + - API + - Interface + - Misurazione delle performance + - Performance + - Reference + - Web Performance +translation_of: Web/API/Performance +--- +
{{APIRef("High Resolution Time")}}
+ +

 
+ L'interaccia Performance fornisce l'accesso alle informazioni relative alle performance della pagina corrente. Fa parte delle High Resolution Time API, ma viene migliorata tramite le Performance Timeline API, le Navigation Timing API, le User Timing API e le Resource Timing API.

+ +

Un oggetto di questo tipo può essere ottenuto chiamando {{domxref("Window.performance")}} in sola lettura.

+ +
+

Nota:  Questa interfaccia ed i suoi metodi sono disponibili nei Web Workers, ad eccezione di dove diversamente indicato nella guida sottostante.
+ Da notare inoltre che i markers delle peformance e le misurazioni sono relative al contesto. Se crei un marker sul thread principale (o su un altro worker), non potrai vederlo in un thread del worker e viceversa.

+
+ +

Proprietà

+ +

L'interfaccia Performance non eredita nessuna proprietà.

+ +
+
{{deprecated_inline}} {{domxref("Performance.navigation")}} {{readonlyInline}}
+
{{domxref("PerformanceNavigation")}} è un oggetto che fornisce un utile contesto sulle operazioni incluse nella lista timing, sia che la pagina venga caricata o ricaricata, quante occorrenze di redirect sono presenti e così via. Not available in workers.
+
{{deprecated_inline}}  {{domxref("Performance.timing")}} {{readonlyInline}}
+
L'oggetto {{domxref("PerformanceTiming")}} contiene le informazioni relative alla latenza delle performance. Not available in workers.
+
{{domxref("Performance.memory", "performance.memory")}} {{Non-standard_inline}}
+
Estensione non-standard aggiunta in Chrome, questa proprietà fornisce un oggetto con l'utilizzo della memoria di base. Non dovresti usare questa API non-stanrdard.
+
{{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Non-standard_inline}}
+
Restituisce il timestamp preciso del momento in cui si è iniziato a misurare le performance.
+
+ +
+
+

Event handlers

+
+
{{domxref("Performance.onresourcetimingbufferfull")}}
+
Un {{domxref("EventTarget")}} che funge da callback e che viene eseguito quando viene scatenato l'evento {{event("resourcetimingbufferfull")}}
+
+ +

Metodi

+ +

L'interfaccia Performance non eredita nessun metodo.

+ +
+
{{domxref("Performance.clearMarks()")}}
+
Rimuove il segnaposto specificato dal buffer delle performance del browser.
+
{{domxref("Performance.clearMeasures()")}}
+
Rimuove la misurazione specificata dal buffer delle performance del browser.
+
{{domxref("Performance.clearResourceTimings()")}}
+
Rimuove tutte le {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entryType")}} di resource dal data buffer delle performance del browser.
+
{{domxref("Performance.getEntries()")}}
+
Restituisce una lista di oggetti di tipo {{domxref("PerformanceEntry")}}  basati sul filtro specificato.
+
{{domxref("Performance.getEntriesByName()")}}
+
Restituisce una lista di oggetti di tipo {{domxref("PerformanceEntry")}} secondo il nome specificato ed il tipo divoce specificata.
+
{{domxref("Performance.getEntriesByType()")}}
+
Restituisce una list di oggetti {{domxref("PerformanceEntry")}} relativi alla voce specificata
+
{{domxref("Performance.mark()")}}
+
Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nel buffer delle performance usando il nome specificato.
+
{{domxref("Performance.measure()")}}
+
Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nel buffer delle performance del browser tra due segnaposti (indicati rispettivamente come start mark ed end mark)
+
{{domxref("Performance.now()")}}
+
Restituisce un {{domxref("DOMHighResTimeStamp")}} ceh rappresenta il numero in millisecondi trascorso dall'istante preso come riferimento.
+
{{domxref("Performance.setResourceTimingBufferSize()")}}
+
Imposta la dimensione del buffer del browser relativo alla temporizzazione in un numero specificato di oggetti {{domxref("PerformanceEntry","performance entry")}} "resource" {{domxref("PerformanceEntry.entryType","type")}}
+
{{domxref("Performance.toJSON()")}}
+
Restituisce un oggetto json che rappresenta l'oggetto Performance
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('Highres Time Level 3', '#dom-performance-timeorigin','timeOrigin')}}{{Spec2('Highres Time Level 3')}}Definisce la proprietà timeOrigin 
{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}{{Spec2('Highres Time Level 2')}}Definisce il metodo toJson() .
{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}{{Spec2('Highres Time')}}Definisce il metodo now() .
{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline Level 2')}}Cambia l'interfaccia getEntries() .
{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}{{Spec2('Performance Timeline')}}Definisce i metodi getEntries(), getEntriesByType() e getEntriesByName() .
{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('Resource Timing')}}Definisce i metodi clearResourceTimings() e setResourceTimingBufferSize() e la proprietà onresourcetimingbufferfull .
{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing Level 2')}}Spiega i metodi mark(), clearMark(), measure() e clearMeasure() .
{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing')}}Definisce i metodi mark(), clearMark(), measure() e clearMeasure().
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.Performance")}}

+
diff --git a/files/it/web/api/performance/now/index.html b/files/it/web/api/performance/now/index.html new file mode 100644 index 0000000000..2331157f18 --- /dev/null +++ b/files/it/web/api/performance/now/index.html @@ -0,0 +1,104 @@ +--- +title: performance.now() +slug: Web/API/Performance/now +tags: + - API + - Performance + - Prestazioni + - Reference + - Riferimento + - Web Performance API + - metodo +translation_of: Web/API/Performance/now +--- +
{{APIRef("High Resolution Timing")}}
+ +

Il metodo performance.now() restituisce un {{domxref("DOMHighResTimeStamp")}}, misurato in millisecondi.

+ +
+

The timestamp is not actually high-resolution. To mitigate security threats such as Spectre, browsers currently round the results to varying degrees. (Firefox started rounding to 1 millisecond in Firefox 60.) Some browsers may also slightly randomize the timestamp. The precision may improve again in future releases; browser developers are still investigating these timing attacks and how best to mitigate them.

+
+ +

{{AvailableInWorkers}}

+ +

Il valore restituito rappresenta il tempo trascorso dal time origin.

+ +

Tieni a mente i seguenti punti:

+ + + +

Sintassi

+ +
t = performance.now();
+ +

Esempio

+ +
var t0 = performance.now();
+doSomething();
+var t1 = performance.now();
+console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
+
+ +

A differenza di altri timing data disponibili con JavaScript (per esempio Date.now), i timestamps restituiti da Performance.now() non sono limitati a una risoluzione di un millisecondo. Invece, rappresentano il tempo come numeri a virgola mobile con una precisione che può arrivare a un microsecondo.

+ +

Inolre, a differenza di Date.now(), il valore restituito da Performance.now() aumenta sempre con costanza, indipendentemente dal clock di sistema (che può essere regolato manualmente o distorto da software come NTP). Altrimenti, performance.timing.navigationStart + performance.now() sarà approssimativamente uguale a Date.now().

+ +

Reduced time precision

+ +

To offer protection against timing attacks and fingerprinting, the precision of performance.now() might get rounded depending on browser settings.
+ In Firefox, the privacy.reduceTimerPrecision  preference is enabled by default and defaults to 1ms.

+ +
// reduced time precision (1ms) in Firefox 60
+performance.now();
+// 8781416
+// 8781815
+// 8782206
+// ...
+
+
+// reduced time precision with `privacy.resistFingerprinting` enabled
+performance.now();
+// 8865400
+// 8866200
+// 8866700
+// ...
+
+ +

In Firefox, you can also enable privacy.resistFingerprinting — this changes the precision to 100ms or the value of privacy.resistFingerprinting.reduceTimerPrecision.microseconds, whichever is larger.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time Level 2')}}Stricter definitions of interfaces and types.
{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Performance.now")}}

+ +

See also

+ + diff --git a/files/it/web/api/range/clonecontents/index.html b/files/it/web/api/range/clonecontents/index.html new file mode 100644 index 0000000000..48d1bc09b9 --- /dev/null +++ b/files/it/web/api/range/clonecontents/index.html @@ -0,0 +1,27 @@ +--- +title: range.cloneContents +slug: Web/API/Range/cloneContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/cloneContents +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un frammento del documento copiando i nodi di un Range.

+

Sintassi

+
frammento = range.cloneContents();
+
+

Esempio

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+frammento = range.cloneContents();
+document.body.appendChild(frammento);
+
+

Note

+

Gli Event Listener aggiunti utilizzando gli Event del DOM non vengono copiati durante la clonazione. Gli attributi-evento di HTML vengono duplicati allo stesso modo in cui li copia il metodo clonNode. Anche gli attributi HTML "id" vengono clonati, il che può portare a rendere il documento non valido.

+

I nodi parzialmente selezionati includono i tag padri necessari perché il frammento di documento sia valido.

+

Specifiche

+

cloneContents

diff --git a/files/it/web/api/range/clonerange/index.html b/files/it/web/api/range/clonerange/index.html new file mode 100644 index 0000000000..ba8c0076b3 --- /dev/null +++ b/files/it/web/api/range/clonerange/index.html @@ -0,0 +1,28 @@ +--- +title: range.cloneRange +slug: Web/API/Range/cloneRange +translation_of: Web/API/Range/cloneRange +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un oggetto Range con i punti d'inizio e di fine identici a quelli del Range attuale.

+ +

Sintassi

+ +
clone = range.cloneRange();
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+clone = range.cloneRange();
+
+ +

Note

+ +

Il Range viene copiato per valore, non per referenza, quindi una modifica su uno dei due oggetti non avrà effetti sull'altro.

+ +

Specifiche

+ +

cloneRange

diff --git a/files/it/web/api/range/collapse/index.html b/files/it/web/api/range/collapse/index.html new file mode 100644 index 0000000000..f976cfeca6 --- /dev/null +++ b/files/it/web/api/range/collapse/index.html @@ -0,0 +1,36 @@ +--- +title: range.collapse +slug: Web/API/Range/collapse +translation_of: Web/API/Range/collapse +--- +

{{ APIRef("DOM") }}

+ +

Collassa il range tra i suoi due estremi.

+ +

Sintassi

+ +
range.collapse(toStart);
+
+ +

Parametri

+ +
+
toStart 
+
Un booleano, true collassa il Range al suo punto iniziale, False lo collassa alla fine.
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNode(referenceNode);
+range.collapse(true);
+
+ +

Note

+ +

Un Range collassato è vuoto, non ha alcun contenuto, specifica un singolo punto nell'albero del DOM. Per determinare se un Range è già collassato, si veda la proprietà collapsed.

+ +

Specifiche

+ +

collapse

diff --git a/files/it/web/api/range/collapsed/index.html b/files/it/web/api/range/collapsed/index.html new file mode 100644 index 0000000000..3d06ee5385 --- /dev/null +++ b/files/it/web/api/range/collapsed/index.html @@ -0,0 +1,33 @@ +--- +title: range.collapsed +slug: Web/API/Range/collapsed +translation_of: Web/API/Range/collapsed +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un booleano che indica se i punti d'inizio e di fine sono nella stessa posizione.

+ +

Sintassi

+ +
isCollapsed = range.collapsed;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+isCollapsed = range.collapsed;
+
+ +

Note

+ +

Restituisce il valore booleano true se l'inizio e la fine del Range sono lo stesso punto nel DOM, altrimenti restituisce false.

+ +

Un Range collapsed è vuoto, non ha alcun contenuto, rappresenta un singolo punto nell'albero del DOM. Per collassare un Range, si veda il metodo collapse.

+ +

Specifiche

+ +

collapsed

+ +

{{ languages( { "ja": "ja/DOM/range.collapsed" } ) }}

diff --git a/files/it/web/api/range/commonancestorcontainer/index.html b/files/it/web/api/range/commonancestorcontainer/index.html new file mode 100644 index 0000000000..9f4cbec910 --- /dev/null +++ b/files/it/web/api/range/commonancestorcontainer/index.html @@ -0,0 +1,31 @@ +--- +title: range.commonAncestorContainer +slug: Web/API/Range/commonAncestorContainer +translation_of: Web/API/Range/commonAncestorContainer +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il nodo più interno che contiene i nodi startContainer e endContainer.

+ +

Sintassi

+ +
rangeAncestor = range.commonAncestorContainer;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+rangeAncestor = range.commonAncestorContainer;
+
+ +

Note

+ +

Restituisce il nodo che si trova più in profondità, o più in basso nell'albero del DOM, che contiene entrambi i nodi startContainer e endContainer. Siccome Range non deve necessariamente essere contiguo e potrebbe anche selezionare solo in parte alcuni nodi, questo è un modo conveniente per trovare un nodo che racchiuda completamente il Range.

+ +

Questa proprietà è di sola lettura. Per cambiare il più profondo contenitore di un nodo, si consideri la possibilità di utilizzare i vari metodi per impostare le posizioni iniziali e finali di un Range.

+ +

Specifiche

+ +

commonAncestorContainer

diff --git a/files/it/web/api/range/compareboundarypoints/index.html b/files/it/web/api/range/compareboundarypoints/index.html new file mode 100644 index 0000000000..f815fd019b --- /dev/null +++ b/files/it/web/api/range/compareboundarypoints/index.html @@ -0,0 +1,54 @@ +--- +title: range.compareBoundaryPoints +slug: Web/API/Range/compareBoundaryPoints +translation_of: Web/API/Range/compareBoundaryPoints +--- +

{{ APIRef("DOM") }}

+ +

Compara i punti estremi di due Range.

+ +

Sintassi

+ +
compara =
+range.compareBoundaryPoints(
+come,
+rangeSorgente);
+
+ +
+
compara 
+
Un numero che vale 1, 0, o -1, che indica se un punto estremo di + range + è rispettivamente prima, nella stessa posizione o dopo il corrispondente punto estremo di rangeSorgente.
+
come 
+
Una costante che indica la modalità di comparazione, i possibili valori sono descritti sotto.
+
rangeSorgente 
+
Un range con cui effettuare la comparazione
+
+ +

Esempio

+ +
var range, rangeSorgente, compara;
+range = document.createRange();
+range.selectNode(document.getElementsByTagName("div")[0]);
+rangeSorgente = document.createRange();
+rangeSorgente.selectNode(document.getElementsByTagName("div")[1]);
+compara = range.compareBoundaryPoints(START_TO_END, rangeSorgente);
+
+ +

Note

+ +

Il parametro + come + può assumere i seguenti valori:

+ + + +

Specifiche

+ +

DOM Level 2 Traversal: compareBoundaryPoints

diff --git a/files/it/web/api/range/comparepoint/index.html b/files/it/web/api/range/comparepoint/index.html new file mode 100644 index 0000000000..2d3356b532 --- /dev/null +++ b/files/it/web/api/range/comparepoint/index.html @@ -0,0 +1,37 @@ +--- +title: range.comparePoint +slug: Web/API/Range/comparePoint +translation_of: Web/API/Range/comparePoint +--- +

{{ APIRef("DOM") }}

+ +

Restituisce -1 se nodo si trova prima del range, 0 se si trova nello stesso punto, 1 se si trova dopo.

+ +

Sintassi

+ +
int = range.comparePoint( nodo, offset )
+
+ +

Parametri

+ +
+
nodo 
+
Il node da comparare con range
+
offset 
+
Un intero maggiore o uguale a zero che rappresenta la distanza dall'inizio del nodo
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+valore = range.comparePoint(document.getElementsByTagName("p").item(0),1);
+
+ +

Note

+ +

Se il nodo è di tipo Text, Comment, o CDATASection, allora l'offset è il numero di caratteri dall'inizio del nodo. Per tutti gli altri tipi di nodo, offset</offset> rappresenta il numero dei nodi figlio dall'inizio di <code>nodo.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/range/createcontextualfragment/index.html b/files/it/web/api/range/createcontextualfragment/index.html new file mode 100644 index 0000000000..f56354ddc4 --- /dev/null +++ b/files/it/web/api/range/createcontextualfragment/index.html @@ -0,0 +1,37 @@ +--- +title: range.createContextualFragment +slug: Web/API/Range/createContextualFragment +translation_of: Web/API/Range/createContextualFragment +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un frammento di documento.

+ +

Sintassi

+ +
frammento = range.createContextualFragment( tag )
+
+ +

Parametri

+ +
+
tag 
+
stringa che contiene del testo da convertire in un frammento di documento
+
+ +

Esempio

+ +
var tag = "<div>Ciao, sono un nodo!</div>";
+var range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+var frammento = range.createContextualFragment(tag);
+document.body.appendChild(frammento);
+
+ +

Note

+ +

Questo metodo accetta una stringa e utilizza l'interprete di Mozilla per convertirla in un ramo (o un singolo nodo) del DOM.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/range/deletecontents/index.html b/files/it/web/api/range/deletecontents/index.html new file mode 100644 index 0000000000..25ade9f3ca --- /dev/null +++ b/files/it/web/api/range/deletecontents/index.html @@ -0,0 +1,25 @@ +--- +title: range.deleteContents +slug: Web/API/Range/deleteContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/deleteContents +--- +

{{ ApiRef() }}

+

Sommario

+

Rimuove i contenuti di un Range dal documento.

+

Sintassi

+
range.deleteContents()
+
+

Esempio

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.deleteContents();
+
+

Note

+

Diversamente dal metodo extractContents, deleteContents non restituisce un frammento di documento contenente il contenuto cancellato.

+

Specifiche

+

deleteContents

diff --git a/files/it/web/api/range/detach/index.html b/files/it/web/api/range/detach/index.html new file mode 100644 index 0000000000..be4f1de75d --- /dev/null +++ b/files/it/web/api/range/detach/index.html @@ -0,0 +1,28 @@ +--- +title: range.detach +slug: Web/API/Range/detach +translation_of: Web/API/Range/detach +--- +

{{ APIRef("DOM") }}

+ +

Rilascia un Range in uso, per liberare memoria.

+ +

Sintassi

+ +
range.detach();
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.detach();
+
+ +

Note

+ +

Permette a Mozilla di rilasciare le risorse associate a questo Range. Successivi tentativi di usare il range rilasciato causeranno una DOMException lanciata con un codice di errore INVALID_STATE_ERR.

+ +

Specifiche

+ +

detach

diff --git a/files/it/web/api/range/endcontainer/index.html b/files/it/web/api/range/endcontainer/index.html new file mode 100644 index 0000000000..b727827a32 --- /dev/null +++ b/files/it/web/api/range/endcontainer/index.html @@ -0,0 +1,29 @@ +--- +title: range.endContainer +slug: Web/API/Range/endContainer +translation_of: Web/API/Range/endContainer +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il nodo dentro il quale termina il Range.

+ +

Sintassi

+ +
endRangeNode = range.endContainer;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+endRangeNode = range.endContainer;
+
+ +

Note

+ +

Restituisce una referenza al Nodo del documento dentro il quale termina il Range. Questa proprietà è di sola lettura. Per modificare la posizione finale di un nodo, si può utilizzare il metodo setEnd o un altro metodo simile.

+ +

Specifiche

+ +

endContainer

diff --git a/files/it/web/api/range/endoffset/index.html b/files/it/web/api/range/endoffset/index.html new file mode 100644 index 0000000000..0d4556ef6f --- /dev/null +++ b/files/it/web/api/range/endoffset/index.html @@ -0,0 +1,29 @@ +--- +title: range.endOffset +slug: Web/API/Range/endOffset +translation_of: Web/API/Range/endOffset +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un numero che rappresenta dove termina il Range, all'interno di endContainer.

+ +

Sintassi

+ +
endRangeOffset = range.endOffset;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+endRangeOffset = range.endOffset;
+
+ +

Note

+ +

endOffset ha due significati. Se endContainer è un Node di tipo Text, Comment, o CDATASection, allora l'offset è il numero di caratteri dall'inizio di endContainer alla fine del Range. Per altri tipi di Node, endOffset è il numero dei nodi figli tra l'inizio di endContainer e la fine del Range. Questa proprietà è di sola lettura. Per cambiare l'endOffset del Range, è possibile utilizzare uno dei metodi setEnd.

+ +

Specifiche

+ +

endOffset

diff --git a/files/it/web/api/range/extractcontents/index.html b/files/it/web/api/range/extractcontents/index.html new file mode 100644 index 0000000000..9c2cc50586 --- /dev/null +++ b/files/it/web/api/range/extractcontents/index.html @@ -0,0 +1,27 @@ +--- +title: range.extractContents +slug: Web/API/Range/extractContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/extractContents +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta i contenuti di un Range da un ramo del documento ad un altro ramo del documento.

+

Sintassi

+
frammento = range.extractContents();
+
+

Esempio

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+frammento = range.extractContents();
+document.body.appendChild(frammento);
+
+

Note

+

Gli Event Listener creati utilizzando gli eventi DOM non vengono conservati durante l'estrazione. Gli attributi-evento di HTML non vengono conservati nè duplicati. Gli attributi HTML "id" vengono clonati, il che può portare a rendere invalido un documento se il nodo parzialmente selezionato è estratto ed aggiunto in un altro punto del documento.

+

I nodi parzialmente selezionati vengono clonati per includere i tag padri necessari perché il frammento del documento sia valido.

+

Specifiche

+

extractContents

diff --git a/files/it/web/api/range/index.html b/files/it/web/api/range/index.html new file mode 100644 index 0000000000..9ff0663ee0 --- /dev/null +++ b/files/it/web/api/range/index.html @@ -0,0 +1,150 @@ +--- +title: range +slug: Web/API/Range +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Range +--- +

{{ ApiRef() }}

+

Introduzione

+

L'oggetto Range rappresenta una parte di un documento, che può contenere nodi e parti di nodi testuali del documento dato.

+

Un range può essere creato usando il metodo createRange dell'oggetto document. Gli oggetti Range possono essere ottenuti anche usando il metodo getRangeAt dell'oggetto selection.

+

Proprietà

+
+
+ collapsed
+
+ Restituisce un booleano che indica se i punti d'inizio e di fine del range sono nella stessa posizione.
+
+ commonAncestorContainer
+
+ Restituisce il nodo più interno che contiene i nodi startContainer e endContainer.
+
+ endContainer
+
+ Restituisce il nodo nel quale il Range finisce.
+
+ endOffset
+
+ Restituisce un numero che rappresenta il punto preciso in cui il Range finisce, all'interno di endContainer.
+
+ startContainer
+
+ Restituisce il nodo nel quale il Range inizia.
+
+ startOffset
+
+ Restituisce un numero che rappresenta il punto preciso in cui il Range inizia, all'interno di startContainer.
+
+

Metodi

+

Metodi di posizionamento

+

Questi metodi impostano i punti di inizio e di fine di un range.

+
+
+ setStart
+
+ Imposta la posizione iniziale di un Range.
+
+ setEnd
+
+ Setta la posizione finale di un Range.
+
+ setStartBefore
+
+ Setta la posizione iniziale di un Range nel nodo precedente a quello indicato.
+
+ setStartAfter
+
+ Setta la posizione iniziale di un Range nel nodo successivo a quello indicato.
+
+ setEndBefore
+
+ Setta la posizione finale di un Range nel nodo precedente a quello indicato.
+
+ setEndAfter
+
+ Setta la posizione finale di un Range nel nodo successivo a quello indicato.
+
+ selectNode
+
+ Inserisce all'interno di un Range uno specifico nodo e il suo contenuto.
+
+ selectNodeContents
+
+ Inserisce all'interno di un Range esclusivamente il contenuto di uno specifico nodo.
+
+ collapse
+
+ Collassa un Range in uno dei punti estremi.
+
+

Metodi per modificare un Range

+

Questi metodi prendono i nodi da un range e ne modificano i contenuti.

+
+
+ cloneContents
+
+ Restituisce un frammento di documento copiando i nodi da un Range.
+
+ deleteContents
+
+ Rimuove dal documento i contenuti di un Range.
+
+ extractContents
+
+ Muove i contenuti di un Range dall'albero del documento in un frammento del documento.
+
+ insertNode
+
+ Inserisce un nodo all'inizio di un Range.
+
+ surroundContents
+
+ Muove il contenuto di un Range in un nuovo nodo.
+
+

Altri metodi

+
+
+ compareBoundaryPoints
+
+ Compara i punti estremi di due Range.
+
+ cloneRange
+
+ Restituisce un oggetto Range con i punti estremi identici al Range clonato.
+
+ detach
+
+ Rilascia un Range dall'uso, per migliorare le performance.
+
+ toString
+
+ Restituisce il testo di un Range.
+
+

Metodi proprietari di Gecko

+

Questa sezione descrive metodi di Range implementati in Gecko ma che non fanno parte delle specifiche DOM del W3C.

+
+
+ compareNode (obsoleto)
+
+ Restituisce una costante che rappresenta se il nodo viene prima, dopo o dentro il Range.
+
+ comparePoint
+
+ Restituisce -1, 0, o 1 per indicare se il punto viene prima, dentro o dopo il range.
+
+ createContextualFragment
+
+ Restituisce un frammento di documento creato a partire da una data stringa di codice.
+
+ intersectsNode (obsoleto)
+
+ Restituisce un booleano che indica se il nodo dato interseca il range.
+
+ isPointInRange
+
+ Restituisce un booleano che indica se il punto dato è interno al range.
+
diff --git a/files/it/web/api/range/insertnode/index.html b/files/it/web/api/range/insertnode/index.html new file mode 100644 index 0000000000..6abfe0f295 --- /dev/null +++ b/files/it/web/api/range/insertnode/index.html @@ -0,0 +1,38 @@ +--- +title: range.insertNode +slug: Web/API/Range/insertNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/insertNode +--- +
+ {{APIRef}}
+
+  
+

Sommario

+

Inserisce un nodo all'inizio di un range.

+

Sintassi

+
range.insertNode(nuovoNodo);
+
+

Parameters

+
+
+ nuovoNodo 
+
+ è un oggetto node.
+
+

Esempio

+
range = document.createRange();
+nuovoNodo = document.createElement("p");
+nuovoNodo.appendChild(document.createTextNode("Un nuovo nodo viene inserito qui"));
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.insertNode(nuovoNodo);
+
+

Note

+

nuovoNodo viene inserito al punto iniziale del Range. Se nuovoNodo deve essere aggiunto a un nodo testo, quel nodo viene diviso al punto dell'inserimento e l'aggiunta avviene tra il due nodi testo risultanti (si veda però il bug http://bugzilla.mozilla.org/show_bug.cgi?id=135922 ).

+

Se nuovoNodo è un frammento di documento, i figli del frammento vengono inseriti al suo posto.

+

Specifiche

+

insertNode

diff --git a/files/it/web/api/range/ispointinrange/index.html b/files/it/web/api/range/ispointinrange/index.html new file mode 100644 index 0000000000..86c7e3ec43 --- /dev/null +++ b/files/it/web/api/range/ispointinrange/index.html @@ -0,0 +1,31 @@ +--- +title: range.isPointInRange +slug: Web/API/Range/isPointInRange +translation_of: Web/API/Range/isPointInRange +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un valore booleano che indica se il punto passato si trova all'interno del range.

+ +

Sintassi

+ +
bool = range.isPointInRange( nodo )
+
+ +

Parametri

+ +
+
nodo 
+
Il Node da comparare con il Range.
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+bool = range.isPointInRange(document.getElementsByTagName("p").item(0),1);
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcun standard.

diff --git a/files/it/web/api/range/selectnode/index.html b/files/it/web/api/range/selectnode/index.html new file mode 100644 index 0000000000..2b08e16731 --- /dev/null +++ b/files/it/web/api/range/selectnode/index.html @@ -0,0 +1,35 @@ +--- +title: range.selectNode +slug: Web/API/Range/selectNode +translation_of: Web/API/Range/selectNode +--- +

{{ APIRef("DOM") }}

+ +

Imposta il Range in modo tale che contenga un nodo e tutti i suoi elementi.

+ +

Sintassi

+ +
range.selectNode(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node da selezionare dentro un Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNode(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio e della fine del Range sarà lo stesso del padre del referenceNode.

+ +

Specifiche

+ +

selectNode

diff --git a/files/it/web/api/range/selectnodecontents/index.html b/files/it/web/api/range/selectnodecontents/index.html new file mode 100644 index 0000000000..e558cf5982 --- /dev/null +++ b/files/it/web/api/range/selectnodecontents/index.html @@ -0,0 +1,37 @@ +--- +title: range.selectNodeContents +slug: Web/API/Range/selectNodeContents +translation_of: Web/API/Range/selectNodeContents +--- +

 

+ +

{{ APIRef("DOM") }}

+ +

Imposta il Range perchè contenga il contenuti di un dato Node.

+ +

Sintassi

+ +
range.selectNodeContents(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node i cui contenuti devono essere selezionati dentro il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNodeContents(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio e della fine del Range sarà referenceNode. startOffset è 0 e endOffset è il numero dei Node figli o il numero dei caratteri contenuti nel referenceNode.

+ +

Specifiche

+ +

selectNodeContents

diff --git a/files/it/web/api/range/setend/index.html b/files/it/web/api/range/setend/index.html new file mode 100644 index 0000000000..02754fbedb --- /dev/null +++ b/files/it/web/api/range/setend/index.html @@ -0,0 +1,38 @@ +--- +title: range.setEnd +slug: Web/API/Range/setEnd +translation_of: Web/API/Range/setEnd +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione finale di un Range.

+ +

Sintassi

+ +
range.setEnd(endNode,endOffset);
+
+ +

Parametri

+ +
+
endNode 
+
Il Node che termina il Range
+
endOffset 
+
Un intero maggiore o uguale a zero che rappresenta la distanza della fine del Range dall'inizio di endNode.
+
+ +

Esempio

+ +
range = document.createRange();
+endNode = document.getElementsByTagName("p").item(3);
+endOffset = document.getElementsByTagName("p").item(3).childNodes.length;
+range.setEnd(endNode,endOffset);
+
+ +

Note

+ +

Se l'endNode è un Node di tipo Text, Comment, o CDATASection, allora endOffset è il numero di caratteri dall'inizio di endNode. Per altri tipi di Node, endOffset è il numero dei nodi figlio dall'inizio di endNode.

+ +

Specifiche

+ +

setEnd

diff --git a/files/it/web/api/range/setendafter/index.html b/files/it/web/api/range/setendafter/index.html new file mode 100644 index 0000000000..7d23e74e02 --- /dev/null +++ b/files/it/web/api/range/setendafter/index.html @@ -0,0 +1,35 @@ +--- +title: range.setEndAfter +slug: Web/API/Range/setEndAfter +translation_of: Web/API/Range/setEndAfter +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione finale di un Range relativamente a un altro Node.

+ +

Syntax

+ +
range.setEndAfter(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node dopo il quale deve terminare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setEndAfter(referenceNode);
+
+ +

Note

+ +

Il Node della fine del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setEndAfter

diff --git a/files/it/web/api/range/setendbefore/index.html b/files/it/web/api/range/setendbefore/index.html new file mode 100644 index 0000000000..69b3f0e961 --- /dev/null +++ b/files/it/web/api/range/setendbefore/index.html @@ -0,0 +1,35 @@ +--- +title: range.setEndBefore +slug: Web/API/Range/setEndBefore +translation_of: Web/API/Range/setEndBefore +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione finale di un Range relativamente a un altro Node.

+ +

Sintassi

+ +
range.setEndBefore(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node prima del quale deve terminare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setEndBefore(referenceNode);
+
+ +

Note

+ +

Il Node padre della fine del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setEndBefore

diff --git a/files/it/web/api/range/setstart/index.html b/files/it/web/api/range/setstart/index.html new file mode 100644 index 0000000000..27623b9ea8 --- /dev/null +++ b/files/it/web/api/range/setstart/index.html @@ -0,0 +1,38 @@ +--- +title: range.setStart +slug: Web/API/Range/setStart +translation_of: Web/API/Range/setStart +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione iniziale di un Range.

+ +

Sintassi

+ +
range.setStart(startNode,startOffset);
+
+ +

Parametri

+ +
+
startNode 
+
Il Node all'inizio del Range
+
startOffset 
+
Un numero intero molto grande rappresentante l'offset per l'inizio del Range dall'iniszio dello startNode.
+
+ +

Esempio

+ +
range = document.createRange();
+startNode = document.getElementsByTagName("p").item(2);
+startOffset = 0;
+range.setStart(startNode,startOffset);
+
+ +

Note

+ +

Se lo startNode è un Node di tipo Text, Comment, oppure CDATASection, allora lo startOffset è il numero di caratteri dall'inizio dello startNode. Per gli altri tipi di Node, lo startOffset è il numero di nodi figli tra l'inizio dello startNode.

+ +

Specifiche

+ +

setStart

diff --git a/files/it/web/api/range/setstartafter/index.html b/files/it/web/api/range/setstartafter/index.html new file mode 100644 index 0000000000..4a5676a9d6 --- /dev/null +++ b/files/it/web/api/range/setstartafter/index.html @@ -0,0 +1,35 @@ +--- +title: range.setStartAfter +slug: Web/API/Range/setStartAfter +translation_of: Web/API/Range/setStartAfter +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione iniziale di un Range relativamente a un altro Node.

+ +

Sintassi

+ +
range.setStartAfter(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node dopo il quale deve iniziare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setStartAfter(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setStartAfter

diff --git a/files/it/web/api/range/setstartbefore/index.html b/files/it/web/api/range/setstartbefore/index.html new file mode 100644 index 0000000000..d98800f57b --- /dev/null +++ b/files/it/web/api/range/setstartbefore/index.html @@ -0,0 +1,35 @@ +--- +title: range.setStartBefore +slug: Web/API/Range/setStartBefore +translation_of: Web/API/Range/setStartBefore +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione iniziale di un Range relativamente a un altro Node.

+ +

Sintassi

+ +
range.setStartBefore(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node prima del quale deve iniziare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setStartBefore(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setStartBefore

diff --git a/files/it/web/api/range/startcontainer/index.html b/files/it/web/api/range/startcontainer/index.html new file mode 100644 index 0000000000..e1eb8d3c7f --- /dev/null +++ b/files/it/web/api/range/startcontainer/index.html @@ -0,0 +1,29 @@ +--- +title: range.startContainer +slug: Web/API/Range/startContainer +translation_of: Web/API/Range/startContainer +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il Node dentro il quale comincia il Range.

+ +

Sintassi

+ +
startRangeNode = range.startContainer;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+startRangeNode = range.startContainer;
+
+ +

Note

+ +

Restituisce un riferimento al Node del documento, dentro il quale comincia il Range. Questa proprietà è di sola lettura. Per modificare la posizione dell'inizio di un nodo, si utilizzi i metodi setStart.

+ +

Specifiche

+ +

startParent

diff --git a/files/it/web/api/range/startoffset/index.html b/files/it/web/api/range/startoffset/index.html new file mode 100644 index 0000000000..e0408fa445 --- /dev/null +++ b/files/it/web/api/range/startoffset/index.html @@ -0,0 +1,29 @@ +--- +title: range.startOffset +slug: Web/API/Range/startOffset +translation_of: Web/API/Range/startOffset +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un numero che rappresenta il punto iniziale del Range all'interno di startContainer.

+ +

Sintassi

+ +
startRangeOffset = range.startOffset;
+
+ +

Esempio

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+startRangeOffset = range.startOffset;
+
+ +

Note

+ +

startRangeOffset ha due significati. Se startContainer è un code>Node</code> di tipo Text, Comment, o CDATASection, allora startRangeOffset rappresenta il numero di caratteri dall'inizio di startContainer alla fine di Range, Per tutti gli altri tipi di Node, startRangeOffset rappresenta il numero di nodi figlio tra l'inizio di startContainer e la fine di Range. Questa proprietà è di sola lettura. Per modificare il valore startOffset di un nodo, si utilizzino i metodi setStart.

+ +

Speicifiche

+ +

startOffset

diff --git a/files/it/web/api/range/surroundcontents/index.html b/files/it/web/api/range/surroundcontents/index.html new file mode 100644 index 0000000000..32b94161ef --- /dev/null +++ b/files/it/web/api/range/surroundcontents/index.html @@ -0,0 +1,36 @@ +--- +title: range.surroundContents +slug: Web/API/Range/surroundContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/surroundContents +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta il contenuto di un Range in un nuovo nodo, piazzando il nuovo nodo all'inizio del range specificato.

+

Sintassi

+
range.surroundContents(nuovoNodo);
+
+
+
+ nuovoNodo 
+
+ è un nodo
+
+

Esempio

+
var range = document.createRange();
+var nuovoNodo = document.createElement("p");
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.surroundContents(nuovoNodo);
+
+

Note

+

surroundContents equivale a:

+
nuovoNodo.appendChild(range.extractContents());
+range.insertNode(nuovoNodo)
+
+

Per effetto di questo metodo, i punti estremi del range includono nuovoNodo.

+

Specifiche

+

DOM Level 2 Range: Range.surroundContents

diff --git a/files/it/web/api/range/tostring/index.html b/files/it/web/api/range/tostring/index.html new file mode 100644 index 0000000000..fd3c9d3999 --- /dev/null +++ b/files/it/web/api/range/tostring/index.html @@ -0,0 +1,28 @@ +--- +title: range.toString +slug: Web/API/Range/toString +translation_of: Web/API/Range/toString +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il testo del Range.

+ +

Sintassi

+ +
text = range.toString();
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+text = range.toString();
+
+ +

Note

+ +

Alterare i contenuti di un Range causa una chiamata implicita di toString(), quindi comparare il Range e il testo attraverso un alert dialog è inutile.

+ +

Specifiche

+ +

toString

diff --git a/files/it/web/api/selection/addrange/index.html b/files/it/web/api/selection/addrange/index.html new file mode 100644 index 0000000000..cff46a4d65 --- /dev/null +++ b/files/it/web/api/selection/addrange/index.html @@ -0,0 +1,39 @@ +--- +title: addRange +slug: Web/API/Selection/addRange +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/addRange +--- +

{{ ApiRef() }}

+

Sommario

+

Aggiunge un range alla selezione.

+

Sintassi

+
selezione.addRange(range)
+
+

Parametri

+
+
+ + range +
+
+ Un oggetto range che verrà aggiunto alla selezione.
+
+

Esempio

+
 /* seleziono tutti gli oggetti STRONG all'interno del documento HTML */
+ var strongs = document.getElementsByTagName("strong");
+ var s = window.getSelection();
+ if(s.rangeCount > 0) s.removeAllRanges();
+ for(var i = 0; i < strongs.length; i++) {
+  var range = document.createRange();
+  range.selectNode(strongs[i]);
+  s.addRange(range);
+ }
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange", "pl": "pl/DOM/Selection/addRange" } ) }}

diff --git a/files/it/web/api/selection/anchornode/index.html b/files/it/web/api/selection/anchornode/index.html new file mode 100644 index 0000000000..2dcd33e119 --- /dev/null +++ b/files/it/web/api/selection/anchornode/index.html @@ -0,0 +1,21 @@ +--- +title: anchorNode +slug: Web/API/Selection/anchorNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/anchorNode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il nodo nel quale inizia la selezione.

+

Sintassi

+
selection.anchorNode
+
+

Note

+

Un utente può creare una selezione da sinistra a destra (nell'ordine del documento) oppure da destra a sinistra (in ordine inverso rispetto al documento). L'anchor è il punto in cui l'utente ha iniziato a selezionare. Per comprendere e visualizzare questo meccanismo, si può tenere premuto il tasto SHIFT e poi premere i tasti freccia; l'anchor rimane immobile ma il focus, cioè l'altro estremo della selezione, si sposta.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/anchorNode", "es": "es/DOM/Selection/anchorNode", "pl": "pl/DOM/Selection/anchorNode" } ) }}

diff --git a/files/it/web/api/selection/anchoroffset/index.html b/files/it/web/api/selection/anchoroffset/index.html new file mode 100644 index 0000000000..0c6de4e0ed --- /dev/null +++ b/files/it/web/api/selection/anchoroffset/index.html @@ -0,0 +1,21 @@ +--- +title: anchorOffset +slug: Web/API/Selection/anchorOffset +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/anchorOffset +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il numero di caratteri che separano il primo carattere della selezione (anchor), dal primo carattere del primo nodo selezionato (anchorNode).

+

Sintassi

+
selezione.anchorOffset
+
+

Note

+

Il valore restituito inizia da 0. Se la selezione comincia con il primo carattere dell'anchorNode, anchorOffset restituisce 0.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/anchorOffset", "es": "es/DOM/Selection/anchorOffset", "pl": "pl/DOM/Selection/anchorOffset" } ) }}

diff --git a/files/it/web/api/selection/collapse/index.html b/files/it/web/api/selection/collapse/index.html new file mode 100644 index 0000000000..63f2407ac1 --- /dev/null +++ b/files/it/web/api/selection/collapse/index.html @@ -0,0 +1,44 @@ +--- +title: collapse +slug: Web/API/Selection/collapse +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/collapse +--- +

{{ ApiRef() }}

+

Sommario

+

Fa collassare la selezione corrente in un singolo punto. Il documento non viene modificato. Se il contenuto è modificabile, il cursore lampeggerà.

+

Sintassi

+
selezione.collapse(nodoPadre,offset);
+
+

Parametri

+
+
+ + nodoPadre +
+
+ Il cursore si troverà all'interno di questo nodo.
+
+
+
+ + offset +
+
+ La distanza in caratteri tra il cursore e l'inizio del testo di + + parentNode + .
+
+

Esempio

+
/* Porta il cursore all'inizio del BODY */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+
+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapse", "es": "es/DOM/Selection/collapse", "pl": "pl/DOM/Selection/collapse" } ) }}

diff --git a/files/it/web/api/selection/collapsetoend/index.html b/files/it/web/api/selection/collapsetoend/index.html new file mode 100644 index 0000000000..b7193eb8e6 --- /dev/null +++ b/files/it/web/api/selection/collapsetoend/index.html @@ -0,0 +1,19 @@ +--- +title: collapseToEnd +slug: Web/API/Selection/collapseToEnd +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/collapseToEnd +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta l'anchor della selezione allo stesso punto in cui si trova il focus. Il focus non si muove. Se il contenuto è modificabile, il cursore lampeggerà.

+

Syntax

+
selezione.collapseToEnd()
+
+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "es": "es/DOM/Selection/collapseToEnd", "pl": "pl/DOM/Selection/collapseToEnd" } ) }}

diff --git a/files/it/web/api/selection/collapsetostart/index.html b/files/it/web/api/selection/collapsetostart/index.html new file mode 100644 index 0000000000..ccf6084f65 --- /dev/null +++ b/files/it/web/api/selection/collapsetostart/index.html @@ -0,0 +1,14 @@ +--- +title: collapseToStart +slug: Web/API/Selection/collapseToStart +translation_of: Web/API/Selection/collapseToStart +--- +

Sommario

+

Sposta il focus della selezione allo stesso punto in cui si trova l'anchor. L'anchor non si muove. Se il contenuto è modificabile, il cursore lampeggerà. +

+

Sintassi

+
selezione.collapseToStart()
+
+
+
+{{ languages( { "en": "en/DOM/Selection/collapseToStart", "es": "es/DOM/Selection/collapseToStart", "pl": "pl/DOM/Selection/collapseToStart" } ) }} diff --git a/files/it/web/api/selection/containsnode/index.html b/files/it/web/api/selection/containsnode/index.html new file mode 100644 index 0000000000..b7729228b6 --- /dev/null +++ b/files/it/web/api/selection/containsnode/index.html @@ -0,0 +1,47 @@ +--- +title: containsNode +slug: Web/API/Selection/containsNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/containsNode +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il nodo specificato fa parte della selezione.

+

Sintassi

+
selezione.containsNode(nodo,nodoParziale)
+
+

Parametri

+
+
+ + nodo +
+
+

Il nodo da cercare all'interno della selezione

+
+
+ + nodoParziale +
+
+ Se è + + true + , containsNode restituisce true nel caso in cui solo una parte di nodo sia contenuta dalla selezione.
+
+ Se è + + false + , containsNode restituisce false nel caso in cui solo una parte di nodo sia contenuta dalla selezione.
+
+

Esempi

+
 /* controlliamo se qualcosa all'interno dell'elemento BODY è stato selezionato */
+ alert(window.getSelection().containsNode(document.body, true));
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/containsNode", "en": "en/DOM/Selection/containsNode", "pl": "pl/DOM/Selection/containsNode" } ) }}

diff --git a/files/it/web/api/selection/deletefromdocument/index.html b/files/it/web/api/selection/deletefromdocument/index.html new file mode 100644 index 0000000000..5a065e7b37 --- /dev/null +++ b/files/it/web/api/selection/deletefromdocument/index.html @@ -0,0 +1,28 @@ +--- +title: deleteFromDocument +slug: Web/API/Selection/deleteFromDocument +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/deleteFromDocument +--- +

{{ ApiRef }}

+ +

Sommario

+ +

Elimina dal documento il testo attualmente rappresentato dall'oggetto selection.

+ +

Sintassi

+ +
selezione.deleteFromDocument()
+
+ +

Esempi

+ +

Un utente seleziona il testo (immaginario) "la capra " all'interno della stringa "sotto la panca la capra crepa". L'utente poi clicca un bottone che esegue la riga JavaScript window.getSelection().deleteFromDocument(). Il testo del documento diventa "sotto la panca crepa".

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "es": "es/DOM/Selection/deleteFromDocument", "pl": "pl/DOM/Selection/deleteFromDocument" } ) }}

diff --git a/files/it/web/api/selection/extend/index.html b/files/it/web/api/selection/extend/index.html new file mode 100644 index 0000000000..58e022a2a9 --- /dev/null +++ b/files/it/web/api/selection/extend/index.html @@ -0,0 +1,39 @@ +--- +title: extend +slug: Web/API/Selection/extend +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/extend +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta il focus della selezione ad un punto specificato. L'anchor invece resta immobile. La selezione si estenderà dall'anchor fino al nuovo focus, indipendentemente da quale sia la direzione (cioè potrebbe essere inversa rispetto al testo).

+

Sintassi

+
selezione.extend(nodoPadre,offset)
+
+

Parametri

+
+
+ + nodoPadre +
+
+ Il nuovo focus, cioè il nodo fino al quale si estenderà la selezione.
+
+
+
+ + offset +
+
+ Il numero di caratteri che separeranno l'inizio del testo del + + nodoPadre' + dal nuovo focus.
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/extend", "en": "en/DOM/Selection/extend", "pl": "pl/DOM/Selection/extend" } ) }}

diff --git a/files/it/web/api/selection/focusnode/index.html b/files/it/web/api/selection/focusnode/index.html new file mode 100644 index 0000000000..8c8653b829 --- /dev/null +++ b/files/it/web/api/selection/focusnode/index.html @@ -0,0 +1,21 @@ +--- +title: focusNode +slug: Web/API/Selection/focusNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/focusNode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il nodo nel quale la selezione termina

+

Sintassi

+
selection.focusNode
+
+

Note

+

Un utente può creare una selezione da sinistra a destra (nell'ordine del documento) oppure da destra a sinistra (in ordine inverso rispetto al documento). L'anchor è il punto in cui l'utente ha iniziato a selezionare, il focus è il punto in cui la selezione è terminata. Per comprendere e visualizzare questo meccanismo, si può tenere premuto il tasto SHIFT e poi premere i tasti freccia; l'anchor rimane immobile ma il focus, cioè l'altro estremo della selezione, si sposta.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/focusNode", "es": "es/DOM/Selection/focusNode", "pl": "pl/DOM/Selection/focusNode" } ) }}

diff --git a/files/it/web/api/selection/focusoffset/index.html b/files/it/web/api/selection/focusoffset/index.html new file mode 100644 index 0000000000..92978a8dba --- /dev/null +++ b/files/it/web/api/selection/focusoffset/index.html @@ -0,0 +1,21 @@ +--- +title: focusOffset +slug: Web/API/Selection/focusOffset +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/focusOffset +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il numero di caratteri che separano il primo carattere della selezione (focus) dal primo carattere dell'ultimo nodo della selezione (focusNode).

+

Sintassi

+
selezione.focusOffset
+
+

Note

+

Questo valore inizia da 0. Se la selezione termina con il primo carattere di focusNode, focusOffset restituisce 0.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/focusOffset", "es": "es/DOM/Selection/focusOffset", "pl": "pl/DOM/Selection/focusOffset" } ) }}

diff --git a/files/it/web/api/selection/getrangeat/index.html b/files/it/web/api/selection/getrangeat/index.html new file mode 100644 index 0000000000..f5307b03d9 --- /dev/null +++ b/files/it/web/api/selection/getrangeat/index.html @@ -0,0 +1,37 @@ +--- +title: getRangeAt +slug: Web/API/Selection/getRangeAt +translation_of: Web/API/Selection/getRangeAt +--- +

Sommario

+

Restituisce un oggetto range che rappresenta i nodi attualmente selezionati.

+

Sintassi

+
range =sel.getRangeAt(index)
+
+

Parametri

+
+
+ range
+
+ L'oggetto range che verrà restituito.
+
+
+
+ + index +
+
+ L'indice del range da restituire; parte da zero. Un valore negativo o un numero uguale o maggiore a rangeCount causa un errore.
+
+

Esempi

+
var ranges = [];
+
+sel = window.getSelection();
+
+for(var i = 0; i < sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Ogni oggetto nei ranghi ora è un
+ * oggetto range che rappresenta uno dei ranghi
+ * presenti nella selezione attuale. */
+
diff --git a/files/it/web/api/selection/index.html b/files/it/web/api/selection/index.html new file mode 100644 index 0000000000..aca2185be0 --- /dev/null +++ b/files/it/web/api/selection/index.html @@ -0,0 +1,102 @@ +--- +title: Selection +slug: Web/API/Selection +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection +--- +

{{ ApiRef() }}

+ +

Sommario

+ +

E' la classe dell'oggetto restituito da window.getSelection ed altri metodi.

+ +

Descrizione

+ +

L'oggetto selection rappresenta i range che l'utente ha selezionato. In una selezione fatte dall'utente col mouse possono esserci più range, ad esempio perchè tramite posizionamento assoluto nei CSS due contenitori(DIV) distanti fra di loro nel flusso del documento appaiono vicini sul display e vengono selezionati insieme. Per accedere ai diversi Range che formano una selezione, si usa il metodo getRangeAt().

+ +

In JavaScript, l'oggetto selection può venire modificato come se fosse una stringa, ad esempio vi si può concatenare una stringa, perchè in questi casi viene automaticamente applicato il metodo toString. Ad esempio, con il codice seguente, nell'alert apparirà una stringa:

+ +
selObj = window.getSelection();
+window.alert(selObj);
+
+ +

ma la variabile selObj rimane un oggetto di tipo selection e non di tipo String, solo che all'occorrenza gli viene applicato il metodo toString().

+ +

Glossario

+ +

Altre parole chiave usate in questa sezione.

+ +
+
anchor
+
Rappresenta il punto in cui inizia una selezione. Quando si fa una selezione con il mouse, l'anchor è il punto in cui il mouse è stato premuto e non cambia mentre si muove il mouse.
+
focus
+
Rappresenta il punto in cui finisce una selezione. Quando si fa una selezione con il mouse, il focus si muove in corrispondenza del mouse(mentre il tasto è premuto), e quando il tasto viene rilasciato, rappresenta il punto in cui finisce la selezione.
+
range
+
Rappresenta un insieme di nodi contigui del documento. Un range può contenere interi nodi come anche porzioni di nodi(nel caso di nodi testuali). Un range può essere recuperato da una selezione attraverso l'oggetto range, oppure può essere creato via script e aggiunto o rimosso da una selezione.
+
+ +

Proprietà

+ +
+
anchorNode
+
Restituisce il nodo in cui inizia la selezione.
+
anchorOffset
+
Restituisce il numero di caratteri fra l'inizio del nodo testuale e l'anchor, all'interno dell'anchorNode.
+
focusNode
+
Restituisce il nodo in cui finisce la selezione.
+
focusOffset
+
Restituisce il numero di caratteri fra l'inizio del nodo testuale e il focus, all'interno del focusNode.
+
isCollapsed
+
Restituisce un valore booleano che indica se l'anchor e il focus di una selezione si trovano nella stessa posizione.
+
rangeCount
+
Restituisce il numero di range di cui è composta una selezione.
+
+ +

Metodi

+ +
+
getRangeAt
+
Restituisce un oggetto range che rappresenta uno dei range attualmente selezionati.
+
collapse
+
Collassa la selezione corrente in un singolo punto.
+
extend
+
Muove il focus della selezione in uno specifico punto.
+
collapseToStart
+
Muove il focus della selezione nel punto in cui c'è l'anchor (che non viene spostata).
+
collapseToEnd
+
Muove il focus della selezione nel punto in cui c'è il focus (che non viene spostato).
+
selectAllChildren
+
Aggiunge tutti i figli del nodo specificato alla selezione.
+
addRange
+
Aggiunge un oggetto range alla selezione..
+
removeRange
+
Rimuove un range dalla selezione.
+
removeAllRanges
+
Rimuove tutti i range dalla selezione.
+
deleteFromDocument
+
Elimina dal documento il contenuto della selezione.
+
selectionLanguageChange
+
 
+
toString
+
Restituisce una stringa che rappresenta l'oggetto selection (cioè il testo attualmente selezionato).
+
containsNode
+
Indica se un certo nodo fa parte dell'oggetto selection.
+
+ +

Guarda anche

+ +

window.getSelection, Range

+ + + + + +
 
+ +

{{ languages( { "en": "en/DOM/Selection", "es": "es/DOM/Selection", "pl": "pl/DOM/Selection" } ) }}

diff --git a/files/it/web/api/selection/iscollapsed/index.html b/files/it/web/api/selection/iscollapsed/index.html new file mode 100644 index 0000000000..f91cfc5d1d --- /dev/null +++ b/files/it/web/api/selection/iscollapsed/index.html @@ -0,0 +1,24 @@ +--- +title: isCollapsed +slug: Web/API/Selection/isCollapsed +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/isCollapsed +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un booleano che indica se l'inizio e la fine della selezione corrente corrispondono (cioè restituisce true se la selezione è + + collassata + ).

+

Sintassi

+
selection.isCollapsed
+
+

Note

+

Anche una selezione collassata può avere un rangeCount più grande di 0. Anche selezione.getRangeAt(0) potrebbe restituire un range collassato.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/isCollapsed", "es": "es/DOM/Selection/isCollapsed", "pl": "pl/DOM/Selection/isCollapsed" } ) }}

diff --git a/files/it/web/api/selection/rangecount/index.html b/files/it/web/api/selection/rangecount/index.html new file mode 100644 index 0000000000..db26f87b6f --- /dev/null +++ b/files/it/web/api/selection/rangecount/index.html @@ -0,0 +1,19 @@ +--- +title: rangeCount +slug: Web/API/Selection/rangeCount +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/rangeCount +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il numero di range presenti nella selezione.

+

Sintassi

+
selection.rangeCount
+
+

Note

+

Prima che l'utente clicchi su una pagina appena caricata, rangeCount vale 0. Un utente normalmente può selezionare un solo range alla volta, quindi rangeCount solitamente vale 1. Tramite lo script è possibile far si che la selezione contenga più di un range.

+

{{ languages( { "en": "en/DOM/Selection/rangeCount", "es": "es/DOM/Selection/rangeCount", "pl": "pl/DOM/Selection/rangeCount" } ) }}

diff --git a/files/it/web/api/selection/removeallranges/index.html b/files/it/web/api/selection/removeallranges/index.html new file mode 100644 index 0000000000..b9aa7bba25 --- /dev/null +++ b/files/it/web/api/selection/removeallranges/index.html @@ -0,0 +1,19 @@ +--- +title: removeAllRanges +slug: Web/API/Selection/removeAllRanges +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/removeAllRanges +--- +

{{ ApiRef() }}

+

Sommario

+

Rimuove tutti i range dalla selezione, impostando le proprietà anchorNode e focusNode a null. Dopo la chiamata a questo metodo, non vi saranno elementi selezionati nella pagina.

+

Sintassi

+
selezione.removeAllRanges();
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/removeAllRanges", "en": "en/DOM/Selection/removeAllRanges", "pl": "pl/DOM/Selection/removeAllRanges" } ) }}

diff --git a/files/it/web/api/selection/removerange/index.html b/files/it/web/api/selection/removerange/index.html new file mode 100644 index 0000000000..cb4186afe9 --- /dev/null +++ b/files/it/web/api/selection/removerange/index.html @@ -0,0 +1,38 @@ +--- +title: removeRange +slug: Web/API/Selection/removeRange +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/removeRange +--- +

{{ ApiRef() }}

+

Sommario

+

Rimuove un range dalla selezione.

+

Sintassi

+
selezione.removeRange(range)
+
+

Parametri

+
+
+ + range +
+
+ Un oggetto range che verrà rimosso dalla selezione.
+
+

Esempio

+
/* Da programma, è possibile selezionare più di un range.
+   Questo script li deseleziona tutti tranne il primo. */
+s = window.getSelection();
+if(s.rangeCount > 1) {
+ for(var i = 1; i < s.rangeCount; i++) {
+  s.removeRange(s.getRangeAt(i));
+ }
+}
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/removeRange", "en": "en/DOM/Selection/removeRange", "pl": "pl/DOM/Selection/removeRange" } ) }}

diff --git a/files/it/web/api/selection/selectallchildren/index.html b/files/it/web/api/selection/selectallchildren/index.html new file mode 100644 index 0000000000..2df5613a3d --- /dev/null +++ b/files/it/web/api/selection/selectallchildren/index.html @@ -0,0 +1,39 @@ +--- +title: selectAllChildren +slug: Web/API/Selection/selectAllChildren +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/selectAllChildren +--- +

{{ ApiRef() }}

+

Sommario

+

Aggiunge alla selezione tutti i figli del nodo specificato. La selezione precedente viene perduta.

+

Sintassi

+
selezione.selectAllChildren(nodoPadre)
+
+

Parametri

+
+
+ + nodoPadre +
+
+ Tutti i figli di + + nodoPadre + verranno aggiunti alla selezione. + + nodoPadre + invece non verrà selezionato.
+
+

Esempio

+
pieDiPagina = document.getElementById("pieDiPagina");
+window.getSelection().selectAllChildren(pieDiPagina);
+/* ora tutto ciò che si trova a piè di pagina è selezionato */
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren", "pl": "pl/DOM/Selection/selectAllChildren" } ) }}

diff --git a/files/it/web/api/selection/tostring/index.html b/files/it/web/api/selection/tostring/index.html new file mode 100644 index 0000000000..17a6be112b --- /dev/null +++ b/files/it/web/api/selection/tostring/index.html @@ -0,0 +1,27 @@ +--- +title: toString +slug: Web/API/Selection/toString +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/toString +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce una stringa che rappresenta l'oggetto selection. Generalmente è il testo selezionato.

+

Sintassi

+
stringa =selezione.toString()
+
+ +

Note

+

In JavaScript, questo metodo viene chiamato implicitamente quando un oggetto selection viene passato a un metodo o a una funzione che richiede una stringa:

+
alert(window.getSelection()) // la chiamata scritta da noi
+alert(window.getSelection().toString())  // la chiamata effettiva
+
+
+  
+

{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}

diff --git a/files/it/web/api/storage/clear/index.html b/files/it/web/api/storage/clear/index.html new file mode 100644 index 0000000000..e99735a34f --- /dev/null +++ b/files/it/web/api/storage/clear/index.html @@ -0,0 +1,126 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +tags: + - API + - Persistenza + - Persistenza Browser + - Riferimento + - metodo +translation_of: Web/API/Storage/clear +--- +

{{APIRef("Web Storage API")}}

+ +

Il metodo clear() dell'interfaccia {{domxref("Storage")}} , quando invocato, pulisce tutte le chiavi salvate.

+ +

Sintassi

+ +
storage.clear();
+ +

Return value

+ +

{{jsxref("undefined")}}.

+ +

Esempi

+ +

La seguente funzione crea tre coppie chiave/valore in local storage, infine le elimina invocando il metodo clear().

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'miGato.png');
+
+  localStorage.clear();
+}
+ +
+

Note: Per un esempio reale guarda Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità browser {{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Ogni browser riserva una quantità di memoria differente per localStorage e sessionStorage. Qui si trova il dettaglio di tutte le quantità di memoria per i vari browser.

+ +
+

Note: da iOS 5.1, Safari Mobile persiste i dati di localStorage nella cartella cache, che è soggetta a pulizie occasionali, su ordine del sistema operativo, tipicamente in condizioni di poco spazio libero sul dispositivo.

+
+ +

Vedi anche

+ +

Utilizzo di Web Storage API

diff --git a/files/it/web/api/storage/getitem/index.html b/files/it/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..701fff9910 --- /dev/null +++ b/files/it/web/api/storage/getitem/index.html @@ -0,0 +1,144 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +tags: + - API + - Memoria locale + - memoria + - metodo +translation_of: Web/API/Storage/getItem +--- +

{{APIRef("Web Storage API")}}

+ +

Il metodo getItem() dell'interfaccia {{domxref("Storage")}} restituisce il valore contenuto nella chiave passata a parametro.

+ +

Syntax

+ +
var aValue = storage.getItem(keyName);
+
+ +

Parametri

+ +
+
keyName
+
Una {{domxref("DOMString")}} che contiene il nome della chiave da cui si vuole ottenerne il valore associato.
+
+ +

Valore restituito

+ +

Una {{domxref("DOMString")}} contenente il valore associato alla chiave. Se la chiave non esiste, null viene restituito.

+ +

Esempio

+ +

La funzione seguente ottiene tre elementi dalla memoria locale, per poi utilizzarli per impostare alcuni stili personalizzati nella pagina.

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Nota: Per vedere questo esempio usato nel mondo reale, guarda il nostro Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità browsers

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Tutti i browser hanno differenti livelli capacitativi per entrambi localStorage e sessionStorage. Qui puoi trovare una lista dettagliata delle capacità di memoria per browser differenti.

+ +
+

Nota: da iOS 5.1, Safari Mobile immagazzina i dati di localStorage nella cartella cache, che viene svuotata occasionalmente a discrezione dell'OS, solitamente quando lo spazio disponibile scarseggia.

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/storage/index.html b/files/it/web/api/storage/index.html new file mode 100644 index 0000000000..ab30b1de21 --- /dev/null +++ b/files/it/web/api/storage/index.html @@ -0,0 +1,161 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - API + - Dati + - Interfaccia + - Riferimento + - Storage + - Web Storage +translation_of: Web/API/Storage +--- +

{{APIRef("Web Storage API")}}

+ +

L'interfaccia Storage dell'API Web Storage fornisce accesso allo storage di sessione o allo storage locale per un dato dominio, permettendo, ad esempio, l'aggiunta, modifica o rimozione di dati salvati.

+ +

Se si vuole manipolare lo storage di sessione per un dominio, va invocato il metodo {{domxref("Window.sessionStorage")}}; se si vuole manipolare lo storage locale per un dominio, va invocato {{domxref("Window.localStorage")}}.

+ +

Proprietà

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
Ritorna un intero che rappresenta il numero di oggetti presenti in un oggetto Storage.
+
+ +

Metodi

+ +
+
{{domxref("Storage.key()")}}
+
Dato un numero n,  ritorna il nome dell'n-esima chiave nello storage.
+
+ +
+
{{domxref("Storage.getItem()")}}
+
Dato un nome di chiave, ritorna il corrispondente valore.
+
{{domxref("Storage.setItem()")}}
+
Dati un nome di chiave e un valore, aggiunge questa chiave allo storage, o aggiorna il valore della chiave se essa esiste già.
+
{{domxref("Storage.removeItem()")}}
+
Dato un nome di chiave, rimuove quella chiave dallo storage.
+
{{domxref("Storage.clear()")}}
+
Rimuove tutte le chiavi dallo storage.
+
+ +

Esempi

+ +

Questo è un esempio di accesso all'oggetto Storage tramite chiamata a localStorage. In primo luogo, si verifica se lo storage locale contenga oggetti usando !localStorage.getItem('bgcolor'). Se il test passa, si invoca una funzione setStyles() che recupera gli oggetti tramite {{domxref("localStorage.getItem()")}} e ne usa i valori per aggiornare gli stili della pagina. Se il test fallisce, viene invocata un'altra funzione, populateStorage(), che usa {{domxref("localStorage.setItem()")}} per settare i valori, per poi ritornare setStyles().

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Nota: Per vedere quest'esempio girare, si veda la Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilità dei browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto minimo2.1{{ CompatUnknown }}8113.2[1]
+
+ +

[1] A partite da iOS 5.1, Safari Mobile salva i dati del localStorage in una cartella di cache, soggetta occasionalmente a pulizia su richiesta del sistema operativo, tipicamente in mancanza di spazio.

+ +

I vari browser hanno diversi livelli di capacità sia per localStorage che per sessionStorage. Qui si trova un resoconto dettagliato delle capacità di immagazzinamento dei vari browser.

+ +

Vedere anche

+ +

Usare la API Web Storage

diff --git a/files/it/web/api/storage/setitem/index.html b/files/it/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..c96e805956 --- /dev/null +++ b/files/it/web/api/storage/setitem/index.html @@ -0,0 +1,133 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +translation_of: Web/API/Storage/setItem +--- +

{{APIRef("Web Storage API")}}

+ +

Il metodo setItem(), che fa parte della funzionalità {{domxref("Storage")}} , quando passa il nome di una chiave e un valore, aggiunge questa chiave allo storage, oppure se la chiave esiste già aggiorna il valore della chiave stessa.

+ +

Sintassi

+ +
storage.setItem(keyName, keyValue);
+ +

Parametri

+ +
+
keyName
+
Il {{domxref("DOMString")}} contiene il nome della chiave che si vuole creare o aggiornare.
+
keyValue
+
Il {{domxref("DOMString")}} contiene il valore che si vuole dare alla chiave che si sta creando o aggiornando.
+
+ +

Valore di ritorno

+ +

{{jsxref("undefined")}}.

+ +

Eccezioni

+ +

setItem() potrebbe dar luogo a eccezioni se lo storage è pieno. Ad esempio, in Safari Mobile (da iOS 5) non è possibile salvare dati quando l'utente è in modalità in incognito (questo perché Safari non alloca spazio per l'utente nella modalità in incognito, al contrario degli altri browsers, i quali permettono di usare lo storage nella modalità in incognito, salvando i dati in uno spazio apposito e separato). Quindi è sempre meglio implementare delle funzioni che gestiscano le eccezioni quando si usa setItem().

+ +

Esempi

+ +

Le seguenti funzioni creano tre oggetti all'interno del local storage:

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}
+ +
+

Nota: Se vuoi un esempio veritiero, dai un'occhiata alla pagina Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}{{Spec2('Web Storage')}}
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Tutti i browser hanno diversi livelli di gestione sia del localStorage che del sessionStorage. Qui trovi ulteriori dettagli.

+ +
+

Nota: da iOS 5.1, Safari Mobile memorizza i dati del localStorage nella cartella delle cache, la quale, ogni tanto, viene cancellata (ricorda che questo spazio è solitamente piccolo).

+
+ +

Altre informazioni

+ +

Come usare le Web Storage API

diff --git a/files/it/web/api/urlutils/index.html b/files/it/web/api/urlutils/index.html new file mode 100644 index 0000000000..05cc01aa9b --- /dev/null +++ b/files/it/web/api/urlutils/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/webgl_api/index.html b/files/it/web/api/webgl_api/index.html new file mode 100644 index 0000000000..c085be1e41 --- /dev/null +++ b/files/it/web/api/webgl_api/index.html @@ -0,0 +1,254 @@ +--- +title: 'WebGL: Grafica 2D e 3D per il web' +slug: Web/API/WebGL_API +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +
+

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.

+
+ +

Support for WebGL is present in Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+, and Microsoft Edge build 10240+; however, the user's device must also have hardware that supports these features.

+ +

The {{anch("WebGL 2")}} API introduces support for much of the OpenGL ES 3.0 feature set; it's provided through the {{domxref("WebGL2RenderingContext")}} interface.

+ +

The {{HTMLElement("canvas")}} element is also used by the Canvas API to do 2D graphics on web pages.

+ +

Reference

+ +

Standard interfaces

+ +
+
    +
  • {{domxref("WebGLRenderingContext")}}
    • +
  • {{domxref("WebGL2RenderingContext")}}
    • +
  • {{domxref("WebGLActiveInfo")}}
    • +
  • {{domxref("WebGLBuffer")}}
    • +
  • {{domxref("WebGLContextEvent")}}
    • +
  • {{domxref("WebGLFramebuffer")}}
    • +
  • {{domxref("WebGLProgram")}}
    • +
  • {{domxref("WebGLQuery")}}
    • +
  • {{domxref("WebGLRenderbuffer")}}
    • +
  • {{domxref("WebGLSampler")}}
    • +
  • {{domxref("WebGLShader")}}
    • +
  • {{domxref("WebGLShaderPrecisionFormat")}}
    • +
  • {{domxref("WebGLSync")}}
    • +
  • {{domxref("WebGLTexture")}}
    • +
  • {{domxref("WebGLTransformFeedback")}}
    • +
  • {{domxref("WebGLUniformLocation")}}
    • +
  • {{domxref("WebGLVertexArrayObject")}}
    • +
+
+ +

Extensions

+ +
+
    +
  • {{domxref("ANGLE_instanced_arrays")}}
    • +
  • {{domxref("EXT_blend_minmax")}}
    • +
  • {{domxref("EXT_color_buffer_float")}}
    • +
  • {{domxref("EXT_color_buffer_half_float")}}
    • +
  • {{domxref("EXT_disjoint_timer_query")}}
    • +
  • {{domxref("EXT_float_blend")}} {{experimental_inline}}
    • +
  • {{domxref("EXT_frag_depth")}}
    • +
  • {{domxref("EXT_sRGB")}}
    • +
  • {{domxref("EXT_shader_texture_lod")}}
    • +
  • {{domxref("EXT_texture_compression_bptc")}}
    • +
  • {{domxref("EXT_texture_compression_rgtc")}}
    • +
  • {{domxref("EXT_texture_filter_anisotropic")}}
    • +
  • {{domxref("KHR_parallel_shader_compile")}}
    • +
  • {{domxref("OES_element_index_uint")}}
    • +
  • {{domxref("OES_fbo_render_mipmap")}}
    • +
  • {{domxref("OES_standard_derivatives")}}
    • +
  • {{domxref("OES_texture_float")}}
    • +
  • {{domxref("OES_texture_float_linear")}}
    • +
  • {{domxref("OES_texture_half_float")}}
    • +
  • {{domxref("OES_texture_half_float_linear")}}
    • +
  • {{domxref("OES_vertex_array_object")}}
    • +
  • {{domxref("OVR_multiview2")}}
    • +
  • {{domxref("WEBGL_color_buffer_float")}}
    • +
  • {{domxref("WEBGL_compressed_texture_astc")}}
    • +
  • {{domxref("WEBGL_compressed_texture_atc")}}
    • +
  • {{domxref("WEBGL_compressed_texture_etc")}}
    • +
  • {{domxref("WEBGL_compressed_texture_etc1")}}
    • +
  • {{domxref("WEBGL_compressed_texture_pvrtc")}}
    • +
  • {{domxref("WEBGL_compressed_texture_s3tc")}}
    • +
  • {{domxref("WEBGL_compressed_texture_s3tc_srgb")}}
    • +
  • {{domxref("WEBGL_debug_renderer_info")}}
    • +
  • {{domxref("WEBGL_debug_shaders")}}
    • +
  • {{domxref("WEBGL_depth_texture")}}
    • +
  • {{domxref("WEBGL_draw_buffers")}}
    • +
  • {{domxref("WEBGL_lose_context")}}
    • +
+
+ +

Events

+ + + +

Constants and types

+ + + +

WebGL 2

+ +

WebGL 2 is a major update to WebGL which is provided through the {{domxref("WebGL2RenderingContext")}} interface. It is based on OpenGL ES 3.0 and new features include:

+ + + +

See also the blog post "WebGL 2 lands in Firefox" and webglsamples.org/WebGL2Samples for a few demos.

+ +

Guides and tutorials

+ +

Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.

+ +

Guides

+ +
+
Data in WebGL
+
A guide to variables, buffers, and other types of data used when writing WebGL code.
+
WebGL best practices
+
Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.
+
Using extensions
+
A guide to using WebGL extensions.
+
+ +

Tutorials

+ +
+
WebGL tutorial
+
A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.
+
+ +

Examples

+ +
+
A basic 2D WebGL animation example
+
This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.
+
WebGL by example
+
A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.
+
+ +

Advanced tutorials

+ +
+
WebGL model view projection
+
A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.
+
Matrix math for the web
+
A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.
+
+ +

Resources

+ + + +

Libraries

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}}
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}}
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Builds on top of WebGL 1. Based on OpenGL ES 3.0.
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Initial definition. Based on OpenGL ES 2.0
+ +

Browser compatibility

+ +

WebGL 1

+ +
+ + +

{{Compat("api.WebGLRenderingContext", 0)}}

+ +

WebGL 2

+ + + +

{{Compat("api.WebGL2RenderingContext", 0)}}

+
+ +

Compatibility notes

+ +

In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name webgl2.

+ +

Gecko notes

+ +

WebGL debugging and testing

+ +

Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:

+ +
+
webgl.min_capability_mode
+
A Boolean property that, when true, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is false by default.
+
webgl.disable_extensions
+
A Boolean property that, when true, disables all WebGL extensions. This is false by default.
+
+ +

See also

+ + diff --git a/files/it/web/api/websocket/index.html b/files/it/web/api/websocket/index.html new file mode 100644 index 0000000000..af8738a82a --- /dev/null +++ b/files/it/web/api/websocket/index.html @@ -0,0 +1,148 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +tags: + - API + - NeedsContent + - NeedsTranslation + - TopicStub + - WebSocket + - WebSockets +translation_of: Web/API/WebSocket +--- +
{{APIRef("Web Sockets API")}}
+ +

The WebSocket object provides the API for creating and managing a WebSocket connection to a server, as well as for sending and receiving data on the connection.

+ +

To construct a WebSocket, use the WebSocket() constructor.

+ +

Constructor

+ +
+
{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}
+
Returns a newly created WebSocket object.
+
+ +

Constants

+ + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValue
WebSocket.CONNECTING0
WebSocket.OPEN1
WebSocket.CLOSING2
WebSocket.CLOSED3
+ +

Properties

+ +
+
{{domxref("WebSocket.binaryType")}}
+
The binary data type used by the connection.
+
{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}
+
The number of bytes of queued data.
+
{{domxref("WebSocket.extensions")}} {{readonlyinline}}
+
The extensions selected by the server.
+
{{domxref("WebSocket.onclose")}}
+
An event listener to be called when the connection is closed.
+
{{domxref("WebSocket.onerror")}}
+
An event listener to be called when an error occurs.
+
{{domxref("WebSocket.onmessage")}}
+
An event listener to be called when a message is received from the server.
+
{{domxref("WebSocket.onopen")}}
+
An event listener to be called when the connection is opened.
+
{{domxref("WebSocket.protocol")}} {{readonlyinline}}
+
The sub-protocol selected by the server.
+
{{domxref("WebSocket.readyState")}} {{readonlyinline}}
+
The current state of the connection.
+
{{domxref("WebSocket.url")}} {{readonlyinline}}
+
The absolute URL of the WebSocket.
+
+ +

Methods

+ +
+
{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}
+
Closes the connection.
+
{{domxref("WebSocket.send", "WebSocket.send(data)")}}
+
Enqueues data to be transmitted.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
close
+
Fired when a connection with a WebSocket is closed.
+ Also available via the onclose property
+
error
+
Fired when a connection with a WebSockethas been closed because of an error, such as when some data couldn't be sent.
+ Also available via the onerror property.
+
message
+
Fired when data is received through a WebSocket.
+ Also available via the onmessage property.
+
open
+
Fired when a connection with a WebSocketis opened.
+ Also available via the onopen property.
+
+ +

Examples

+ +
// Create WebSocket connection.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Connection opened
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Listen for messages
+socket.addEventListener('message', function (event) {
+    console.log('Message from server ', event.data);
+});
+ +

Specifications

+ + + + + + + + + + + + +
SpecificationStatus
{{SpecName("HTML WHATWG", "#the-websocket-interface", "WebSocket")}}{{Spec2("HTML WHATWG")}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.WebSocket")}}

+
+ +

See also

+ + diff --git a/files/it/web/api/websocket/websocket/index.html b/files/it/web/api/websocket/websocket/index.html new file mode 100644 index 0000000000..8170b8aead --- /dev/null +++ b/files/it/web/api/websocket/websocket/index.html @@ -0,0 +1,48 @@ +--- +title: WebSocket() +slug: Web/API/WebSocket/WebSocket +translation_of: Web/API/WebSocket/WebSocket +--- +

{{APIRef("Web Sockets API")}}

+

Il costruttore WebSocket() restituisce un nuovo oggetto WebSocket {{domxref("WebSocket")}}.

+ +

Sintassi

+ +
var aWebSocket = new WebSocket(url [, protocols]);
+ +

Parametri

+ +
+
url
+
Corrisponde al URL al quale ci si vuole connetterse, questo dovrebbe essere l'URL a cui risponderà il server WebSocket.
+
protocols {{optional_inline}}
+
una singola stringa di protocollo o un array di stringhe di protocollo. Queste stringhe vengono utilizzate per indicare i sub-protocolli, in modo che un server possa implementare più sub-protocolli WebSocket (ad esempio, è possibile che un server sia in grado di gestire diversi tipi di interazioni a seconda del protocollo specificato). Se non si specifica una stringa di protocollo, si presume una stringa vuota.
+
+ +

Exceptions thrown

+ +
+
SECURITY_ERR
+
La porta a cui si sta tentando la connessione risulta bloccata.
+
+ +

Specifice

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-websocket', 'the WebSocket constructor')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibili

+ + diff --git a/files/it/web/api/window/alert/index.html b/files/it/web/api/window/alert/index.html new file mode 100644 index 0000000000..bfbb04052c --- /dev/null +++ b/files/it/web/api/window/alert/index.html @@ -0,0 +1,36 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +translation_of: Web/API/Window/alert +--- +

{{ APIRef }}

+ +

Mostra una finestra di avviso contenente il testo specificato.

+ +

Sintassi

+ +
window.alert(messaggio);
+
+ + + +

Esempio

+ +
window.alert("Ciao, mondo!");
+// il prefisso "window." è opzionale, quindi
+// alert("Ciao, mondo!"); ha lo stesso effetto
+
+ +

Note

+ +

La finestra di avviso dovrebbe essere utilizzata per i messaggi che non richiedono alcuna risposta da parte dell'utente, se non la conferma che tale messaggio è stato letto.

+ +

Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di permettere al resto dell'interfaccia del programma finchè la finestra non è chiusa. Non si dovrebbe abusare delle funzioni che creano questo tipo di finestre.

+ +

I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare u netidi di nsIPromptService, invece di alert.

+ +

Specifiche

+ +

HTML5

diff --git a/files/it/web/api/window/back/index.html b/files/it/web/api/window/back/index.html new file mode 100644 index 0000000000..7b24f97b28 --- /dev/null +++ b/files/it/web/api/window/back/index.html @@ -0,0 +1,27 @@ +--- +title: Window.back() +slug: Web/API/Window/back +translation_of: Web/API/Window/back +--- +
{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}
+ +

Sommario

+ +

Riporta la finestra corrente all'ultima pagina visitata, o alla pagina più indietro nella Cronologia del browser.

+ +

Sintassi

+ +
window.back()
+
+ +

Esempio

+ +
function vaiIndietro() {
+   if ( possoAndareIndietro )
+      window.back();
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/blur/index.html b/files/it/web/api/window/blur/index.html new file mode 100644 index 0000000000..de26372766 --- /dev/null +++ b/files/it/web/api/window/blur/index.html @@ -0,0 +1,26 @@ +--- +title: Window.blur() +slug: Web/API/Window/blur +translation_of: Web/API/Window/blur +--- +

{{APIRef}}

+ +

Deseleziona la finestra, come se l'utente avesse cliccato altrove.

+ +

Sintassi

+ +
window.blur()
+
+ +

Esempio

+ +
window.blur();
+
+ +

Note

+ +

Non ha effetto se la finestra non è selezionata. Si veda anche window.focus.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/close/index.html b/files/it/web/api/window/close/index.html new file mode 100644 index 0000000000..de07d87f7b --- /dev/null +++ b/files/it/web/api/window/close/index.html @@ -0,0 +1,72 @@ +--- +title: Window.close() +slug: Web/API/Window/close +translation_of: Web/API/Window/close +--- +

{{APIRef}}

+ +

Il metodo Window.close() chiude la finestra corrente, oppure quella sulla quale è invocato.

+ +

Questo metodo può essere invocato solo su finestre che sono state aperte da uno script  utilizzando il metodo {{domxref("window.open()")}}. Se la finestra non è stata aperta mediante script, nella Console JavaScript apparirà il seguente errore: Scripts may not close windows that were not opened by script.

+ +

Sintassi

+ +
window.close();
+ +

Esempi

+ +

Chiudere una finestra aperta mediante window.open()

+ +

Questo esempio mostra come chiudere una finestra aperta da uno script mediante l'invocazione di {{domxref("window.open()")}}.

+ +
<script>
+//Variabile globale in cui si memorizza un riferimento alla finestra aperta
+var openedWindow;
+
+function openWindow()
+{
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow()
+{
+  openedWindow.close();
+}
+</script>
+
+ +

Chiudere la finestra corrente

+ +

Quando si invoca direttamente il metodo close() sull'oggetto window, piuttosto che invocare close() su una istanza di window, il browser chiuderà la finestra in primo piano, indipendentemente dal fatto che uno script abbia creato quella finestra oppure no.  (Firefox 35.0.1: gli script non possono chiudere una finestra che non hanno aperto)

+ +
<script>
+function closeCurrentWindow()
+{
+  window.close();
+}
+</script>
+
+ +

Specifica

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}{{Spec2('HTML WHATWG')}} 
+ + +

Browser compatibility

+ + + +

{{Compat("api.Window.close")}}

diff --git a/files/it/web/api/window/closed/index.html b/files/it/web/api/window/closed/index.html new file mode 100644 index 0000000000..66152b63e7 --- /dev/null +++ b/files/it/web/api/window/closed/index.html @@ -0,0 +1,66 @@ +--- +title: Window.closed +slug: Web/API/Window/closed +translation_of: Web/API/Window/closed +--- +
{{APIRef}}
+ +

Questa proprietà indica se la finestra è chiusa.

+ +

Sintassi

+ +
var isClosed = window.closed;
+
+ +

Questa proprietà è di sola lettura.

+ +

Valori restituiti

+ +
+
isClosed
+
un booleano; valori possibili:
+
+ + + +

Esempi

+ +

Cambiare l'URL di una finestra da una popup

+ +

L'esempio seguente mostra come una finestra popup possa contenere codice JavaScript che modifichi l'URL della finestra che l'ha generata. Prima di tentare di modificare l'URL, controlleremo che la finestra corrente (la popup, appunto) abbia una "opener" utilizzando la proprietà window.opener e che l'opener non sia chiusa:

+ +
// controllo che l'opener esista e non sia chiusa
+if (window.opener && !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}
+
+ +

Si noti che le popup possono accedere solo a se stesse e alle finestre che le hanno generate.

+ +

Ricaricare una popup

+ +

In questo esempio la funzione aggiornaPopup() chiama il metodo reload() dell'oggetto location della popup per aggiornare il suo contenuto. Se la popup non è stata ancora aperta o l'utente l'ha chiusa, viene aperta una nuova finestra.

+ +
var finestraPopup = null;
+
+function aggiornaPopup() {
+  if (popupWindow && !popupWindow.closed) {
+    // finestraPopup è aperta, la aggiorno
+    finestraPopup.location.reload(true);
+  } else {
+    // apro una nuova popup
+    finestraPopup = window.open("popup.html","miaPopup");
+  }
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

Altre risorse

+ +

MSDN window.closed

diff --git a/files/it/web/api/window/confirm/index.html b/files/it/web/api/window/confirm/index.html new file mode 100644 index 0000000000..215e3091e5 --- /dev/null +++ b/files/it/web/api/window/confirm/index.html @@ -0,0 +1,47 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +tags: + - Window + - confirm +translation_of: Web/API/Window/confirm +--- +
{{ApiRef("Window")}}
+ +

Mostra una finestra di dialogo con un messaggio (opzionale) e due bottoni: OK e Annulla.

+ +

Sintassi

+ +
input = window.confirm(messaggio);
+
+ +

Parametri

+ +

messaggio
+      Una stringa che viene mostrata nella finestra di dialogo.

+ +

Valore ritornato

+ +

input
+      Un valore booleano che indica se è stato selezionato OK (true) o Annulla (false).

+ +

Esempio

+ +
if (window.confirm("vuoi vedere il mio vestito nuovo?")) {
+    window.open("vestito.html", "Il mio vestito nuovo", "");
+}
+
+ +

Note

+ +

Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di accedere al resto dell'interfaccia del programma finchè la finestra non viene chiusa. Per questo motivo, è meglio non abusare delle funzioni che creano questo tipo di finestre.

+ +

I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare i metodi di nsIPromptService, invece di alert.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

Altri metodi

+ +

alert, prompt

diff --git a/files/it/web/api/window/crypto/index.html b/files/it/web/api/window/crypto/index.html new file mode 100644 index 0000000000..65107e937c --- /dev/null +++ b/files/it/web/api/window/crypto/index.html @@ -0,0 +1,90 @@ +--- +title: Window.crypto +slug: Web/API/Window/crypto +translation_of: Web/API/Window/crypto +--- +
{{APIRef}}
+ +

La proprietà di sola lettura {{domxref("Window.crypto")}} ritorna l'oggetto {{domxref("Crypto")}} associato all'oggetto globale. Questo oggetto permette alle pagine web di accedere al alcuni servizi si crittografia.

+ +

Sintassi

+ +
var cryptoObj = window.crypto || window.msCrypto; // per IE 11
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}{{Spec2("Web Crypto API")}}Initial definition
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basic support44 {{CompatVersionUnknown}}{{CompatVersionUnknown}}6 {{property_prefix("ms")}}2019{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChrome for AndroidFirefox MobileFirefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Guarda anche

+ + diff --git a/files/it/web/api/window/defaultstatus/index.html b/files/it/web/api/window/defaultstatus/index.html new file mode 100644 index 0000000000..5212fabcd7 --- /dev/null +++ b/files/it/web/api/window/defaultstatus/index.html @@ -0,0 +1,38 @@ +--- +title: Window.defaultStatus +slug: Web/API/Window/defaultstatus +translation_of: Web/API/Window/defaultStatus +--- +
{{ApiRef()}}
+ +

Legge o imposta il testo predefinito della barra di stato della finestra a cui si riferisce l'oggetto window.

+ +

Sintassi

+ +
messaggio = window.defaultStatus
+window.defaultStatus =
+messaggio
+
+ +

Parameters

+ + + +

Esempio

+ +
<html>
+ <body onload="window.defaultStatus='ciao!';"/>
+  <button onclick="window.confirm('Sei sicuro di volertene andare?');">chiudi</button>
+ </body>
+</htm>
+
+ +

Note

+ +

Per impostare lo stato della finestra dopo che questa si è aperta, si può utilizzare window.status.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/devicemotion_event/index.html b/files/it/web/api/window/devicemotion_event/index.html new file mode 100644 index 0000000000..bbc0b22717 --- /dev/null +++ b/files/it/web/api/window/devicemotion_event/index.html @@ -0,0 +1,97 @@ +--- +title: devicemotion +slug: Web/API/Window/devicemotion_event +translation_of: Web/API/Window/devicemotion_event +--- +

L'evento devicemotion viene attivato a intervalli regolari e indica la quantità di forza fisica dell'accellezazione che il dispositivo riceve in quel dato momento. Fornisce inoltre informazioni circa la velocità di rotazione, se disponibili.

+ +

Informazioni Generali

+ +
+
Specifica
+
DeviceOrientation Event
+
Interfaccia
+
DeviceMotionEvent
+
Bubbles
+
No
+
Cancellabile
+
No
+
Bersaglio
+
DefaultView (window)
+
Azione predefinita
+
nessuna
+
+ +

Propietà

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not?
acceleration {{readonlyInline}}{{domxref("DeviceAcceleration")}}The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.
accelerationIncludingGravity {{readonlyInline}}{{domxref("DeviceAcceleration")}}The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.
interval {{readonlyInline}}doubleThe interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.
rotationRate {{readonlyInline}}{{domxref("DeviceRotationRate")}}The rates of rotation of the device about all three axes.
+ +

Esempio

+ +
function handleMotionEvent(event) {
+
+    var x = event.accelerationIncludingGravity.x;
+    var y = event.accelerationIncludingGravity.y;
+    var z = event.accelerationIncludingGravity.z;
+
+    // Fai qualcosa di maestoso.
+}
+
+window.addEventListener("devicemotion", handleMotionEvent, true);
+
+ +

Eventi correlati

+ + diff --git a/files/it/web/api/window/document/index.html b/files/it/web/api/window/document/index.html new file mode 100644 index 0000000000..5d98a10385 --- /dev/null +++ b/files/it/web/api/window/document/index.html @@ -0,0 +1,39 @@ +--- +title: Window.document +slug: Web/API/Window/document +translation_of: Web/API/Window/document +--- +
{{APIRef}}
+ +

Restituisce un riferimento al documento contenuto nella finestra.

+ +

Sintassi

+ +
doc = window.document
+
+ +

Parametri

+ + + +

Esempio

+ +
<html>
+<head>
+   <title>Ciao, mondo!</title>
+</head>
+<body>
+
+<script type="text/javascript">
+   var doc = window.document;
+   alert( doc.title);    // produce: Ciao, mondo!
+</script>
+
+</body>
+</html>
+ +

Specifiche

+ +

HTML

diff --git a/files/it/web/api/window/focus/index.html b/files/it/web/api/window/focus/index.html new file mode 100644 index 0000000000..696383a27c --- /dev/null +++ b/files/it/web/api/window/focus/index.html @@ -0,0 +1,26 @@ +--- +title: Window.focus() +slug: Web/API/Window/focus +translation_of: Web/API/Window/focus +--- +
{{APIRef}}
+ +

Seleziona la finestra, come se l'utente avesse cliccato su di essa.

+ +

Sintassi

+ +
window.focus()
+
+ +

Esempio

+ +
if (click) { window.focus(); }
+
+ +

Note

+ +

Non ha effetto se la finestra è già selezionata. Si veda anche window.blur.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/forward/index.html b/files/it/web/api/window/forward/index.html new file mode 100644 index 0000000000..e07fcaa219 --- /dev/null +++ b/files/it/web/api/window/forward/index.html @@ -0,0 +1,22 @@ +--- +title: Window.forward() +slug: Web/API/Window/forward +translation_of: Web/API/Window/forward +--- +
{{APIRef}}
+ +

Visualizza la pagina successiva che si trova nella Cronologia, come se l'utente avesse cliccato sul bottone Avanti.

+ +

Sintassi

+ +
window.forward()
+
+ +

Esempio

+ +
function vaiAvanti() { if (possoAndareAvanti) window.forward(); }
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/getselection/index.html b/files/it/web/api/window/getselection/index.html new file mode 100644 index 0000000000..c4f561801e --- /dev/null +++ b/files/it/web/api/window/getselection/index.html @@ -0,0 +1,46 @@ +--- +title: Window.getSelection() +slug: Web/API/Window/getSelection +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Window/getSelection +--- +

{{ ApiRef() }}

+ +

Restituisce un oggetto selection che rappresenta il testo selezionato dall'utente.

+ +

Sintassi

+ +
selection = window.getSelection() ;
+
+ + + +

Esempio

+ +
function esempio() {
+   var selezione = window.getSelection();
+   window.alert(selezione);
+   var range = selezione.getRangeAt(0);
+   // fai qualcosa con il range
+}
+
+ +

Note

+ +

In JavaScript, quando un oggetto selezione viene passato a una funzione che si aspetta una stringa (come window.alert o document.write), al suo posto viene passata una stringa, generalmente corrispondente al testo selezionato. Questo fa si che selection assomigli a una stringa, mentre invece è un normale oggetto dotato di metodi e proprietà. La stringa passata è infatti il risultato di toString().

+ +

Nell'esempio sopra, selezione è automaticamente "convertito" quando viene passato a window.alert. Tuttavia per utilizzare una proprietà o un metodo della classe String, come ad esempio length o substr, occorre chiamare esplicitamente il metodo toString.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuna specifica.

+ +

Vedi anche

+ +

Selection, Range

diff --git a/files/it/web/api/window/history/index.html b/files/it/web/api/window/history/index.html new file mode 100644 index 0000000000..5f087d8d0e --- /dev/null +++ b/files/it/web/api/window/history/index.html @@ -0,0 +1,37 @@ +--- +title: Window.history +slug: Web/API/Window/history +translation_of: Web/API/Window/history +--- +
{{APIRef}}
+ +

Restituisce un riferimento all'oggetto history, che fornisce un'interfaccia per manipolare la Cronologia del browser.

+ +

Sintassi

+ +
oggettoHistory = window.history
+
+ +

Parametri

+ + + +

Esempio

+ +
h = window.history;
+if ( h.length ) { // se c'è una cronologia
+    h.back();     // vai indietro nella cronologia
+}
+
+ +

Note

+ +

L'oggetto history fornisce la seguente interfaccia: current, length, next, previous, back(), forward(), go().

+ +

E' possibile accedere a questa interfaccia dall'oggetto window chiamando, per esempio, window.history.back().

+ +

Specifiche

+ +

HTML5

diff --git a/files/it/web/api/window/home/index.html b/files/it/web/api/window/home/index.html new file mode 100644 index 0000000000..ab9086cc2f --- /dev/null +++ b/files/it/web/api/window/home/index.html @@ -0,0 +1,24 @@ +--- +title: Window.home() +slug: Web/API/Window/home +translation_of: Web/API/Window/home +--- +
{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}
+ +

Rimanda il browser alla home page impostata.

+ +

Sintassi

+ +
window.home()
+
+ +

Esempio

+ +
function vai_a_casa() {
+  window.home();
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuna specifica.

diff --git a/files/it/web/api/window/index.html b/files/it/web/api/window/index.html new file mode 100644 index 0000000000..af317f6eab --- /dev/null +++ b/files/it/web/api/window/index.html @@ -0,0 +1,686 @@ +--- +title: Window +slug: Web/API/Window +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - TraduzioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Window +--- +

{{ ApiRef() }}

+ +

Introduzione

+ +

Questo capitolo contiene una breve reference per tutti i metodi, proprietà, ed eventi disponibili attraverso l'oggetto window del DOM. L'oggetto window implementa l'interfacciawindow , la quale eredita dall'interfaccia AbstractView.

+ +

L'oggetto window rappresenta una finestra, contenente un documento DOM. La proprietà document punta ad un DOM document ( documento DOM ) caricato in quella pagina

+ +

Ogni tab che viene aperta contiene il suo personale oggetto window; ciò significa che l'oggetto window non è condiviso fra le varie tab aperte nella stessa finestra. Solo due metodi vengono condivisi dai vari oggetti window presenti in una stessa finestra, e sono i metodi window.resizeTo e window.resizeBy.

+ +

Proprietà

+ +
+
window.Components
+
The entry point to many XPCOM features. Some properties, e.g. classes, are only available to sufficiently privileged code.
+
+ +
+
window.content and window._content
+
Returns a reference to the content element in the current window. The variant with underscore is deprecated.
+
+ +
+
window.closed
+
This property indicates whether the current window is closed or not.
+
+ +
+
window.controllers
+
Returns the XUL controller objects for the current chrome window.
+
+ +
+
window.crypto
+
Returns the browser crypto object.
+
+ +
+
window.defaultStatus
+
Gets/sets the status bar text for the given window.
+
+ +
+
window.directories
+
Returns a reference to the directories toolbar in the current chrome.
+
+ +
+
window.document
+
Returns a reference to the document that the window contains.
+
+ +
+
window.frameElement
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
+ +
+
window.frames
+
Returns an array of the subframes in the current window.
+
+ +
+
window.history
+
Returns a reference to the history object.
+
+ +
+
window.innerHeight
+
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
+
+ +
+
window.innerWidth
+
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
+
+ +
+
window.length
+
Returns the number of frames in the window.
+
+ +
+
window.location
+
Gets/sets the location, or current URL, of the window object.
+
+ +
+
window.locationbar
+
Returns the locationbar object, whose visibility can be toggled in the window.
+
+ +
+
window.menubar
+
Returns the menubar object, whose visibility can be toggled in the window.
+
+ +
+
window.name
+
Gets/sets the name of the window.
+
+ +
+
window.navigator
+
Returns a reference to the navigator object.
+
+ +
+
window.navigator.appCodeName
+
Returns the internal "code" name of the current browser.
+
+ +
+
window.navigator.appName
+
Returns the official name of the browser.
+
+ +
+
window.navigator.appVersion
+
Returns the version of the browser as a string.
+
+ +
+
window.navigator.cookieEnabled
+
Returns a boolean indicating whether cookies are enabled in the browser or not.
+
+ +
+
window.navigator.javaEnabled()
+
Indicates whether Java is enabled in the host browser.
+
+ +
+
window.navigator.language
+
Returns a string representing the language version of the browser.
+
+ +
+
window.navigator.mimeTypes
+
Returns a list of the MIME types supported by the browser.
+
+ +
+
window.navigator.oscpu
+
Returns a string that represents the current operating system.
+
+ +
+
window.navigator.platform
+
Returns a string representing the platform of the browser.
+
+ +
+
window.navigator.plugins
+
Returns an array of the plugins installed in the browser.
+
+ +
+
window.navigator.product
+
Returns the product name of the browser (e.g. "Gecko").
+
+ +
+
window.navigator.productSub
+
Returns the product version number (e.g. "5.0").
+
+ +
+
window.navigator.userAgent
+
Returns the user agent string for the current browser.
+
+ +
+
window.navigator.vendor
+
Returns the vendor name of the current browser (e.g. "Netscape6").
+
+ +
+
window.navigator.vendorSub
+
Returns the vendor version number (e.g. "6.1").
+
+ +
+
window.opener
+
Returns a reference to the window that opened this current window.
+
+ +
+
window.outerHeight
+
Gets the height of the outside of the browser window.
+
+ +
+
window.outerWidth
+
Gets the width of the outside of the browser window.
+
+ +
+
window.pageXOffset
+
Gets the amount of content that has been hidden by scrolling to the right.
+
+ +
+
window.pageYOffset
+
Gets the amount of content that has been hidden by scrolling down.
+
+ +
+
window.parent
+
Returns a reference to the parent of the current window or subframe.
+
+ +
+
window.personalbar
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
+ +
+
window.pkcs11
+
Returns the pkcs11 object, which can be used to install drivers and other software associated with the pkcs11 protocol.
+
+ +
+
window.prompter
+
Returns a reference to the prompt window, if any, currently displayed.
+
+ +
+
window.screen
+
Returns a reference to the screen object associated with the window.
+
+ +

The following is duplicated on DOM:window.screen

+ +
+
window.screen.availTop
+
Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.
+
+ +
+
window.screen.availLeft
+
Returns the first available pixel available from the left side of the screen.
+
+ +
+
window.screen.availHeight
+
Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.
+
+ +
+
window.screen.availWidth
+
Returns the amount of horizontal space in pixels available to the window.
+
+ +
+
window.screen.colorDepth
+
Returns the color depth of the screen.
+
+ +
+
window.screen.height
+
Returns the height of the screen in pixels.
+
+ +
+
window.screen.left
+
Gets/sets the current distance in pixels from the left side of the screen.
+
+ +
+
window.screen.pixelDepth
+
Gets the bit depth of the screen.
+
+ +
+
window.screen.top
+
Gets/sets the distance from the top of the screen.
+
+ +
+
window.screen.width
+
Returns the width of the screen.
+
+ +

end of duplicated content

+ +
+
window.screenX
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
+ +
+
window.screenY
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
+ +
+
window.scrollbars
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
+ +
+
window.scrollMaxX
+
The maximum offset that the window can be scrolled to horizontally.
+
(i.e., the document width minus the viewport width)
+
+ +
+
window.scrollMaxY
+
The maximum offset that the window can be scrolled to vertically.
+
(i.e., the document height minus the viewport height)
+
+ +
+
window.scrollX
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
+ +
+
window.scrollY
+
Returns the number of pixels that the document has already been scrolled vertically.
+
+ +
+
window.self
+
Returns an object reference to the window object itself.
+
+ +
+
window.sidebar
+
Returns a reference to the window object of the sidebar.
+
+ +
+
window.status
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
+ +
+
window.statusbar
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
+ +
+
window.toolbar
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
+ +
+
window.top
+
Returns a reference to the topmost window in the window hierarchy.
+
+ +
+
window.window
+
Returns a reference to the current window.
+
+ +

Metodi

+ +
+
window.alert
+
Displays an alert dialog.
+
+ +

base64 func https://bugzilla.mozilla.org/show_bug.cgi?id=287112 (see last comments) https://bugzilla.mozilla.org/show_bug.cgi?id=123003 http://lxr.mozilla.org/seamonkey/sou...indow.cpp#4946

+ +
+
window.atob
+
Decodes a string of data which has been encoded using base-64 encoding.
+
+ +
+
window.back
+
Moves back one in the window history.
+
+ +
+
window.blur
+
Sets focus away from the window.
+
+ +
+
window.btoa
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
+ +
+
window.captureEvents {{ Obsolete_inline() }}
+
Registers the window to capture all events of the specified type.
+
+ +
+
window.clearInterval
+
Cancels the repeated execution set using setInterval.
+
+ +
+
window.clearTimeout
+
Clears a delay that's been set for a specific function.
+
+ +
+
window.close
+
Closes the current window.
+
+ +
+
window.confirm
+
Displays a dialog with a message that the user needs to respond to.
+
+ +
+
window.dump
+
Writes a message to the console.
+
+ +
+
window.escape
+
Encodes a string.
+
+ +
+
window.focus
+
Sets focus on the current window.
+
+ +
+
window.forward
+
Moves the window one document forward in the history.
+
+ +
+
window.getAttention
+
Flashes the application icon.
+
+ +
+
window.getComputedStyle
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
+ +
+
window.getSelection
+
Returns the selection object representing the selected item(s).
+
+ +
+
window.home
+
Returns the browser to the home page.
+
+ +
+
window.moveBy
+
Moves the current window by a specified amount.
+
+ +
+
window.moveTo
+
Moves the window to the specified coordinates.
+
+ +
+
window.open
+
Opens a new window.
+
+ +
+
window.openDialog
+
Opens a new dialog window.
+
+ +
+
window.print
+
Prints the current document.
+
+ +
+
window.prompt
+
Returns the text entered by the user in a prompt dialog.
+
+ +
+
window.releaseEvents {{ Obsolete_inline() }}
+
Releases the window from trapping events of a specific type.
+
+ +
+
window.resizeBy
+
Resizes the current window by a certain amount.
+
+ +
+
window.resizeTo
+
Dynamically resizes window.
+
+ +
+
window.scroll
+
Scrolls the window to a particular place in the document.
+
+ +
+
window.scrollBy
+
Scrolls the document in the window by the given amount.
+
+ +
+
window.scrollByLines
+
Scrolls the document by the given number of lines.
+
+ +
+
window.scrollByPages
+
Scrolls the current document by the specified number of pages.
+
+ +
+
window.scrollTo
+
Scrolls to a particular set of coordinates in the document.
+
+ +
+
window.setInterval
+
Execute a function each X milliseconds.
+
+ +
+
window.setTimeout
+
Sets a delay for executing a function.
+
+ +
+
window.sizeToContent
+
Sizes the window according to its content.
+
+ +
+
window.stop
+
This method stops window loading.
+
+ +
+
window.unescape
+
Unencodes a value that has been encoded in hexadecimal (e.g. a cookie).
+
+ +
+
window.updateCommands
+
+ +

Gestori di Eventi

+ +
+
window.onabort
+
An event handler property for abort events on the window.
+
+ +
+
window.onblur
+
An event handler property for blur events on the window.
+
+ +
+
window.onchange
+
An event handler property for change events on the window.
+
+ +
+
window.onclick
+
An event handler property for click events on the window.
+
+ +
+
window.onclose
+
An event handler property for handling the window close event.
+
+ +
+
window.ondragdrop
+
An event handler property for drag and drop events on the window.
+
+ +
+
window.onerror
+
An event handler property for errors raised on the window.
+
+ +
+
window.onfocus
+
An event handler property for focus events on the window.
+
+ +
+
window.onkeydown
+
An event handler property for keydown events on the window.
+
+ +
+
window.onkeypress
+
An event handler property for keypress events on the window.
+
+ +
+
window.onkeyup
+
An event handler property for keyup events on the window.
+
+ +
+
window.onload
+
An event handler property for window loading.
+
+ +
+
window.onmousedown
+
An event handler property for mousedown events on the window.
+
+ +
+
window.onmousemove
+
An event handler property for mousemove events on the window.
+
+ +
+
window.onmouseout
+
An event handler property for mouseout events on the window.
+
+ +
+
window.onmouseover
+
An event handler property for mouseover events on the window.
+
+ +
+
window.onmouseup
+
An event handler property for mouseup events on the window.
+
+ +
+
window.onpaint
+
An event handler property for paint events on the window.
+
+ +
+
window.onreset
+
An event handler property for reset events on the window.
+
+ +
+
window.onresize
+
An event handler property for window resizing.
+
+ +
+
window.onscroll
+
An event handler property for window scrolling.
+
+ +
+
window.onselect
+
An event handler property for window selection.
+
+ +
+
window.onsubmit
+
An event handler property for submits on window forms.
+
+ +
+
window.onunload
+
An event handler property for unload events on the window.
+
+ +

{{ languages( { "fr": "fr/DOM/window", "pl": "pl/DOM/window", "en": "en/DOM/window" } ) }}

diff --git a/files/it/web/api/window/localstorage/index.html b/files/it/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..f17f5cece8 --- /dev/null +++ b/files/it/web/api/window/localstorage/index.html @@ -0,0 +1,138 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

La proprietà read-only localStorage ti permette di accedere all'oggetto {{domxref("Storage")}} per l'origine del {{domxref("Document")}}; i dati persistono anche tra diverse sessioni browser. localStorage è simile a sessionStorage, ma si differenzia dal fatto che i dati salvati con localStoragenon hanno  expiration time, i dati salvati in sessionStorage vengono cancellati al termine della sessione della pagina — cioé, quando la pagina viene chiusa.

+ +

Si dovrebbe notare che i dati salvati in entrambi localStorage o sessionStorage sono specifici rispetto al protocollo della pagina.

+ +

Sintassi

+ +
myStorage = window.localStorage;
+ +

Valore

+ +

L'oggetto {{domxref("Storage")}} che puo essere usato per accedere alla memoria del localStorage.

+ +

Eccezioni

+ +
+
SecurityError
+
La richiesta viola la policy decision, o l'origine non è un valido scheme/host/port tuple (può succedere, per esempio, se l'origine usa lo schemafile: o data: ). Per esempio, l'utente può aver il browser configurato a negare i permessi di dati persistenti.
+
+ +

Esempi

+ +

Il seguente snippet accede all'oggetto local {{domxref("Storage")}} del dominio e aggiunge i dati usando {{domxref("Storage.setItem()")}}.

+ +
localStorage.setItem('myCat', 'Tom');
+ +

La sintassi per leggere localStorage è la seguente:

+ +
var cat = localStorage.getItem("myCat");
+ +

La sintassi per rimuovere dati da localStorage è la seguente:

+ +
localStorage.removeItem("myCat");
+ +
+

Note: Riferimenti di esempi completi all'articolo: Usare lo Web Storage API.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatusCommento
{{SpecName('HTML WHATWG', 'webstorage.html#dom-localstorage', 'localStorage')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatVersionUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Tutti i browsers hanno livelli di capacità vari per entrambilocalStorage e {{domxref("sessionStorage")}}. Qui una dettagliata lista di tutte le capacità di vari browser.

+ +
+

Note: A partire da iOS 5.1, Safari Mobile salva i dati di localStorage nella cartella cache, che è soggetta a rimozioni occasionali. Safari Mobile in Private mode previene la scrittura al localStorage.

+
+ +

Consulta anche

+ + diff --git a/files/it/web/api/window/locationbar/index.html b/files/it/web/api/window/locationbar/index.html new file mode 100644 index 0000000000..583c6def10 --- /dev/null +++ b/files/it/web/api/window/locationbar/index.html @@ -0,0 +1,43 @@ +--- +title: Window.locationbar +slug: Web/API/Window/locationbar +translation_of: Web/API/Window/locationbar +--- +
{{APIRef}}
+ +

Restituisce l'oggetto locationbar, che può essere reso invisibile.

+ +

Sintassi

+ +
oggetto = window.locationbar
+
+ +

Esempio

+ +

Il seguente esempio completo mostra un possibile modo per utilizzare la proprietà visible dei vari oggetti "bar" (quelli che rappresentano una qualsiasi barra); mostra anche come cambiare i privilegi necessari per modificare tale proprietà.

+ +

The following complete HTML example shows way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.

+ +
<html>
+<head>
+  <title>Esperimenti sul DOM</title>
+  <script>
+    // modifico lo stato della barra in questa finestra
+    netscape.security.PrivilegeManager.
+        enablePrivilege("UniversalBrowserWrite");
+    window.statusbar.visible=!window.statusbar.visible;
+  </script>
+</head>
+<body>
+  <p>Esperimenti sul DOM</p>
+</body>
+</html>
+
+ +

Note

+ +

Quando si carica l'esempio sopra riportato, il browser mostra una finestra di avviso. Si veda anche: window.menubar, window.personalbar, window.scrollbars, window.statusbar, window.toolbar

+ +

Specifiche

+ +

HTML5

diff --git a/files/it/web/api/window/matchmedia/index.html b/files/it/web/api/window/matchmedia/index.html new file mode 100644 index 0000000000..a4dc984d9a --- /dev/null +++ b/files/it/web/api/window/matchmedia/index.html @@ -0,0 +1,91 @@ +--- +title: Window.matchMedia() +slug: Web/API/Window/matchMedia +translation_of: Web/API/Window/matchMedia +--- +

Sommario

+ +

Restituisce un nuovo oggetto {{domxref("MediaQueryList")}} che rappresenta i risultati dell'anaisi effettuta in base alla  stringa media query specificata.

+ +

Sintassi

+ +
mql = window.matchMedia(mediaQueryString)
+ +

dove QueryString è una stringa che rappresenta la ricerca media query per la quale restituire il nuovo oggetto {{domxref("MediaQueryList")}} .

+ +

Esempio

+ +
if (window.matchMedia("(min-width: 400px)").matches) {
+  /* the viewport is at least 400 pixels wide */
+} else {
+  /* the viewport is less than 400 pixels wide */
+}
+ +

Questo codice permette di gestire la pagina in modo diverso quando la finestra è molto piccola.

+ +

Vedere Using media queries from code per altri esempi.

+ +

Compatibilità browser

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatGeckoDesktop("6.0")}}1012.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatGeckoMobile("6.0")}}{{CompatNo}}12.15
+
+ +

Specifica

+ + + +

Vedere anche

+ + diff --git a/files/it/web/api/window/moveby/index.html b/files/it/web/api/window/moveby/index.html new file mode 100644 index 0000000000..41f373f9eb --- /dev/null +++ b/files/it/web/api/window/moveby/index.html @@ -0,0 +1,36 @@ +--- +title: Window.moveBy() +slug: Web/API/Window/moveBy +translation_of: Web/API/Window/moveBy +--- +
{{APIRef}}
+ +

Sposta la finestra di un certo numero di pixel.

+ +

Sintassi

+ +
window.moveBy(x,
+y)
+
+ +

Parametri

+ + + +

Esempio

+ +
 function in_alto_a_destra() {
+    moveBy(10, -10);
+ }
+
+ +

Note

+ +

E' possibile utilizzare numeri negativi come parametri. Questa funzione esegue uno spostamento della finestra relativamente alla sua posizione attuale, mentre window.moveTo la sposta in un punto assoluto.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/moveto/index.html b/files/it/web/api/window/moveto/index.html new file mode 100644 index 0000000000..5e9b2c271c --- /dev/null +++ b/files/it/web/api/window/moveto/index.html @@ -0,0 +1,37 @@ +--- +title: Window.moveTo() +slug: Web/API/Window/moveTo +translation_of: Web/API/Window/moveTo +--- +
{{APIRef}}
+ +

Sposta la finestra alle coordinate specificate.

+ +

Sintassi

+ +
window.moveTo(x,
+y)
+
+ +

Parametri

+ + + +

Esempio

+ +
 function origine() {
+    // sposta la finestra all'angolo in alto a sinistra
+    window.moveTo(0, 0)
+ }
+
+ +

Note

+ +

Le coordinate iniziali sono 0, 0 e rappresentano l'angolo in alto a sinistra dello schermo. Questa funzione sposta la finestra in un punto assoluto, mentre window.moveBy la sposta relativamente alla sua posizione attuale.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/name/index.html b/files/it/web/api/window/name/index.html new file mode 100644 index 0000000000..8127d67285 --- /dev/null +++ b/files/it/web/api/window/name/index.html @@ -0,0 +1,23 @@ +--- +title: Window.name +slug: Web/API/Window/name +translation_of: Web/API/Window/name +--- +

{{APIRef}}
+ Restituisce o imposta il nome della finestra.

+ +

Sintassi

+ +
stringa = window.name
+ window.name =
+stringa
+
+ +

Esempio

+ +
window.name = "vista1";
+
+ +

Note

+ +

Il nome della finestra viene utilizzato soprattutto per impostare i target dei link e dei form. In realtà una finestra non deve necessariamente avere un nome.

diff --git a/files/it/web/api/window/onuserproximity/index.html b/files/it/web/api/window/onuserproximity/index.html new file mode 100644 index 0000000000..41f760ee44 --- /dev/null +++ b/files/it/web/api/window/onuserproximity/index.html @@ -0,0 +1,45 @@ +--- +title: Window.onuserproximity +slug: Web/API/Window/onuserproximity +translation_of: Web/API/Window/onuserproximity +--- +

{{ ApiRef() }}

+ +

La proprietà Window.onuserproxymity rappresenta un {{domxref("EventHandler")}}, una funzione che viene richiamata quando l'evento {{event("userproximity")}} si verifica. Questi eventi sono del tipo {{domxref("UserProximityEvent")}} e si verificano quando il sensore di prossimità del dispositivo individua che un oggetto si sta avvicinando.

+ +

Sintassi

+ +
window.onuserproximity = eventHandler
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{ SpecName('Proximity Events', '#user-proximity', 'Proximity Events') }}{{ Spec2('Proximity Events') }}Specifica iniziale
+ +

Compatibilità browser

+ + + +

{{Compat("api.Window.onuserproximity")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/api/window/opener/index.html b/files/it/web/api/window/opener/index.html new file mode 100644 index 0000000000..368b0a2f74 --- /dev/null +++ b/files/it/web/api/window/opener/index.html @@ -0,0 +1,24 @@ +--- +title: Window.opener +slug: Web/API/Window/opener +translation_of: Web/API/Window/opener +--- +
{{APIRef}}
+ +

Restituisce un riferimento alla finestra che ha aperto la finestra corrente.

+ +

Sintassi

+ +
oggetto = window.opener
+
+ +

Esempio

+ +
 if window.opener != finestraPrincipale {
+     vaiInizio(window.opener);
+ }
+
+ +

Note

+ +

Quando una finestra viene aperta come popup da un'altra finestra, mantiene un riferimento a quest'ultima a cui si può accedere con window.opener. Se la finestra corrente non ha un "opener", questo metodo restituisce null.

diff --git a/files/it/web/api/window/orientationchange_event/index.html b/files/it/web/api/window/orientationchange_event/index.html new file mode 100644 index 0000000000..ba6e0dc550 --- /dev/null +++ b/files/it/web/api/window/orientationchange_event/index.html @@ -0,0 +1,66 @@ +--- +title: orientationchange +slug: Web/API/Window/orientationchange_event +translation_of: Web/API/Window/orientationchange_event +--- +

L'evento orientationchange si scatena quando viene modificato l'orientamento del dispositivo.

+ +

Informazioni generali

+ +
+
Specification
+
Compatibility Living Standard
+
Interface
+
Event
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Screen
+
Default Action
+
None
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Example

+ +
// Note that "orientationchange" and screen.orientation are unprefixed in the following
+// code although this API is still vendor-prefixed browsers implementing it.
+window.addEventListener("orientationchange", function() {
+    alert("the orientation of the device is now " + screen.orientation.angle);
+});
+
diff --git a/files/it/web/api/window/print/index.html b/files/it/web/api/window/print/index.html new file mode 100644 index 0000000000..87f63a0b44 --- /dev/null +++ b/files/it/web/api/window/print/index.html @@ -0,0 +1,17 @@ +--- +title: Window.print() +slug: Web/API/Window/print +translation_of: Web/API/Window/print +--- +
{{APIRef}}
+ +

Apre una finestra di stampa per stampare il documento corrente.

+ +

Sintassi

+ +
window.print()
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/prompt/index.html b/files/it/web/api/window/prompt/index.html new file mode 100644 index 0000000000..a3336c95be --- /dev/null +++ b/files/it/web/api/window/prompt/index.html @@ -0,0 +1,51 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +
{{APIRef}}
+ +

Mostra una finestra di dialogo che chiede all'utente di inserire del testo.

+ +

Sintassi

+ +
input = window.prompt(
+testo,
+valore);
+
+ + + +

Esempio

+ +
var segno = prompt("Di che segno sei?");
+if (segno.toLowerCase() == "scorpione")
+   alert("Ma dai!.. anch'io!!!");
+
+ +

Quando l'utente clicca il bottone OK, viene restituito il testo che ha digitato. Se l'utente clicca su OK senza aver inserito del testo, viene restituita una stringa vuota. Se invece l'utente clicca su Cancella, la funzione restituisce null.

+ +

Note

+ +

Una finestra di dialogo contiene un campo di testo di una sola riga, un bottone OK e un bottone Cancella. La funzione restituisce il testo (eventualmente vuoto) inserito dall'utente nel campo di testo.

+ +

A prompt dialog contains a single-line textbox, a Cancel button, and an OK button, and returns the (possibly empty) text the user inputted into that textbox.

+ +

Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di permettere al resto dell'interfaccia del programma finchè la finestra non è chiusa. Non si dovrebbe abusare delle funzioni che creano questo tipo di finestre.

+ +

I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare u netidi di nsIPromptService, invece di alert.

+ +

Specifiche

+ +

HTML5

+ +

Altri metodi

+ + diff --git a/files/it/web/api/window/requestanimationframe/index.html b/files/it/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..f3c835b671 --- /dev/null +++ b/files/it/web/api/window/requestanimationframe/index.html @@ -0,0 +1,115 @@ +--- +title: window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - Animations + - Animazioni + - DOM + - DOM Reference + - Drawing + - Graphics + - Performance + - Reference + - Window + - requestAnimationFrame +translation_of: Web/API/window/requestAnimationFrame +--- +
{{APIRef}}
+ +
Il metodo window.requestAnimationFrame()indica al browser che intendi eseguire un'animazione e desideri che il browser richiami una funzione specifica per aggiornare un'animazione prima che venga eseguito nuovamente il render del browser. Il metodo accetta una funzione di callback come argomento che verrà eseguita prima del nuovo render del browser.
+ +
 
+ +
Nota: la funzione di callback deve chiamare a sua volta requestAnimationFrame() se vuoi animare un'altro frame alla successiva azione di render del browser.
+ +

Dovresti chiamare questo metodo ogni qualvolta intendi aggiornare lo stato della tua animazione sul monitor. In questo modo la tua richiesta verrà eseguita prima che il browser esegua nuvamente il render della pagina. Il numero di esecuzioni della callback è generalmente di 60 volte al secondo, ma di solito rispetta il refresh-rate del display per quasi tutti i browser secondo le raccomandazioni W3C.
+ L'esecuzione di requestAnimationFrame() vengono messe in pausa in quasi tutti i browser quando la pagina è eseguita in un tab non visibile on in un {{ HTMLElement("iframe") }} non visibile in modo da migliorare le performance e l'utilizzo della batteria.

+ +

Alla funzione di callback viene passato come singolo argomento il parametro {{domxref("DOMHighResTimeStamp")}} che indica i momento corrente in cui viene eseguito dalla coda di requestAnimationFrame()
+ Nel caso di callback multiple in un singolo frame, ogni funzione riceve lo stesso timestamp anche se è trascorso del tempo durante il calcolo di ogni processo.
+ Il timestamp è un numero decimale, in millisecondi, con una precisione di 1ms (1000µs).

+ +

Sintassi

+ +
window.requestAnimationFrame(callback);
+
+ +

Parametri

+ +
+
callback
+
Il parametro che specifica la funzione di callback da richiamare prima che venga eseguito il render successivo della pagina.
+ La funzione accetta un solo parametro, {{domxref("DOMHighResTimeStamp")}}, che indica il momento esatto (nel formato {{domxref('performance.now()')}}) in cui requestAnimationFrame() inizia la sua esecuzione.
+
+ +

Valori di ritorno

+ +

Un valore intero di tipo long, l'id della richiesta che identifica univocamente la callback specifica nella lista di callback. Questo è un valore assoluto, ma non dovresti fare nessun tipo di ragionamento sulla base di questo valore. Puoi, però, usare questo valore per passarlo a {{domxref("window.cancelAnimationFrame()")}} in modo da  rimuovere/cancellare la callback dalla coda di richieste da eseguire.

+ +

Esempio

+ +
var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+element.style.position = 'absolute';
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress < 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}{{Spec2('HTML WHATWG')}} +

Nessun cambiamento. Sostituisce il precedente.

+
{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}{{Spec2('RequestAnimationFrame')}} +

Definizione iniziale

+
+ +

Compatibilità del Browser

+ +
+ + +

{{Compat("api.Window.requestAnimationFrame")}}

+
+ +

Leggi anche

+ + diff --git a/files/it/web/api/window/resizeby/index.html b/files/it/web/api/window/resizeby/index.html new file mode 100644 index 0000000000..ee662251c4 --- /dev/null +++ b/files/it/web/api/window/resizeby/index.html @@ -0,0 +1,35 @@ +--- +title: Window.resizeBy() +slug: Web/API/Window/resizeBy +translation_of: Web/API/Window/resizeBy +--- +

{{APIRef}}

+ +

Aumenta o diminuisce le dimensioni della finestra di un certo numero di pixel.

+ +

Sintassi

+ +
window.resizeBy(xDelta,
+yDelta)
+
+ +

Parametri

+ + + +

Esempio

+ +
// rimpicciolisce la finestra
+window.resizeBy(-200, -200);
+
+ +

Note

+ +

Questo metodo ridimensiona la finestra relativamente alle sue dimensioni attuali. Per ridimensionare la finestra in termini assoluti, è possibile utilizzare window.resizeTo.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/resizeto/index.html b/files/it/web/api/window/resizeto/index.html new file mode 100644 index 0000000000..c716aa0411 --- /dev/null +++ b/files/it/web/api/window/resizeto/index.html @@ -0,0 +1,39 @@ +--- +title: Window.resizeTo() +slug: Web/API/Window/resizeTo +translation_of: Web/API/Window/resizeTo +--- +

{{APIRef}}

+ +

Ridimensiona la finestra dinamicamente.

+ +

Sintassi

+ +
window.resizeTo(larghezza,
+altezza)
+
+ +

Parameters

+ + + +

Esempio

+ +
 // questa funzione ridimensiona la finestra
+ // e fa in modo che occupi metà dello schermo
+ function ridimensiona() {
+   window.resizeTo(window.screen.availWidth/2,
+      window.screen.availHeight/2);
+ }
+
+ +

Note

+ +

Si veda anche window.resizeBy.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/sessionstorage/index.html b/files/it/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..06c3b48c4a --- /dev/null +++ b/files/it/web/api/window/sessionstorage/index.html @@ -0,0 +1,138 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +translation_of: Web/API/Window/sessionStorage +--- +

{{APIRef()}}

+ +

La proprietà sessionStorage permette di accedere all'oggetto di sessione {{domxref("Storage")}}. sessionStorage è simile a  {{domxref("Window.localStorage")}}, l'unica differenza è che mentre i dati salvati in localStorage non hanno scadenza, i dati in sessionStorage vengono ripuliti ogniqualvolta la sessione della pagina termina. La sessione della pagina dura fino a quando il browser è aperto e sopravvive alla ricarica della pagina e al ripristino. L'apertura di una pagina in un nuovo tab o in una nuova finestra implica l'apertura di una nuova sessione, il che differisce da come funzionano i cookie di sessione.

+ +

Va ricordato che i dati memorizzati nel sessionStorage o localStorage sono specifici per il protocollo della pagina.

+ +
// Salva i dati nel sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// Recupare i dati dal sessionStorage
+var data = sessionStorage.getItem('key');
+ +

Value

+ +

Un oggetto {{domxref("Storage")}}.

+ +

Example

+ +

Il seguente esempio accede all'oggetto di sessione corrente  {{domxref("Storage")}} e vi aggiunge un elemento tramite  {{domxref("Storage.setItem()")}}.

+ +
sessionStorage.setItem('myCat', 'Tom');
+ +

Il seguente esempio salva automaticamente il contenuto di un campo di testo e se la pagina del browser viene ricaricata, ripristina il contenuto del campo di testo in modo da non perdere nessuna digitazione.

+ +
// Ottiene il campo di testo
+var field = document.getElementById("field");
+
+// Verifica se ha un valore di salvataggio automatico (autosave)
+// (succederò solo se la pagina viene ricaricata accidentalmente)
+if (sessionStorage.getItem("autosave")) {
+  // Ripristina il contenuto del campo di testo
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Rimane in ascolto di cambiamenti sul campo di testo
+field.addEventListener("change", function() {
+  // E salva i risultati nell'oggetto sessionStorage
+  sessionStorage.setItem("autosave", field.value);
+});
+ +

 

+ +
+

Nota: Fare riferimento a Using the Web Storage API per un esempio completo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoComment
{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto Base2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Ogni browser ha un livello di supporto differente per localStorage e sessionStorage. 

+ +
+

Nota: da iOS 5.1, Safari Mobile salva i dati del localStorage nella directory cache, che è soggetta a pulizie occasinonali, tipicamente quando lo c'è poco spazio disponibile.

+
+ +

Vedere anche

+ + diff --git a/files/it/web/api/window/sidebar/index.html b/files/it/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..280b5dcce3 --- /dev/null +++ b/files/it/web/api/window/sidebar/index.html @@ -0,0 +1,56 @@ +--- +title: Window.sidebar +slug: Web/API/Window/sidebar +tags: + - DOM + - NeedsTranslation + - Non-standard + - Property + - Reference + - TopicStub + - Window +translation_of: Web/API/Window/sidebar +--- +
{{APIRef}} {{Non-standard_header}}
+ +

Returns a sidebar object, which contains several methods for registering add-ons with the browser.

+ +

Notes

+ +

The sidebar object returned has the following methods:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription (SeaMonkey)Description (Firefox)
addPanel(title, contentURL, "")Adds a sidebar panel.Obsolete since Firefox 23 (only present in SeaMonkey).
+ End users can use the "load this bookmark in the sidebar" option instead. Also see Creating a Firefox sidebar.
addPersistentPanel(title, contentURL, "")Adds a sidebar panel, which is able to work in the background.
AddSearchProvider(descriptionURL)Installs a search provider (OpenSearch). Adding OpenSearch search engines contains more details. Added in Firefox 2.
addSearchEngine(engineURL, iconURL, suggestedTitle, suggestedCategory) {{Obsolete_inline(44)}}Installs a search engine (Sherlock). Adding Sherlock search engines contains more details.
IsSearchProviderInstalled(descriptionURL)Indicates if a specific search provider (OpenSearch) is installed.
+ +

Specification

+ +

Mozilla-specific. Not part of any standard.

diff --git a/files/it/web/api/window/sizetocontent/index.html b/files/it/web/api/window/sizetocontent/index.html new file mode 100644 index 0000000000..4880ff9fbd --- /dev/null +++ b/files/it/web/api/window/sizetocontent/index.html @@ -0,0 +1,15 @@ +--- +title: window.sizeToContent +slug: Web/API/Window/sizeToContent +translation_of: Web/API/Window/sizeToContent +--- +

Sommario

+

Ridimensiona automaticamente la finestra perchè si adatti al suo contenuto.

+

Sintassi

+
window.sizeToContent()
+
+

Esempio

+
window.sizeToContent();
+
+

Specifiche

+

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/status/index.html b/files/it/web/api/window/status/index.html new file mode 100644 index 0000000000..4b008c0afc --- /dev/null +++ b/files/it/web/api/window/status/index.html @@ -0,0 +1,26 @@ +--- +title: Window.status +slug: Web/API/Window/status +translation_of: Web/API/Window/status +--- +
{{APIRef("DOM")}}
+ +

Legge o imposta il testo della barra di stato della finestra a cui si riferisce l'oggetto window.

+ +

Sintassi

+ +
stringa = window.status
+window.status =
+stringa
+
+ +

Esempio

+ +
while ( attesa ) {
+   window.status = "Sto caricando...";
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/statusbar/index.html b/files/it/web/api/window/statusbar/index.html new file mode 100644 index 0000000000..6eb17fc2d8 --- /dev/null +++ b/files/it/web/api/window/statusbar/index.html @@ -0,0 +1,32 @@ +--- +title: window.statusbar +slug: Web/API/Window/statusbar +translation_of: Web/API/Window/statusbar +--- +

Sommario

+

Restituisce l'oggetto statusbar, che rappresenta la barra di stato, la cui visibilità può essere disabilitata nel browser.

+

Sintassi

+
oggetto = window.statusbar
+
+

Esempio

+

Il seguente esempio completo mostra un possibile modo per utilizzare la proprietà visible dei vari oggetti "bar" (quelli che rappresentano una qualsiasi barra); mostra anche come cambiare i privilegi necessari per modificare tale proprietà.

+
<html>
+<head>
+  <title>Esperimenti sul DOM</title>
+  <script>
+    // modifico lo stato della barra in questa finestra
+    netscape.security.PrivilegeManager.
+        enablePrivilege("UniversalBrowserWrite");
+    window.statusbar.visible=!window.statusbar.visible;
+  </script>
+</head>
+<body>
+  <p>Esperimenti sul DOM</p>
+</body>
+</html>
+
+

Note

+

Quando si carica l'esempio sopra riportato, il browser mostra una finestra di avviso.

+

Si veda anche: window.locationbar, window.menubar, window.personalbar, window.scrollbars, window.toolbar

+

Specifiche

+

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/stop/index.html b/files/it/web/api/window/stop/index.html new file mode 100644 index 0000000000..f807d3b843 --- /dev/null +++ b/files/it/web/api/window/stop/index.html @@ -0,0 +1,17 @@ +--- +title: window.stop +slug: Web/API/Window/stop +translation_of: Web/API/Window/stop +--- +

Sommario

+

Ferma il caricamento del documento corrente.

+

Sintassi

+
window.stop()
+
+

Esempio

+
window.stop();
+
+

Note

+

Il metodo stop() riproduce ciò che accade quando l'utente clicca sul bottone stop del browser. Per via dell'ordine in cui vengono caricati gli script, questo metodo non può fermare il caricamento del documento in cui è contenuto, ma può fermare il caricamento di grandi immagini, nuove finestre e altri oggetti collegati al documento.

+

Specifiche

+

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/top/index.html b/files/it/web/api/window/top/index.html new file mode 100644 index 0000000000..e884cc29d3 --- /dev/null +++ b/files/it/web/api/window/top/index.html @@ -0,0 +1,87 @@ +--- +title: Window.top +slug: Web/API/Window/top +tags: + - API + - DOM + - Property + - Reference + - Window +translation_of: Web/API/Window/top +--- +

{{ APIRef }}

+ +

Sommario

+ +

Ritorna un riferimento all'oggetto window più esterno nella gerarchia.

+ +

Sintassi

+ +
var topWindow = window.top;
+
+ +

Note

+ +

Mentre proprietà  window.parent restituisce un rifermiento alla window direttamente superiore, la proprietà window.top restituisce un riferimento alla window più alta nella gerarchia delle windows (la più esterna)

+ +

Questa proprietà è particolarmente utile quando quando si sta lavorando da una window che può avere una o più windows che la contengono, in questo modo è possibile avere un riferimento alla window più esterna

+ +

Specifica

+ +

HTML5

+ +

Compatibilità con i browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Gecko notes

+ +
+

Note: dalla versione {{Gecko ("6.0")}}, questa proprietà è read only.

+
diff --git a/files/it/web/api/windoworworkerglobalscope/fetch/index.html b/files/it/web/api/windoworworkerglobalscope/fetch/index.html new file mode 100644 index 0000000000..057ab069a2 --- /dev/null +++ b/files/it/web/api/windoworworkerglobalscope/fetch/index.html @@ -0,0 +1,167 @@ +--- +title: WindowOrWorkerGlobalScope.fetch() +slug: Web/API/WindowOrWorkerGlobalScope/fetch +translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +--- +
{{APIRef("Fetch API")}}
+ +

Il metodo fetch() del mixin {{domxref("WindowOrWorkerGlobalScope")}} avvia il processo di recupero di una risorsa dalla rete. Questo ritorna una "promise" che si risolve all'oggetto {{domxref("Response")}} che rappresenta la risposta alla tua richiesta.

+ +

WorkerOrGlobalScope è implementato sia da {{domxref("Window")}} sia da {{domxref("WorkerGlobalScope")}}, ciò significa che il metodo fetch() è disponibile in quasi tutti i contesti nei quali potresti voler recuperare risorse..

+ +

Una promise {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} responge con un {{jsxref("TypeError")}} quando viene incontrato un errore di rete, sebbene questo stia spesso a significare un errore di permessi o simili. Un controllo accurato per un fetch() di successo richiederebbe di controllare che la promise si sia risolta,  e anche il controllo che la proprietà {{domxref("Response.ok")}} ha valore true. Uno stato HTTP 404 non costituisce un errore di rete.

+ +

Il metodo fetch() è controllato dalla direttiva connect-src della Content Security Policy piuttosto che dalla direttiva delle risorse che sta recuperando.

+ +
+

Nota: I parametri del metodo fetch() sono identici a quelli del costruttore {{domxref("Request.Request","Request()")}}.

+
+ +

Sintassi

+ +
Promise<Response> fetch(input[, init]);
+ +

Parametri

+ +
+
input
+
Definisce la risorsa ceh vuoi recuperare. Questa può essere: +
    +
  • Una {{domxref("USVString")}} contenente l'URL diretto della risorsa che vuoi recuperare. Alcuni browsers accettano blob: e data: come schemi.
    • +
  • Un oggetto {{domxref("Request")}}.
    • +
+
+
init {{Optional_inline}}
+
Un oggetto opzioni contenente qualsiasi impostazione personalizzata che si vuole applicare alla richiesta. Le opzioni possibili sono: +
    +
  • method: Il metodo di richiesta, es., GET, POST.
    • +
  • headers: Qualsiasi header si voglia aggiungere alla richiesta, contenuto in un oggetto {{domxref("Headers")}} o un oggetto letterale con valori {{domxref("ByteString")}}.
    • +
  • body: Qualsiasi corpo si voglia aggiungere alla richiesta: può essere un oggetto {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, o {{domxref("USVString")}}. Si noti che una richiesta che usa il metodo GET o HEAD non può avere un corpo.
    • +
  • mode: La modalità che si vuole usare per la richiesta, es., cors, no-cors, o same-origin.
    • +
  • credentials: Le credenziali che si vuole vengano usate per la richiesta: omit, same-origin, o include. Per inviare automaticamente dei cookies per il dominio corrente, questa opzione deve essere indicata. Iniziando da Chrome 50, questa proprietà accetta anche un'istanza {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}}.
    • +
  • cache: La modalità cache ceh si vuole usare per la richiesta: default, no-store, reload, no-cache, force-cache, o only-if-cached.
    • +
  • redirect: Il metodo di reindirizzamento: follow (seguire automaticamente i reindirizzamenti), error (interrompere con un errore se avviene un reindirizzamento), o manual (gestire manualmente i reindirizzamento). In Chrome il valore di default è follow (prima di Chrome 47 era impostato a manual).
    • +
  • referrer: Una {{domxref("USVString")}} che specifica no-referrer, client, o una URL. Il valore predefinito è client.
    • +
  • referrerPolicy: Specifica il valore dello header HTTP del referente. Può essere: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
    • +
  • integrity: Contiene il valore di integrità della sottorisorsa (subresource integrity) della richiesta (es., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
    • +
  • keepalive: L'opzione keepalive può essere usata per premettere alla richiesta di sopravvivere alla pagina. Il recupero di una risorsa con l'opzione keepalive sostituisce l'API {{domxref("Navigator.sendBeacon()")}}. 
    • +
  • signal: Un'istanza oggetto {{domxref("AbortSignal")}}; permette di comunicare con una richiesta di recupero e di interromperla se lo si desidera con un {{domxref("AbortController")}}.
    • +
+
+
+ +

Valore di ritorno

+ +

Una {{domxref("Promise")}} che risolve ad un oggetto {{domxref("Response")}}.

+ +

Eccezioni

+ + + + + + + + + + + + + + + + + + +
TipoDescrizione
AbortErrorLa richiesta è stata interrotta (tramite {{domxref("AbortController.abort()")}}).
TypeErrorDa Firefox 43, fetch() produrrà un TypeError se la URL possiede credenziali, come http://user:password@example.com.
+ +

Esempi

+ +

Nel nostro esempio Fetch Request (vedi Fetch Request live) viene creata un nuovo oggetto {{domxref("Request")}} usando il costruttore relativo, per poi recuperarlo con una chiamata fetch(). Siccome stiamo recuperando un'immagine, eseguiamo {{domxref("Body.blob()")}} alla risposta per dargli il tipo MIME adeguato in modo che venga gestito correttamente, poi creiamo un Oggetto URL dello stesso e lo mostriamo in un elemento {{htmlelement("img")}}.

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});
+ +

Nel nostro esempio Fetch with init then Request (vedi Fetch Request init live) facciamo la stessa cosa eccetto che passiamo un oggetto per l'inizializzazione quando invochiamo fetch():

+ +
var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest,myInit).then(function(response) {
+  ...
+});
+ +

Si noti che si può passare l'oggetto per l'inizializzazione insieme al costruttore Request per ottenere lo stesso effetto, es.:

+ +
var myRequest = new Request('flowers.jpg', myInit);
+ +

Si può anche usare un oggetto letterale come headers in init.

+ +
var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+ +

Specificazioni

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificazioniStatusComment
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definito in un WindowOrWorkerGlobalScope parziale nella specifica più recente.
{{SpecName('Fetch','#dom-global-fetch','fetch()')}}{{Spec2('Fetch')}}Definizione iniziale
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Aggiunge l'istanza {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} com un valore possibile per init.credentials.
+ +

Compatibilità Browser

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/windoworworkerglobalscope/index.html b/files/it/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..f7151242c7 --- /dev/null +++ b/files/it/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,115 @@ +--- +title: WindowOrWorkerGlobalScope +slug: Web/API/WindowOrWorkerGlobalScope +tags: + - API + - DOM + - DOM API + - NeedsTranslation + - Service Worker + - TopicStub + - Window + - WindowOrWorkerGlobalScope + - Worker + - WorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{ApiRef()}}
+ +

The WindowOrWorkerGlobalScope mixin describes several features common to the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces. Each of these interfaces can, of course, add more features in addition to the ones listed below.

+ +
+

Note: WindowOrWorkerGlobalScope is a mixin and not an interface; you can't actually create an object of type WindowOrWorkerGlobalScope.

+
+ +

Properties

+ +

These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.

+ +
+
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Returns a boolean indicating whether the current context is secure (true) or not (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Returns the origin of the global scope, serialized as a string.
+
+
+ +

Methods

+ +

These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.

+ +
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Starts the process of fetching a resource from the network.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Schedules a function to execute every time a given number of milliseconds elapses.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Schedules a function to execute in a given amount of time.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', 'WindowOrWorkerGlobalScope mixin')}}{{Spec2('HTML WHATWG')}}This is where the main mixin is defined.
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definition of the fetch() method.
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Definition of the caches property.
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Definition of the indexedDB property.
{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'isSecureContext')}}{{Spec2('Secure Contexts')}}Definition of the isSecureContext property.
+ +

Browser compatibility

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope")}}

+ +

See also

+ + diff --git a/files/it/web/api/windowtimers/clearinterval/index.html b/files/it/web/api/windowtimers/clearinterval/index.html new file mode 100644 index 0000000000..63b0682983 --- /dev/null +++ b/files/it/web/api/windowtimers/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/index.html b/files/it/web/api/windowtimers/index.html new file mode 100644 index 0000000000..d95ede2948 --- /dev/null +++ b/files/it/web/api/windowtimers/index.html @@ -0,0 +1,124 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Workers +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{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/worker/index.html b/files/it/web/api/worker/index.html new file mode 100644 index 0000000000..5b8c7518a7 --- /dev/null +++ b/files/it/web/api/worker/index.html @@ -0,0 +1,107 @@ +--- +title: Worker +slug: Web/API/Worker +tags: + - API + - DOM +translation_of: Web/API/Worker +--- +

{{APIRef("Web Workers API")}}

+ +

L'interfaccia Worker delle Web Workers API rappresenta un processo in background che può essere facilmente generato e in grado di inviare messaggi al creatore. Per creare un worker basta specificare nel metodo costruttore Worker() lo script che sarà incaricato di eseguire.

+ +

I Workers saranno poi in grado di inizializzare ulteriori workers fintanto che questi workers hanno la stessa origine della pagina su cui sono ospitati (NB: l'annidamento di workers non è ancora implementato in Blink).  I workers possono tuttavia usare XMLHttpRequest per richiamare risorse esterne, a patto che gli attributi responseXML e channel di XMLHttpRequest restituiscano null.

+ +

Non tutte le interfacce nè i metodi sono disponibili nel contesto dello script interpretato da un Worker.

+ +

Se si vuole utilizzare i workers nelle estensioni per Firefox ed avere accesso a js-ctypes, bisogna utilizzare l'interfaccia {{ domxref("ChromeWorker") }}.

+ +

Costruttori

+ +
+
{{domxref("Worker.Worker", "Worker()")}}
+
Crea un  worker che eseguirà lo script specificato nella URL. I Workers possono essere anche invocati tramite Blobs.
+
+ +

Proprietà

+ +

Eredita proprietà dal suo parent, {{domxref("EventTarget")}}, e implementa quelle di {{domxref("AbstractWorker")}}.

+ +

Eventi gestiti

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Un {{ domxref("EventListener") }} invocato quando un {{domxref("ErrorEvent")}} di tipo error arriva al worker. Questo evento è ereditato da {{domxref("AbstractWorker")}}.
+
{{domxref("Worker.onmessage")}}
+
Un {{ domxref("EventListener") }} invocato quando  un {{domxref("MessageEvent")}} di tipo message arriva al worker — Per esempio quando un messaggio viene inviato al documento parent da un worker tramite {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Il messaggio viene salvato nella proprietà {{domxref("MessageEvent.data", "data")}} dell'evento.
+
{{domxref("Worker.onmessageerror")}}
+
Un {{domxref("EventHandler")}} che rappresenta il codice da invocare quando l'evento {{event("messageerror")}} è invocato.
+
+ +
+
+ +

Metodi

+ +

Eredita i metodi del suo parent, {{domxref("EventTarget")}}, e quelli di {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("Worker.postMessage()")}}
+
Invia un messaggio (any JavaScript object) al contesto interno del worker.
+
{{domxref("Worker.terminate()")}}
+
Termina immediatamente il worker troncando qualsiasi operazione in corso. Le istanze di ServiceWorker non supportano questo metodo.
+
+ +

Esempio

+ +

Il codice che segue mostra la creazione di un oggetto {{domxref("Worker")}} usando il costruttore {{domxref("Worker.Worker", "Worker()")}} e l'invio di un messaggio:

+ +
var myWorker = new Worker('worker.js');
+var first = document.querySelector('#number1');
+var second = document.querySelector('#number2');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Messaggio inviato al worker');
+}
+ +

Per un esempio completo: Esempio worker ( esegui worker).

+ +


+ Specifiche

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#worker", "Worker")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità Browser

+ +

Il supporto dipende per ciascun tipo di worker. Controlla le pagine dei singoli worker per avere maggiori dettagli.

+ + + +

{{Compat("api.Worker")}}

+ +

Cross-origin worker, comportamento in caso di errore

+ +

Nelle prime implementazioni browser caricare uno script cross-origin per un worker causava un errore SecurityError; nelle implementazioni piu' recenti invece viene generato un evento {{event("error")}} per rispettare le specifiche. Puoi trovare maggiori informazioni su come gestire queste situazioni qui: Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed.

+ +

Vedi Anche

+ + diff --git a/files/it/web/api/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..634bd2ea10 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/index.html @@ -0,0 +1,173 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX API HTTP XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +
{{outdated()}}
+ +

Questo oggetto è il cuore di AJAX: è infatti lo strumento che JavaScript utilizza per accedere a un documento XML.

+ +

Il W3C ha pubblicato una bozza di standard per questo oggetto il 5 aprile 2006.

+ +

Seguono alcuni link:

+ + + + + +
{{APIRef("XMLHttpRequest")}}
+ +

XMLHttpRequest è una API (interfaccia alla progammazione) la quale fornisce al client le funzionalità di trasferire bidirezionalmente dati tra esso ed il server in maniera sincrona od asincrona senza che il browser richieda al server una porzione di dati senza necessariamente effettuar l'aggiornamento della pagina.

+ +

Nonostante il nome dato, XMLHttpRequest, originariamente sviluppato da Microsoft e successivamente adottato dalle altre case di sviluppo browser attraverso il suo standard, supporta protocolli HTTP (inclusi quelli di tipo file ed ftp) oltre che l'XML.

+ +

Struttura di controllo

+ +
+
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
+
La struttura di controllo viene inizializzata con la funzione XMLHttpRequest() e necessita la sua chiamata prima di ogni altro suo metodo.
+
+ +

Proprietà

+ +

XMLHttpRequest eredita le proprietà di {{domxref("XMLHttpRequestEventTarget")}} e di {{domxref("EventTarget")}}:

+ +
+
{{domxref("XMLHttpRequest.onreadystatechange")}}
+
E' un {{domxref("EventHandler")}} chiamato al mutare di un readyState (stato di un evento).
+
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+
Restituisce un unsigned short, rappresentante lo stato della richiesta.
+
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
+
Restituisce dati di tipo {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}},  oggetti JavaScript, od una {{domxref("DOMString")}}, a seconda del valore {{domxref("XMLHttpRequest.responseType")}}. la quale descrive l'entità del corpo della richiesta.
+
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+
Restituisce una {{domxref("DOMString")}} la quale contiene l'esito della chiamata sotto forma testuale oppure null se la richiesta non ha riscontri o nel caso non sia stata ancora operata.
+
{{domxref("XMLHttpRequest.responseType")}}
+
E' un valore enumerato il quale definisce il tipo del risultato della chiamata.
+
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+
Restituisce l'URL serializzato dell'esito della chiamata (in una stringa vuota se l'URL è vacante).
+
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+
Restituisce un {{domxref("Documento")}} contenente l'esito della chiamata (di tipo null nei casi in cui la richiesta non abbia esito, non sia stata inviata, o non possa essere convertita in XML o HTML). Not available in workers.
+
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+
Restituisce un dato di tipo unsigned short rappresentante lo stato dell'esito della chiamata.
+
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+
Restituisce una {{domxref("DOMString")}} contentente l'esito (in forma di stringa) fornita dal server HTTP. A differenza di {{domxref("XMLHTTPRequest.status")}}, include l'intero testo del messaggio in risposta (es. "200 OK").
+
{{domxref("XMLHttpRequest.timeout")}}
+
Restituisce un unsigned long rappresentante il numero (espresso in millisecondi) rimanente alla chiamata prima che questa venga automaticamente soppressa.
+
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+
E' un {{domxref("EventHandler")}} (gestore di eventi) che può occorrere quando una richiesta termina in timeout. {{gecko_minversion_inline("12.0")}}
+
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+
{{domxref("XMLHttpRequestUpload")}}, rappresenta un processo di upload.
+
{{domxref("XMLHttpRequest.withCredentials")}}
+
Fornisce uno stato {{jsxref("Boolean")}} che indica quando //that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies or authorization headers.
+
 
+
+

Proprietà non-standard

+
+
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
+
{{Interface("nsIChannel")}}. Definisce il canale utilizzato dall'oggetto quando effettua la chiamata.
+
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
+
Restituisce un dato boolenao, true nel caso la chiamata venga inviata priva di cookie e/o dati di autenticazione nell'header.
+
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
+
Restituisce un dato booleano true nel caso in cui gli stessi parametri di origine non siano comparati dalla chiamata.
+
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
+
Restituisce un valore booleano indicante se l'oggetto rappresenta una chiamata attiva latente.
+
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
+
E' un ArrayBuffer. contentente il risultato della chiamata in forma di un array JavaScript tipizzato.
+
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
+
Questa funzione Gecko-only , booleana, è stata rimossa a partire da Firefox/Gecko 22. In sostituzione si veda Server-Sent Events, Web Sockets, o responseText per il monitoraggio dei progressi degli eventi.
+
+

Gestori degli eventi

+ +

onreadystatechange come proprietà dell'istanza XMLHttpRequest è supportata in ogni browser.

+ +

In virtù di ciò, un numero sempre maggiore di trigger degli eventi è stata implementata in vari browser (onload, onerror, onprogress, etc.). Ognuno di questi è supportato da Firefox, in particolare si veda nsIXMLHttpRequestEventTarget e Using XMLHttpRequest.

+ +

Molte versioni recenti di browser, Firefox e derivate incluse, supportano la ricezione degli eventi XMLHttpRequest mediante le API standard addEventListener in aggiunta alle proprietà aggiuntive applicate ai metodi dei gestori degli eventi.

+ +

Metodi

+
+
     {{domxref("XMLHttpRequest.abort()")}}
+
 
+
Interrompe la chiamata se è stata già inviata.
+
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
+
Restituisce tutti gli header in risposta, separati da CRLF, sottoforma di stringa o null se non viene ricevuto nessun risultato.
+
{{domxref("XMLHttpRequest.getResponseHeader()")}}
+
Restituisce la stringa contenente il testo dell'header specifico o null se anche il risultato non è stato ricevuto o l'header non esiste.
+
{{domxref("XMLHttpRequest.open()")}}
+
Inizializza una chiamata. Questa funzione è derivante da codice Javascript; per inizializzare una chiamata dal codice nativo si veda openRequest().
+
{{domxref("XMLHttpRequest.overrideMimeType()")}}
+
Revoca il MIME type inviato dal server.
+
{{domxref("XMLHttpRequest.send()")}}
+
Invia la richiesta. Se la richiesta è asincrona (come è di default) questo metodo risponde non appena terminato l'invio della richiesta attiva.
+
{{domxref("XMLHttpRequest.setRequestHeader()")}}
+
Stabilisce il valore di un header HTTP di richiesta. E' preferibile chiamare setRequestHeader()dopo open(), ma prima di send().
+
+

Metodi non-standard

+
+
{{domxref("XMLHttpRequest.init()")}}
+
Inizializza l'oggetto da usare in codice C++.
+
+
Attenzione: Questo metodo non deve essere eseguito da JavaScript.
+
+
{{domxref("XMLHttpRequest.openRequest()")}}
+
Inizializza una richiesta. Questo metodo è derivante da codice nativo; per inizializzare una richiesta da JavaScript si utilizzi invece open().
+
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
+
Una variante del metodo send() il quale invia dati binari.
+
+

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommenti
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard, ultima versione
+
+
+ +

Compatibilità

+ +

 

+ + + +
{{Compat("api.XMLHttpRequest")}}
+ +

Voci correlate

+ + diff --git a/files/it/web/api/xmlhttprequest/onreadystatechange/index.html b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html new file mode 100644 index 0000000000..1bbfb02852 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html @@ -0,0 +1,119 @@ +--- +title: XMLHttpRequest.onreadystatechange +slug: Web/API/XMLHttpRequest/onreadystatechange +translation_of: Web/API/XMLHttpRequest/onreadystatechange +--- +
{{APIRef}}
+ +

UN EventHandler  che è invocato ogni volta che l'attributo readyState cambia. la callback è invocata dal thread dell'interfaccia utente. 

+ +

La proprietà XMLHttpRequest.onreadystatechange  contiene l'event handler che deve essere invocato quando l'evento {{event("readystatechange")}} si verifica, ovvero ogni volta in cui la proprietà {{domxref("XMLHttpRequest.readyState", "readyState")}} del {{domxref("XMLHttpRequest")}} viene modificata.

+ +
+

Warning: This should not be used with synchronous requests and must not be used from native code. .

+
+ +

L'evento readystatechange non si verificherà se una richiesta XMLHttpRequest viene cancellata utilizzando il metodo abort().

+ +
+

UPDATE: it's firing in the latest version of browsers (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). Example here - just reaload page few times.

+
+ +

Syntax

+ +
XMLHttpRequest.onreadystatechange = callback;
+ +

Values

+ + + +

Example

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(method, url, true);
+xhr.onreadystatechange = function () {
+  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+    console.log(xhr.responseText);
+  }
+};
+xhr.send();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatIe(7)}}[1]{{CompatVersionUnknown}}{{CompatSafari(1.2)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject().

diff --git a/files/it/web/api/xmlhttprequest/open/index.html b/files/it/web/api/xmlhttprequest/open/index.html new file mode 100644 index 0000000000..b4786aecc6 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/open/index.html @@ -0,0 +1,115 @@ +--- +title: XMLHttpRequest.open() +slug: Web/API/XMLHttpRequest/open +translation_of: Web/API/XMLHttpRequest/open +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Il metodo XMLHttpRequest.open() inizializza una richiesta. Questo metodo è utilizzato da codice JavaScript; invece, per inizializzare una richiesta da codice nativo, usare openRequest().

+ +
Nota: Chiamare questo metodo da una richiesta già attiva (una in cui open() o openRequest() è stata già chiamata) è equivalente a chiamare abort().
+ +

Sintassi

+ +
XMLHttpRequest.open(metodo, url)
+XMLHttpRequest.open(metodo, url, async)
+XMLHttpRequest.open(metodo, url, async, utente)
+XMLHttpRequest.open(metodo, url, async, utente, password)
+
+ +

Parameters

+ +
+
metodo
+
Il metodo HTTP da utilizzare, come "GET", "POST", "PUT", "DELETE", ecc. Campo ignorato per URL non-HTTP(S).
+
url
+
{{domxref("DOMString")}} che rappresenta l'URL a cui inviare la richiesta.
+
async {{optional_inline}}
+
Un parametro opzionale Booleano, true in maniera predefinita, indicante se effettuare o meno l'operazione in modalità asincrona. Se questo valore è false, il metodo send() non ritornerà finchè la risposta non sarà ricevuta. Se true, la notifica di una transazione completata è fornita utilizzando gli event listener. Questo must essere true se l'attributo multipart è true, o partirà un eccezione. +
Nota: Da Gecko 30.0 {{geckoRelease("30.0")}}, le richieste sincrone sul thread principale sono state deprecate a causa di effetti negativi sull'esperienza utente.
+
+
utente {{optional_inline}}
+
Il valore opzionale del nome dell'utente da utilizzare per scopi di autenticazione; il valore predefinito è null.
+
password {{optional_inline}}
+
La password opzionale da utilizzare per scopi di autenticaziones; il valore predefinito è null.
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilità fra browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{ CompatVersionUnknown}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{ CompatVersionUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatVersionUnknown}}{{ CompatVersionUnknown}}{{ CompatVersionUnknown}}
+
+ +

[1] Questa funzionalità è stata implementata attraverso ActiveXObject(). Internet Explorer implementa lo standard XMLHttpRequest dalla versione 7.

+ +

Vedi anche

+ +

Utilizzare XMLHttpRequest

diff --git a/files/it/web/api/xmlhttprequest/readystate/index.html b/files/it/web/api/xmlhttprequest/readystate/index.html new file mode 100644 index 0000000000..a37fa1e1db --- /dev/null +++ b/files/it/web/api/xmlhttprequest/readystate/index.html @@ -0,0 +1,152 @@ +--- +title: XMLHttpRequest.readyState +slug: Web/API/XMLHttpRequest/readyState +translation_of: Web/API/XMLHttpRequest/readyState +--- +

{{APIRef('XMLHttpRequest')}}

+ +

la proprietà XMLHttpRequest.readyState restituisce lo stato nel quale si trova il client di una richiesta XMLHttpRequest. Un client XHR si può trovare in uno degli stati seguenti:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueStateDescription
0UNSENTIl Client è stato creato, ma il metodo open() della XHR non è stato ancora invocato.
1OPENEDIl metodo open() è stato invocato.
2HEADERS_RECEIVEDIl metodo send() della XHR è stato invocato, e sono già disponibili lo status della risposta HTTP ed il suo header. 
3LOADINGSta avvenendo il download dei dati; responseText contiene dati parziali.
4DONEL'operazione è stata completata.
+ +
+
UNSENT
+
Il Client è stato creato, ma il metodo open() della XHR non è stato ancora invocato.
+
OPENED
+
Il metodo open() della XHR è stato invocato. In questo stato è possibile settare l' header della richiesta HTTP utilizzando il metodo setRequestHeader(); può essere invocato il metodo send(), che inizia il fetch della richiesta.
+
HEADERS_RECEIVED
+
Il metodo send() è stato invocato e sono stati ricevuto gli headers della risposta; è possibile conoscere il codice della risposta HTTP ed i suoi metadati.
+
LOADING
+
Sta avvenendo il download del body della risposta HTTP; se il responseType è "text" o vuoto, responseText conterrà un testo parziale.
+
DONE
+
L'operazione di fetch è terminata; Questo può significare sia che il trasferimento dei dati è stato un successo e questi sono completamente disponibili o che è fallito.
+
+ +
+

The state names are different in Internet Explorer. Instead of UNSENT, OPENED, HEADERS_RECEIVED, LOADING and DONE, the names READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) and READYSTATE_COMPLETE (4) are used.

+
+ +

Example

+ +
var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState sarà pari a 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState sarà pari a 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState sarà pari a 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState sarà pari a 4
+};
+
+xhr.send(null);
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#states')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}[1]{{CompatIe(7)}}{{CompatVersionUnknown}}{{CompatSafari("1.2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html new file mode 100644 index 0000000000..4f55ac07ff --- /dev/null +++ b/files/it/web/api/xmlhttprequest/usare_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/api/xmlhttprequest/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html new file mode 100644 index 0000000000..bb54418a41 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html @@ -0,0 +1,50 @@ +--- +title: XMLHttpRequest() +slug: Web/API/XMLHttpRequest/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/XMLHttpRequest +--- +
{{draft}}{{APIRef('XMLHttpRequest')}}
+ +

Il costruttore XMLHttpRequest() crea una nuova {{domxref("XMLHttpRequest")}}.

+ +

Per ulteriori dettagli sull'utilizzo di XMLHttpRequest, si veda Come usare XMLHttpRequest.

+ +

Sintassi

+ +
constrichiesta = new XMLHttpRequest();
+
+ +

Parametri

+ +

Nessuno.

+ +

Valore di ritorno

+ +

Un nuovo oggetto {{domxref("XMLHttpRequest")}}. Prima di chiamare {{domxref("XMLHttpRequest.send", "send()")}}, che invia la richiesta al server, l'oggetto va predisposto inizializzandolo, chiamando almeno {{domxref("XMLHttpRequest.open", "open()")}}.

+ +

Sintassi non-standard di Firefox

+ +

Firefox 16 ha aggiunto al costruttore un parametro non-standard che permette di abilitare la modalità anonima (si veda {{Bug("692677")}}). Assegnare il valore true alla flag mozAnon equivale all'atto pratico al costruttore AnonXMLHttpRequest() descritto nelle versioni precedenti delle specifiche di XMLHttpRequest.

+ +
constrichiesta = new XMLHttpRequest(dizParametri);
+ +

Parametri (non-standard)

+ +
+
objParameters {{gecko_minversion_inline("16.0")}}
+
Sono disponibili due flag: +
+
mozAnon
+
Booleano: assegnando true a questa flag il browser non esporrà né l'{{Glossary("origine")}} né le credenziali dell'utente durante il recupero delle risorse. Ciò significa soprattutto che non verrà inviato alcun {{Glossary("Cookie", "cookie")}} a meno di non aggiungerlo esplicitamente attraverso setRequestHeader.
+
mozSystem
+
Booleano: assegnando true a questa flag vengono permesse connessioni inter-sito senza il consenso del server di destinazione dato attraverso {{Glossary("CORS")}}. Richiede anche mozAnon: true, ovvero non si possono inviare cookie od altre credenziali dell'utente usando questo metodo. Questa flag funziona solo in app con privilegi, cioé sottoposte a riesame ({{Bug("692677")}}); non funziona su qualsivoglia pagine caricate da Firefox.
+
+
+
+ +

Voci correlate

+ + diff --git a/files/it/web/css/-moz-border-bottom-colors/index.html b/files/it/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..ea9b59f24a --- /dev/null +++ b/files/it/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,89 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

 

+ +

Nelle applicazioni di Mozilla come Firefox, la  proprietà di CSS -moz-border-bottom-colors imposta una lista di colori per il bordo inferiore.

+ +
/* Single <color> value */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Multiple <color> values */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Global values */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+
+ +

Quando un elemento ha un margine che è più grande di un singolo pixel CSS, tutta la linea dei pixel assume il colore accanto specificato in questa proprietà, dall'esterno verso l'interno.Questo elimina il bisogno di box annidati.Se il margine è più largo del numero dei colori specificati, la rimanente parte del margine è del colore specificato più interno. 

+ +

{{cssinfo}}

+ +

It does not apply

+ +
    +
  1. if {{Cssxref("border-style")}} is dashed or dotted.
    2. +
  2. to tables with border-collapse: collapse.
    3. +
+ +

Sintassi

+ +

Valori

+ +

Accetta una lista di colori separati dallo spazio.

+ +
+
<color>
+
+

Specifica il colore di una linea di pixel del margine inferiore. Il trasparente è valido.Vedi i valori {{cssxref("<color>")}} per le unità possibili.

+
+
none
+
Di default, nessun colore è applicato o è usato {{cssxref("border-color")}}, se specificato.
+
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempio

+ +
<div id="example">Example</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Specificazioni

+ +

QUesta proprietà non è parte di nessun specificazione.

+ +

Compatibilità dei browser

+ + + +

{{Compat("css.properties.-moz-border-bottom-colors")}}

+ +

See also

+ + diff --git a/files/it/web/css/-moz-font-language-override/index.html b/files/it/web/css/-moz-font-language-override/index.html new file mode 100644 index 0000000000..981b6e4d3b --- /dev/null +++ b/files/it/web/css/-moz-font-language-override/index.html @@ -0,0 +1,6 @@ +--- +title: '-moz-font-language-override' +slug: Web/CSS/-moz-font-language-override +translation_of: Web/CSS/font-language-override +--- +

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/it/web/css/-webkit-overflow-scrolling/index.html b/files/it/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..0c74ee6850 --- /dev/null +++ b/files/it/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,52 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - Safari + - WebKit +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La proprietà CSS -webkit-overflow-scrolling controlla se i dispositivi touch debbano usare o meno il momentum scrolling su di un dato elemento.

+ +

{{cssinfo}}

+ +

Parametri

+ +
+
auto
+
Usa lo scroll "regolare", dove il contenuto cessa immediatamente di scorrere nel momento in cui il dito viene sollevato dal touchscreen.
+
touch
+
Usa il momentum scrolling, dove il contenuto continua a scorrere per un pò dopo che la gesture di scroll è completata ed il dito è sollevato dal touchscreen.
+ La velocità e la durata dello scorrimento è direttamente proporzionale a quanto la gesture di scroll è vigorosa.
+ Inoltre viene creato un nuovo stacking context.
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempi

+ +
-webkit-overflow-scrolling: touch; /* Lo scorrimento continua per un pò */
+
+-webkit-overflow-scrolling: auto; /* Lo scorrimento si blocca immediatamente */
+
+ +

Specifiche

+ +

Non è parte di nessuna specifica.
+ Apple ne ha una descrizione nella reference CSS di Safari.

+ +

Compatibilità browser

+ + + +

{{Compat("css.properties.-webkit-overflow-scrolling")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/css/@document/index.html b/files/it/web/css/@document/index.html new file mode 100644 index 0000000000..deea20d4cc --- /dev/null +++ b/files/it/web/css/@document/index.html @@ -0,0 +1,47 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - CSS + - CSS At-rule + - Reference +translation_of: Web/CSS/@document +--- +

{{ CSSRef() }} {{ SeeCompatTable() }}

+ +

Sommario

+ +

La regola @-moz-document è una at-rule che restringe il campo di funzionamento, delle regole al suo interno, a degli specifici URL. Il suo utilizzo risulta importante quando si vuole creare un solo file CSS per molte pagine web o si vuole modificare il CSS di base del FireFox.

+ +

Sintassi

+ +
@document url|url-prefix|domain(URL){ regole }
+ +

Esempi

+ +

Puoi usarlo nel file userContent.css:

+ +
@document url(http://www.w3.org/),
+               url-prefix(http://www.w3.org/Style/),
+               domain(mozilla.org)
+{
+  /* le regole CSS quì dentro verranno applicate a:
+     + La pagina "http://www.w3.org/".
+     + Tutte le pagine che cominciano per "http://www.w3.org/Style/"
+     + Tutte le pagine con dominio uguale a "mozilla.org" o che finisce con
+       ".mozilla.org"
+   */
+
+  /* esempio di codice che si applicherebbe a tali pagine */
+  body { color: purple; background: yellow; }
+}
+ +

Specifiche

+ + + +

Compatibilità Browser

+ +

Disponibile da Mozilla 1.8 / Firefox 1.5.

diff --git a/files/it/web/css/_colon_-moz-first-node/index.html b/files/it/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..9336079308 --- /dev/null +++ b/files/it/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,46 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-first-node' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-first-node applica le sue proprietà a tutti gli elementi che risultano essere "nodi primogeniti" di altri elementi. Differisce dal :first-child in quanto non valuta come primogeniti gli elementi che presentano del testo davanti a loro (non spazi vuoti).

+ +

Sintassi

+ +
elemento:-moz-first-node {proprietà di stile }
+
+ +

Esempi

+ +
span:-moz-first-node{
+    background-color: lime;
+}
+
+ +

...applicato a...

+ +
<div>
+  <span>Testo dello Span</span>
+  <span>Testo dello Span</span>
+</div>
+<div>
+  lettere<span>Testo dello Span</span>
+  <span>Testo dello Span</span>
+</div>
+
+ +

...risultato con :-moz-first-node...

+ +

Immagine:fchild1.jpg

+ +

...e con il :first-child...

+ +

Immagine:fchild2.jpg

diff --git a/files/it/web/css/_colon_-moz-last-node/index.html b/files/it/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..d064110bcc --- /dev/null +++ b/files/it/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,46 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-last-node' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-last-node applica le sue proprietà a tutti gli elementi che risultano essere "ultimi nodi" di altri elementi. Differisce dal :last-child in quanto non valuta come ultimi gli elementi che presentano del testo dopo di loro (non spazi vuoti).

+ +

Sintassi

+ +
elemento:-moz-last-node {proprietà di stile }
+
+ +

Esempi

+ +
span:-moz-last-node{
+    background-color: lime;
+}
+
+ +

...applicato a...

+ +
<div>
+  <span>Testo dello Span</span>
+  <span>Testo dello Span</span>
+</div>
+<div>
+  <span>Testo dello Span</span>
+  <span>Testo dello Span</span>lettere
+</div>
+
+ +

...risultato con :-moz-last-node...

+ +

Immagine:lchild1.jpg

+ +

...e con il :last-child...

+ +

Immagine:lchild2.jpg

diff --git a/files/it/web/css/_colon_-moz-list-bullet/index.html b/files/it/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..cc383ff3ef --- /dev/null +++ b/files/it/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,42 @@ +--- +title: ':-moz-list-bullet' +slug: 'Web/CSS/:-moz-list-bullet' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-list-bullet è usata per modificare il pallino degli elementi lista.

+ +

Sintassi

+ +
li::-moz-list-bullet {proprietà di stile }
+
+ +

Esempi

+ +
.liste li::-moz-list-bullet{ font-size:36px }
+
+ +

...applicato a...

+ +
<ul>
+<li>Number 1</li>
+<li>Number 2</li>
+<li>Number 3</li>
+</ul>
+<ul class="liste">
+<li>Number 1</li>
+<li>Number 2</li>
+<li>Number 3</li>
+</ul>
+
+ +

...risultato..

+ +

. Image:liug3.jpg

diff --git a/files/it/web/css/_colon_active/index.html b/files/it/web/css/_colon_active/index.html new file mode 100644 index 0000000000..450e457c4a --- /dev/null +++ b/files/it/web/css/_colon_active/index.html @@ -0,0 +1,128 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Layout + - Pseudo-class + - Web +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

La pseudo-classe CSS :active rappresenta un elemento (come un bottone) che viene attivato dall'utente. Quando si usa un mouse, l'«attivazione» inizia solitamente quando l'utente pressa il pulsante primario del mouse.

+ +
/* Seleziona qualsiasi <a> che viene attivato */
+a:active {
+  color: red;
+}
+ +

La pseudo-class :active è comunemente usata su elementi {{HTMLElement("a")}} e {{HTMLElement("button")}}. Altri obiettivi ordinari di questa pseudo-class sono gli elementi che contengono un elemento attivato, e gli elementi di form che vengono attivati attraverso le proprie {{HTMLElement("label")}} associate.

+ +

Gli stili definiti dalla pseudo-class :active saranno sovrascritti da qualsiasi pseudo-class successiva relativa a link ({{cssxref(":link")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) con almeno la stessa specificità. Per dare stile ai link in maniera appropriata, aggiungete la regola :active dopo tutte le altre regole relative ai link, così come definito dall'ordine LVHA: :link — :visited — :hover — :active.

+ +
Nota: Nei sistemi con mouse a più pulsanti, il CSS3 specifica che la pseudo-class :active deve essere applicata solo al pulsante primario; in un mouse per destrimani è generalmente il pulsante sinistro.
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempi

+ + + +

HTML

+ +
<p>Questo paragrafo contiene un link:
+  <a href="#">Questo link diventerà rosso quando viene cliccato.</a>
+  Il paragrafo avrà uno sfondo grigio mentre se se si clicca su di esso o sul link.
+</p>
+ +

CSS

+ +
a:link { color: blue; }          /* links non visitati  */
+a:visited { color: purple; }     /* links visitati  */
+a:hover { background: yellow; }  /* links su cui si passa sopra  */
+a:active { color: red; }         /* links attivi  */
+
+p:active { background: #eee; }   /* paragrafi attivi */
+ +

Risultato

+ +

{{EmbedLiveSample('Active_links')}}

+ +

Elementi form attivi

+ +

HTML

+ +
<form>
+  <label for="my-button">Mio bottone: </label>
+  <button id="my-button" type="button"> Prova a cliccare su di me o sulla mia label!</button>
+</form>
+ +

CSS

+ +
form:active {
+  color: red;
+}
+
+form button {
+  background: white;
+}
+ +

Risultato

+ +

{{EmbedLiveSample('Active_form_elements')}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}}
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Nessun Cambiamento.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Nessun Cambiamento.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Nessun Cambiamento.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

{{Compat("css.selectors.active")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/css/_colon_focus/index.html b/files/it/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..3540c46539 --- /dev/null +++ b/files/it/web/css/_colon_focus/index.html @@ -0,0 +1,117 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - ':focus' + - CSS + - Layout + - Pseudo-class + - Reference + - Riferimento + - Web +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

La pseudo-classe CSS :focus rappresenta un elemento (come l'input di un form) che ha ricevuto focus. Viene attivato di solito quando l'utente fa clic o tap su un elemento o lo seleziona con il tasto "tab" della tastiera.

+ +
/* Seleziona qualsiasi <input> che ha ricevuto focus */
+input:focus {
+  color: red;
+}
+ +
+

Nota: Questa pseudo-classe is applica solo all'elemento stesso che ha ricevuto il focus. Utilizzare {{CSSxRef(":focus-within")}} se si vuole selezionare un elemento che contiene un elemento che ha ricevuto il focus.

+
+ +

Sintassi

+ +
{{CSSSyntax}}
+ +

Esempio

+ +

HTML

+ +
<input class="red-input" value="I'll be red when focused."><br>
+<input class="blue-input" value="I'll be blue when focused.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

Risultato

+ +

{{EmbedLiveSample("Example")}}

+ +

Interessi per l'Accessibilità

+ +

Assicuratevi che l'indicatore visivo dello stato di focus possa essere visto da persone con problemi di vista. Ciò favorirà anche tutti coloro che utilizzano uno schermo in uno spazio molto illuminato (come all'aperto sotto il sole). Lo standard di contrasto non testuale WCAG 2.1 SC 1.4.11 richiede che l'indicatore visivo del focus sia almeno di 3 ad 1.

+ + + +

:focus { outline: none; }

+ +

Non eliminate mai semplicemente l'outline del focus (indicatore visibile del focus) senza rimpiazzarlo con un outline che passi lo standard di contrasto non testuale WCAG 2.1 SC 1.4.11

+ + + +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}Definisce semantiche specifiche HTML.
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}Nessun cambiamento.
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}Nessun cambiamento.
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

{{Compat("css.selectors.focus")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/css/_colon_hover/index.html b/files/it/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..3409a3d188 --- /dev/null +++ b/files/it/web/css/_colon_hover/index.html @@ -0,0 +1,99 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +translation_of: 'Web/CSS/:hover' +--- +
{{ CSSRef }}
+ +

La pseudo-classe CSS :hover corrisponde quando l'utente interagisce con un elemento utilizzando una periferica di puntamento, ma non necessariamente lo attiva. È generalmente innescato quando l'utente passa sopra un elemento con il cursore (puntatore del mouse).

+ +
/* Seleziona qualsiasi elemento <a> quando "hovered" */
+a:hover {
+  color: orange;
+}
+ +

Gli stili definiti dalla pseudo-classe :active saranno annullati da qualsiasi pseudo-classe relativa ai link susseguente ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":active") }}) che abbia almeno uguale specificità. Per dare stile ai link nel modo appropriato, aggiungete la regola :hover dopo le regole :link e :visited ma prima di quella :active, così come definito nell'ordine LVHA: :link — :visited — :hover — :active.

+ +
Nota: La pseudo-classe :hover è problematica sugli schermo touch. A seconda del browser, la pseudo-classe :hover potrebbe non corrispondere mai, corrispondere solo per un attimo dopo il tocco di un elemento, oppure continuare a corrispondere anche dopo che l'utente ha finito di toccare e finché non tocca un altro elemento. Gli sviluppatori Web dovrebbero assicurarsi che il contenuto sia accessibile sui dispositivi con capacità di hovering limitate o inesistenti.
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempi

+ +

Esempio base

+ +

HTML

+ +
<a href="#">Try hovering over this link.</a>
+ +

CSS

+ +
a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}
+ +

Risultato

+ +

{{EmbedLiveSample("Basic_example")}}

+ + + +

Potete usare la pseudo-classe :hover per costruire una gallery di immagini con immagini a grandezza naturale che vengono mostrate solo quando il mouse si muove sopra un'anteprima. Provate questa demo per una possibile indicazione.

+ +
Nota: Per un effetto analogo, ma basato sulla pseudo-classe :checked (applicata a radiobox nascosti), vedete questa demo, presa dalla pagina di riferimento di :checked.
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificanCommentoFeedback
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-hover', ':hover') }}WHATWG HTML GitHub issues
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}Permete che :hover venga applicato ad ogni pseudo-elemento.CSS Working Group drafts GitHub issues
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

{{Compat("css.selectors.hover")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/css/_doublecolon_selection/index.html b/files/it/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..f6b264012b --- /dev/null +++ b/files/it/web/css/_doublecolon_selection/index.html @@ -0,0 +1,134 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +translation_of: 'Web/CSS/::selection' +--- +
{{CSSRef}}
+ +

Sommario

+ +

Lo pseudo-elemento CSS ::selection applica regole alla porzione di un documento che è stato evidenziato (es. con il mouse o con altri dispositivi di puntamento) dall'utente.

+ +

Solo un piccolo sottoinsieme di proprietà CSS possono essere usati in una regola che usa ::selection nel suo selettore: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("cursor")}}, {{cssxref("outline")}}, {{cssxref("text-decoration")}}, {{cssxref("text-emphasis-color")}} and {{cssxref("text-shadow")}}. Si noti, in particolare, che {{cssxref("background-image")}} viene ignorato, come qualsiasi altra proprietà.

+ +
+

text-shadow in ::selection è supportato da Chrome, Safari e Firefox 17+.

+
+ +
Benché presente nelle bozze dei selettori CSS di livello 3, questo pseudo-elemento fu rimosso durante la fase del Candidate Recommendation, in quanto il suo comportamento apparve come insufficiente, specialmente negli elementi nidificati, e la sua interoperabilità non venne raggiunta. (based on discussion in the W3C Style mailing list).
+
+Lo pseudo-elemento ::selection venne in seguito riaggiunto in Pseudo-Elements Level 4.
+ +

Esempio

+ +

Gecko è l'unico motore che richiede il prefisso. A causa del fatto che le regole di analisi CSS richiedono l'abbandono dell'intera regola quando si incontra uno pseudo-elemento non valido, devono essere scritte due regole distinte: ::-moz-selection, ::selection {...}. La regola verrà eliminata sui browser non-Gecko in quanto ::-moz-selection non è valido per questi ultimi.

+ +

HTML

+ +
<div>Ecco un po' di testo per testare la pseudo-classe di ::selection.</div>
+<p>Prova anche questo testo per <p></p>
+ +

CSS

+ +
/* rende giallo qualsiasi testo selezionato, su sfondo rosso  */
+::-moz-selection {
+  color: gold; background: red;
+}
+
+::selection {
+  color: gold; background: red;
+}
+
+/* rende bianco il testo selezionato, su sfondo nero */
+p::-moz-selection {
+  color: white;
+  background: black;
+}
+
+p::selection {
+  color: white;
+  background: black;
+}
+ +

Output

+ +

{{ EmbedLiveSample('Esempio', '', '', '', 'Web/CSS/::selection') }}

+ +

Specificazioni

+ + + + + + + + + + + + + + + + +
SpecificazioneStatusCommento
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Initial definition
+ +

Lo pseudo-elemento ::selection ma questo venne rimosso prima di poter raggiungere lo status di Recommendation. Venne in seguito riaggiunto come parte delle bozze degli pseudo-elementi di livello 4.

+ +

Compatibilità nei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base1{{CompatVersionUnknown}}1.0 {{property_prefix("-moz")}}[1]99.51.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Attualmente Gecko supporta solamente la versione prefissata ::-moz-selection. Sarà resa senza prefisso in {{bug(509958)}}.

diff --git a/files/it/web/css/attribute_selectors/index.html b/files/it/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..05617722a3 --- /dev/null +++ b/files/it/web/css/attribute_selectors/index.html @@ -0,0 +1,239 @@ +--- +title: Attribute selectors +slug: Web/CSS/Attribute_selectors +tags: + - CSS + - Reference + - Selettori + - Selettori di attributo +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

Il selettore di attributo CSS corrisponde agli elementi in base alla presenza o al valore di un dato attributo.

+ +
/* Elemento <a> con un attributo title */
+a[title] {
+  color: purple;
+}
+
+/* Elemento <a> con un href uguale a "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Elemento <a> con un href contenente "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Elemento <a> con un href che finisce con ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Elemento <a> il cui attributo classe contiene la parola "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}
+ +

Sintassi

+ +
+
[attr]
+
Rappresenta elementi con un nome di attributo attr.
+
[attr=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è esattamente value.
+
[attr~=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è una lista di parole separate da spazi, una delle quali è esattamente value.
+
[attr|=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore può essere esattamente value o può iniziare con value immediatamente seguito da un trattino, - (U+002D). È spesso usato per corrispondenze di subcode di linguaggio.
+
[attr^=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è il prefisso (è preceduto da) di value.
+
[attr$=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è il suffisso (è seguito da) di value.
+
[attr*=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore contiene almeno una presenza di value all'interno della stringa.
+
[attr operator value i]
+
Aggiungere una i (o I) prima della parentesi di chiusura fa sì che il valore sia comparato senza distinzione tra maiuscole e minuscole (per caratteri entro il range ASCII).
+
[attr operator value s] {{Experimental_Inline}}
+
Aggiungere una s (o S) prima della parentesi di chiusura fa sì che il valore sia comparato con sensibilità alle maiuscole ( per caratteri entro il range ASCII).
+
+ +

Esempi

+ + + +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Link interni che iniziano con "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Link con "example" in qualsiasi punto dell'URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Link con "insensitive" in qualsiasi punto dell'URL,
+   a prescindere dalla capitalizzazione*/
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Link con "cAsE" in qualsiasi punto dell'URL,
+con precisa capitalizzazione */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* Link che finiscono con ".org" */
+a[href$=".org"] {
+  color: red;
+}
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

Risultato

+ +

{{EmbedLiveSample("Links")}}

+ +

Linguaggi

+ +

CSS

+ +
/* Tutti i div con attributo `lang` sono bold. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tutti i div senza un attributo `lang` sono italicized. */
+div:not([lang]) {
+  font-style: italic;
+}
+
+/* Tutti i div in Inglese US sono blu. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tutti i div in Portoghese sono verdi. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tutti i div in Cinese sono rossi, sia che siano
+   in cinese semplificato (zh-CN) o tradizionale (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tutti i div con un
+   `data-lang` in Cinese tradizionale sono viola. */
+/* Nota: Gli attributi con trattino possono essere usati
+  senza virgolette */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">世界您好！</div>
+
+ +

Risultati

+ +

{{EmbedLiveSample("Languages")}}

+ +

Liste ordinate HTML

+ +

La specifica HTML richiede che l'attributo {{htmlattrxref("type", "input")}} venga definito senza distinzione maiuscole-minuscole poiché esso è principalmente usato in elementi HTML {{HTMLElement("input")}}, provare ad usare selettori di attributo con l'attributo {{htmlattrxref("type", "ol")}} di un {{HTMLElement("ol", "ordered list")}} non funziona senza il modificatore case-sensitive.

+ +

CSS

+ +
/* I tipi di lista richiedono un modificatore sensibile alle maiuscole a causa di una stranezza nel modo in cui l'HTML gestisce l'attributo type. */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

Risultato

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS4 Selectors")}}Aggiunge il modificatore per la selezione di valori ASCII case-sensitive e case-insensitive negli attributi.
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}{{Spec2("CSS2.1")}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/css/background-attachment/index.html b/files/it/web/css/background-attachment/index.html new file mode 100644 index 0000000000..2f4615c65c --- /dev/null +++ b/files/it/web/css/background-attachment/index.html @@ -0,0 +1,135 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +translation_of: Web/CSS/background-attachment +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

Se è stata specificata una background-image, la proprietà background-attachment determina se l'immagine è fissa o può scorrere all'interno dell'elemento al quale è assegnata.

+ + + +

Sintassi

+ +
background-attachment: scroll | fixed | inherit
+
+ +

Valori

+ +
+
scroll 
+
Se scroll viene specificato, l'immagine di sfondo può scorrere all'interno dell'elemento al quale è assegnata
+
fixed 
+
Se fixed viene specificato, l'immagine di sfondo è fissa nell'elemento che la contiene
+
+ +

Esempi

+ +

Simple example

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

Result

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

Multiple background image support

+ +

This property supports multiple background images. You can specify a different <attachment> for each background, separated by commas. Each image is matched with the corresponding attachment type, from first specified to last.

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

Result

+ +

{{EmbedLiveSample("Multiple_background_image_support")}}

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Si veda anche

+ +

background, background-color, background-image, background-position, background-repeat

+ +
 
+ +

{{ languages( { "en": "en/CSS/background-attachment", "fr": "fr/CSS/background-attachment", "pl": "pl/CSS/background-attachment" } ) }}

diff --git a/files/it/web/css/background-color/index.html b/files/it/web/css/background-color/index.html new file mode 100644 index 0000000000..536eb0b3f1 --- /dev/null +++ b/files/it/web/css/background-color/index.html @@ -0,0 +1,86 @@ +--- +title: background-color +slug: Web/CSS/background-color +translation_of: Web/CSS/background-color +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background-color imposta il colore di sfondo di un elemento tramite un valore esadecimale, tramite un nome di colore valido in inglese, oppure tramite la parola chiave transparent o inherit.

+ + + +

Sintassi

+ +
background-color: color | transparent | inherit
+
+ +

Valori

+ +
+
color 
+
Il colore può essere specificato come valore RGB esadecimale, oppure utilizzando un nome di colore predefinito in inglese.
+
transparent 
+
Il valore iniziale di background-color è transparent, il che significa che l'elemento non ha un proprio colore, ma è trasparente.
+
+ +

Esempi

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Esempi","200","150")}}

+ + +

Specifiche

+ + + +

Si veda anche

+ +

background, background-attachment, background-image, background-position, background-repeat

+ +

{{ languages( { "de": "de/CSS/background-color", "en": "en/CSS/background-color", "es": "es/CSS/background-color", "fr": "fr/CSS/background-color", "ja": "ja/CSS/background-color", "pl": "pl/CSS/background-color" } ) }}

diff --git a/files/it/web/css/background-image/index.html b/files/it/web/css/background-image/index.html new file mode 100644 index 0000000000..f07e6d72f7 --- /dev/null +++ b/files/it/web/css/background-image/index.html @@ -0,0 +1,126 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS_1 + - CSS_2.1 + - CSS_3 +translation_of: Web/CSS/background-image +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background-image imposta l'immagine di sfondo di un elemento.

+ + + +

Sintassi

+ +
background-image:uri | none | inherit
+
+ +

Valori

+ +
+
uri 
+
L'indirizzo dell'immagine da utilizzare come sfondo
+
none 
+
Specifica che l'elemento non ha alcuna immagina di sfondo
+
+ +

Esempi

+ +

Note that the star image is partially transparent and is layered over the cat image.

+ +

HTML

+ +
<div>
+    <p class="catsandstars">
+        This paragraph is full of cats<br />and stars.
+    </p>
+    <p>This paragraph is not.</p>
+    <p class="catsandstars">
+        Here are more cats for you.<br />Look at them!
+    </p>
+    <p>And no more.</p>
+</div>
+ +

CSS

+ +
pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Esempi')}}

+ +

Note

+ +

Gli sviluppatori dovrebbero specificare la proprietà background-color, cioè un colore di sfondo che verrà mostrato se l'immagine non è disponibile. Le immagini di sfondo vengono mostrare sopra il colore di sfondo.

+ +

Specifiche

+ + + +

Browser Compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Vedi Anche

+ +

background

+ +

{{ languages( { "en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}

diff --git a/files/it/web/css/background-position/index.html b/files/it/web/css/background-position/index.html new file mode 100644 index 0000000000..2709f4f1b8 --- /dev/null +++ b/files/it/web/css/background-position/index.html @@ -0,0 +1,158 @@ +--- +title: background-position +slug: Web/CSS/background-position +translation_of: Web/CSS/background-position +--- +

 

+ +
+

Sommario

+ +
Edit section
+ +

background-position imposta la posizione iniziale dell'immagine di sfondo impostata.

+ + +
+ +
+

Sintassi

+ +
Edit section
+ +
background-position: [ <percentuale> | <lunghezza> | left | center | right  ]
+                     [ <percentuale> | <lunghezza> | top  | center | bottom ] ? ;
+
+ +
background-position: [ top | center | bottom ];
+
+ +
background-position: inherit;
+
+
+ +
+

Valori

+ +
Edit section
+ +
+
<percentuale>
+
Con un valore di '0% 0%', l'angolo in alto a sinistra dell'immagine è allineato con l'angolo in alto a sinistra dell'angolo del padding del box. Un valore di '100% 100%' posiziona l'angolo in basso a destra dell'immagine nell'angolo in basso a destra dell'area di padding del box. Con un valore, per esempio, di '14% 84%', l'angolo in alto a sinistra dell'immagine sarà al punto '14%; 84%' dell'area di padding del box.
+
<lunghezza>
+
Con un valore di '2cm 1cm', l'angolo in alto a sinistra dell'immagine si trova 2cm a destra e 1cm più in basso dell'angolo in alto a sinistra dell'area di padding del box.
+
top left e left top
+
Come '0% 0%'.
+
top, top center, e center top
+
Come '50% 0%'.
+
right top e top right
+
Come '100% 0%'.
+
left, left center, e center left
+
Come '0% 50%'.
+
center e center center
+
Come '50% 50%'.
+
right, right center, e center right
+
Come '100% 50%'.
+
bottom left e left bottom
+
Come '0% 100%'.
+
bottom, bottom center, e center bottom
+
Come '50% 100%'.
+
bottom right e right bottom
+
Come '100% 100%'.
+
+ +

Se viene specificato solo un valore, quello imposta la distanza orizzontale, e la posizione verticale si imposta a 50%. Al contrario, il primo valore specifica la posizione orizzontale. Sono possibili combinazioni di parole, lunghezze o percentuali, ma se si mischiano le parole con i valori, 'left' e 'right' potrebbero solo essere usati come primo valore (indicano una posizione orizzontale), mentre 'top' e 'bottom' solo per il secondo valore (indicano infatti una posizione verticale).

+
+ +
+

Esempi

+ +
Edit section
+ +
.exampleone {
+	background-image: url("logo.png");
+	background-position: top center;
+}
+
+.exampletwo {
+	background-image: url("logo.png");
+	background-position: 25% 75%;
+}
+
+.examplethree {
+	background-image: url("logo.png");
+	background-position: 2cm bottom;
+}
+
+.examplefour {
+	background-image: url("logo.png");
+	background-position: center 10%;
+}
+
+.examplefive {
+	background-image: url("logo.png");
+	background-position: 2cm 50%;
+}
+
+
+
+ +
+

Specifiche

+ +
Edit section
+ + +
+ +
+

Compatibilità tra browser

+ +
Edit section
+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+
+ +
+

Vedere anche

+ +
Edit section
+ +

background , background-attachment , background-color , background-image , background-position , background-repeat

+
+ +

 

diff --git a/files/it/web/css/background-repeat/index.html b/files/it/web/css/background-repeat/index.html new file mode 100644 index 0000000000..b8d0a25fd7 --- /dev/null +++ b/files/it/web/css/background-repeat/index.html @@ -0,0 +1,165 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +translation_of: Web/CSS/background-repeat +--- +

 

+ +
+

Sommario

+ +
Edit section
+ +

background-repeat specifica se e come lo sfondo deve essere ripetuto.

+ + +
+ +
+

Sintassi

+ +
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
+
+
+ +
+

Valori

+ +
Edit section
+ +
+
repeat
+
L'immagine viene ripetuta sia orizzontalmente che verticalmente
+
repeat-x
+
L'immagine viene ripetuta solo orizzontalmente
+
repeat-y
+
L'immagine viene ripetuta solo verticalmente
+
no-repeat
+
L'immagine non viene ripetuta: viene visualizzata una sola volta.
+
+ +

 

+
+

Esempi

+ +

HTML

+ +
<ol>
+    <li>no-repeat
+        <div class="one">&nbsp;</div>
+    </li>
+    <li>repeat
+        <div class="two">&nbsp;</div>
+    </li>
+    <li>repeat-x
+        <div class="three">&nbsp;</div>
+    </li>
+    <li>repeat-y
+        <div class="four">&nbsp;</div>
+    </li>
+    <li>repeat-x, repeat-y (multiple images)
+        <div class="five">&nbsp;</div>
+    </li>
+</ol>
+ +

CSS

+ +
/* Shared for all DIVS in example */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* background repeat CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Multiple images */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}
+ +

Result

+ +

In this example, each list item is matched with a different value of background-repeat.

+ +

{{EmbedLiveSample('Esempi', 240, 360)}}

+
+

Specifiche

+ +
Edit section
+ + +
+ +
+

Compatibilità tra browser

+ + +
Edit section
+ + + + + + + + + + + + + + + + + + + + + + + + +
Browser +

Versione più vecchia

+
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+
+ +
+

Vedere anche

+ + +
Edit section
+ +

background , background-attachment , background-color , background-image , background-position , background-repeat

+
+ +

 

diff --git a/files/it/web/css/background/index.html b/files/it/web/css/background/index.html new file mode 100644 index 0000000000..c76b5ad59b --- /dev/null +++ b/files/it/web/css/background/index.html @@ -0,0 +1,116 @@ +--- +title: background +slug: Web/CSS/background +translation_of: Web/CSS/background +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background è una scorciatoia per impostare in un'unica riga i valori di altre proprietà inerenti allo sfondo. background può quindi essere utilizzata per impostare una o più tra le seguenti proprietà: background-attachment, background-color, background-image, background-position, background-repeat.

+ + + +

Sintassi

+ +
background: [background-color || background-image ||
+    background-repeat || background-attachment ||
+    background-position] | inherit]
+
+ +

Valori

+ +
+
background-color
+
si veda background-color.
+
background-image 
+
si veda background-image.
+
background-repeat 
+
si veda background-repeat.
+
background-attachment 
+
si veda background-attachment.
+
background-position 
+
si veda background-position.
+
+ +

Esempi

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Esempi")}}

+ +

Note

+ +

Data una dichiarazione valida, la proprietà background prima imposta le singole proprietà relative al background ai loro valori iniziali, poi assegna i valori esplicitamente indicati nella dichiarazione. Non occorre quindi definire un valore per ognuna delle singole proprietà, ma solo per quelle a cui si desidera assegnare un valore diverso da quello predefinito.

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Si veda anche

+ +

background-attachment, background-color, background-image, background-position, background-repeat

+ +

Interwiki Language Links

+ +

 

+ +

{{ languages( { "de": "de/CSS/background", "en": "en/CSS/background", "es": "es/CSS/background", "fr": "fr/CSS/background", "ja": "ja/CSS/background", "ko": "ko/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background" } ) }}

diff --git a/files/it/web/css/border-bottom/index.html b/files/it/web/css/border-bottom/index.html new file mode 100644 index 0000000000..af2c2a213d --- /dev/null +++ b/files/it/web/css/border-bottom/index.html @@ -0,0 +1,99 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +translation_of: Web/CSS/border-bottom +--- +

 

+
+

Sommario

+

La proprietà border-bottom è una abbreviazione che imposta il valore di border-bottom-color , border-bottom-style , and border-bottom-width . These properties describe the bottom border of elements.

+ +
+
+

Sintassi

+ 
border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit
+
+
+
+

Values

+
+
+ <border-width> 
+
+ Vedi border-bottom-width .
+
+ <border-style> 
+
+ Vedi border-bottom-style .
+
+ <border-color> 
+
+ Vedi border-bottom-color .
+
+
+
+

Esempi

+

Guarda gli esempi dal vivo

+ 
element {
+    border-bottom-width: 1px solid #000;
+}
+
+
+
+

Note

+

I tre valori della abbreviazione possono essere specificati in qualsiasi ordine, e uno o due di loro possono essere omessi.

+

Come per tutte le abbreviazioni, border-bottom imposta sempre il valore di tutte le proprietà che può impostare, anche se non sono specificate. Imposta quelle non specificate al loro valore predefinito. Questo vuol dire che:

+ 
  border-bottom-style: dotted;
+  border-bottom: thick green;
+

è attualmente uguale a:

+ 
  border-bottom-style: dotted;
+  border-bottom: none thick green;
+

e il valore di border-bottom-style dato prima di border-bottom viene ignorato.

+

Siccome il valore predefinito di border-bottom-style è none, se non si specifica la parte <border-style> del valore allora la proprietà non specifica nessun bordo.

+
+
+

Specifiche

+ +
+
+

Compatibilità tra browser

+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+
+
+

Vedere anche

+

border , border-bottom , border-bottom-width , border-bottom-style , border-bottom-color .

+
+

 

diff --git a/files/it/web/css/border-style/index.html b/files/it/web/css/border-style/index.html new file mode 100644 index 0000000000..6776c16da4 --- /dev/null +++ b/files/it/web/css/border-style/index.html @@ -0,0 +1,229 @@ +--- +title: border-style +slug: Web/CSS/border-style +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +
La proprietà border-style è una shorthand usata per modificare lo stile del bordo per tutti e quattro i lati dell'elemento.
+ +
+ +
/* Applicato a tutti 4 i lati */
+border-style: dashed;
+
+/* verticale | orrizzontale */
+border-style: dotted solid;
+
+/* superiore | orizzontale | inferiore */
+border-style: hidden double dashed;
+
+/* superiore | destra | inferiore | sinistra */
+border-style: none solid dotted dashed;
+
+/* Valori globali */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +
Nota: Il valore di default di border-style è none. Questo significa che se si cambia il {{ Cssxref("border-width") }} e il {{ Cssxref("border-color") }}, non si vedrà il bordo almeno che non si cambi questa proprietà in qualcosa che non sia none o hidden.
+ +

{{cssinfo}}

+ +

Sintassi

+ +

La proprietà border-style può essere specificata usando uno, due, tre o quattro valori.

+ + + +

Ogni valore è una keyword scelta dalla seguente lista.

+ +

Valori

+ +
+
<br-style>
+
E' una keyword che descrive lo stile del bordo inferiore (bottom). Può avere i seguenti valori: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
+ 		Come per la keyword hidden, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore none ha la priorità minore: significa che se è specificato qualche altro bordo, questo verrà mostrato.
hidden +
+ 		Come per la keyword hidden, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore ha priorità maggiore: significa che se è specificato qualche altro bordo, questo non verrà mostrato.
dotted +
+ 		Mostra una serie di punti arrotondati. Lo spazio tra i punti non è definito nella specifica. Il raggio dei punti è calcolato metà di {{ cssxref("border-width") }}.
dashed +
+ 		Mostra una serie di di linee quadrettate. L'esatta dimensione e lunghezza dei segmenti non sono definiti nella specifica.
solid +
+ 		Mostra una singola dritta e solida linea.
double +
+ 		Mostra due linee dritte che vengono aggiunte all'ammontare di pixel definito come {{ cssxref("border-width") }} .
groove +
+ 		Mostra un bordo che porta ad un effetto intagliato. È l'opposto di ridge. 
ridge +
+ 		Mostra un bordo che porta ad un effetto 3D, come se venisse fuori dalla pagina. È l'opposto di  groove.
inset +
+ 		Mostra un bordo che fa apparire il box incassato.
+ E' l'opposto di outset. Quando viene applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come collapsed, questo valore si comporta come groove.
outset +
+ 		+

Mostra un bordo che fa apparire il box in 3D, in rilievo. E' l'opposto di inset. Quando applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come collapsed, questo valore si comporta come ridge.

+
+
+
+ +

Sintassi Formale

+ +
{{csssyntax}}
+ +

Esempi

+ +

Tabella con tutti i valori della proprietà

+ +

Ecco un esempio con tutti i valori che la proprietà può assumere

+ +

HTML

+ +
<table>
+    <tr>
+        <td class="b1">none</td>
+        <td class="b2">hidden</td>
+        <td class="b3">dotted</td>
+        <td class="b4">dashed</td>
+    </tr>
+    <tr>
+        <td class="b5">solid</td>
+        <td class="b6">double</td>
+        <td class="b7">groove</td>
+        <td class="b8">ridge</td>
+    </tr>
+    <tr>
+        <td class="b9">inset</td>
+        <td class="b10">outset</td>
+    </tr>
+</table>
+ +

CSS

+ +
/* Definizione stile tabella */
+table {
+    border-width: 3px;
+    background-color: #52E396;
+}
+tr, td {
+    padding: 2px;
+}
+
+/* border-style classi di esempio */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+ +

Output

+ +

{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}

+ +

Specific​he

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}{{ Spec2('CSS3 Backgrounds') }}No change
{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}{{ Spec2('CSS2.1') }}Added hidden
{{ SpecName('CSS1', '#border-style', 'border-style') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-style")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/css/border/index.html b/files/it/web/css/border/index.html new file mode 100644 index 0000000000..2e903b8520 --- /dev/null +++ b/files/it/web/css/border/index.html @@ -0,0 +1,109 @@ +--- +title: border +slug: Web/CSS/border +translation_of: Web/CSS/border +--- +

 

+
+

Sommario

+
+ Edit section
+

La proprietà border è una abbreviazione per impostare in una sola volta i valori individuali di border. border può essere usata per impostare uno o più dei seguenti valori: border-width , border-style , border-color .

+ +
+
+

Sintassi

+
+ Edit section
+ 
border:  [ <border-width> || <border-style> || <border-color> ] | inherit
+
+
+
+

Valori

+
+ Edit section
+
+
+ border-width
+
+ Opzionale, se è assente viene usato il valore di default medium. Vedi border-width .
+
+ border-style 
+
+ Richiesto, se è assente viene usato il valore di default none. Vedi border-style .
+
+ border-color 
+
+ Opzionale, se è assente il valore di default è la proprietà color (colore di primo piano). Vedi border-color .
+
+
+
+

Esempi

+
+ Edit section
+

Guarda gli esempi dal vivo

+ 
element { border: dashed }          /* bordo tratteggiato di medio spessore, lo stesso colore del testo */
+element { border: dotted 1.5em }    /* bordo spesso 1.5em a punti, lo stesso colore del testo */
+element { border: solid red }       /* bordo rosso continuo di medio spessore */
+element { border: solid blue 10px } /* bordo continuo blu spesso 10px */
+
+
+
+

Note

+
+ Edit section
+

Mentre le proprietà border-width , border-style , e border-color accettano fino a quattro valori, questa proprietà accetta solo un valore per ciascuna.

+
+ +
+

Compatibilità tra browser

+
+ Edit section
+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4.0
Firefox1.0
Safari1.0
Opera3.5
+
+
+

Vedere anche

+
+ Edit section
+

border , border-width , border-style , border-color , margin , padding

+
+

 

diff --git a/files/it/web/css/cascade/index.html b/files/it/web/css/cascade/index.html new file mode 100644 index 0000000000..8ce2e4dafc --- /dev/null +++ b/files/it/web/css/cascade/index.html @@ -0,0 +1,149 @@ +--- +title: Cascade +slug: Web/CSS/Cascade +translation_of: Web/CSS/Cascade +--- +

{{ CSSRef() }}

+ +

The cascade is a fundamental feature of CSS. It is an algorithm defining how to combine properties values originating from different sources. It lies at the core of CSS as stressed by its name: Cascading Style Sheets.

+ +

What CSS entities participate in the cascade

+ +

Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containing entities other than declarations, like  {{ cssxref("@font-face")}} containing descriptors don't participate in the cascade. In these case, only the at-rule as the whole participates in the cascade; here the @font-face identified by its font-family descriptor. If several @font-face with the same descriptor are defined, only the most adequate @font-face, as a whole, is considered.

+ +

If the declarations contained in most at-rules participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.

+ +

Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.

+ +

Origin of CSS declarations

+ +

The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:

+ + + +

Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.

+ +

Cascading order

+ +

The cascading algorithm determines how to find the value to apply for each property for each document element.

+ +
    +
  1. It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.
    2. +
  2. Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. The cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     OriginImportance
    1user agentnormal
    2user agent!important
    3usernormal
    4authornormal
    5CSS Animationssee below
    6author!important
    7user!important
    +
    3. +
  3. In case of equality, the specificity of a value is considered to choose one or the other.
    4. +
+ +

CSS animations and the cascade

+ +

CSS Animations, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single @keyframes and never mixes several of them.

+ +

When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.

+ +

Also note that values within @keyframes at-rules overwrite all normal values but are overwritten by !important values.

+ +

Example

+ +

User-agent CSS:

+ +
li { margin-left: 10px }
+ +

Author CSS 1:

+ +
li { margin-left: 0 } /* This is a reset */
+ +

Author CSS 2:

+ +
@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+
+ +

User CSS:

+ +
.specific { margin-left: 1em }
+ +

HTML:

+ +
<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+
+ +

In this case, declarations inside li and .specific rules should apply. No declaration is marked as !important so the precedence order is author style sheets before user style sheets or user-agent stylesheet.

+ +

So three declarations are in competition:

+ +
margin-left: 0
+ +
margin-left: 3px
+ +
margin-left: 1px
+ +

The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:

+ +
margin-left: 3px
+ +

Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.

+ +

See also

+ + diff --git a/files/it/web/css/color/index.html b/files/it/web/css/color/index.html new file mode 100644 index 0000000000..04a15799cc --- /dev/null +++ b/files/it/web/css/color/index.html @@ -0,0 +1,81 @@ +--- +title: color +slug: Web/CSS/color +translation_of: Web/CSS/color +--- +

 

+
+

Sommario

+
+ Edit section
+

La proprietà CSS color imposta il colore di primo piano del contenuto testuale di un elemento.

+ +
+
+

Sintassi

+
+ Edit section
+ 
color:  <color> | inherit
+
+
+

Valori

+
+ Edit section
+
+
+ <color>
+
+ La proprietà color accetta varie parole chiave e valori numerici. Vedi i valori di <color> per maggiori dettagli.
+
+
+
+

Esempi

+
+ Edit section
+

Tutti gli esempi seguenti rendono il testo rosso.

+ 
element { color: red }
+element { color: #f00 }
+element { color: #ff0000 }
+element { color: rgb(255,0,0) }
+element { color: rgb(100%, 0%, 0%) }
+element { color: hsl(0, 100%, 50%) }
+
+/* 50% translucent, support since Firefox 3 */
+element { color: rgba(255, 0, 0, 0.5) }
+element { color: hsla(0, 100%, 50%, 0.5) }
+
+
+

Specifiche

+
+ Edit section
+ +
+
+

Compatibilità tra browser

+
+
+ Edit section
+

La proprietà color è supportata molto bene da tutti i browser più comuni.
+ Una tabella di compatibilità tra browser è qui: <color> .

+
+
+

Vedere anche

+
+
+ Edit section
+ +
+

 

diff --git a/files/it/web/css/css_box_model/index.html b/files/it/web/css/css_box_model/index.html new file mode 100644 index 0000000000..65d01c1965 --- /dev/null +++ b/files/it/web/css/css_box_model/index.html @@ -0,0 +1,165 @@ +--- +title: CSS Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

CSS Box Model is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.

+ +

Reference

+ +

Properties

+ +

Properties controlling the flow of content in a box

+ +
+
    +
  • {{cssxref("box-sizing")}}
    • +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("overflow-x")}}
    • +
  • {{cssxref("overflow-y")}}
    • +
+
+ +

Properties controlling the size of a box

+ +
+
    +
  • {{cssxref("height")}}
    • +
  • {{cssxref("width")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • {{cssxref("max-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("min-width")}}
    • +
+
+ +

Properties controlling the margins of a box

+ +
+
    +
  • {{cssxref("margin")}}
    • +
  • {{cssxref("margin-bottom")}}
    • +
  • {{cssxref("margin-left")}}
    • +
  • {{cssxref("margin-right")}}
    • +
  • {{cssxref("margin-top")}}
    • +
+
+ +

Properties controlling the paddings of a box

+ +
+
    +
  • {{cssxref("padding")}}
    • +
  • {{cssxref("padding-bottom")}}
    • +
  • {{cssxref("padding-left")}}
    • +
  • {{cssxref("padding-right")}}
    • +
  • {{cssxref("padding-top")}}
    • +
+
+ +

Other properties

+ +
+
    +
  • {{cssxref("visibility")}}
    • +
+
+ +

Guides

+ +
+
Introduction to the CSS box model
+
Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.
+
Mastering margin collapsing
+
Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.
+
Visual formatting model
+
Explains the visual formatting model.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..6aa8f3ae9e --- /dev/null +++ b/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,68 @@ +--- +title: Introduzione al box model in CSS +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +tags: + - CSS + - CSS Box Model + - Guida +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +
Quando un browser presenta un documento HTML all'utente,  il motore del browser rappresenta ogni elemento del documento come un rettangolo, chiamato box, secondo lo standard del box model di CSS. Il codice CSS determina le dimensioni, la posizione e le proprietà (colore, background, spessore del bordo, ecc.) dei box.
+ +
 
+ +

Ogni box è composto da quattro parti (o aree), definite dai rispettivi limiti: il limite del contenuto, il limite del padding, il limite del bordo e il limite del margine.

+ +

CSS Box model

+ +

L'area del contenuto, circoscritta dal limite del contenuto, è dove si trova il contenuto vero e proprio dell'elemento, come testo, immagini o un video. Le sue dimensioni sono chiamate content width (o content-box width) e content height (o content-box height). Spesso ha un colore o una immagine di background.

+ +

Se la proprietà {{cssxref("box-sizing")}} è impostata su content-box ( valore di default), le dimensioni dell'area del contenuo si possono definire esplicitamente con le proprietà {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, e {{cssxref("max-height")}}.

+ +

L'area del padding, circoscritta dal limite del padding, estende l'area del contenuto per includere il padding dell'elemento. Le sue dimensioni sono chiamate padding-box width e padding-box height. Se l'area del contenuto ha un background, il background si estende all'area del padding.

+ +

lo spessore del padding è determinato tramite le proprietà {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, o usando la forma abbreviata {{cssxref("padding")}}.

+ +

L'area del bordo, circoscritta dal limite del bordo, estende l'area del padding per includere i bordi dell'elemento. Le sue dimensioni sono chiamate border-box width e border-box height.

+ +

Lo spessore dei bordi è determinato tramite la proprietà {{cssxref("border-width")}}, o usando la forma abbreviata {{cssxref("border")}}. Se la proprietà {{cssxref("box-sizing")}} è impostata su  border-box, le dimensioni dell'area del bordo possono essere definite esplicitamente usando le proprietà {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, e {{cssxref("max-height")}}.

+ +

L'area del margine, circoscritta dal limite del margine, estende l'area del bordo per includere uno spazio vuoto usato per separare l'elemento dagli elementi vicini. Le sue dimensioni sono chiamate margin-box width e margin-box height.

+ +

Le dimensioni dell'area del margine sono determinate tramite le proprietà {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, o usando la forma abbreviata {{cssxref("margin")}}. Quando si verifica un caso di margini che collassano (margin collapsing), l'area del margine non è più chiaramente definita, perché i margini di due differenti box vengono condivisi.

+ +

Infine, si noti come negli elementi non-replaced (ossia elementi che hanno il contenuto inserito nell'HTML tra l'etichetta di apertura e chiusura dell'elemento, come <span>contenuto</span> anziché derivare il contenuto da una fonte esterna come src per le etichette <img>)  e con disposizione in linea (inline), la quantità di spazio che occupano (il loro contributo all'altezza della linea) è determinato dalla proprietà {{cssxref('line-height')}}, anche se i bordi e il padding sono comunque mostrati attorno al contenuto.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificheStatoCommenti
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Descrizione più precisa, ma nessun cambio a livello pratico.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definizione iniziale.
+ +

Vedi anche

+ + diff --git a/files/it/web/css/css_flexible_box_layout/index.html b/files/it/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..fadc582c86 --- /dev/null +++ b/files/it/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +

{{CSSRef}}

+ +

CSS Flexible is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("flex")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex-flow")}}
    • +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-wrap")}}
    • +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("order")}}
    • +
+
+ +

Guides

+ +
+
Using CSS flexible boxes
+
Step-by-step tutorial about how to build layouts using this feature.
+
Using flexbox to lay out Web applications
+
Tutorial explaining how to use flexbox in the specific context of Web applications.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("20.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}
+ 11.0		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

 

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 new file mode 100644 index 0000000000..9acef6a218 --- /dev/null +++ b/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html @@ -0,0 +1,394 @@ +--- +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 +--- +
{{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_positioning/index.html b/files/it/web/css/css_positioning/index.html new file mode 100644 index 0000000000..61afa2e242 --- /dev/null +++ b/files/it/web/css/css_positioning/index.html @@ -0,0 +1,63 @@ +--- +title: CSS Positioned Layout +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +
{{CSSRef}}
+ +

CSS Positioned Layout is a module of CSS that defines how to position elements on the page.

+ +

Reference

+ +

CSS properties

+ +
+
    +
  • {{cssxref("bottom")}}
    • +
  • {{cssxref("clear")}}
    • +
  • {{cssxref("float")}}
    • +
  • {{cssxref("left")}}
    • +
  • {{cssxref("position")}}
    • +
  • {{cssxref("right")}}
    • +
  • {{cssxref("top")}}
    • +
  • {{cssxref("z-index")}}
    • +
+
+ +

Guides

+ +
+
Understanding CSS z-index
+
Presents the notion of stacking context and explains how z-ordering works, with several examples.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
diff --git a/files/it/web/css/css_positioning/understanding_z_index/index.html b/files/it/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..554652f1b8 --- /dev/null +++ b/files/it/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,51 @@ +--- +title: Understanding CSS z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - NeedsTranslation + - Reference + - TopicStub + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +
{{cssref}}
+ +

In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.

+ +
+

In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.

+
+ +

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS z-index property.

+ +

Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

+ +

This article will try to explain those rules, with some simplification and several examples.

+ +
    +
  1. Stacking without the z-index property: The stacking rules that apply when z-index is not used.
    2. +
  2. Stacking with floated blocks: How floating elements are handled with stacking.
    3. +
  3. Using z-index: How to use z-index to change default stacking.
    4. +
  4. The stacking context: Notes on the stacking context.
    5. +
  5. Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
    6. +
  6. Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
    7. +
  7. Stacking context example 3: 3-level HTML hierarchy, z-index on the second level
    8. +
+ +
+

Original Document Information

+ + + +

Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.

+
diff --git a/files/it/web/css/cursor/index.html b/files/it/web/css/cursor/index.html new file mode 100644 index 0000000000..5284daf295 --- /dev/null +++ b/files/it/web/css/cursor/index.html @@ -0,0 +1,388 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS Property + - Layout + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

Summary

+ +

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("cursor")}}
+
+ +

Values

+ +
+
<uri>
+
A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one {{cssxref("<uri>")}} may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.
+
<x> <y> {{ experimental_inline() }}
+
Optional x- and y-coordinates. Two unit-less non-negative numbers less than 32.
+
Keyword values
+
+

Move mouse over value for testing:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryCSS value Description
Generalauto The browser determines the cursor to display based on the current context.
+ E.g. equivalent to text when hovering text.
defaultdefault.gifDefault cursor, typically an arrow.
none No cursor is rendered.
Links & statuscontext-menucontext-menu.pngA context menu is available under the cursor.
+ Only IE 10 and up have implemented this on Windows: {{ Bug("258960") }}.
helphelp.gifIndicating help is available.
pointerpointer.gifE.g. used when hovering over links, typically a hand.
progressprogress.gifThe program is busy in the background but the user can still interact with the interface (unlike for wait).
waitwait.gifThe program is busy (sometimes an hourglass or a watch).
Selectioncellcell.gifIndicating that cells can be selected.
crosshaircrosshair.gifCross cursor, often used to indicate selection in a bitmap.
texttext.gifIndicating text can be selected, typically an I-beam.
vertical-textvertical-text.gifIndicating that vertical text can be selected, typically a sideways I-beam.
Drag and dropaliasalias.gifIndicating an alias or shortcut is to be created.
copycopy.gifIndicating that something can be copied.
movemove.gifThe hovered object may be moved.
no-dropno-drop.gifCursor showing that a drop is not allowed at the current location.
+ {{ bug("275173") }} on Windows, "no-drop is the same as not-allowed".
not-allowednot-allowed.gifCursor showing that something cannot be done.
Resize & scrollingall-scrollall-scroll.gifCursor showing that something can be scrolled in any direction (panned).
+ {{ bug("275174") }} on Windows, "all-scroll is the same as move".
col-resizecol-resize.gifThe item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
row-resizerow-resize.gifThe item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
n-resizeExample of a resize towards the top cursorSome edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifIndicates a bidirectional resize cursor.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif +

Indicates that something can be zoomed (magnified) in or out.

+
zoom-outzoom-out.gif
Grabgrabgrab.gif +

Indicates that something can be grabbed (dragged to be moved).

+
grabbinggrabbing.gif
+
+
+ +

Examples

+ +
.foo { cursor: crosshair; }
+
+/* use prefixed-value if "zoom-in" isn't supported */
+.bar { cursor: -webkit-zoom-in;  cursor: zoom-in; }
+
+/* standard cursor value as fallback for url() must be provided (doesn't work without) */
+.baz { cursor: url(hyper.cur), auto }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}{{ Spec2('CSS3 Basic UI') }}Addition of several keywords and the positioning syntax for url().
{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChrome (WebKit)Firefox (Gecko)Internet ExplorerOperaSafari
auto, crosshair, default, move, text, wait, help,
+ n-resize, e-resize, s-resize, w-resize,
+ ne-resize, nw-resize, se-resize, sw-resize		1.01.0 (1.0)4.07.01.2
pointer, progress1.01.0 (1.0 | 1.7)6.07.x1.2 | 3.0
url() - See Using URL values1.0 (523)1.5 (1.8);
+ OS X: 4.0 (2.0)		6.0{{ CompatUnknown }}3.0
Positioning syntax for url() values {{ experimental_inline() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatNo }}{{ CompatUnknown }}{{ CompatVersionUnknown() }}
not-allowed, no-drop, vertical-text, all-scroll,
+ col-resize, row-resize		1.0 (522)1.5 (1.8)6.010.63.0
alias, cell, copy,
+ ew-resize, ns-resize, nesw-resize, nwse-resize		1.0 (522)1.5 (1.8)10.010.63.0
context-menuOS X, Linux: 1.0 (522)OS X, Linux: 1.5 (1.8)10.010.63.0
none5.0 (533)3.0 (1.9)9.0{{ CompatUnknown }}5.0
inherit1.01.08.09.01.2
zoom-in, zoom-out1.0 (522) {{ property_prefix("-webkit-") }}1.0 (1.4) {{ property_prefix("-moz-") }}
+ 24.0		{{ CompatNo }}11.63.0 {{ property_prefix("-webkit-") }}
grab, grabbing1.0; Windows: 22.0 {{ property_prefix("-webkit-") }}1.5 (1.8) {{ property_prefix("-moz-") }}
+ 27.0		{{ CompatNo }}{{ CompatUnknown }}4.0 {{ property_prefix("-webkit-") }}
+ +

See also

+ + 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" new file mode 100644 index 0000000000..772fa80e13 --- /dev/null +++ "b/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/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/flex-shrink/index.html b/files/it/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..81cc7cfd51 --- /dev/null +++ b/files/it/web/css/flex-shrink/index.html @@ -0,0 +1,120 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Flex + - Proprietà CSS +translation_of: Web/CSS/flex-shrink +--- +
{{CSSRef}}
+ +
 
+ +

La proprietà CSS flex-shrink setta il fattore di restringimento di un elemento flessibile. Se la dimensione di tutti gli elementi flessibili è maggiore del loro contenitore flessibile: gli elementi si restringono per adattarsi secondo il valore impostato di flex-shrink.

+ +
{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}
+ + + +

Sintassi

+ +
/* <number> valori */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Valori globali */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+
+ +

La proprietà flex-shrink è specificata come un singolo <number>.

+ +

Valori

+ +
+
<number>
+
Guarda {{cssxref("<number>")}}. Non sono ammessi valori negativi.
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempio

+ +

HTML

+ +
+
<p>La larghezza del contenuto è di 500 px; la base flessibile degli articoli flessibili è 120 px.</p>
+<p>A, B, C hanno il valore flex-shrink:1 invece D ed E hanno flex-shrink:2 </p>
+<p>La larghezza di D ed E è minore delle altre.</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+
+
+ +

Result

+ +

{{EmbedLiveSample('Example', 500, 300)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}{{Spec2('CSS3 Flexbox')}}Definizione iniziale
+ +

{{cssinfo}}

+ +

Compatibilità dei browser

+ + + +

{{Compat("css.properties.flex-shrink")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/css/flex/index.html b/files/it/web/css/flex/index.html new file mode 100644 index 0000000000..a59a226f90 --- /dev/null +++ b/files/it/web/css/flex/index.html @@ -0,0 +1,200 @@ +--- +title: flex +slug: Web/CSS/flex +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

Sommario

+ +

La proprietà flex di CSS è una proprietà shorthand usata per modificare le dimensioni di un elemento flessibile e riempire gli spazi. Gli elementi flex possono essere usati per distribuire lo spazio in modo proporzionale, al loro allargarsi o al loro restringersi, per evitare sovrapposizioni o eccedenze.

+ +

{{cssinfo}}

+ +

Vedi L'Uso di flexible boxes per altre proprietà e informazioni.

+ +

Sintassi

+ +
/* 0 0 auto */
+flex: none;
+
+/* Un valore, numero senza unità: flex-grow */
+flex: 2;
+
+/* Un valore, width/height: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Due valori: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Due valori: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Tre valori: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Valori globali */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

Valori

+ +
+
<'flex-grow'>
+
Il valore flex-grow appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.
+
<'flex-shrink'>
+
Il valore flex-shrink appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.
+
<'flex-basis'>
+
Il valore flex-basis appartiene all'elemento flex. Qualsiasi valore valido per width e heigth è accettato. La dimensione con valore 0 deve avere un'unità, per evitare di essere interpretata come un valore di flessibilità. Quando non si inseriscono valori, quello predefinito è 0%.
+
none
+
Questo valore viene interpretato come: 0 0 auto.
+
+

Sintassi formale

+
+
+ +
{{csssyntax}}
+ +

Example

+ +
#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container > .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container > .raw-item {
+	width: 5rem;
+}
+
+ +
<div id="flex-container">
+    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
+    <div class="raw-item" id="raw">Raw box</div>
+</div>
+
+ + + +

Risultato

+ +

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

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("18.0")}} (behind a pref) [1] [2]
+ {{CompatGeckoDesktop("20.0")}} [2][3]		21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}} [3][4]
+ 11.0 [3][4]		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

[1] Per attivare il supporto FlexBox per Firefox 18 e 19, l'utente deve cambiare la about: config preferenza "layout.css.flexbox.enabled" true.

+ +

[2] Multi-line flexbox sono supportate da Firefox 28.

+ +

[3] Internet Explorer 10-11 (ma non 12+) ignora l'uso di calc()nella flex-basis parte della sintassi di flex. Questo può essere aggirato con semplici proprietà. Vedi Flexbug #8 per maggiori informazioni.

+ +

[4] In Internet Explorer 10-11 (ma non 12+), una dichiarazione flessibile con un valore senza unità nella sua parte flex-base è considerato sintatticamente valido e sarà quindi ignorata. Una soluzione è quella di includere sempre una unità nella parte flex-base del valore di shorthand di flex. Vedi Flexbug #4 per ulteriori informazioni.

+ +

Guarda altro

+ + diff --git a/files/it/web/css/font-size-adjust/index.html b/files/it/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..8933c16794 --- /dev/null +++ b/files/it/web/css/font-size-adjust/index.html @@ -0,0 +1,114 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +translation_of: Web/CSS/font-size-adjust +--- +

il font-size-adjust nelle proprieta CSS, dice come  dovrebbe essere impostatala dimensione del font  scelto, in base all' altezza dei caratteri minuscoli piuttosto che le lettere maiuscole.

+ +
/* usa uno specifico font size */
+font-size-adjust: none;
+
+/* usa un dimensione font che dimezza le lettere
+minuscole rispetto al font in uso*/
+font-size-adjust: 0.5;
+
+/* Valori globali */
+font-size-adjust: inherit;
+font-size-adjust: initial;
+font-size-adjust: unset;
+
+ +

La proprieta è utilissima per la leggibilita dei fonts, specialmente alle piccole dimensioni, che è determinata piu dalla dimensione dei caratteri minuscoli che quelli maiuscoli. La leggibilita puo diventare un problema  quando la prima scelta {{ Cssxref("font-family") }} non è disponibile e la sua sostituzione porta una significativa differenza nell' aspetto in rapportato (tra la dimensione caratteri minuscoli e la dimensione del font).

+ +

Per usare questa proprieta in modo che sia comparibile con i browsers che non supportano il font-size-adjust, questa viene definita come un numero che  sarà moltiplicato per  la proprieta {{ Cssxref("font-size") }}. Questo significa che il valore specificato per la proprieta, deve essere normalmente il rapporto dell' aspetto del primo font scelto. Per esempio  un foglio di stile  che specifica :

+ +
font-size: 14px;
+font-size-adjust: 0.5;
+
+ +

...sta specificando che le lettere minuscole del font dovrebbero essere alte 7 pixel (0.5 × 14px).

+ +

{{cssinfo}}

+ +

Sintassi

+ +

Valori

+ +
+
none
+
Sceglie  la dimensione del font in base solo alla proprieta {{ Cssxref("font-size") }}.
+
{{cssxref("<numero>")}}
+
+

Sceglie la dimensione del font in modo che il minuscolo ( come determinato dalla  x-height del font ) sia  un  numero  di volte il {{ Cssxref("font-size") }}.

+ +

Il numero specificato dovrebbe normalmente avere il rapporto di aspetto (rapporto di x-height con il font size) della prima scelta nel {{ Cssxref("font-family") }}. Questo vuol dire che il primo font scelto, quando disponibile, apparira della stessa dimensione nei browsers se supportano o no il font-size-adjust.

+ +

0 genera un testo di altezza zero (testo nascosto).

+
+
+ +

Sintassi Formale

+ +
{{csssyntax}}
+ +

Esempi

+ +

HTML

+ +
<p class="times">Questo testo usa il font Times(10px), che è difficile da leggere nelle piccole dimensioni.</p>
+<p class="verdana">Questo testo usa il font Verdana(10px), che a delle lettere minuscole relativamente grandi.</p>
+<p class="adjtimes">Questo è il Times 10px, ma adesso corretto allo stesso rapporto di aspetto del Verdana.</p>
+ +

CSS

+ +
.times {
+  font-family: Times, serif;
+  font-size: 10px;
+}
+
+.verdana {
+  font-family: Verdana, sans-serif;
+  font-size: 10px;
+}
+
+.adjtimes {
+  font-family: Times, sans-serif;
+  font-size-adjust: 0.58;
+  font-size: 10px;
+}
+
+ +

Risultati

+ +

{{ EmbedLiveSample('Examples', 500, 200) }}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}{{ Spec2('CSS3 Fonts') }}Initial definition
+ +
+

The CSS property font-size-adjust was initially defined in CSS 2, but dropped in CSS 2.1. It has been newly defined in CSS 3.

+
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.font-size-adjust")}}

+ +
{{CSSRef}}
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 new file mode 100644 index 0000000000..c97a962ac6 --- /dev/null +++ b/files/it/web/css/guida_di_riferimento_ai_css/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/index.html b/files/it/web/css/index.html new file mode 100644 index 0000000000..4a4f4efb55 --- /dev/null +++ b/files/it/web/css/index.html @@ -0,0 +1,107 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Stile +translation_of: Web/CSS +--- +

Il Cascading Style Sheets (CSS) è un linguaggio per fogli di stile utilizzato per descrivere la presentazione di un documento scritto in HTML o XML (inclusi vari linguaggi XML quali SVG o XHTML). Il CSS descrive come gli elementi dovrebbero apparire su schermo, su carta, nel parlato o in altri media.

+ +

Il CSS è uno dei linguaggi fondamentali dell'open Web ed è standardizzato nei browser web secondo la specifica W3C. Sviluppato a livelli, il CSS1 è ora obsoleto, il CSS2.1 è raccomandato, e CSS3, ora diviso in moduli più piccoli, sta progredendo sulla via della standardizzazione.

+ +
+
    +
  • Introduzione al CSS + +

    Se sei nuovo nello sviluppo web, assicurati di leggere il nostro articolo sulle basi del CSS per imparare cos'è il CSS e come usarlo.

    +
    • +
  • Tutorial CSS +

    La nostra area di apprendimento CSS contiene una vasta gamma di tutorial per portarti da un livello principiante a competente, coprendo tutti i fondamenti.

    +
    • +
  • Guida di Riferimento +

    La nostra esaustiva guida di riferimento CSS per sviluppatori esperti descrive ogni proprietà e concetto CSS.

    +
    • +
+
+ +
+
+

Documentazione ed esercitazioni su CSS

+ +
+
Concetti chiave del CSS
+
Descrive la sintassi del linguaggio e introduce a elementi fondamentali quali specificità ed ereditarietà, il modello a box ed il collasso dei margini, impilamento e contesti di formattazione dei blocchi, o i valori iniziali, calcolati, utilizzati ed attuali. Sono anche definite entità quali le proprietà scorciatoia di CSS.
+
Scrivere CSS efficienti
+
Spiega come i motori dei fogli di stile realizzano il riscontro dei selettori e descrive le regole per la scrittura di CSS più efficienti.
+
Utilizzare le trasformazioni di CSS
+
Illustra le operazioni 2D che possono essere applicate a ogni elemento al fine di ruotarlo, inclinarlo o traslarlo.
+
Utilizzare le transizioni di CSS
+
Spiega come cambiare l'aspetto di un elemento utilizzado un'animazione graduale tra lo stato iniziale e il finale.
+
Utilizzare le animazioni di CSS
+
Descrive come definire le animazioni di un elemento ma anche come rilevare con Javascript se il browser le supporta.
+
Utilizzare i gradienti di CSS
+
Spiega come definire i gradienti, immagini composte di graduali variazioni dei colori.
+
Utilizzare l'impaginazione multicolonna di CSS
+
Illustra come effettuare l'impostazione di pagine a colonne multiple utilizzando l'impaginazione multicolonna di CSS Livello 3.
+
Utilizzare sfondi multipli di CSS
+
Descrive come definire parecchi sfondi sullo stesso elemento.
+
Scalare immagini di sfondo
+
Mostra come controllare il comportamento delle immagini di sfondo quando queste non riscontrano esattamente la dimensione del loro contenitore.
+
Utilizzare l'interrogazione del media di CSS
+
Presenta come selezionare i fogli di stile in base a dettagli del dispositivo di visualizzazione, come la dimensione dell'area disponibile, la sua risoluzione o se ha un touchscreen.
+
Utilizzare i contatori di CSS
+
Spiega come utilizzare numerazione e contatori automatici, essenzialmente utilizzati come contatori d'elenco.
+
Font e Tipografia
+
Informa sulla gestione dei propri font utilizzando {{ cssxref("@font-face") }} e il formato font WOFF.
+
Utilizzare i box flessibili di CSS
+
Descrive come utilizzare i box felssibili per la progettazione dell'impaginazione.
+
Il Rientro Coerente degli Elenchi
+
Cercare di cambiare il rientro delle liste con i CSS è più complicato di quanto sembri, ma solo perchè i browser conformi a CSS hanno intrapreso strade diverse sul rientro predefinito. Scopri come metterli tutti in riga.
+
+
Utilizzare le informazioni di stile dinamiche
+
Come ottenere informazioni sullo stile e manipolarlo via DOM.
+
+ +

Vedi Tutto...

+
+ +
+

Ottentere aiuto dalla comunità

+ +

Hai bisogno di aiuto su problemi relativi a CSS e non trovi la soluzione nella documentazione?

+ +
    +
  • Controlla le domande comuni su CSS che danno suggerimenti per risolvere i problemi comuni.
    • +
  • Vai su Stack Overflow, un sito collaborativo di Q&A in cui cercare risposte alla tue domande o, se non ne trovi, porre lì le tue domande.
    • +
  • Consulta il forum layout, che tratta CSS e HTML: + +
    • +
+ +

Non dimenticare la netiquette...

+ +

Strumenti che semplificano lo sviluppo in CSS

+ +
    +
  • Il Servizio di Validazione di CSS del W3C controlla se un dato CSS è valido. E' un'inestimabile strumento di debug.
    • +
  • L'estensione Firebug di FireFox, una popolare estensione che permette di modificare il CSS in uso sul sito che si sta visualizzando. Molto pratica per testare i cambiamenti, sebbene questa estensione faccia molto di più.
    • +
  • L'estensione Web Developer di FireFox permette anche di vedere e editare il CSS in uso sul sito visualizzato. Più semplice di Firebug, sebbene meno potente.
    • +
  • L'estensione EditCSS di FireFox permette di editare il CSS nella barra laterale.
    • +
+ +

Vedi Tutto...

+ + + + +
+
diff --git a/files/it/web/css/media_queries/index.html b/files/it/web/css/media_queries/index.html new file mode 100644 index 0000000000..aaa9a6ac17 --- /dev/null +++ b/files/it/web/css/media_queries/index.html @@ -0,0 +1,136 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - CSS3 Media Query + - Disegno Responsivo + - media query +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef("CSS3 Media Queries")}}
+ +

Le Media Queries sono un componente essenziale del disegno responsivo, che rende possibile adattare il codice CSS a differenti parametri e caratteristiche dei dispositivi con cui viene visualizzato un sito. Per esempio, una media query può applicare uno stile differente al sito se lo schermo del dispositivo è di dimensioni inferiori a un certo limite, o a seconda che l'utente stia usando il dispositivo in modalità portrait (visualizzazione verticale) o landscape (visualizzazione orizzontale).  La direttiva {{cssxref("@media")}} è usata per applicare stili condizionali a un documento.

+ +

Inoltre, la sintassi delle media queries è usata anche in altri contesti, come nell'attributo {{htmlattrxref("media", "source")}} di un elemento {{HTMLElement("source")}} , con il quale si può specificare quale sorgente usare per un elemento {{HTMLElement("picture")}}.

+ +

Esiste inoltre il metodo {{domxref("Window.matchMedia()")}} che si può usare per testare il rapporto tra lo schermo corrente e una media query. Puoi anche usare {{domxref("MediaQueryList.addListener()")}} per ricevere una notifica ogni volta che lo stato delle queries cambia. Con quesa funzionalità, il tuo sito o la tua applicazione possono rispondere a cambi nella configurazione, nell'orientamento o nello stato del dispositivo.

+ +

Puoi saperne di più su come usare le media queries programmaticamente nell'articolo Testing media queries.

+ +

Referenze

+ +

Direttive

+ +
+
    +
  • {{cssxref("@import")}}
    • +
  • {{cssxref("@media")}}
    • +
+
+ +

Guide

+ +
+
Come usare le media queries
+
Introduzione alle media queries, alla loro sintassi, agli operatori e alle funzionalità usate per costruire espressioni di media query.
+
Come testare le media queries
+
Come testare le media queries dal tuo codice JavaScript, programmaticamente, per determinare lo stato del dispositivo, e implementare listeners che comunichino al tuo codice un cambio nei risultati delle media queries, come per esempio quando l'utente ruota lo schermo, causando un cambio di orientamento.
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Definizione iniziale
+ +

Compatibilità browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
BrowserChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto basico1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.7)}}9.09.21.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
BrowserAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
+ + + + + + + +
Supporto basico 
+ 		1.0{{CompatVersionUnknown}}{{CompatGeckoMobile(1.7)}}9.09.03.1
+
diff --git a/files/it/web/css/min-width/index.html b/files/it/web/css/min-width/index.html new file mode 100644 index 0000000000..881d345344 --- /dev/null +++ b/files/it/web/css/min-width/index.html @@ -0,0 +1,258 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - Proprietà CSS + - Riferimento +translation_of: Web/CSS/min-width +--- +
{{CSSRef}}
+ +

La proprietà CSS min-width imposta la larghezza minima di un elemento.  Questo evita che lo used value della proprietà {{ Cssxref("width") }} diventi più piccolo del valore specificato per min-width.

+ +
/* <length> value */
+min-width: 3.5em;
+
+/* <percentage> value */
+min-width: 10%;
+
+/* Keyword values */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* Global values */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+
+ +

La larghezza dell'elemento viene impostata al valore di min-width ogni volta che min-width risulta essere maggiore di {{ Cssxref("max-width") }} or {{Cssxref("width")}}.

+ +

{{cssinfo}}

+ +

Sintassi

+ +

Valori

+ +
+
{{cssxref("<length>")}}
+
La larghezza minima espressa come {{cssxref("<length>")}}. Valori negativi rendono la dichiarazione non valida.
+
 
+
{{cssxref("<percentage>")}}
+
La larghezza minima espressa come {{cssxref("<percentage>")}} della larghezza del contenitore. Valori negativi rendono la dichiarazione non valida.
+
+ +

Parole chiave

+ +
+
auto
+
La larghezza di default per oggetti di tipo flex, assegna un valore di default più ragionevole di 0 per gli altri layout.
+
max-content {{ experimental_inline() }}
+
La larghezza massima preferita (intrinsic).
+
min-content {{ experimental_inline() }}
+
La larghezza minima preferita (intrinsic).
+
fill-available{{ experimental_inline() }}
+
La larghezza del blocco contenitore sottratto de: il margine orizzontale, il bordo ed il padding. (Alcuni browsers usano un nome diverso per questa parola chiave, available.)
+
fit-content {{ experimental_inline() }}
+
Definito come min(max-content, max(min-content, fill-available)).
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempi

+ +
table { min-width: 75%; }
+
+form { min-width: 0; }
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}{{ Spec2('CSS3 Sizing') }}Vengono aggiunte le parole chiave max-content, min-content, fit-content e fill-available. (I draft Box CSS3 e CSS3 Writing Modes definiscono queste keyword, ma vengono sostituiti da questa specifica.)
{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}{{ Spec2('CSS3 Flexbox') }}Viene aggiunta la keyword auto e viene utilizzata come valore iniziale.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}{{ Spec2('CSS3 Transitions') }}Definisce min-width come animabile.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}{{ Spec2('CSS2.1') }}Definizione iniziale.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.0 (1.0)7.04.02.0.2 (416), buggy before
si applica a <table> [1]{{ CompatNo() }}{{CompatNo}}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
max-content, min-content, fit-content, efill-available {{ experimental_inline() }}24.0 {{property_prefix("-webkit")}} [3]{{CompatNo}}{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} [2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} [3]
auto21.0 [4]{{CompatUnknown}}{{ CompatGeckoDesktop("16.0") }} [4]
+ Removed in {{ CompatGeckoDesktop("22.0") }}
+ Reintroduced in {{CompatGeckoDesktop("34.0")}} with the new behavior defined by the spec.		{{ CompatNo() }}12.10 [6]{{ CompatNo() }}
auto as initial value{{obsolete_inline()}}21.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("18.0") }}
+ Removed in {{ CompatGeckoDesktop("22.0") }}		{{ CompatNo() }}12.10{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}[5]
applies to <table>[1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
max-content, min-content, fit-content, e fill-available {{ experimental_inline() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto come valore iniziale {{obsolete_inline()}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 descrive esplicitamente il comportamento di min-width con {{ HTMLElement("table") }} come indefinito. Quindi qualsiasi tipo di comportamento rispetta CSS2.1; le nuove specifiche CSS potrebbero definire questo comportamento, per cui al momento gli sviluppatori Web non dovrebbero fare affidamento su una specifica implementazione.

+ +

[2] Gecko implementa in via sperimentale le definizioni date in CSS3 Basic Box. Questa definisce la keyword available ma non fill-available. Inoltre la definizione di fit-content è più lasca di quella data da CSS3 Intrinsic.

+ +

[3] WebKit implementa una proposta precedente, la parola chiave intrinsic.

+ +

[4] Queste implementazioni realizzavano un comportamento leggermente più semplice per questa parola chiave: veniva impostata a min-content per gli oggetti di tipo flex, e 0 per qualsiasi altro elemento.

+ +

[5] In alcuni browsers in iOS, un elemento di tipo <button> nella sua configurazione nativa (default) non reagirà all'impostazione del valore min-width. Questo problema dipende dai pulsanti di tipo nativo. Uno <span> collocato dentro ad un pulsante nativo, mostrerà lo stesso problerma, nonostante venga impostato "display:inline-block". Quando altri parametri di stile vengono impostati ed il browser è costretto ad abbandonare il pulsante nativo, l'impostazione di min-width ha effetto.  

+ +

See also

+ + diff --git a/files/it/web/css/mozilla_extensions/index.html b/files/it/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..f2dca7f728 --- /dev/null +++ b/files/it/web/css/mozilla_extensions/index.html @@ -0,0 +1,336 @@ +--- +title: Mozilla Extensions +slug: Web/CSS/Mozilla_Extensions +tags: + - CSS + - CSS Reference + - 'CSS:Mozilla Extensions' + - NeedsContent + - NeedsTechnicalReview + - Tutte_le_categorie +translation_of: Web/CSS/Mozilla_Extensions +--- +

 

+
+

Traduzione a tempo perso ! Non essendo presente la traduzione mi dedicherò a tempo perso in questo progetto, quindi se mancano molte traduzioni non fatemene una colpa.

+ Zibibbo84 10:30, 11 ott 2007 (PDT) ;)
+

Mozilla supporta alcune estensioni del CSS le quali hanno il prefisso '-moz'. Queste consentono di modificare alcune proprietà delle pagine web in modo non tradizionale, per facilitare l'utente nello sviluppo dei suoi progetti.

+

Alcune di queste proprietà sono state inserite successivamente nel CSS , quindi possono presentarsi differenze nell'utilizzo delle proprietà standard e delle -moz.

+

Alcune di queste proprietà non standard possono essere applicate solo su elementi di tipo XUL.

+

At-rules

+ +

Pseudo-elements and pseudo-classes

+ +

Properties

+ + + + + +

Values

+

Probabilmente documentate nelle pagine delle proprietà standard.

+ + + +

Note: Tutti questi valori sono da considerare disapprovati. E' preferibile usare overflow-x and overflow-y, nonostante non rimpiazzino l'ultimo di questi.

+ + + + + + + + + + + +

Others

+ + + +

Talk:Mozilla CSS Extensions

+

{{ Bug(311415) }} implemented -moz-intrinsic, -moz-min-intrinsic, -moz-shrink-wrap, -moz-fill values for {{ Cssxref("width") }}, {{ Cssxref("min-width") }}, and {{ Cssxref("max-width") }} properties.

+

{{ languages( { "en": "en/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "fr": "fr/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "pl": "pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" } ) }}

diff --git a/files/it/web/css/object-fit/index.html b/files/it/web/css/object-fit/index.html new file mode 100644 index 0000000000..1421cd58c8 --- /dev/null +++ b/files/it/web/css/object-fit/index.html @@ -0,0 +1,161 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

La proprietà CSS object-fit istruisce il browser su come deve ridimensionare il contenuto di un elemento incluso, come avviene per i tag {{HTMLElement("img")}} o {{HTMLElement("video")}}, per adattarlo al suo contenitore.

+ +

Per modificare l'allineamento dell'elemento ridimensionato rispetto al suo contenitore puoi usare la proprietà {{cssxref("object-position")}}.

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ + + +

Sintassi

+ +

La proprietà object-fit viene specificata usando uno dei seguenti valori.

+ +

Valori

+ +
+
contain
+
L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. Se le proporzioni dell'elemento e il suo contenitore non sono identici si avrà come risultato l'effetto "letterboxed".
+
cover
+
L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà ritagliato per adattarsi.
+
fill
+
L'elemento viene ridimensionato per riempire completamente il suo contenitore. Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà deformato per adattarsi.
+
none
+
L'elemento non viene ridimensionato.
+
scale-down
+
L'elemento viene ridimensionto come se none o contain fossero specificati, ma con la differenza che si ottiene sempre un oggetto più piccolo.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Esempi

+ +

HTML

+ +
<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
+
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
+
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
+
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
+
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
+
+</div>
+ +

CSS

+ +
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

Risultato

+ +

{{ EmbedLiveSample('Example', 500, 450) }}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Initial definition
+ +

{{cssinfo}}

+ +

Compatibilità browser

+ + + +

{{Compat("css.properties.object-fit")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/css/pseudo-classes/index.html b/files/it/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..935d570c71 --- /dev/null +++ b/files/it/web/css/pseudo-classes/index.html @@ -0,0 +1,167 @@ +--- +title: Pseudo-classes +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Panoramica + - Pseudo-class + - Riferimento + - Selettori +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

Una pseudo-classe CSS è una parola chiave aggiunta ad un selettore la quale specifica lo stato speciale degli elementi selezionati. Ad esempio, {{CSSxRef(":hover")}} può essere usato per cambiare il colore di un pulsate quando il puntatore dell'utente vi passa sopra.

+ +
/* Qualsiasi button sopra al quale passa il cursore dell'utente*/
+button:hover {
+  color: blue;
+}
+ +

La pseudo-classi permettono di applicare uno stile ad un elemento non solo in relazione al contenuto dell'alberatura del documento, ma anche in relazione a fattori esterni come la storia della navigazione ({{CSSxRef(":visited")}}, per esempio), lo stato del suo contenuto (come {{CSSxRef(":checked")}} su determinati elementi di form), oppure la posizione del mouse (come {{CSSxRef(":hover")}}), il quale permette di sapere se il mouse si trova su un elemento o no.

+ +
+

Nota: Al contrario delle pseudo-classi, gli pseudo-elementi possono essere usati per dare stile a parti specifiche di un elemento.

+
+ +

Sintassi

+ +
selector:pseudo-class {
+  property: value;
+}
+
+ +

Come per una classe regolare, è possibile concatenare insieme quante più pseudo-classi volute in un selettore.

+ +

Indice delle pseudo-classi standard

+ +
+
    +
  • {{CSSxRef(":active")}}
    • +
  • {{CSSxRef(":any-link")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":blank")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":checked")}}
    • +
  • {{CSSxRef(":current")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":default")}}
    • +
  • {{CSSxRef(":defined")}}
    • +
  • {{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":disabled")}}
    • +
  • {{CSSxRef(":drop")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":empty")}}
    • +
  • {{CSSxRef(":enabled")}}
    • +
  • {{CSSxRef(":first")}}
    • +
  • {{CSSxRef(":first-child")}}
    • +
  • {{CSSxRef(":first-of-type")}}
    • +
  • {{CSSxRef(":fullscreen")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":future")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":focus")}}
    • +
  • {{CSSxRef(":focus-visible")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":focus-within")}}
    • +
  • {{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":host")}}
    • +
  • {{CSSxRef(":host()")}}
    • +
  • {{CSSxRef(":host-context()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":hover")}}
    • +
  • {{CSSxRef(":indeterminate")}}
    • +
  • {{CSSxRef(":in-range")}}
    • +
  • {{CSSxRef(":invalid")}}
    • +
  • {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":lang", ":lang()")}}
    • +
  • {{CSSxRef(":last-child")}}
    • +
  • {{CSSxRef(":last-of-type")}}
    • +
  • {{CSSxRef(":left")}}
    • +
  • {{CSSxRef(":link")}}
    • +
  • {{CSSxRef(":local-link")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":not", ":not()")}}
    • +
  • {{CSSxRef(":nth-child", ":nth-child()")}}
    • +
  • {{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":nth-last-child", ":nth-last-child()")}}
    • +
  • {{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}
    • +
  • {{CSSxRef(":nth-of-type", ":nth-of-type()")}}
    • +
  • {{CSSxRef(":only-child")}}
    • +
  • {{CSSxRef(":only-of-type")}}
    • +
  • {{CSSxRef(":optional")}}
    • +
  • {{CSSxRef(":out-of-range")}}
    • +
  • {{CSSxRef(":past")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":read-only")}}
    • +
  • {{CSSxRef(":read-write")}}
    • +
  • {{CSSxRef(":required")}}
    • +
  • {{CSSxRef(":right")}}
    • +
  • {{CSSxRef(":root")}}
    • +
  • {{CSSxRef(":scope")}}
    • +
  • {{CSSxRef(":state", ":state()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":target")}}
    • +
  • {{CSSxRef(":target-within")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":user-invalid")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":valid")}}
    • +
  • {{CSSxRef(":visited")}}
    • +
  • {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}
    • +
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Definito :fullscreen.
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}Definisce quando particolari selettori corrisponde ad elementi HTML.
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Definiti :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() e :where().
+ Cambiato il comportamento di :empty {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.
+ Nessun cambiamento significativo per le altre pseudo-classi definite nel {{SpecName("CSS3 Selectors")}} e {{SpecName("HTML5 W3C")}} (sebbene il significato semantico non sia stato preso in considerazione).
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}Copia della sezione pertinente dalla specifica canonica HTML (WHATWG).
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}Definiti :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, ma senza l'associazione di significato semantico.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Definiti :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty e :not().
+ Definita la sintassi di :enabled, :disabled, :checked, e :indeterminate, ma senza l'associazione di significato semantico.
+ Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS2.1')}}.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}Definiti :lang(), :first-child, :hover, e :focus.
+ Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS1')}}.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definiti :link, :visited e :active, ma senza l'associazione di significato semantico.
+ +

Vedi anche

+ + diff --git a/files/it/web/css/ricette_layout/index.html b/files/it/web/css/ricette_layout/index.html new file mode 100644 index 0000000000..bbdee7472e --- /dev/null +++ b/files/it/web/css/ricette_layout/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/selettore_figli_diretti/index.html b/files/it/web/css/selettore_figli_diretti/index.html new file mode 100644 index 0000000000..cf2903dbc9 --- /dev/null +++ b/files/it/web/css/selettore_figli_diretti/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/text-align/index.html b/files/it/web/css/text-align/index.html new file mode 100644 index 0000000000..281bf0d8fa --- /dev/null +++ b/files/it/web/css/text-align/index.html @@ -0,0 +1,108 @@ +--- +title: text-align +slug: Web/CSS/text-align +translation_of: Web/CSS/text-align +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà text-align indica come le linee di testo devono essere allineate tra loro. text-align non influisce sull'allineamento degli altri elementi, solo del loro contenuto in-line.

+ + + +

Sintassi

+ +
text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+
+ +

Valori

+ + + +

Esempi

+ +
p.left { text-align: left; }
+
+p.right { text-align: right; }
+
+ +

Esempi Live

+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; }

+e le altre righe di codice...
+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; margin: 1em auto; }

+e le altre righe di codice...
+ +
div { text-align:-moz-center; text-align:-webkit-center; border:solid; } + +

p { background:gold; width:22em; }

+e le altre righe di codice...
+ +

Note

+ + + +

Specifiche

+ + + +

Compatibilità coi browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima supportata
Firefox (Gecko)1.0
Internet Explorer3
Netscape4
Opera3.5
+ +

Vedi anche

+ +

text-indent, text-align, text-decoration, letter-spacing, word-spacing, text-transform, white-space, white-space-collapse, text-rendering, text-wrap, text-shadow, margin, margin-left, margin-right, vertical-align,

+ +

{{ languages( { "en": "en/CSS/text-align", "fr": "fr/CSS/text-align" } ) }}

diff --git a/files/it/web/css/text-shadow/index.html b/files/it/web/css/text-shadow/index.html new file mode 100644 index 0000000000..fa04ed546b --- /dev/null +++ b/files/it/web/css/text-shadow/index.html @@ -0,0 +1,122 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +translation_of: Web/CSS/text-shadow +--- +

 

+
+

Introdotto in Gecko 1.9.1

+
+ Si applica a Firefox 3.5, Thunderbird 3 e superiori
+
+

 

+
+

Sommario

+
+ Edit section
+

La proprietà CSS text-shadow accetta una lista di effetti di ombreggiatura separata da virgole, che viene applicata al testo e alle  text-decoration dell'elemento.

+ +
+
+

Sintassi

+
+ Edit section
+ 
text-shadow: none | [<shadow>,]* <shadow>
+
+  dove <shadow> è:
+
+[ <colore> <lunghezza> <lunghezza> <lunghezza>? | <lunghezza> <lunghezza> <lunghezza>? <colore>? ]
+
+
+

Valori

+
+ Edit section
+
+
+ <colore>
+
+ Opzionale, prima o dopo i valori di <lunghezza> . Se il <colore> non è specificato, viene usato un colore predefinito. Gecko/Firefox usa il valore della proprietà color dell'elemento. Gli altri browser potrebbero comportarsi diversamente. +
+ Nota: Specifica un colore per la compatibilità tra browser.
+
+
+ <lunghezza> <lunghezza>
+
+ Vedi <length> per le possibili unità di misura.
+ Questi valori di <lunghezza> stabiliscono la distanza dell'ombreggiatura. Il primo parametro <lunghezza> specifica la distanza orizzontale. Valori negativi spostano l'ombreggiatura a sinistra del testo. Il secondo parametro <lunghezza> specifica la distanza verticale. Valori negativi spostano l'ompreggiatura sopra il testo. Se entrambi i valori sono 0 l'ombreggiatura si sposta dietro al testo (e potrebbe generare un effetto di sfocato se è specificato il terzo parametro <lunghezza>).
+
+
+
+ <lunghezza>
+
+ Opzionale. Il terzo parametro <lunghezza> specifica il raggio dell'effetto sfocato. Se non viene specificato, è 0. Più alto è il valore, più grande è l'effetto sfocato, quindi l'ombreggiatura diventa più estesa e più chiara.
+
+
+
+

Examples

+
+ Edit section
+

Esempio 1 Esempio 2 da Bugzilla

+ 
  h1 { text-shadow: black 0 0 0.4em; }
+
+ 
  h2 { text-shadow: red 2px 2px 2px, blue 4px 4px 2px, 6px 6px, green 8px 8px; }
+
+
+
+

Specifiche

+
+ Edit section
+

Nota: text-shadow era stata definita impropriamente in CSS2 e scartata in CSS2.1. La specifica Text di CSS3 ha migliorato la sintassi.

+ +
+
+

Compatibilità tra browser

+
+ Edit section
+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet ExplorerNo
+ La versione 5.5  supporta il Filter Shadow e DropShadow
Firefox (Gecko)3.5 (1.9.1)
Opera9.5
Safari (WebKit)1.1 (100), ombreggiature multiple dalla versione 4.0 (528)
+

Al momento di scrittura:

+
    +
  • Opera 9.x supporta al massimo 6 ombreggiature, e aderisce al CSS2 per il colore (la prima ombreggiatura specificata è l'ultima).
    • +
  • Gecko 1.9.1 (Firefox 3.5) teoricamente supporta infinite ombreggiature (ma non provarci!) e aderisce al CSS3 per il colore (la prima ombra specificata è la prima).
    • +
+
+
+

Vedere anche

+
+ Edit section
+

-moz-box-shadow

+
+

 

diff --git a/files/it/web/css/transition-timing-function/index.html b/files/it/web/css/transition-timing-function/index.html new file mode 100644 index 0000000000..c99e5f5678 --- /dev/null +++ b/files/it/web/css/transition-timing-function/index.html @@ -0,0 +1,634 @@ +--- +title: transition-timing-function +slug: Web/CSS/transition-timing-function +translation_of: Web/CSS/transition-timing-function +--- +

{{ CSSRef("CSS Transitions") }}

+ +

Sommario

+ +

La proprietà CSS transition-timing-function è usata per descrivere come gli stati intermedi delle proprietà CSS vengono modificati quando viene calcolato il risultato di un effetto di transizione. Ti permette di definire una curva di accelerazione, in modo che la velocità della transizione possa variare nell'arco della sua durata.

+ +

Questa curva di accelerazione viene definita utilizzando uno {{cssxref("<timing-function>")}} per ogni proprietà che ottiene una transizione.

+ +

È possibile specificare un numero arbitrario di funzioni di temporizzazione; ciasuna di queste sarà applicata alla corrispondente proprietà seguendo le specifiche in {{ cssxref("transition-property") }}, dove in questo caso si comporta come la lista principale.

+ +

Se ci sono meno funzione specificate rispetto alle proprietà presenti nella lista, i valori mancanti saranno impostati a quello iniziale (ease). Se ci sono più funzioni di temporizzazione, i valori verranno applicati seguendo la lista principale e i valori in eccesso verranno semplicemente scartati. In entrambi i casi entrambe le dichiarazioni sono considerate valide.

+ +

{{cssinfo}}

+ +

Sintassi

+ +
Formal syntax: {{csssyntax("transition-timing-function")}}
+
+ +
transition-timing-function: ease
+transition-timing-function: ease-in
+transition-timing-function: ease-out
+transition-timing-function: ease-in-out
+transition-timing-function: linear
+transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
+transition-timing-function: step-start
+transition-timing-function: step-end
+transition-timing-function: steps(4, end)
+
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+transition-timing-function: inherit
+
+ +

Valori

+ +
+
<timing-function>
+
Ciascun {{cssxref("<timing-function>")}} rappresenta una funzione di temporizzazione che dovrà essere linkata alla corrispondente proprietà che avrà la transizione, come definito in {{ cssxref("transition-property") }}.
+
+ +

Esempi

+ +
+
+

transition-timing-function: ease

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: ease-in

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easein",275,150)}}
+
+ +
+

transition-timing-function: ease-out

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easeout",275,150)}}
+
+ +
+

transition-timing-function: ease-in-out

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easeinout",275,150)}}
+
+
+ +
+

transition-timing-function: linear

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-start

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepstart",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#transition-timing-function', 'transition-timing-function') }}{{ Spec2('CSS3 Transitions') }} 
+ +

Compatibilità tra Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1011.6{{ property_prefix("-o") }}
+ 12.10 #		{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("2.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+
+ +

Vedi Anche

+ + diff --git a/files/it/web/css/type_selectors/index.html b/files/it/web/css/type_selectors/index.html new file mode 100644 index 0000000000..91e6b48de9 --- /dev/null +++ b/files/it/web/css/type_selectors/index.html @@ -0,0 +1,78 @@ +--- +title: Type selectors +slug: Web/CSS/Type_selectors +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef}}
+ +

Il selettore di tipo CSS identifica gli elementi in base al nome del nodo. In altre parole, seleziona tutti gli elementi di un dato tipo entro il documento.

+ +
/* Tutti gli elemnti <a>. */
+a {
+  color: red;
+}
+ +

Sintassi

+ +
element { style properties }
+
+ +

Esempio

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Here's a span with some text.</span>
+<p>Here's a p with some text.</p>
+<span>Here's a span with more text.</span>
+
+ +

Risultato

+ +

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

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Nessun cambiamento
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Nessun cambiamento
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

{{Compat("css.selectors.type")}}

diff --git a/files/it/web/css/universal_selectors/index.html b/files/it/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..6c247e09da --- /dev/null +++ b/files/it/web/css/universal_selectors/index.html @@ -0,0 +1,105 @@ +--- +title: Universal selectors +slug: Web/CSS/Universal_selectors +tags: + - CSS + - Reference + - Selettori +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

Il selettore universale CSS (*) corrisponde ad elementi di qualsiasi tipo.

+ +
/* Seleziona tutti gli elementi */
+* {
+  color: green;
+}
+ +

A partire dal CSS3, l'asterisco può essere usato in combinazione con {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Sintassi

+ +
* { style properties }
+ +

L'asterisco è opzionale con i selettori semplici. Per esempio, *.warning e .warning sono equivalenti.

+ +

Esempio

+ +

CSS

+ +
* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* Aggiungi clear automatico al fratello immediatamente successivo dopo un elemento flottante */
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="en-us">Uno span verde</span> in un paragrafo rosso.
+</p>
+<p id="maincontent" lang="en-gb">
+  <span class="warning">Uno span rosso</span> in un paragrafo verde.
+</p>
+ +

Risultati

+ +

{{EmbedLiveSample('Examples')}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Nessun cambiamento
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Definisce il comportamento relativo ai namespace e aggiunge il consiglio per cui omettere il selettore sia consentito nell'ambito degli pseudo-elementi
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

{{Compat("css.selectors.universal")}}

diff --git a/files/it/web/css/word-break/index.html b/files/it/web/css/word-break/index.html new file mode 100644 index 0000000000..0af1a85bd0 --- /dev/null +++ b/files/it/web/css/word-break/index.html @@ -0,0 +1,131 @@ +--- +title: word-break +slug: Web/CSS/word-break +translation_of: Web/CSS/word-break +--- +
{{CSSRef}}
+ +

Riassunto

+ +

La proprietà CSS word-break è usata per specificare come (e se) andare a capo in mezzo alle parole.

+ +
{{cssinfo}}
+ +

Sintassi

+ +
Sintassi Formale: {{csssyntax("word-break")}}
+
+ +
word-break: normal
+word-break: break-all
+word-break: keep-all
+
+word-break: inherit
+
+ +

Valore

+ +
+
normal
+
Usa le regole di a-capo predefinite.
+
break-all
+
Gli a-capo possono essere inseriti tra due caratteri qualsiasi nel testo non-CJK (Cinese/Giapponese/Coreano).
+
keep-all
+
Non permettere a-capo in mezzo ad una parola nei testi CJK.  Il comportamento nei testi non-CJK è lo stesso di normal.
+
+ +

Esempi

+ +

{{todo}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('CSS3 Text', '#word-break', 'word-break')}}{{Spec2('CSS3 Text')}} 
+ +

Compatibilità con i browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base1.0{{CompatGeckoDesktop("15.0")}}5.5 [1]{{CompatNo}}{{CompatVersionUnknown}}
keep-all{{CompatNo}} [2]{{CompatGeckoDesktop("15.0")}}5.5{{CompatNo}}{{CompatNo}} [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatVersionUnknown}}18.0{{CompatGeckoMobile("15.0")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
keep-all{{CompatNo}} [2]{{CompatNo}} [2]{{CompatGeckoMobile("15.0")}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}} [2]
+
+ +

[1] IE8 ha introdotto -ms-word-break come sinonimo di word-break. Si sconsiglia di usare il prefisso -ms- .

+ +

[2] Vedi {{webkitbug("123782")}}.

diff --git a/files/it/web/css/z-index/index.html b/files/it/web/css/z-index/index.html new file mode 100644 index 0000000000..7f58297a34 --- /dev/null +++ b/files/it/web/css/z-index/index.html @@ -0,0 +1,192 @@ +--- +title: z-index +slug: Web/CSS/z-index +translation_of: Web/CSS/z-index +--- +
{{CSSRef}}
+ +
La Proprietà CSS z-index specifica lo z-order di un elemento posizionato e dei suoi discendenti. Nel caso di elementi che si sovrappongono, quelli con un valore di z-order maggiore sono sovrapposti a quelli con un valore più basso.
+ +
+ +
/* Keyword value */
+z-index: auto;
+
+/* <integer> values */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* Negative values to lower the priority */
+
+/* Global values */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+
+ +

Per una box posizionata (ovvero con valore qualsiasi di position che non sia static) la proprietà z-index indica;

+ +
    +
  1.  Il livello di sovrapposizione della box nello stacking context corrente.
    2. +
  2.  Se la box stabilisce uno stacking context locale.
    3. +
+ +
<div class="container">
+<div class="block position1 text-top">z-index: auto</div>
+<div class="block position2 text-top">z-index: auto</div>
+<div class="block position3 text-top">z-index: auto</div>
+</div>
+
+<div class="container">
+<div class="block position1 text-bottom" style="z-index:3">z-index: 3</div>
+<div class="block position2 text-bottom" style="z-index:2">z-index: 2</div>
+<div class="block position3 text-bottom" style="z-index:1">z-index: 1</div>
+</div>
+ +
+
* {
+  box-sizing: border-box;
+}
+
+.container {
+  display: inline-block;
+  width: 250px;
+  position: relative;
+}
+
+.block {
+  width: 150px;
+  height: 75px;
+  position: absolute;
+  font-family: monospace;
+  background-color: #E5E8FC;
+  border: solid 5px #112382;
+}
+
+.text-top {
+  padding: 0.5em 0 5em .5em;
+}
+
+.text-bottom {
+  padding: 4em 0 1.5em .5em;
+}
+
+.position1 {
+  top: 0;
+  left: 0;
+}
+
+.position2 {
+  top: 30px;
+  left: 30px;
+}
+
+.position3 {
+  top: 60px;
+  left: 60px;
+}
+
+ +

{{EmbedLiveSample("z-index", 1200, 160, "", "", "example-outcome-frame")}}

+ +

L'esempio sopra mostra l'effetto di z-index. Sulla sinistra abbiamo disegnato tre boxes, facendole sovrapporre usando absolute positioning. Per default, gli elementi sono sovrapposti seguendo l'ordine dichiarato nel codice HTML. Sulla destra abbiamo lo stesso markup, ma a differenza dell'ordine di default usiamo lo z-index. 

+ +

{{cssinfo}}

+ +

Sintassi

+ +

La proprieta z-index e' specificata anche con le chiavi auto o <integer>.

+ +

Valori

+ +
+
auto
+
La box non stabilisce una nuova stacking context locale. Il livello di sovrapposizione della box generata e' lo stesso del livello di sovrapposizione del suo genitore
+
<integer>
+
Questo {{cssxref("<integer>")}} e' il livello di sovrapposizione della box generata nel corrente stacking context. La box stabilisce anche una locale stacking context in cui il suo livello di sovrapposizione e' 0. Questo significa che gli z-indexes dei discendenti non sono confrontati con gli z-indexes degli elementi all'esterno di questo elemento.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

HTML

+ +
<div class="dashed-box">Dashed box
+  <span class="gold-box">Gold box</span>
+  <span class="green-box">Green box</span>
+</div>
+
+ +

CSS

+ +
.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Examples', '550', '200', '') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}{{Spec2('CSS3 Transitions')}}Defines z-index as animatable.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.z-index")}}

+ +

See also

+ + diff --git a/files/it/web/esempi_di_tecnologie_web_open/index.html b/files/it/web/esempi_di_tecnologie_web_open/index.html new file mode 100644 index 0000000000..2244c73297 --- /dev/null +++ b/files/it/web/esempi_di_tecnologie_web_open/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/events/domcontentloaded/index.html b/files/it/web/events/domcontentloaded/index.html new file mode 100644 index 0000000000..9b2cf7467e --- /dev/null +++ b/files/it/web/events/domcontentloaded/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/events/index.html b/files/it/web/events/index.html new file mode 100644 index 0000000000..c492f87dd4 --- /dev/null +++ b/files/it/web/events/index.html @@ -0,0 +1,2310 @@ +--- +title: Event reference +slug: Web/Events +tags: + - NeedsTranslation + - TopicStub + - events +translation_of: Web/Events +--- +

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.

+ +

This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that add-ons can use them to interact with the browser.

+ +

Standard events

+ +

These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("abort")}}{{domxref("UIEvent")}}DOM L3The loading of a resource has been aborted.
abort{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been terminated (not due to an error).
abort{{domxref("Event")}}IndexedDBA transaction has been aborted.
{{event("afterprint")}}{{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document has started printing or the print preview has been closed.
{{event("animationend")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has completed.
{{event("animationiteration")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation is repeated.
{{event("animationstart")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has started.
{{event("audioprocess")}}{{domxref("AudioProcessingEvent")}}{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.
{{event("audioend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has finished capturing audio for speech recognition.
{{event("audiostart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has started to capture audio for speech recognition.
{{event("beforeprint")}} {{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document is about to be printed or previewed for printing.
{{event("beforeunload")}}{{domxref("BeforeUnloadEvent")}}HTML5  
{{event("beginEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element begins.
blocked IndexedDBAn open connection to a database is blocking a versionchange transaction on the same database.
{{event("blur")}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (does not bubble).
{{event("boundary")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a word or sentence boundary
{{event("cached")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been downloaded, and the application is now cached.
{{event("canplay")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("canplaythrough")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("change")}}{{domxref("Event")}}DOM L2, HTML5The change event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.
{{event("chargingchange")}}{{domxref("Event")}}Battery statusThe battery begins or stops charging.
{{event("chargingtimechange")}}{{domxref("Event")}}Battery statusThe chargingTime attribute has been updated.
{{event("checking")}}{{domxref("Event")}}OfflineThe user agent is checking for an update, or attempting to download the cache manifest for the first time.
{{event("click")}}{{domxref("MouseEvent")}}DOM L3A pointing device button has been pressed and released on an element.
close{{domxref("Event")}}WebSocketA WebSocket connection has been closed.
complete IndexedDB 
{{event("complete")}}{{domxref("OfflineAudioCompletionEvent")}}{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}The rendering of an {{domxref("OfflineAudioContext")}} is terminated.
{{event("compositionend")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text has been completed or canceled.
{{event("compositionstart")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3A character is added to a passage of text being composed.
{{event("contextmenu")}}{{domxref("MouseEvent")}}HTML5The right button of the mouse is clicked (before the context menu is displayed).
{{event("copy")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been added to the clipboard.
{{event("cut")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been removed from the document and added to the clipboard.
{{event("dblclick")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is clicked twice on an element.
{{event("devicelight")}}{{domxref("DeviceLightEvent")}}Ambient Light EventsFresh data is available from a light sensor.
{{event("devicemotion")}}{{domxref("DeviceMotionEvent")}}Device Orientation EventsFresh data is available from a motion sensor.
{{event("deviceorientation")}}{{domxref("DeviceOrientationEvent")}}Device Orientation EventsFresh data is available from an orientation sensor.
{{event("deviceproximity")}}{{domxref("DeviceProximityEvent")}}Proximity EventsFresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).
{{event("dischargingtimechange")}}{{domxref("Event")}}Battery statusThe dischargingTime attribute has been updated.
DOMActivate {{deprecated_inline}}{{domxref("UIEvent")}}DOM L3A button, link or state changing element is activated (use {{event("click")}} instead).
DOMAttributeNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an attribute changed (use mutation observers instead).
DOMAttrModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3The value of an attribute has been modified (use mutation observers instead).
DOMCharacterDataModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A text or another CharacterData has changed (use mutation observers instead).
{{event("DOMContentLoaded")}}{{domxref("Event")}}HTML5The document has finished loading (but not its dependent resources).
DOMElementNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an element changed (use mutation observers instead).
DOMFocusIn {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).
DOMFocusOut {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).
DOMNodeInserted {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been added as a child of another node (use mutation observers instead).
DOMNodeInsertedIntoDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been inserted into the document (use mutation observers instead).
DOMNodeRemoved {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from its parent node (use mutation observers instead).
DOMNodeRemovedFromDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from the document (use mutation observers instead).
DOMSubtreeModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A change happened in the document (use mutation observers instead).
{{event("downloading")}}{{domxref("Event")}}OfflineThe user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.
{{event("drag")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged (every 350ms).
{{event("dragend")}}{{domxref("DragEvent")}}HTML5A drag operation is being ended (by releasing a mouse button or hitting the escape key).
{{event("dragenter")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection enters a valid drop target.
{{event("dragleave")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection leaves a valid drop target.
{{event("dragover")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged over a valid drop target (every 350ms).
{{event("dragstart")}}{{domxref("DragEvent")}}HTML5The user starts dragging an element or text selection.
{{event("drop")}}{{domxref("DragEvent")}}HTML5An element is dropped on a valid drop target.
{{event("durationchange")}}{{domxref("Event")}}HTML5 mediaThe duration attribute has been updated.
{{event("emptied")}}{{domxref("Event")}}HTML5 mediaThe media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
{{event("end_(SpeechRecognition)","end")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has disconnected.
{{event("end_(SpeechSynthesis)","end")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName("Web Speech API")}}The utterance has finished being spoken.
{{event("ended")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because the end of the media was reached.
{{event("ended_(Web_Audio)", "ended")}}{{domxref("Event")}}{{SpecName("Web Audio API")}} 
{{event("endEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element ends.
{{event("error")}}{{domxref("UIEvent")}}DOM L3A resource failed to load.
{{event("error")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has failed.
{{event("error")}}{{domxref("Event")}}OfflineAn error occurred while downloading the cache manifest or updating the content of the application.
{{event("error")}}{{domxref("Event")}}WebSocketA WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
{{event("error")}}{{domxref("Event")}}Server Sent EventsAn event source connection has been failed.
{{event("error")}}{{domxref("Event")}}IndexedDBA request caused an error and failed.
{{event("error_(SpeechRecognitionError)","error")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}A speech recognition error occurs.
{{event("error_(SpeechSynthesisError)","error")}}{{domxref("SpeechSynthesisErrorEvent")}}{{SpecName('Web Speech API')}}An error occurs that prevents the utterance from being successfully spoken.
{{event("focus")}}{{domxref("FocusEvent")}}DOM L3An element has received focus (does not bubble).
{{event("focusin")}}{{domxref("FocusEvent")}}DOM L3An element is about to receive focus (bubbles).
{{event("focusout")}}{{domxref("FocusEvent")}}DOM L3An element is about to lose focus (bubbles).
{{event("fullscreenchange")}}{{domxref("Event")}}Full ScreenAn element was turned to fullscreen mode or back to normal mode.
{{event("fullscreenerror")}}{{domxref("Event")}}Full ScreenIt was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{event("gamepadconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been connected.
{{event("gamepaddisconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been disconnected.
{{event("gotpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement receives pointer capture.
{{event("hashchange")}}{{domxref("HashChangeEvent")}}HTML5The fragment identifier of the URL has changed (the part of the URL after the #).
{{event("lostpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement lost pointer capture.
{{event("input")}}{{domxref("Event")}}HTML5The value of an element changes or the content of an element with the attribute contenteditable is modified.
{{event("invalid")}}{{domxref("Event")}}HTML5A submittable element has been checked and doesn't satisfy its constraints.
{{event("keydown")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down.
{{event("keypress")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down and that key normally produces a character value (use input instead).
{{event("keyup")}}{{domxref("KeyboardEvent")}}DOM L3A key is released.
{{event("languagechange")}}{{domxref("Event")}}{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }} 
{{event("levelchange")}}{{domxref("Event")}}Battery statusThe level attribute has been updated.
{{event("load")}}{{domxref("UIEvent")}}DOM L3A resource and its dependent resources have finished loading.
load{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been successful.
{{event("loadeddata")}}{{domxref("Event")}}HTML5 mediaThe first frame of the media has finished loading.
{{event("loadedmetadata")}}{{domxref("Event")}}HTML5 mediaThe metadata has been loaded.
{{event("loadend")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has stopped (after "error", "abort" or "load" have been dispatched).
{{event("loadstart")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has begun.
{{event("mark")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a named SSML "mark" tag.
message{{domxref("MessageEvent")}}WebSocketA message is received through a WebSocket.
message{{domxref("MessageEvent")}}Web WorkersA message is received from a Web Worker.
message{{domxref("MessageEvent")}}Web MessagingA message is received from a child (i)frame or a parent window.
message{{domxref("MessageEvent")}}Server Sent EventsA message is received through an event source.
{{event("message_(ServiceWorker)","message")}}{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.Service WorkersA message is received from a service worker, or a message is received in a service worker from another context.
{{event("mousedown")}}{{domxref("MouseEvent")}}DOM L3A pointing device button (usually a mouse) is pressed on an element.
{{event("mouseenter")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached.
{{event("mouseleave")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached.
{{event("mousemove")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved over an element.
{{event("mouseout")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached or off one of its children.
{{event("mouseover")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached or onto one of its children.
{{event("mouseup")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is released over an element.
{{event("nomatch")}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a final result with no significant recognition.
{{event("notificationclick")}}{{domxref("NotificationEvent")}}{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}A system notification spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.
{{event("noupdate")}}{{domxref("Event")}}OfflineThe manifest hadn't changed.
{{event("obsolete")}}{{domxref("Event")}}OfflineThe manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
{{event("offline")}}{{domxref("Event")}}HTML5 offlineThe browser has lost access to the network.
{{event("online")}}{{domxref("Event")}}HTML5 offlineThe browser has gained access to the network (but particular websites might be unreachable).
open{{domxref("Event")}}WebSocketA WebSocket connection has been established.
open{{domxref("Event")}}Server Sent EventsAn event source connection has been established.
{{event("orientationchange")}}{{domxref("Event")}}Screen OrientationThe orientation of the device (portrait/landscape) has changed
{{event("pagehide")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed from.
{{event("pageshow")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed to.
{{event("paste")}}{{domxref("ClipboardEvent")}}ClipboardData has been transferred from the system clipboard to the document.
{{event("pause")}}{{domxref("Event")}}HTML5 mediaPlayback has been paused.
{{event("pause_(SpeechSynthesis)", "pause")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance is paused part way through.
{{event("pointercancel")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer is unlikely to produce any more events.
{{event("pointerdown")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer enters the active buttons state.
{{event("pointerenter")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved inside the hit-testing boundary.
{{event("pointerleave")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved out of the hit-testing boundary.
{{event("pointerlockchange")}}{{domxref("Event")}}Pointer LockThe pointer was locked or released.
{{event("pointerlockerror")}}{{domxref("Event")}}Pointer LockIt was impossible to lock the pointer for technical reasons or because the permission was denied.
{{event("pointermove")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer changed coordinates.
{{event("pointerout")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device moved out of hit-testing boundary or leaves detectable hover range.
{{event("pointerover")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device is moved into the hit-testing boundary.
{{event("pointerup")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer leaves the active buttons state.
{{event("play")}}{{domxref("Event")}}HTML5 mediaPlayback has begun.
{{event("playing")}}{{domxref("Event")}}HTML5 mediaPlayback is ready to start after having been paused or delayed due to lack of data.
{{event("popstate")}}{{domxref("PopStateEvent")}}HTML5A session history entry is being navigated to (in certain cases).
{{event("progress")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestIn progress.
progress{{domxref("ProgressEvent")}}OfflineThe user agent is downloading resources listed by the manifest.
{{event("push")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A Service Worker has received a push message.
{{event("pushsubscriptionchange")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A PushSubscription has expired.
{{event("ratechange")}}{{domxref("Event")}}HTML5 mediaThe playback rate has changed.
{{event("readystatechange")}}{{domxref("Event")}}HTML5 and XMLHttpRequestThe readyState attribute of a document has changed.
{{event("repeatEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element is repeated.
{{event("reset")}}{{domxref("Event")}}DOM L2, HTML5A form is reset.
{{event("resize")}}{{domxref("UIEvent")}}DOM L3The document view has been resized.
{{event("resourcetimingbufferfull")}}{{domxref("Performance")}}Resource TimingThe browser's resource timing buffer is full.
{{event("result")}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
{{event("resume")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}A paused utterance is resumed.
{{event("scroll")}}{{domxref("UIEvent")}}DOM L3The document view or an element has been scrolled.
{{event("seeked")}}{{domxref("Event")}}HTML5 mediaA seek operation completed.
{{event("seeking")}}{{domxref("Event")}}HTML5 mediaA seek operation began.
{{event("select")}}{{domxref("UIEvent")}}DOM L3Some text is being selected.
{{event("selectstart")}}{{domxref("Event")}}{{ SpecName('Selection API')}}A selection just started.
{{event("selectionchange")}}{{domxref("Event")}}{{ SpecName('Selection API')}}The selection in the document has been changed.
{{event("show")}}{{domxref("MouseEvent")}}HTML5A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute
{{event("soundend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has stopped being detected.
{{event("soundstart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has been detected.
{{event("speechend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Speech recognised by the speech recognition service has stopped being detected.
{{event("speechstart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Sound that is recognised by the speech recognition service as speech has been detected.
{{event("stalled")}}{{domxref("Event")}}HTML5 mediaThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{event("start_(SpeechRecognition)","start")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
{{event("start_(SpeechSynthesis)","start")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance has begun to be spoken.
{{event("storage")}}{{domxref("StorageEvent")}}Web StorageA storage area (localStorage or sessionStorage) has changed.
{{event("submit")}}{{domxref("Event")}}DOM L2, HTML5A form is submitted.
success{{domxref("Event")}}IndexedDBA request successfully completed.
{{event("suspend")}}{{domxref("Event")}}HTML5 mediaMedia data loading has been suspended.
{{event("SVGAbort")}}{{domxref("SVGEvent")}}SVGPage loading has been stopped before the SVG was loaded.
{{event("SVGError")}}{{domxref("SVGEvent")}}SVGAn error has occurred before the SVG was loaded.
{{event("SVGLoad")}}{{domxref("SVGEvent")}}SVGAn SVG document has been loaded and parsed.
{{event("SVGResize")}}{{domxref("SVGEvent")}}SVGAn SVG document is being resized.
{{event("SVGScroll")}}{{domxref("SVGEvent")}}SVGAn SVG document is being scrolled.
{{event("SVGUnload")}}{{domxref("SVGEvent")}}SVGAn SVG document has been removed from a window or frame.
{{event("SVGZoom")}}{{domxref("SVGZoomEvent")}}SVGAn SVG document is being zoomed.
{{event("timeout")}}{{domxref("ProgressEvent")}}XMLHttpRequest 
{{event("timeupdate")}}{{domxref("Event")}}HTML5 mediaThe time indicated by the currentTime attribute has been updated.
{{event("touchcancel")}}{{domxref("TouchEvent")}}Touch EventsA touch point has been disrupted in an implementation-specific manners (too many touch points for example).
{{event("touchend")}}{{domxref("TouchEvent")}}Touch EventsA touch point is removed from the touch surface.
{{event("touchenter")}}{{domxref("TouchEvent")}}Touch Events RemovedA touch point is moved onto the interactive area of an element.
{{event("touchleave")}}{{domxref("TouchEvent")}}Touch Events RemovedA touch point is moved off the interactive area of an element.
{{event("touchmove")}}{{domxref("TouchEvent")}}Touch EventsA touch point is moved along the touch surface.
{{event("touchstart")}}{{domxref("TouchEvent")}}Touch EventsA touch point is placed on the touch surface.
{{event("transitionend")}}{{domxref("TransitionEvent")}}CSS TransitionsA CSS transition has completed.
{{event("unload")}}{{domxref("UIEvent")}}DOM L3The document or a dependent resource is being unloaded.
{{event("updateready")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.
upgradeneeded IndexedDBAn attempt was made to open a database with a version number higher than its current version. A versionchange transaction has been created.
{{event("userproximity")}}{{domxref("UserProximityEvent")}}{{SpecName("Proximity Events")}}Fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not).
{{event("voiceschanged")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)
versionchange IndexedDBA versionchange transaction completed.
{{event("visibilitychange")}}{{domxref("Event")}}Page visibilityThe content of a tab has become visible or has been hidden.
{{event("volumechange")}}{{domxref("Event")}}HTML5 mediaThe volume has changed.
{{event("waiting")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because of a temporary lack of data.
{{event("wheel")}}{{gecko_minversion_inline("17")}}{{domxref("WheelEvent")}}DOM L3A wheel button of a pointing device is rotated in any direction.
+ +

Non-standard events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("afterscriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script has been executed.
{{event("beforescriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script is about to be executed.
{{event("beforeinstallprompt")}}{{domxref("Event")}}Chrome specificA user is prompted to save a web site to a home screen on mobile.
{{event("cardstatechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.cardState")}} property changes value.
{{event("change")}}{{domxref("DeviceStorageChangeEvent")}}Firefox OS specificThis event is triggered each time a file is created, modified or deleted on a given storage area.
{{event("connectionInfoUpdate")}} Firefox OS specificThe informations about the signal strength and the link speed have been updated.
{{event("cfstatechange")}} Firefox OS specificThe call forwarding state changes.
{{event("datachange")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object changes values.
{{event("dataerror")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object receive an error from the RIL.
{{event("DOMMouseScroll")}}{{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)
dragdrop {{deprecated_inline}}DragEventMozilla specificAn element is dropped (use {{event("drop")}} instead).
dragexit {{deprecated_inline}}DragEventMozilla specificA drag operation is being ended(use {{event("dragend")}} instead).
draggesture {{deprecated_inline}}DragEventMozilla specificThe user starts dragging an element or text selection (use {{event("dragstart")}} instead).
{{event("icccardlockerror")}} Firefox OS specificthe {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.
{{event("iccinfochange")}} Firefox OS specificThe {{domxref("MozMobileConnection.iccInfo")}} object changes.
{{event("localized")}} Mozilla SpecificThe page has been localized using data-l10n-* attributes.
{{event("mousewheel")}}{{deprecated_inline}} IE inventedThe wheel button of a pointing device is rotated.
{{event("MozAudioAvailable")}}{{domxref("Event")}}Mozilla specificThe audio buffer is full and the corresponding raw samples are available.
MozBeforeResize {{obsolete_inline}} Mozilla specificA window is about to be resized.
{{event("mozbrowseractivitydone")}} Firefox OS Browser API-specificSent when some activity has been completed (complete description TBD.)
{{event("mozbrowserasyncscroll")}} Firefox OS Browser API-specificSent when the scroll position within a browser {{HTMLElement("iframe")}} changes.
{{event("mozbrowseraudioplaybackchange")}} Firefox OS Browser API-specificSent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.
{{event("mozbrowsercaretstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.
{{event("mozbrowserclose")}} Firefox OS Browser API-specificSent when window.close() is called within a browser {{HTMLElement("iframe")}}.
{{event("mozbrowsercontextmenu")}} Firefox OS Browser API-specificSent when a browser {{HTMLElement("iframe")}} try to open a context menu.
{{event("mozbrowserdocumentfirstpaint")}} Firefox OS Browser API-specificSent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.
{{event("mozbrowsererror")}} Firefox OS Browser API-specificSent when an error occured while trying to load a content within a browser iframe
{{event("mozbrowserfindchange")}} Firefox OS Browser API-specificSent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see HTMLIFrameElement search methods.)
{{event("mozbrowserfirstpaint")}} Firefox OS Browser API-specificSent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from about:blank.)
{{event("mozbrowsericonchange")}} Firefox OS Browser API-specificSent when the favicon of a browser iframe changes.
{{event("mozbrowserlocationchange")}} Firefox OS Browser API-specificSent when an browser iframe's location changes.
{{event("mozbrowserloadend")}} Firefox OS Browser API-specificSent when the browser iframe has finished loading all its assets.
{{event("mozbrowserloadstart")}} Firefox OS Browser API-specificSent when the browser iframe starts to load a new page.
{{event("mozbrowsermanifestchange")}} Firefox OS Browser API-specificSent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.
{{event("mozbrowsermetachange")}} Firefox OS Browser API-specificSent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.
{{event("mozbrowseropensearch")}} Firefox OS Browser API-specificSent when a link to a search engine is found.
{{event("mozbrowseropentab")}} Firefox OS Browser API-specificSent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.)
{{event("mozbrowseropenwindow")}} Firefox OS Browser API-specificSent when {{domxref("window.open()")}} is called within a browser iframe.
{{event("mozbrowserresize")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}}'s window size has changed.
{{event("mozbrowserscroll")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}} content scrolls.
{{event("mozbrowserscrollareachanged")}} Firefox OS Browser API-specificSent when the available scrolling area  in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)
{{event("mozbrowserscrollviewchange")}} Firefox OS Browser API-specificSent when asynchronous scrolling (i.e. APCZ) starts or stops.
{{event("mozbrowsersecuritychange")}} Firefox OS Browser API-specificSent when the SSL state changes within a browser iframe.
{{event("mozbrowserselectionstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.
{{event("mozbrowsershowmodalprompt")}} Firefox OS Browser API-specificSent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe
{{event("mozbrowsertitlechange")}} Firefox OS Browser API-specificSent when the document.title changes within a browser iframe.
{{event("mozbrowserusernameandpasswordrequired")}} Firefox OS Browser API-specificSent when an HTTP authentification is requested.
{{event("mozbrowservisibilitychange")}} Firefox OS Browser API-specificSent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.
{{event("MozGamepadButtonDown")}} To be specifiedA gamepad button is pressed down.
{{event("MozGamepadButtonUp")}} To be specifiedA gamepad button is released.
{{event("MozMousePixelScroll")}} {{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)
{{event("MozOrientation")}} {{deprecated_inline}} Mozilla specificFresh data is available from an orientation sensor (see deviceorientation).
{{event("MozScrolledAreaChanged")}}{{domxref("UIEvent")}}Mozilla specificThe document view has been scrolled or resized.
{{event("moztimechange")}} Mozilla specificThe time of the device has been changed.
MozTouchDown {{deprecated_inline}} Mozilla specificA touch point is placed on the touch surface (use touchstart instead).
MozTouchMove {{deprecated_inline}} Mozilla specificA touch point is moved along the touch surface (use touchmove instead).
MozTouchUp {{deprecated_inline}} Mozilla specificA touch point is removed from the touch surface (use touchend instead).
{{event("alerting")}}{{domxref("CallEvent")}}To be specifiedThe correspondent is being alerted (his/her phone is ringing).
{{event("busy")}}{{domxref("CallEvent")}}To be specifiedThe line of the correspondent is busy.
{{event("callschanged")}}{{domxref("CallEvent")}}To be specifiedA call has been added or removed from the list of current calls.
onconnected {{event("connected")}}{{domxref("CallEvent")}}To be specifiedA call has been connected.
{{event("connecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to connect.
{{event("delivered")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been successfully delivered.
{{event("dialing")}}{{domxref("CallEvent")}}To be specifiedThe number of a correspondent has been dialed.
{{event("disabled")}} Firefox OS specificWifi has been disabled on the device.
{{event("disconnected")}}{{domxref("CallEvent")}}To be specifiedA call has been disconnected.
{{event("disconnecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to disconnect.
{{event("enabled")}} Firefox OS specificWifi has been enabled on the device.
{{event("error_(Telephony)","error")}}{{domxref("CallEvent")}}To be specifiedAn error occurred.
{{event("held")}}{{domxref("CallEvent")}}To be specifiedA call has been held.
{{event("holding")}}{{domxref("CallEvent")}}To be specifiedA call is about to be held.
{{event("incoming")}}{{domxref("CallEvent")}}To be specifiedA call is being received.
{{event("received")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been received.
{{event("resuming")}}{{domxref("CallEvent")}}To be specifiedA call is about to resume.
{{event("sent")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been sent.
{{event("statechange")}}{{domxref("CallEvent")}}To be specifiedThe state of a call has changed.
{{event("statuschange")}} Firefox OS specificThe status of the Wifi connection changed.
{{event("overflow")}}{{domxref("UIEvent")}}Mozilla specificAn element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).
{{event("smartcard-insert")}} Mozilla specificA smartcard has been inserted.
{{event("smartcard-remove")}} Mozilla specificA smartcard has been removed.
{{event("stkcommand")}} Firefox OS specificThe STK Proactive Command is issued from ICC.
{{event("stksessionend")}} Firefox OS specificThe STK Session is terminated by ICC.
text Mozilla SpecificA generic composition event occurred.
{{event("underflow")}}{{domxref("UIEvent")}}Mozilla specificAn element is no longer overflowed by its content (only works for elements styled with overflow != visible).
uploadprogress {{deprecated_inline}}{{domxref("ProgressEvent")}}Mozilla SpecificUpload is in progress (see {{event("progress")}}).
+

{{event("ussdreceived")}}

+ 		 Firefox OS specificA new USSD message is received
{{event("voicechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.voice")}} object changes values.
+ +

Mozilla-specific events

+ +
+

Note: those events are never exposed to web content and can only be used in chrome content context.

+
+ +

XUL events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("broadcast")}} XULAn observer noticed a change to the attributes of a watched broadcaster.
{{event("CheckboxStateChange")}} XULThe state of a checkbox has been changed either by a user action or by a script (useful for accessibility).
close XULThe close button of the window has been clicked.
{{event("command")}} XULAn element has been activated.
{{event("commandupdate")}} XULA command update occurred on a commandset element.
{{event("DOMMenuItemActive")}} XULA menu or menuitem has been hovered or highlighted.
{{event("DOMMenuItemInactive")}} XULA menu or menuitem is no longer hovered or highlighted.
{{event("popuphidden")}}PopupEventXULA menupopup, panel or tooltip has been hidden.
{{event("popuphiding")}}PopupEventXULA menupopup, panel or tooltip is about to be hidden.
{{event("popupshowing")}}PopupEventXULA menupopup, panel or tooltip is about to become visible.
{{event("popupshown")}}PopupEventXULA menupopup, panel or tooltip has become visible.
{{event("RadioStateChange")}} XULThe state of a radio has been changed either by a user action or by a script (useful for accessibility).
{{event("ValueChange")}} XULThe value of an element has changed (a progress bar for example, useful for accessibility).
+ +

Add-on-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
MozSwipeGesture Addons specificA touch point is swiped across the touch surface
MozMagnifyGestureStart Addons specificTwo touch points start to move away from each other.
MozMagnifyGestureUpdate Addons specificTwo touch points move away from each other (after a MozMagnifyGestureStart).
MozMagnifyGesture Addons specificTwo touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).
MozRotateGestureStart Addons specificTwo touch points start to rotate around a point.
MozRotateGestureUpdate Addons specificTwo touch points rotate around a point (after a MozRotateGestureStart).
MozRotateGesture Addons specificTwo touch points rotate around a point (after a sequence of MozRotateGestureUpdate).
MozTapGesture Addons specificTwo touch points are tapped on the touch surface.
MozPressTapGesture Addons specificA "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).
MozEdgeUIGesture Addons specificA touch point is swiped across the touch surface to invoke the edge UI (Win8 only).
MozAfterPaint Addons specificContent has been repainted.
DOMPopupBlocked Addons specificA popup has been blocked
DOMWindowCreated Addons specificA window has been created.
DOMWindowClose Addons specificA window is about to be closed.
DOMTitleChanged Addons specifcThe title of a window has changed.
DOMLinkAdded Addons specifcA link has been added a document.
DOMLinkRemoved Addons specifcA link has been removed inside from a document.
DOMMetaAdded Addons specificA meta element has been added to a document.
DOMMetaRemoved Addons specificA meta element has been removed from a document.
DOMWillOpenModalDialog Addons specificA modal dialog is about to open.
DOMModalDialogClosed Addons specificA modal dialog has been closed.
DOMAutoComplete Addons specificThe content of an element has been auto-completed.
DOMFrameContentLoaded Addons specificThe frame has finished loading (but not its dependent resources).
AlertActive Addons specificA notification element is shown.
AlertClose Addons specificA notification element is closed.
fullscreen Addons specificBrowser fullscreen mode has been entered or left.
sizemodechange Addons specificWindow has entered/left fullscreen mode, or has been minimized/unminimized.
MozEnteredDomFullscreen Addons specificDOM fullscreen mode has been entered.
SSWindowClosing Addons specificThe session store will stop tracking this window.
SSTabClosing Addons specificThe session store will stop tracking this tab.
SSTabRestoring Addons specificA tab is about to be restored.
SSTabRestored Addons specificA tab has been restored.
SSWindowStateReady Addons specificA window state has switched to "ready".
SSWindowStateBusy Addons specificA window state has switched to "busy".
tabviewsearchenabled Addons specificThe search feature of Panorama has been activated
tabviewsearchdisabled Addons specificThe search feature of Panorama has been deactivated
tabviewframeinitialized Addons specificThe frame container of Panorama has been initialized
tabviewshown Addons specificThe Panorama tab has been shown
tabviewhidden Addons specificThe Panorama tab has been hidden
TabOpen Addons specificA tab has been opened.
TabClose Addons specificA tab has been closed.
TabSelect Addons specificA tab has been selected.
TabShow Addons specificA tab has been shown.
TabHide Addons specificA tab has been hidden.
TabPinned Addons specificA tab has been pinned.
TabUnpinned Addons specificA tab has been unpinned.
+ +

Developer tool-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
CssRuleViewRefreshed devtools specificThe "Rules" view of the style inspector has been updated.
CssRuleViewChanged devtools specificThe "Rules" view of the style inspector has been changed.
CssRuleViewCSSLinkClicked devtools specificA link to a CSS file has been clicked in the "Rules" view of the style inspector.
+ +

Categories

+ +

Animation events

+ +

{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}

+ +

Battery events

+ +

{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}

+ +

Call events

+ +

{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}

+ +

CSS events

+ +

CssRuleViewRefreshed, CssRuleViewChanged, CssRuleViewCSSLinkClicked, {{event("transitionend")}}

+ +

Database events

+ +

abort, blocked, complete, {{event("error")}} (link), success, upgradeneeded, versionchange

+ +

Document events

+ +

DOMLinkAdded, DOMLinkRemoved, DOMMetaAdded, DOMMetaRemoved, DOMWillOpenModalDialog, DOMModalDialogClosed, {{event("unload")}}

+ +

DOM mutation events

+ +

DOMAttributeNameChanged, DOMAttrModified, DOMCharacterDataModified, {{event("DOMContentLoaded")}}, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified

+ +

Drag events

+ +

{{event("drag")}}, dragdrop, {{event("dragend")}}, {{event("dragenter")}}, dragexit, draggesture, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}

+ +

Element events

+ +

{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, DOMAutoComplete, {{event("command")}}, {{event("commandupdate")}}

+ +

Focus events

+ +

{{event("blur")}}, {{event("change")}}, DOMFocusIn, DOMFocusOut, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}

+ +

Form events

+ +

{{event("reset")}}, {{event("submit")}}

+ +

Frame events

+ +

{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (link), {{event("mozbrowsertitlechange")}}, DOMFrameContentLoaded

+ +

Input device events

+ +

{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}

+ +

Media events

+ +

{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}

+ + + +

{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}

+ +

Network events

+ +

{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},

+ +

Notification events

+ +

AlertActive, AlertClose

+ +

Pointer events

+ +

{{event("pointerover")}}, {{event("pointerenter")}}, {{event("pointerdown")}}, {{event("pointermove")}}, {{event("pointerup")}}, {{event("pointercancel")}}, {{event("pointerout")}}, {{event("pointerleave")}}, {{event("gotpointercapture")}}, {{event("lostpointercapture")}}

+ + + +

{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, DOMPopupBlocked

+ +

Printing events

+ +

{{event("afterprint")}}, {{event("beforeprint")}}

+ +

Progress events

+ +

abort, {{event("error")}}, load, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, progress, {{event("timeout")}}, uploadprogress

+ +

Resource events

+ +

{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}

+ +

Script events

+ +

{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}

+ +

Sensor events

+ +

{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}

+ +

Session history events

+ +

{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}

+ +

Smartcard events

+ +

{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}

+ +

SMS and USSD events

+ +

{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}

+ +

Storage events

+ +

{{event("change")}} (see {{anch("Non-standard events")}}), {{event("storage")}}

+ +

SVG events

+ +

{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}

+ +

Tab events

+ +

tabviewsearchenabled, tabviewsearchdisabled, tabviewframeinitialized, tabviewshown, tabviewhidden, TabOpen, TabClose, TabSelect, TabShow, TabHide, TabPinned, TabUnpinned, SSTabClosing, SSTabRestoring, SSTabRestored, {{event("visibilitychange")}}

+ +

Text events

+ +

{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, text

+ +

Touch events

+ +

MozEdgeUIGesture, MozMagnifyGesture, MozMagnifyGestureStart, MozMagnifyGestureUpdate, MozPressTapGesture, MozRotateGesture, MozRotateGestureStart, MozRotateGestureUpdate, MozSwipeGesture, MozTapGesture, MozTouchDown, MozTouchMove, MozTouchUp, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}

+ +

Update events

+ +

{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}

+ +

Value change events

+ +

{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}

+ +

View events

+ +

fullscreen, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, MozEnteredDomFullscreen, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, sizemodechange

+ +

Websocket events

+ +

close, {{event("error")}}, message, open

+ +

Window events

+ +

DOMWindowCreated, DOMWindowClose, DOMTitleChanged, MozBeforeResize {{obsolete_inline}}, SSWindowClosing, SSWindowStateReady, SSWindowStateBusy, close

+ +

Uncategorized events

+ +

{{event("beforeunload")}}, {{event("localized")}}, message, message, message, MozAfterPaint, {{event("moztimechange")}}, open, {{event("show")}}

+ +

See also

+ + diff --git a/files/it/web/events/load/index.html b/files/it/web/events/load/index.html new file mode 100644 index 0000000000..2939f32c27 --- /dev/null +++ b/files/it/web/events/load/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/guide/ajax/index.html b/files/it/web/guide/ajax/index.html new file mode 100644 index 0000000000..5f8b87ee74 --- /dev/null +++ b/files/it/web/guide/ajax/index.html @@ -0,0 +1,57 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - Tutte_le_categorie +translation_of: Web/Guide/AJAX +--- +

+

+
AJAX:Iniziare
Una introduzione ad AJAX.
+

Asynchronous JavaScript and XML (AJAX) non è di per sè una tecnologia, ma è un termine che descrive un "nuovo" approccio all'utilizzo di diverse tecnologie esistenti, compresi: HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT e l'oggetto XMLHttpRequest. Grazie all'utilizzo di queste tecnologie in combinazione con il modello AJAX, le applicazioni web possono eseguire aggiornamenti rapidi e incrementali dell'interfaccia utente senza ricaricare nel browser l'intera pagina. Questo rende l'applicazione più performante e più reattiva alle azioni dell'utente.
+Il W3C ha pubblicato una bozza di standard per l'oggetto XMLHttpRequest. +

+ + + + +
+

Documentazione

+
AJAX:Iniziare +
Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per cominciare. +
+
Compatibilità di AJAX +
Quali browser supportano AJAX? +
+
Ajax: A New Approach to Web Applications (EN) +
Jesse James Garrett, di adaptive path, ha scritto questa introduzione ad AJAX nel febbraio 2005. +
+
A Simpler Ajax Path (EN) +
"E' facile avvalersi dell'oggetto XMLHttpRequest per costruire un'applicazione web che si comporti come un'applicazione desktop utilizzando però strumenti come i web forms per ricevere input dagli utenti." +
+
Fixing the Back Button and Enabling Bookmarking for AJAX Apps (EN) +
Mike Stenhouse ha realizzato questo articolo che esamina nel dettaglio alcuni metodi che è possibile utilizzare per risolvere i problemi relativi al bottone "Indietro" e ai Bookmark nelle applicazioni AJAX. +
+
Ajax Mistakes (EN) +
Alex Bosworth ha scritto questo articolo che evidenzia alcuni errori comuni degli sviluppatori AJAX.
+		 +

Strumenti

+ +

Argomenti correlati

+ +
+

Interwiki Language Links +

{{ languages( { "ca": "ca/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX" } ) }} diff --git a/files/it/web/guide/ajax/iniziare/index.html b/files/it/web/guide/ajax/iniziare/index.html new file mode 100644 index 0000000000..f473f64d1e --- /dev/null +++ b/files/it/web/guide/ajax/iniziare/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/api/index.html b/files/it/web/guide/api/index.html new file mode 100644 index 0000000000..3f571c0cb8 --- /dev/null +++ b/files/it/web/guide/api/index.html @@ -0,0 +1,26 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +

Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.

+ + +

Web APIs from A to Z

+ +

{{ListGroups}}

+ +

See also

+ + diff --git a/files/it/web/guide/css/index.html b/files/it/web/guide/css/index.html new file mode 100644 index 0000000000..20621b40b0 --- /dev/null +++ b/files/it/web/guide/css/index.html @@ -0,0 +1,23 @@ +--- +title: CSS developer guide +slug: Web/Guide/CSS +tags: + - CSS + - Guide + - Landing + - NeedsTranslation + - TopicStub +translation_of: Learn/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/graphics/index.html b/files/it/web/guide/graphics/index.html new file mode 100644 index 0000000000..7221d89ec7 --- /dev/null +++ b/files/it/web/guide/graphics/index.html @@ -0,0 +1,58 @@ +--- +title: Graphics on the Web +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Grafica + - HTML5 + - SVG + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +

I moderni Siti Web e Applicazioni, spesso necessitano di mostrare una grafica. Mostrare delle immagini statiche, può essere fatto facilmente usando l'elemento immagine {{HTMLElement("img")}} , Oppure settando lo sfondo di elementi HTML usando la proprietà dello sfondo css {{cssxref("background-image")}}. Spesso è possibile creare anche grafici "al volo", oppure manipolare immagini dopo averle fatte.Questi articoli forniscono infomazioni su come si può ottenere questo risultato

+ +
+
+

Grafiche 2D

+ +
+
Canvas
+
L'elemento {{HTMLElement("canvas")}} fornisce APIs per disegnare grafica 2D usando JavaScript.
+
SVG
+
La Grafica a Vettori Scalabile (SVG) consente di usare linee, curve, e altre forme geometriche per realizzare grafica. Evitando l'utilizzo di bitmaps, potete creare immagini che scalano in modo pulito ad ogni dimensione.
+
+ +

 

+ +

 

+ +

 

+ +

 

+ +

View All...

+
+ +
+

Grafiche 3D

+ +
+
WebGL
+
Una guida per come iniziare con WebGL, L' API di grafica 3D per il Web. Questa tecnologia consente un uso standard delle OpenGL.Ad esempio un contenuto Web
+
+ +

Video

+ +
+
Usare  l'audio e il video HTML5
+
Incorporare un video in un documento HTML e controllare la riproduzione.
+
WebRTC
+
L'acronimo RTC in WebRTC sta per Real-Time Communications, technology (Comunicazioni in Tempo Reali) che abilitano lo streaming audio/video e la condivisione di dati tra i browser e i clienti (peers).
+
+
+
+ +

 

diff --git a/files/it/web/guide/html/categorie_di_contenuto/index.html b/files/it/web/guide/html/categorie_di_contenuto/index.html new file mode 100644 index 0000000000..94eae32320 --- /dev/null +++ b/files/it/web/guide/html/categorie_di_contenuto/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/editable_content/index.html b/files/it/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..e878289a2c --- /dev/null +++ b/files/it/web/guide/html/editable_content/index.html @@ -0,0 +1,216 @@ +--- +title: Making content editable +slug: Web/Guide/HTML/Editable_content +translation_of: Web/Guide/HTML/Editable_content +--- +

Inprogress! In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.

+ +

How does it work?

+ +

All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.

+ +

Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.

+ +
<div contenteditable="true">
+  This text can be edited by the user.
+</div>
+ +

Here's the above HTML in action:

+ +

{{ EmbedLiveSample('How_does_it_work') }}

+ +

Executing commands

+ +

When an HTML element has contenteditable set to true, the {{ domxref("document.execCommand()") }} method is made available. This lets you run commands to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand() will affect the currently active editable element.

+ +

Differences in markup generation

+ +

Use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).

+ +

Fortunately, in modern browsers things are somewhat more consistent. As of Firefox 55, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.

+ +

Try it out in the above example.

+ +
+

Note: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <div>.

+
+ +

If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a DefaultParagraphSeparator command to allow you to change it. For example, to use {{htmlelement("p")}} elements:

+ +
document.execCommand("DefaultParagraphSeparator", false, "p");
+ +

Security

+ +

For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using about:config:

+ +
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+ +

Example: A simple but complete rich text editor

+ +
+
<!doctype html>
+<html>
+<head>
+<title>Rich Text Editor</title>
+<script type="text/javascript">
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
+  oPrntWin.document.close();
+}
+</script>
+<style type="text/css">
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+</style>
+</head>
+<body onload="initDoc();">
+<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
+<input type="hidden" name="myDoc">
+<div id="toolBar1">
+<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option selected>- formatting -</option>
+<option value="h1">Title 1 &lt;h1&gt;</option>
+<option value="h2">Title 2 &lt;h2&gt;</option>
+<option value="h3">Title 3 &lt;h3&gt;</option>
+<option value="h4">Title 4 &lt;h4&gt;</option>
+<option value="h5">Title 5 &lt;h5&gt;</option>
+<option value="h6">Subtitle &lt;h6&gt;</option>
+<option value="p">Paragraph &lt;p&gt;</option>
+<option value="pre">Preformatted &lt;pre&gt;</option>
+</select>
+<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- font -</option>
+<option>Arial</option>
+<option>Arial Black</option>
+<option>Courier New</option>
+<option>Times New Roman</option>
+</select>
+<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- size -</option>
+<option value="1">Very small</option>
+<option value="2">A bit small</option>
+<option value="3">Normal</option>
+<option value="4">Medium-large</option>
+<option value="5">Big</option>
+<option value="6">Very big</option>
+<option value="7">Maximum</option>
+</select>
+<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- color -</option>
+<option value="red">Red</option>
+<option value="blue">Blue</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- background -</option>
+<option value="red">Red</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+</div>
+<div id="toolBar2">
+<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
+<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
+<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
+<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
+<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
+<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
+<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
+<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
+<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
+<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
+<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
+<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
+<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
+<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
+<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
+<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
+<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
+<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
+<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
+<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
+</div>
+<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
+<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
+<p><input type="submit" value="Send" /></p>
+</form>
+</body>
+</html>
+
+
+ +
Note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
+ +

See also

+ + diff --git a/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html new file mode 100644 index 0000000000..0beccd9e00 --- /dev/null +++ b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html @@ -0,0 +1,420 @@ +--- +title: Rich-Text Editing in Mozilla +slug: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +--- +

Introduzione

+ +

Mozilla 1.3 introduce un'implementazione della caratteristica designMode di Microsoft® Internet Explorer. In Mozilla 1.3, il supporto al rich-text editing supporta la caratteristica designMode che trasforma i documenti HTML in editor rich-text. Partendo da Firefox 3, Mozilla supporta anche l'attributo contentEditable di Internet Explorer che permette a qualsiasi elemento di diventare un elemento modificabile o non (la seconda caratteristica viene usata per prevenire cambiamenti ad un elemento che non deve essere modificato).

+ +

Impostare il Rich-Text Editing

+ +

Il Rich-text editing viene inizializzato tramite la proprietà designMode di un documento ad "On", come un documento all'interno di un iframe. Una volta che designMode viene impostato ad "On", il documento diventa un'area di rich-text editing e l'utente può digitare dentro questa come se fosse una textarea. The most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website.

+ +

Allo stesso modo, impostando contentEditable a "true" ti permette di rendere modificabili singoli elementi di un documento.

+ +

Eseguire i Comandi

+ +

Quando un documento HTML viene impostato come modificabile con designMode, l'oggetto document rilascia il metodo  execCommand, la quale permette di eseguire dei comandi per manipolare il contenuto dell'area modificabile. Molti comandi agiscono sulla selezione del testo nel documento (grassetto, corsivo, ecc), mentre altri inseriscono nuovi elementi (collegamenti) o agisco su un'intera riga (indentazione). Quando si usa contentEditable, il metodo execCommand coinvolgerà l'attuale elemento attivo modificabile.

+ +
execCommand(Stringa nomeComando, Booleano mostraUIPredefinita, Stringa valoreArgomento)
+
+ +

Argomenti

+ +
+
+
Stringa nomeComando
+
il nome del comando
+
+
+ +
+
+
Booleano mostraUIPredefinita
+
se l'interfaccia utente standard deve essere visualizzata. Questa caratteristica non è implementata in Mozilla.
+
+
+ +
+
+
Stringa valoreArgomento
+
alcuni comandi (come insertimage) richiedono un valore per un argomento extra (l'indirizzo dell'immagine). Passa un argomento oppure null, se l'argomento non è necessario.
+
+
+ +

Comandi

+ +
+
+
backColor
+
Cambia il colore di sfondo del documento. In modalità styleWithCss invece, questo agisce sul colore di sfondo del blocco che lo contiene. Richiede un valore esadecimale do un colore da passare come argomento. (Internet Explorer usa questo comando per impostare il colore di sfondo del testo.)
+
+
+ +
+
+
bold
+
Attiva o disattiva il grassetto sulla selezione corrente o alla posizione del cursore. (Internet Explorer usa il tag STRONG al posto di B.)
+
+
+ +
+
+
contentReadOnly
+
Rende il contenuto del documento modificabile o di sola lettura. Richiede una valore booleano true/false da passare come argomento. (Non è supportato da Internet Explorer.)
+
+
+ +
+
+
copy
+
Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
createLink
+
Crea un collegamento dalla selezione, solo se esiste la selezione. Richiede una stringa contenente l'indirizzo del collegamento da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)
+
+
+ +
+
+
cut
+
+ +
+
Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
decreaseFontSize
+
Aggiunge un tag SMALL attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
delete
+
Cancella la selezione corrente.
+
+
+ +
+
+
fontName
+
Cambia il carattere alla selezione o alla posizione del cursore. Richiede una stringa, con il nome di un font ("Arial" per esempio) da passare come argomento.
+
+
+ +
+
+
fontSize
+
Cambia la dimensione del testo nella selezione o alla posizione del cursore. Richiede una dimensione HTML (1-7) da passare come argomento.
+
+
+ +
+
+
foreColor
+
Cambia il colore del testo alla selezione on alla posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento.
+
+
+ +
+
+
formatBlock
+
Aggiunge un tag di blocco-stile attorno alla selezione o alla posizione del cursore. Richiede una stringa con il nome del tag da passare come argomento. Praticamente possono essere usati tutti i blocchi di stile (es. "H1", "EM", "BUTTON", "TEXTAREA"). (Internet Explorer supporta soltanto i tags di intestazione H1 - H6, ADDRESS, e PRE, e devono essere racchiusi all'interno dei delimitatori < >, quindi l'argomento dovrà essere passato come "<H1>".)
+
+
+ +
+
+
heading
+
Aggiunge un'intestazione attorno la selezione o sulla riga in cui è posizionato il cursore. Richiede una stringa con il nome del tag da passare come argomento (es. "H1", "H6"). (Non supportato da Internet Explorer.)
+
+
+ +
+
+
hiliteColor
+
Cambia il colore di sfondo della selezione o della posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento. UseCSS deve essere attivata per usare questa funzione. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
increaseFontSize
+
Aggiunge il tag BIG attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
indent
+
Aumenta il rientro dell'elemento all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertHorizontalRule
+
Inserisce una horizontal rule alla posizione del cursore (elimina la selezione).
+
+
+ +
+
+
insertHTML
+
Inserisce una stringa HTML alla posizione del cursore (elimina la selezione). Richiede una stringa HTML valida da passare come argomento. (Non supportata da Internet Explorer.)
+
+
+ +
+
+
insertImage
+
Inserisce un'immagine alla posizione del cursore (elimina la selezione). Richiede una stringa contenente l'indirizzo dell'immagine da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)
+
+
+ +
+
+
insertOrderedList
+
Crea un elenco numerato all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertUnorderedList
+
Crea un elenco puntato all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertParagraph
+
Inserisce una paragrafo attorno alla selezione o alla riga corrente. (Internet Explorer inserisce un paragrafo alla posizione del cursore e cancella la selezione.)
+
+
+ +
+
+
italic
+
Attiva o disattiva il corsivo sulla selezione o alla posizione del cursore. (Internet Explorer usa il tag EM al posto di I.)
+
+
+ +
+
+
justifyCenter
+
Allinea al centro la selezione o la posizione del cursore.
+
+
+ +
+
+
justifyLeft
+
Allinea a sinistra la selezione o la posizione del cursore.
+
+
+ +
+
+
justifyRight
+
Allinea a destra la selezione o la posizione del cursore.
+
+
+ +
+
+
outdent
+
Diminuisce il rientro dell'elemento sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
paste
+
Incolla il contenuto degli appunti alla posizione del cursore (sostituisce la selezione corrente). I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
redo
+
Ripristina il comando precedentemente annullato.
+
+
+ +
+
+
removeFormat
+
Rimuove tutta la formattazione dalla selezione corrente.
+
+
+ +
+
+
selectAll
+
Seleziona tutto il contenuto dell'area modificabile.
+
+
+ +
+
+
strikeThrough
+
Attiva o disattiva il testo barrato sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
subscript
+
Attiva o disattiva subscript sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
superscript
+
Attiva o disattiva superscript sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
underline
+
Attiva o disattiva la sottolineatura sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
undo
+
Annulla l'ultimo comando eseguito.
+
+
+ +
+
+
unlink
+
Rimuove il collegamento dal collegamento selezionato.
+
+
+ +
+
+
useCSS {{ Deprecated_inline() }}
+
Attiva o disattiva l'uso di tags HTML tags o CSS per la generazione del markup. Richiede una valore booleano true/false come argomento. NOTA: Questo argomento è invertito (es. usa false per usare il CSS, true per usare l'HTML). (Non supportato da Internet Explorer.) Questo comando è diventato deprecato; in alternativa usa il comando styleWithCSS.
+
+
+ +
+
+
styleWithCSS
+
Sostituisce il comando useCSS; l'argomento, a differenza del comando useCSS, l'argomento lavora come ci si aspetta, es. passato true modifica/genera attributi style nel markup, false genera elementi di formattazione.
+
+
+ +

Differenze con Internet Explorer

+ +

Una delle maggiori differenze tra Mozilla e Internet Explorer che coinvolgono designMode è il codice generato nel documento modificabile: while Internet Explorer uses HTML tags (em, i, ecc), Mozilla 1.3 will generate by default spans with inline style rules. Il comando  useCSS può essere usato per attivare o disattivare la creazione di markup HTML o CSS.

+ +

Figure 1 : Generated HTML differences

+ +
Mozilla:
+<span style="font-weight: bold;">I love geckos.</span>
+<span style="font-weight: bold; font-style: italic;
+    text-decoration: underline;">Dinosaurs are big.</span>
+
+Internet Explorer:
+<STRONG>I love geckos.</STRONG>
+<STRONG><EM><U>Dinosaurs are big.</U></EM></STRONG>
+
+ +

Un'altra differenza tra Mozilla e IE è il modo in cui si accede all'oggetto document di un iframe, con la quale viene usato in congiunzione con designMode. Mozilla usa il modo standard fornito da W3C, IFrameElement.contentDocument, mentre IE richiede IFrameElement.document.

+ +

DevEdge fornisce una classe JavaScript, xbDesignMode, il cui scopo è quello di racchiudere le caratteristiche di designMode in una classe che nasconde le differenze tra IE e Mozilla.

+ +


+ Gestione degli Eventi Disabilitati

+ +

Una significante differenza per Mozilla è che una volta che viene impostato il documento a designMode, tutti gli eventi sul determinato documento vengono disabilitati. Tuttavia, disattivato il designMode (come ora è possibile in Mozilla 1.5) gli eventi diventeranno attivi di nuovo.

+ +

Maggiori informazioni possono essere trovato nella sezione Rich text editing dell'articolo Convertire le applicazioni da Internet Explorer a Mozilla.

+ +

Esempi

+ +

Nota: I files di esempio sono stati trasferiti su un'altro sito. In questo momento non sono disponibili. --fumble 18:13, 24 Apr 2005 (PDT)

+ +

Esempio 1

+ +

Il primo esempio è un documento HTML impostato con designMode a "On". In Mozilla 1.3, questo rende l'intero documento modificabile. Tuttavia, Internet Explorer, non permette a javascript di cambiare il designMode del documento corrente. Per farlo funzionare in Internet Explorer, l'attributo contentEditable del tag body necessita di essere impostato a "true".

+ +

Figura 2 : Primo esempio

+ +
HTML:
+<body contentEditable="true" onload="load()">
+
+JavaScript:
+function load(){
+  window.document.designMode = "On";
+}
+
+ +

Esempio 2

+ +

Il secondo esempio è una semplice pagina in rich text editing, dove il testo può essere trasformato in grassetto/corsivo/sottolineato, possono essere aggiunti nuovi collegamenti e si può cambiare il colore del testo. La pagina di esempio consiste in un iframe, la quale sarà l'area rich-text, nonché gli elementi che consento di effettuare modifiche base al testo come grassetto/corsivo/colore del testo.

+ +

Figura 3 : Impostazione del rich-text editing

+ +
HTML:
+<body onload="load()">
+
+JavaScript:
+function load(){
+  getIFrameDocument("editorWindow").designMode = "On";
+}
+
+function getIFrameDocument(aID){
+  // se esiste contentDocument, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    return document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    return document.frames[aID].document;
+  }
+}
+
+ +

L'esempio contiene una funzione doRichEditCommand che rende semplice l'esecuzione dei comandi nel documento dell'iframe e mantiene pulito il codice HTML. La funzione esegue il comando richiesto tramite execCommand() e dopodiché imposta il focus di nuovo al documento modificabile, come anche cliccando su di un pulsante imposterà il focus su pulsante stesso, la quale interromperà il flusso di modifica.

+ +

Figura 4 : Esecuzione dei comandi Rich Editing

+ +
HTML:
+<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>
+
+JavaScript:
+function doRichEditCommand(aName, aArg){
+  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
+  document.getElementById('editorWindow').contentWindow.focus()
+}
+
+ +

Risorse

+ + diff --git a/files/it/web/guide/index.html b/files/it/web/guide/index.html new file mode 100644 index 0000000000..db55293bd5 --- /dev/null +++ b/files/it/web/guide/index.html @@ -0,0 +1,39 @@ +--- +title: Guida Web developer +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +

Questi articoli forniscono informazioni utili per l'utilizzo di specifiche tecnologie e API.

+ +
+
+ +
+
+ +

Guarda anche

+ + diff --git a/files/it/web/guide/woff/index.html b/files/it/web/guide/woff/index.html new file mode 100644 index 0000000000..c3fb596778 --- /dev/null +++ b/files/it/web/guide/woff/index.html @@ -0,0 +1,99 @@ +--- +title: Il Formato Open di Font per il Web (WOFF) +slug: Web/Guide/WOFF +translation_of: Web/Guide/WOFF +--- +

WOFF (Web Open Font Format, Formato Font per il Web Open) e un nuovo formato di font per il web sviluppato da Mozilla in collaborazione con Type Supply, LettError, e altre organizzazioni. Usa una versione compressa della stessa struttura sfnt basata su tabelle di TrueType, OpenType e Open Font Format, ma aggiunge alcuni metadati e strutture dati ad uso privato, compresi alcuni campi predefiniti che permettono di fornire informazioni di licenza se lo si desidera.

+ +

Usare WOFF comporta principalmente tre benefici:

+ +
    +
  1. I dati del font sono compressi, quindi i siti che usano WOFF usano meno banda e si caricheranno più in fretta rispetto a quelli che usano equivalenti non compressi come TrueType o OpenType.
    2. +
  2. Molti produttori di font che non intendono dare in licenza i propri font in formato TrueType o OpenType per l'uso nel web, daranno in licenza i font in formato WOFF. Questo migliora la disponibilità di font ai designer di siti web.
    3. +
  3. I produttori di browser (sia proprietari che liberi) apprezzano il formato WOFF, che ha quindi il potenziale per diventare un formato per i font realmente universale e interoperabile, a differenza degli attuali formati per i font.
    4. +
+ +

Usare WOFF

+ +

Puoi usare la proprietà CSS {{cssxref("@font-face")}} per utilizzare i font WOFF per il testo nei contenuti web. Funziona esattamente come i formati OpenType e TrueType, eccetto per il fatto che molto probabilmente renderà lo scaricamento molto più efficiente grazie alla compressione.

+ +

Strumenti per lavorare con i font WOFF

+ +

Sono disponibili Strumenti per lavorare con i font WOFF. sfnt2woff e woff2sfnt convertono da WOFF a OpenType e viceversa.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('WOFF1.0', '', '')}}{{Spec2('WOFF1.0')}}Specifica iniziale.
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base6.0{{CompatGeckoDesktop("1.9.1")}}9.011.105.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/html/attributi/index.html b/files/it/web/html/attributi/index.html new file mode 100644 index 0000000000..7bb21c96a2 --- /dev/null +++ b/files/it/web/html/attributi/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/canvas/drawing_graphics_with_canvas/index.html b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html new file mode 100644 index 0000000000..217e9191d7 --- /dev/null +++ b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html @@ -0,0 +1,161 @@ +--- +title: Drawing graphics with canvas +slug: Web/HTML/Canvas/Drawing_graphics_with_canvas +translation_of: Web/API/Canvas_API/Tutorial +--- +
+

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 new file mode 100644 index 0000000000..dcded63973 --- /dev/null +++ b/files/it/web/html/canvas/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/html/element/a/index.html b/files/it/web/html/element/a/index.html new file mode 100644 index 0000000000..c47883b767 --- /dev/null +++ b/files/it/web/html/element/a/index.html @@ -0,0 +1,457 @@ +--- +title: +slug: Web/HTML/Element/a +tags: + - Ancora + - Collegamento + - Elemento + - HTML + - Link + - Web +translation_of: Web/HTML/Element/a +--- +

Sommario

+ +

L' elemento HTML <a> (o l' elemento Ancora HTML) definisce un collegamento ipertestuale, il nome dell' obbiettivo di destinazione per un collegamento ipertestuale, o entrambi.

+ + + +

Attributi

+ +

Questo elemento include gli attributi globali.

+ +
+
{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}
+
Questi attributi definiscono la codifica dei caratteri della risorsa linkata. Il valore è una lista di caratteri delimitata da spazi- e/o virgole - fissa come definito in RFC 2045. Il valore di default è ISO-8859-1.
+
+
+

Nota: Questo attributo è obsoleto in HTML5 e non dovrebbe essere usato. Per ottenere un effetto simile, usare l'header HTTP Content-Type sulla risorsa linkata.

+
+
+
{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Per l' uso con le forme degli oggetti, questo attibuto usa una lista di numeri separata da virgole per definire le coordinate dell'oggetto nella pagina. Il valore di questo attributo dipende dal valore dell'attributo {{htmlattrxref("shape", "a")}}.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+

Valore dell'attributo {{htmlattrxref("shape", "a")}}

+ 		Formato delle coordinateSignificato
circle +

x,y,z 

+ 		+
    +
  • x e y indicano le coordinate (in pixel) del centro della circonferenza;
    • +
  • z indica la lunghezza del raggio.
    • +
+
rectx,y,w,h +
    +
  • x e y indicano le coordinate dell'angolo superiore sinistro del rettangolo;
    • +
  • w e h indicano rispettivamente la larghezza e l'altezza del rettangolo.
    • +
+
polygonx1,y1,x2,y2,... +
    +
  • Ogni coppia di coordinate x,y definisce un punto del poligono; due punti consecutivi (o l'ultimo e il primo) vengono uniti da una linea.
    • +
+
+
+
{{htmlattrdef("datafld")}} {{Non-standard_inline}}
+
Questo attributo specifica il nome della colonna di tale oggetto origine dati che fornisce i dati associati.
+
+
+

Nota:

+ + +
+
+
{{htmlattrdef("datasrc")}} {{Non-standard_inline}}
+
Questo attributo indica l'ID oggetto origine dei dati che fornisce i dati e che è legato a questo elemento.
+
+
+

Nota:

+ + +
+
+
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
+
Questo attributo, se presente, indica che l' autore intende che il collegamento ipertestuale debba essere usato per scaricare una risorsa. Se l' attributo ha un valore, il browser dovrebbe interpretarlo come il nome del file da salvare in un file system locale. Non ci sono restrizioni sui valori consentiti, ma dovresti considerare che la maggior parte dei file system hanno delle limitazioni per quanto riguarda quale punteggiatura è supportata nei nomi del file, ed i browser sono predisposti ad aggiustare il nome del file di conseguenza.
+
+
+

Nota:

+ +
    +
  • Può essere usato con URL blob: e data:, così da poter scaricare contenuti generati usando JavaScript (ad esempio un'immagine creata in un applicazione di disegno).
    • +
  • Se è presente l'header HTTP Content-Disposition e propone un diverso nome per il file, l'header ha la priorità su questo attributo.
    • +
  • Se l'header HTTP Content-Disposition ha valore inline, in Firefox l'header ha la precedenza, mentre in Chrome l'attributo download.
    • +
  • In Firefox 20 questo attributo è rispettato solo per link a risorse provenienti dalla stessa origine.
    • +
+
+
+
{{htmlattrdef("href")}}
+
Questo è l'unico attributo richiesto per ancore che definiscono un collegamento ipertestuale. Esso indica il link obbiettivo, sia esso un URL o un frammento di URL. Un frammento di URL è un nome (un {{htmlattrxref("id")}}) preceduto da un cancelletto (#), che specifica la posizione dell'obbiettivo nel documento corrente. Gli URL non sono limitati ai documenti web basati sul protocollo HTTP: possono essere usati con altri protocolli supportati dal browser, come file, ftp, e mailto.
+
+
+

Nota: Puoi usare il frammento apposito "top" per creare un collegamento per tornare in cima alla pagina; ad esempio <a href="#top">Torna all'inizio</a>. Questo comportamento è specificato in HTML5.

+
+
+
{{htmlattrdef("hreflang")}}
+
Questo attributo indica la lingua della risorsa linkata. È puramente informativo. I valori permessi sono determinati dallo standard BCP47 per l'HTML5 e dallo standard RFC1766 per l'HTML4. Usa questo attributo solo se è presente anche l' attributo {{htmlattrxref("href", "a")}}.
+
{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}
+
Questo attributo specifica in quali dispositivi utilizzare il link. Il suo valore deve essere una media query. Questo attributo è utile principalmente quando vi è un collegamento ad un foglio di stile esterno che consente allo user agent di scegliere il più adatto per il dispositivo in uso.
+
+
+

Nota:

+ +
    +
  • In HTML 4 sono accettate solo descrizioni letterali (separate da uno spazio) del supporto, vale a dire media types and groups: print, screen, aural, braille, ... HTML 5 estende questo ad ogni tipo di media query, ossia un'estensione dei valori consentiti in HTML 4.
    • +
  • I browser che non supportano le Media Queries CSS3 potrebbero non riconoscere il collegamento adeguato; non dimenticare di impostare collegamenti alternativi, usando l'insieme ristretto di media queries definite in HTML 4.
    • +
+
+
+
{{htmlattrdef("methods")}} {{Non-standard_inline}}
+
Il valore di questo attributo fornisce informazioni sulle funzioni che possono essere eseguite su un oggetto. I valori generalmente sono dati dal protocollo HTTP quando viene utilizzato, ma potrebbe (per ragioni simili a quelle per l'attributo title) essere utile includere informazioni consultive in anticipo nel collegamento. Ad esempio, il browser potrebbe scegliere un rendering diverso di un collegamento in funzione dei metodi specificati, qualcosa che è ricercabile potrebbe avere un'icona diversa, o un link esterno potrebbe essere intrerpretato con l'indicazione di lasciare il sito corrente. Questo attributo non è ben compreso o supportato neanche dal browser che lo ha definito, Internet Explorer 4. Methods Property (MSDN)
+
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Questo attributo è richiesto in un ancora che definisce una destinazione all'interno di una pagina. Il valore per il name è simile al valore per l' attributo id e deve essere un identificatore alfanumerico e univoco nel documento. Secondo la specifica specifiche HTML 4.01, l' id e il name possono entrambi essere applicati all'elemento <a>, finchè hanno lo stesso valore.
+
+
+

Nota: Questo attributo è obsoleto in HTML5, usare l' attributo globale id.

+
+
+
{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}
+
Se questo attributo è presente, viene mandata una notifica all'URL specificato quando l'utente segue il link.
+
{{htmlattrdef("rel")}}
+
Questo attributo specifica la relazione tra l'oggetto di destinazione e il collegamento stesso. Il suo valore è una lista di tipi di link separati da spazi. La relazione predefinita è void, ossia nessuna.
+
Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.
+
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Questo attributo specifica un collegamento inverso, la relazione inversa dell' attributo rel. È utile per indicare l'origine un oggetto, ad esempio il suo autore.
+
+ +
+
{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Questo attributo è utilizzato per definire una regione selezionabile per un collegamento ipertestuale associata con una figura per creare una mappa immagine. I valori per l' attributo sono circle (cerchio), default (l'intera area a disposizione) polygon (poligono) e rect (rettangolo). Le coordinate della mappa sono definite dall'attributo {{htmlattrxref("coords", "a")}}.
+
{{htmlattrdef("target")}}
+
Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (browsing context) (per esempio un'ettichetta, una finestra o un frame in linea). Le seguenti parole chiave hanno uno speciale significato: +
    +
  • _self: Carica il documento nello stesso frame. Questo è il valore predefinito.
    • +
  • _blank: Carica il documento in una nuova finestra.
    • +
  • _parent: Carica il documento nel frameset genitore del frame corrente. Se non c'è il genitore, questa opzione si comporta allo stesso modo di _self.
    • +
  • _top: Carica il documento dentro la finestra originale completa (la scheda del browser), cancellando gli altri frame. Se non c'è il genitore, questa opzione si comporta allo stesso modo di _self.
    • +
+ Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.
+
{{htmlattrdef("type")}}
+
Questo attributo specifica il tipo della risorsa linkata, sotto forma di tipo MIME. Solitamente è fornito solo come informazione secondaria, ma in futuro i browser potrebbero aggiungere un'icona che identifichi i tipi di file (ad esempio un piccolo altoparlante quando il tipo è audio/wav). Per una lista completa dei tipi MIME supportati, vedere http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. +
 
+ +
Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.
+
+
{{htmlattrdef("urn")}} {{Non-standard_inline}}
+
Questo attributo presumibilmente supportato da Microsoft riferisce un nome uniforme di risorsa (uniform resource name (URN)) con il collegamento. Mentre era basato su lavori standard anni addietro, il significato di URN non è più ben definito, quindi questo attributo è insignificante. urn Property (MSDN)
+
+ +

Esempi

+ +

Collegamento ad un file esterno

+ +
<a href="http://www.mozilla.com/">Link esterno</a>
+
+ +

Risultato

+ +

Link esterno

+ +

Creare un'immagine cliccabile

+ +

Questo link aprirà la pagina https://developer.mozilla.org/ in una nuova finestra, per via dell'attributo {{htmlattrxref("target", "a", "target=\"_blank\"")}}.

+ +
<a href="https://developer.mozilla.org/" target="_blank">
+  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN">
+</a>
+
+ +

Risultato

+ +

MDN

+ + + +

Spesso si creano collegamenti o pulsanti che aprono il programma di email dell'utente. Per questo si usano i link mailto.

+ +

Per altri dettagli riguardanti  lo schema URL mailto, come ad esempio includere l'oggetto, del testo o altro contenuto, vedere i link Email o lo standard RFC 6068.

+ +
<a href="mailto:nowhere@mozilla.org">Invia un'email a nowhere</a>
+ +

Risultato

+ +

Invia un'email a nowhere

+ +

Usare l'attributo download per scaricare un <canvas> come PNG.

+ +

Se si vuole permettere all'utente di scaricare un elemento {{HTMLElement("canvas")}} sotto forma di immagine, si può creare un link con l'attributo {{htmlattrxref("download", "a")}} e il contenuto del <canvas> come URL del file:

+ +
<!-- HTML -->
+<canvas id="my-canvas"></canvas>
+<a id="download-image" download="disegno.png">Scarica l'immagine</a>
+
+ +
// JavaScript
+var link = document.querySelector("#download-image");
+var canvas = document.querySelector("#my-canvas");
+link.addEventListener("click"; function () {
+  link.href = canvas.toDataURL();
+}, false);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-a-element.html#the-a-element', '<a>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{htmlattrxref("download","a")}}14{{CompatGeckoDesktop("20.0")}}{{CompatNo}}15{{CompatNo}}
{{htmlattrxref("ping", "a")}}{{CompatVersionUnknown}}Disabilitato di default{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{htmlattrxref("download","a")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("20.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
{{htmlattrxref("ping", "a")}} Disabilitato di default   
+
+ +

 

+ +

Nota riguardo a Gecko

+ + + +

Click e focus

+ +

Un link ottiene il focus quando vi si clicca sopra in vari browser (come comportamento predefinito).

+ +

Cliccando su un {{HTMLElement("a")}} gli si assegna il focus?

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browser DesktopWindows 8.1OS X 10.9
Firefox 30.0SìSì
Chrome ≥39 (Chromium bug 388666)SìSì
Safari 7.0.5N.a.Solo quando ha l'attributo {{htmlattrxref("tabindex")}}
Internet Explorer 11SìN.a.
Opera 12SìSì
+ +

Toccando un {{HTMLElement("a")}} gli si assegna il focus?

+ + + + + + + + + + + + + + + + + + + + + +
Browser MobiliiOS 7.1.2Android 4.4.4
Safari MobileSolo quando ha l'attributo {{htmlattrxref("tabindex")}}N.a.
Chrome 35???Solo quando ha l'attributo {{htmlattrxref("tabindex")}}
+ +

Note

+ +

Le seguenti sono chiavi di associazione riservate per due dei maggiori browser e non devono essere usate come valori di accesso: a, c, e, f, g, h, v, freccia sinistra e freccia destra.

+ +

L' HTML 3.2 definisce solo gli attributi name, href, rel, rev, e title.

+ +

L' attributo target non è definito nei browser che non supportano i frame, come Netscape 1. Inoltre, target non è consentito se si utilizza la variante rigorosa (strict) dell'XHTML, ma è limitata al frameset o alla forma "di transizione" (transitional).

+ +

Raccomandazioni JavaScript

+ +

Succede spesso che un tag {{HTMLElement("a")}} sia usato con l'evento onclick. Per evitare che la pagina venga ricaricata, l'attributo {{htmlattrxref("href", "a")}} viene spesso impostato a "#" o a "javascript:void(0)". Entrambi questi valori possono portare ad errori inaspettati quando si copiano e aprono link in una nuova scheda e/o finestra. Bisogna essere consapevoli di questo per ragioni di usabilità, e quando gli utenti usano il tag di ancoraggio, bisogna cercare di prevenire i comportamenti di default.

+ +

Vedi anche

+ + + +
{{HTMLRef}}
diff --git a/files/it/web/html/element/abbr/index.html b/files/it/web/html/element/abbr/index.html new file mode 100644 index 0000000000..5ab07d12b7 --- /dev/null +++ b/files/it/web/html/element/abbr/index.html @@ -0,0 +1,142 @@ +--- +title: +slug: Web/HTML/Element/abbr +translation_of: Web/HTML/Element/abbr +--- +

Sommario

+ +

L' elemento HTML <abbr> (o elemento HTML di abbreviazione) rappresenta un' abbreviazione e opzionalmente fornisce una descrizione completa. Se presente, l' attributo title deve contenere la descrizione completa e nient' altro.

+ +
+

Note d' uso: Quando presente, il numero grammaticale del testo presente nell' attributo title deve corrispondere a quello contentuto nell' elemento <abbr>. Questo è il caso di lingue con più di due numeri grammaticali (ad esempio, l' arabo non ha solo singolare e plurale, ma anche duale).

+
+ + + +

Attributi

+ +

Questo elemento include solo gli attributi globali.

+ +

Si usa l' attributo title per definire la descrizione completa dell' abbreviazione. Molti user agent lo presentano come un suggerimento.

+ +

Stile di default

+ +

Lo scopo di questo elemento è puramente per convenienza dell'autore e tutti i browser lo visualizzano in linea (display: inline) di default, sebbene lo stile di defaul vari da un browser all' altro:

+ +
    +
  • Alcuni browser, come IE, applicano uno stile uguale all' elemento {{HTMLElement("span")}}.
    • +
  • Opera, Firefox e altri aggiungono una sottolieneatura punteggiata al contenuto dell'elemento.
    • +
  • Pochi browser non aggiungono solo una sottolineatura punteggiata, ma lo mettono anche in "maiuscoletto"; per evitare questo stile, è sufficiente aggiungere l'istruzione font-variant: none nel CSS, il che prevenirà questo comportamento.
    • +
+ +

Viene quindi fortemente raccomandato agli autori di siti web di on affidarsi allo stile di default. Ricorda che questo elemento non viene supportato da IE in tutte le versioni precedenti a IE7. Per queste versioni di IE che non permettono l'uso di stili per elementi sconosciuti, lo script seguente si rende necessario per ovviare a questo problema:

+ +
<!--[if lte IE 6]>
+  <script>
+    document.createElement("abbr");
+  </script>
+<![endif]-->
+ +

Esempio

+ +
<p>Tony Blair is the prime minister of the <abbr title="United Kingdom">UK</abbr></p>
+
+ +

Risultato

+ +

Image:Abbr.gif

+ +

Tony Blair is the prime minister of the UK

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-abbr-element.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base2.0{{CompatGeckoDesktop(1.0)}}7.01.3{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ +
    +
  • Altri elementi riguardanti la semantica del testo: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.
    • +
+ +{{HTMLRef}} diff --git a/files/it/web/html/element/acronym/index.html b/files/it/web/html/element/acronym/index.html new file mode 100644 index 0000000000..57180f14e3 --- /dev/null +++ b/files/it/web/html/element/acronym/index.html @@ -0,0 +1,118 @@ +--- +title: +slug: Web/HTML/Element/acronym +translation_of: Web/HTML/Element/acronym +--- +
{{obsolete_header}}
+ +

Sommario

+ +

L'elemento HTML <acronym> permette all'autore di indicare che una sequenza di caratteri è un acronimo o un'abbreviazione.

+ +
+

Nota: Questo elemento è stato rimosso in HTML5. Gli sviluppatori dovrebbero usare l'elemento {{HTMLElement("abbr")}}.

+
+ +

Attributi

+ +

Questo elemento supporta solo gli attributi globali, comuni a tutti gli elementi.

+ +

Interfaccia DOM

+ +

Questo elemento implementa l'interfaccia {{domxref("HTMLElement")}}.

+ +
Nota: Fino a Geko 1.9.2, Firefox implementava l'interfaccia {{domxref("HTMLSpanElement")}}.
+ +

Esempio

+ +
<p>Il <acronym title="World Wide Web">WWW</acronym> è solo uno dei componenti di Internet.</p>
+
+ +

Aspetto predefinito

+ +

Dato che questo tag serve solo per la comodità dell'autore, il suo aspetto di default cambia in ogni browser:

+ +
    +
  • In alcuni browser, come Internet Explorer, questo elemento appare esattamente come uno {{HTMLElement("span")}}.
    • +
  • Opera, Firefox e alcuni altri browser aggiungono una linea di puntini sotto il contenuto dell'elemento.
    • +
  • Alcuni browser non solo aggiungono una lina di puntini, ma ne mostrano anche il contenuto in maiuscolo. Per evitare questo comportamento, si può usare la proprietà CSS {{cssxref("font-variant")}}: none.
    • +
+ +

Qundi è particolarmente consigliato agli sviluppatori di non affidarsi allo stile predefinito.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto di base{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

Vedi anche

+ +
    +
  • L'elemento HTML {{HTMLElement("abbr")}}.
    • +
+ +
{{HTMLRef}}
diff --git a/files/it/web/html/element/address/index.html b/files/it/web/html/element/address/index.html new file mode 100644 index 0000000000..efc68172a4 --- /dev/null +++ b/files/it/web/html/element/address/index.html @@ -0,0 +1,120 @@ +--- +title:
+slug: Web/HTML/Element/address +translation_of: Web/HTML/Element/address +--- +

Sommario

+

L'elemento HTML <address> (indirizzo) può essere usato dagli autori per fornire informazioni di contatto per il più vicino {{HTMLElement("article")}} oppure per il progenitore {{HTMLElement("body")}}; in quest'ultimo caso, viene applicato all'intero documento.

+
+

Note d'uso:

+
    +
  • Per rappresentare un indirizzo arbitrario, che non sia relativo alle informazioni di contatto, si usa l'elemento {{HTMLElement("p")}}  anzichè l'elemento <address>.
    • +
  • Questo elemento non deve contenere ulteriori informazioni oltre a quelle di contatto, come la data di pubblicazione (che appartiene all'elemento {{HTMLElement("time")}}).
    • +
  • Tipicamente un elemento <address> può essere eventualmente posto dentro l'elemento {{HTMLElement("footer")}} della sezione corrente.
    • +
+
+
    +
  • Aree tematiche Contenuti del flusso, contenuto tangibile.
    • +
  • Contenuto consentito Contenuti del flusso, ma senza elementi <address> nidificati, no contenuti di intestazione ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no contenuti di sezione ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), e no negli elementi {{HTMLElement("header")}} o {{HTMLElement("footer")}}.
    • +
  • Omissione TagNessuno, sia il tag di apertura, sia quello di chiusura sono obbligatori.
    • +
  • Elementi padre consentiti Qualsiasi elemento che accetta contenuti del flusso.
    • +
  • Interfaccia DOM {{domxref("HTMLElement")}} Prima di Gecko 2.0 (Firefox 4), Gecko implementava questo elemento usanto l'interfaccia {{domxref("HTMLSpanElement")}}
    • +
+

Attributi

+

Questo elemento include solo attributi globali.

+

Esempio

+
  <address>
+    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
+    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
+    You may also want to visit us:<br>
+    Mozilla Foundation<br>
+    1981 Landings Drive<br>
+    Building K<br>
+    Mountain View, CA 94043-0801<br>
+    USA
+  </address>
+
+

Il codice HTML sopra visualizzerà:

+

Image:HTML-address.png

+

Sebbene l'elemento indirizzo visualizzi il testo con gli stessi stili di default degli elementi {{HTMLElement("i")}} o {{HTMLElement("em")}}, esso risulta più appropriato da utilizzare quando si tratta di informazioni di contatto per come convoglia informazioni semantiche addizionali.

+

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-address-element.html#the-address-element', '<address>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}{{Spec2('HTML4.01')}} 
+

Compatilità dei Browser

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}1.05.121.0
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.7")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+

Vedi anche

+
    +
  • Altri elementi relativi alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};
    • +
  • Sections and outlines of an HTML5 document.
    • +
+

{{HTMLRef}}

diff --git a/files/it/web/html/element/applet/index.html b/files/it/web/html/element/applet/index.html new file mode 100644 index 0000000000..aa16b21fa8 --- /dev/null +++ b/files/it/web/html/element/applet/index.html @@ -0,0 +1,120 @@ +--- +title: +slug: Web/HTML/Element/applet +translation_of: Web/HTML/Element/applet +--- +
{{obsolete_header}}
+ +

Sommario

+ +

L'elemento HTML <applet> serve a includere un'applet Java.

+ +
+

Nota: Questo elemento è stato rimosso in HTML5. Gli sviluppatori dovrebbero usare l'elemento più generico {{HTMLElement("object")}}.

+
+ +

Attributi

+ +
+
{{htmlattrdef("align")}}
+
Questo attributo specifica la posizione dell'applet nella pagina relativamente al contenuto intorno ad essa. La specifica HTML 4.01 definisce i valori bottom, left, middle, right e top; Microsoft e Netscape supportano anche i valori absbottom, absmiddle, baseline, center e texttop.
+
{{htmlattrdef("alt")}}
+
Questo attributo definisce un testo da mostrare nei browser che non supportano Java. Ricordare che anche il contenuto dell'elemento <applet> potrebbe essere mostrato come testo alternativo.
+
{{htmlattrdef("archive")}}
+
Questo attributo è un riferimento a una versione compressa dell'applet, che potrebbe aiutare a ridurre il tempo necessario al download.
+
{{htmlattrdef("code")}}
+
Questo attributo specifica l'URL del file principale dell'applet da eseguire. I file delle Applet devono avere l'estensione .class. L'URL specificato può essere relativo all'attributo codebase.
+
{{htmlattrdef("codebase")}}
+
Questo attributo l'URL (assoluto o relativo) della cartella che contiene i file .class specificati nell'attributo code.
+
{{htmlattrdef("datafld")}}
+
Questo attributo, supportato a partire dalla versione 4 di Internet Explorer, specifica il nome della colonna dell'oggetto di origine che fornisce i dati associati. Questo attributo potrebbe essere usato per specificare i vari elementi {{HTMLElement("param")}} passati all'applet Java.
+
{{htmlattrdef("datasrc")}}
+
Come datafld, questo attributo è usato per associare i dati in Internet Explorer 4. Indica l'id dell'oggetto di origine che fornisce i dati associati agli elementi {{HTMLElement("param")}} associati all'applet.
+
{{htmlattrdef("height")}}
+
Questo attributo specifica l'altezza dell'applet, in pixel.
+
{{htmlattrdef("hspace")}}
+
Questo attributo specifica quanto spazio, in pixel, lasciare ai lati dell'applet.
+
{{htmlattrdef("mayscript")}}
+
In Netscape, questo attributo permette l'accesso all'applet da parte degli scipt inclusi nella pagina.
+
{{htmlattrdef("name")}}
+
Questo attributo assegna un nome all'applet, cos' che possa essere identificata da altri script.
+
{{htmlattrdef("object")}}
+
Questo attributo specifica l'URL della rappresentazione serializzata dell'applet.
+
{{htmlattrdef("src")}}
+
Questo attributo, definito a partire dalla versione 4 di Internet Explorer, specifica l'URL di un file associato all'applet. Il suo significato e il suo utilizzo è poco chiaro e non è parte di nessuno standard HTML.
+
{{htmlattrdef("vspace")}}
+
+
Questo attributo specifica quanto spazio, in pixel, lasciare sopra e sotto l'applet.
+
+
{{htmlattrdef("width")}}
+
Questo attributo specifica la larghezza dell'applet, in pixel.
+
+ +

Esempio

+ +
<applet code="gioco.class" align="left" archive="gioco.zip" height="250" width="350">
+  <param name="difficoltà" value="facile">
+  <b>Per usare questo gioco è necessario Java.</b>
+</applet>
+
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Supporto di base{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Note

+ +
    +
  • La specifica del W3C scoraggia l'uso del tag <applet> in favore dell'elemento {{HTMLElement("object")}}.
    • +
  • Questo elemento è deprecato nella versione strict dell'HTML 4.01 e obsoleto in HTML 5.
    • +
+ +
{{HTMLRef}}
diff --git a/files/it/web/html/element/area/index.html b/files/it/web/html/element/area/index.html new file mode 100644 index 0000000000..04e90cebd6 --- /dev/null +++ b/files/it/web/html/element/area/index.html @@ -0,0 +1,191 @@ +--- +title: +slug: Web/HTML/Element/area +translation_of: Web/HTML/Element/area +--- +

Sommario

+ +

L'elemento HTML <area> definisce una regione accessibile su di un immagine, e opzionalmente viene associata con un collegamento ipertestuale. Questo elemento è usato solo con l'elemento {{HTMLElement("map")}}.

+ +
    +
  • Aree tematiche Contenuti di flusso, contenuto delle espressioni.
    • +
  • Contenuto consentito Vuoto; è un elemento nullo.
    • +
  • Omissione Tag Nessuna, sia il tag di apertura, sia quello di chiusura sono obbligatori.
    • +
  • Elementi padre consentiti Qualsiasi elemento che accetta contenuto delle espressioni. L'elemento <area> deve avere un antenato {{HTMLElement("map")}}, ma che non necessita essere un genitore diretto.
    • +
  • Interfaccia DOM {{domxref("HTMLAreaElement")}}
    • +
+ +

Attributi

+ +

Questo elemento include gli attributi globali.

+ +
+
{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Specifica un acceleratore per la navigazione da tastiera per l'elemento. Premendo ALT, o una chiave simile, e contemporaneamente uno specifico carattere, si seleziona il comportamento correlato con quella specifica sequenza digitata. Chi disegna la pagina deve evitare sequenze riservate al browser. Questo attributo è globale a partire dalle specifiche HTML5.
+
+ +
+
{{htmlattrdef("alt")}}
+
Una stringa di testo alternativa da visualizzare sui browser che non mostrano le immagini. Il testo dovrebbe essere tale da garantire all'utente lo stesso tipo di scelte che avrebbe visualizzando l'immagine senza il testo alternativo. In HTML4, questo attributo è necessario, ma potrebbe essere anche una stringa vuota (""). In HTML5, questo attributo è richiesto solo se presente l'attributo href.
+
+ +
+
{{htmlattrdef("coords")}}
+
Una serie di valori che specificano le coordinate di una regione selezionabile. Il numero ed il significato dei valori dipendono dal valore specificato per l'attributo shape. Per un rect o forma rettangolare, il valore di coords consiste in due coppie x,y: sinistra, su, destra e giù. Per un circle o forma circolare, i valori sono x,y,r dove x,y è la coppia di coordinate che specifica il centro del cerchio e r è il valore del raggio. Per un poly o forma poligonale, il valore è un insieme di coppie x,y per ogni punto nel poligono: x1,y1,x2,y2,x3,y3, ecc... In HTML4, i valori sono il numero di pixels o una percentuale, se il numero è seguito dal relativo simbolo (%); in HTML5, i valori sono il numero dei pixel CSS.
+
+ +
+
{{htmlattrdef("href")}}
+
L'obiettivo del collegamento ipertestuale dell'area. Il suo valore è un URL valido. In HTML4, sia questo che l'attibuto nohref devono essere presenti nell'elemento. In HTML5, questo attributo può essere omesso; se così fosse, l'elemento area non rappresenta un collegamento ipertestuale.
+
+ +
+
{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}
+
Indica la lingua della risorsa linkata. I valori consentiti sono determinati dal BCP47. Questo attributo si può utilizzare se contestualmente presente l'attributo href.
+
+ +
+
{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Definisce un nome per l'area selezionabile così da poterci eseguire uno script da parte dei vecchi browser.
+
+ +
+
{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}
+
Un suggerimento in merito al mezzo di comunicazione per il quale la risorsa è stata disegnata, ad esempio print (stampa) o screen. (schermo). Se omesso, di default viene settato su all (tutti). Utilizzare questo attributo solo se contestualmente presente href.
+
+ +
+
{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Indica che non esiste un collegamento ipertestuale in associazione all'area. O questo attributo o l'attributo href deve essere presente nell'elemento. +
+

Note d'uso: Questo attributo è obsoleto in HTML5, in quanto è sufficiente omettere l'attributo href.

+
+
+
+ +
+
{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}
+
Per le ancore che contengono l' attributo href, questo attributo specifica la relazione tra l' oggetto di destinazione e l' oggetto del collegamento. Il valore è una lista di valori di relazione separata da spazi. I valori e la loro semantica saranno registrati da qualche autorità che potrebbe avere senso per l' autore del documento. La relazione di default, se nessun altra è stata impostata, è void (vuoto/nullo). Usare questo attributo solo se presente l' attributo href.
+
{{htmlattrdef("shape")}}
+
La forma della regione selezionabile associata. Le specifiche per l'HTML 5 e l'HTML 4 definiscono i valori rect, che definisce una regione rettangolare; circle, che definisce una regione circolare; poly, che definisce un generico poligono; e default, che indica l'intera regione al di là della forma definita. Molti browser, in particolare Internet Explorer 4 e superiori, supportano circ, polygon, e rectangle come valori validi per shape; questi valori sono {{Non-standard_inline}}.
+
+ +
+
{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Un valore numerico che specifica la posizione nella tabulazione ordinata definita nel browser. Questo è un attributo globale in HTML5.
+
+ +
+
{{htmlattrdef("target")}}
+
Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (browsing context )(per esempio, ettichetta, finestra o frame in linea). Le seguenti parole chiave hanno uno speciale significato: +
    +
  • _self: Carica la risposta nella medesima cornice HTML4 (o contesto di navigazione HTML5) come quella attuale. Questo valore è impostato di default se l' attributo non è specificato.
    • +
  • _blank: Carica la risposta in una nuova finestra senza nome nella finestra HTML4 o un nuovo contesto di navigazione HTML5.
    • +
  • _parent: Carica la risposta nel frameset genitore del frame corrente in HTML4 oppure il contesto di navigazione genitore del corrente in HTML5. Se non ci fosse il genitore, questa opzione si comporta allo stesso modo di _self.
    • +
  • _top: In HTML4: Carica la risposta dentro la finestra originale completa, cancellando gli altri frame. In HTML5: Carica la risposta nel primo livello del contesto di navigazione (cioè, il contesto di navigazione che è un antenato di quello corrente, e non ha padre). Se non ha padre, il comportamento di questa opzione coincide con _self.
    • +
+ Usa questo attributo solo se presente l' attributo href.
+
{{htmlattrdef("type")}}
+
Questo attributo specifica il tipo di supporto, sotto forma di un tipo MIME per la destinazione del collegamento. In generale, questo è fornito esclusivamente come informazione consultiva; tuttavia, in futuro un browser potrebbe aggiungere una picco icona per i tipi multimediali. Per esempio, un browser potrebbe aggiungere una piccola icona con un microfono queando il tipo è settato come audio/wav. Per una lista completa dei tipi MIME riconosciuti, consulta http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Usa questo attributo solo se presente l' attributo href.
+
+ +

Esempio

+ +
<map name="primary">
+  <area shape="circle" coords="200,250,25" href="another.htm" />
+  <area shape="default" nohref />
+</map>
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-area-element.html#the-area-element', '<area>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Note

+ +
    +
  • Nelle specifiche HTML 3.2, 4.0, e 5, il tag di chiusura </area> è proibito.
    • +
  • Le specifiche XHTML 1.0 richiedono una barra finale: <area />.
    • +
  • Gli attributi id, class, e style hanno il medesimo significato attribuito nelle specifiche HTML 4, ma vengono definiti solo da Netscape e Microsoft.
    • +
  • I browser Netscape di livello 1 non interpretano l'attributo target quando riferito ad un frame.
    • +
  • HTML 3.2 definisce solo alt, coords, href, nohref, e shape.
    • +
+ +

{{HTMLRef}}

diff --git a/files/it/web/html/element/article/index.html b/files/it/web/html/element/article/index.html new file mode 100644 index 0000000000..cdf8b222dc --- /dev/null +++ b/files/it/web/html/element/article/index.html @@ -0,0 +1,119 @@ +--- +title:
+slug: Web/HTML/Element/article +translation_of: Web/HTML/Element/article +--- +

L'elemento HTML <article> rappresenta una composizione autocontenuta in un documento, una pagina, un'applicazione, o un sito, intesa per essere distribuita indipendentemente o riutilizzata, per esempio, nell'aggregazione. Esempi sono un articolo su un forum, un articolo di rivista o di giornale, un articolo su un blog, un commento inserito da un utente, un widget o un gadget interattivi, o qualsiasi altro contenuto indipendente. Ogni <article> dovrebbe essere identificato, generalmente, includendo un'intestazione (elementi h1-h6) come figlia dell'elemento <article>.

+ +
+

Note d'uso:

+ +
    +
  • Quando un elemento <article> è annidato, l'elemento più interno rappresenta un articolo collegato all'elemento più esterno. Per esempio, i commenti di un articolo su un blog possono essere elementi <article> annidati nell'elemento <article> che rappresenta il post sul blog.
    • +
  • Le informazioni sull'autore di un elemento <article> possono essere fornite attraverso l'elemento {{HTMLElement("address")}}, ma non si applicano agli elementi<article> annidati.
    • +
  • La data e l'ora di pubblicazione di un elemento <article> possono essere descritte usando l'attributo {{htmlattrxref("pubdate", "time")}} di un elemento {{HTMLElement("time")}}.
    • +
+
+ +
    +
  • Categorie di contenuti flow content, sectioning content, palpable content.
    • +
  • Contenuti consentitiflow content.
    • +
  • Omissione del tag {{no_tag_omission}}
    • +
  • Elementi genitore permessiQualsiasi elemento che accetti contenuto di flusso. Notare che un elemento <article> non deve essere un discendente di un elemento {{HTMLElement("address")}}.
    • +
  • Interfaccia DOM {{domxref("HTMLElement")}}
    • +
+ +

Attributi

+ +

Questo elemento include solamente gli attributi globali.

+ +

Esempio

+ +
<article>
+  <h4>Un articolo veramente fantastico</h4>
+  <p>Un sacco di testo fantastico.</p>
+</article>
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base5{{CompatGeckoDesktop("2.0")}}9.011.104.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base2.2{{CompatGeckoMobile("2.0")}}9.011.05.0 (iOS 4.2)
+
+ +

Vedi anche

+ +
    +
  • Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
    • +
  • Sezioni e indici nei documenti HTML5.
    • +
+ +

{{ HTMLRef }}

diff --git a/files/it/web/html/element/aside/index.html b/files/it/web/html/element/aside/index.html new file mode 100644 index 0000000000..0aa21273e5 --- /dev/null +++ b/files/it/web/html/element/aside/index.html @@ -0,0 +1,134 @@ +--- +title: